What are our goals?
• Setup BigTest in an existing project
• Introduce & explain interactors
• Build our component interactors
• Gain control over the network
• Write BigTests!
Slide 63
Slide 63 text
TodoMVC starter app
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Use parcel to build
Slide 66
Slide 66 text
$ yarn start
Slide 67
Slide 67 text
Let’s get BigTest setup!
Slide 68
Slide 68 text
Install dependencies
Slide 69
Slide 69 text
$ npx bigtest init
Slide 70
Slide 70 text
Creates this folder structure
Slide 71
Slide 71 text
Tell BigTest launcher
how to serve our app
Slide 72
Slide 72 text
Change your bundlers entry
to point to the bigtest folder
Slide 73
Slide 73 text
With Parcel it’s really easy
Slide 74
Slide 74 text
Create a `bigtest/
index.html` file
Slide 75
Slide 75 text
Point the entry to the
`bigtest/index.html` file
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
If you’re using webpack
Change the entry to `bigtest/index.js`
Slide 79
Slide 79 text
Setup `bigtest run`
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
Edit the `/bigtest/
bigtest.opts` file
Slide 83
Slide 83 text
How to serve the app
Slide 84
Slide 84 text
Where the app is served
Slide 85
Slide 85 text
What test framework you’re using
Slide 86
Slide 86 text
Let’s take a look at the
test files
Slide 87
Slide 87 text
bigtest/tests/app-test.js
Slide 88
Slide 88 text
bigtest/interactors/app.js
Slide 89
Slide 89 text
Lastly, let’s import our app in
`bigtest/helpers/setup-app.js`
Slide 90
Slide 90 text
bigtest/helpers/setup-app.js
Slide 91
Slide 91 text
$ yarn test
Slide 92
Slide 92 text
We have a passing test
Slide 93
Slide 93 text
Review our goals
✅ Setup BigTest in an existing project
• Introduce & explain interactors
• Build our component interactors
• Gain control over the network
• Write BigTests!
Slide 94
Slide 94 text
' Let’s pause to
explain interactors
Slide 95
Slide 95 text
Interactors are core
to BigTest
Slide 96
Slide 96 text
You don’t have to wait for the
*ability* to interact
Slide 97
Slide 97 text
Interactor properties
are lazy
Slide 98
Slide 98 text
✅ Composable
Slide 99
Slide 99 text
✅ Chainable
Slide 100
Slide 100 text
( Powerful
Slide 101
Slide 101 text
Can be used with *any* JS
test framework
Slide 102
Slide 102 text
bigtestjs.io/guides/interactors
Slide 103
Slide 103 text
Review our goals
✅ Setup BigTest in an existing project
✅ Introduce & explain interactors
• Build our component interactors
• Gain control over the network
• Write BigTests!
Slide 104
Slide 104 text
Let’s start filling in
our interactor
Slide 105
Slide 105 text
How do we interact
with our app?
Slide 106
Slide 106 text
New Todo
TodoItem
Delete item
Toggle
Toggle all
Todo count
Filters
Clear completed
Title
Item text
Slide 107
Slide 107 text
'Let’s break this down &
tackle adding a todo first
Slide 108
Slide 108 text
New Todo
Toggle all
Title
Slide 109
Slide 109 text
New Todo
Toggle all
Title
✅
Slide 110
Slide 110 text
Interactor for creating a Todo
Slide 111
Slide 111 text
Interactor for creating a Todo
Slide 112
Slide 112 text
Interactor for creating a Todo
Slide 113
Slide 113 text
How would we use it?
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
We create a todo now, but
what do we assert against?
Slide 119
Slide 119 text
✅ New Todo
TodoItem
Delete item
Toggle
✅ Toggle all
✅ Title
Item text
Slide 120
Slide 120 text
There’s already a
TodoItem component
Slide 121
Slide 121 text
Let’s create a
TodoItem interactor
Slide 122
Slide 122 text
bigtest/interactors/todo-item.js
Slide 123
Slide 123 text
Compose our TodoItem interactor
with our TodoMVC interactor
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
Now we can assert that the
Todo was created
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
Run the tests!
Slide 128
Slide 128 text
Fill in the rest of the
TodoItem interactor
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
Review our goals
✅ Setup BigTest in an existing project
✅ Introduce & explain interactors
✅ Build our component interactors
• Gain control over the network
• Write BigTests!
Slide 131
Slide 131 text
Write more tests for editing,
deleting, and completing a todo
Slide 132
Slide 132 text
⚠ These are E2E tests and left
over data is causing issues! ⚠
Slide 133
Slide 133 text
Remember we want “UI
Tests” not E2E
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
@bigtest/mirage to
the rescue!
Slide 136
Slide 136 text
Mirage creates a client side
server that mimics your API
Slide 137
Slide 137 text
It has a fully
featured DB ORM
Slide 138
Slide 138 text
Allows you to have full control
over the data in your tests
Slide 139
Slide 139 text
Shout out @samselikoff for
building mirage
Slide 140
Slide 140 text
$ npx bigtest init - - network
Slide 141
Slide 141 text
$ yarn add @bigtest/mirage -D
Slide 142
Slide 142 text
Creates a network folder
Slide 143
Slide 143 text
Look at the updated
setup-app helper
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
What if we ran our tests now?
Slide 147
Slide 147 text
No content
Slide 148
Slide 148 text
Mirage intercepts all network requests
Slide 149
Slide 149 text
Let’s mock the GET endpoint
Slide 150
Slide 150 text
bigtest/network/config.js
Slide 151
Slide 151 text
bigtest/network/config.js
Slide 152
Slide 152 text
bigtest/network/config.js
Slide 153
Slide 153 text
bigtest/network/config.js
Slide 154
Slide 154 text
Running the tests
Slide 155
Slide 155 text
Let’s mock the POST endpoint
Slide 156
Slide 156 text
bigtest/network/config.js
Slide 157
Slide 157 text
These tests “pass”…
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
Fixtures won’t get us very far
Slide 160
Slide 160 text
Let’s use dynamic factories
Slide 161
Slide 161 text
We need to create a model & factory
Slide 162
Slide 162 text
In the near future the CLI
will take care of this for us
Slide 163
Slide 163 text
bigtest/network/models/index.js
Slide 164
Slide 164 text
bigtest/network/models/todo.js
Slide 165
Slide 165 text
bigtest/network/factories/index.js
Slide 166
Slide 166 text
bigtest/network/factories/todo.js
Slide 167
Slide 167 text
bigtest/network/factories/todo.js
Slide 168
Slide 168 text
We have to uncomment the imports
in `bigtest/network/start.js`
Slide 169
Slide 169 text
bigtest/network/start.js
Slide 170
Slide 170 text
Now we can manage
dynamic data creation
Slide 171
Slide 171 text
bigtest/network/config.js updated
Slide 172
Slide 172 text
bigtest/network/config.js updated
Slide 173
Slide 173 text
Create default data
with a scenario
Slide 174
Slide 174 text
bigtest/network/scenario/default.js
Slide 175
Slide 175 text
Run the tests!
Slide 176
Slide 176 text
We need to serialize the data
to match the shape our API has
Slide 177
Slide 177 text
Let’s create a serializer
Slide 178
Slide 178 text
bigtest/network/serializers/todo.js
Slide 179
Slide 179 text
Run the tests!
Slide 180
Slide 180 text
Review our goals
✅ Setup BigTest in an existing project
✅ Introduce & explain interactors
✅ Build our component interactors
✅ Gain control over the network
• Write BigTests!
Slide 181
Slide 181 text
Now we can fill in the rest
of our tests
Slide 182
Slide 182 text
bigtest/tests/app-test.js
Slide 183
Slide 183 text
bigtest/tests/app-test.js
Slide 184
Slide 184 text
bigtest/tests/app-test.js
Slide 185
Slide 185 text
bigtest/tests/app-test.js
Slide 186
Slide 186 text
bigtest/network/config.js
Slide 187
Slide 187 text
Run the tests!
Slide 188
Slide 188 text
Run the tests in different browsers!
Slide 189
Slide 189 text
Go to 192.168.37.95:4567
Slide 190
Slide 190 text
This test suite is ported exactly
over from the example Cypress has
Slide 191
Slide 191 text
Cypress test suite
Slide 192
Slide 192 text
You can find the full suite at
github.com/robdel12/bigtest-todomvc
Slide 193
Slide 193 text
Review our goals
✅ Setup BigTest in an existing project
✅ Introduce & explain interactors
✅ Build our component interactors
✅ Gain control over the network
✅ Write BigTests!
Slide 194
Slide 194 text
No content
Slide 195
Slide 195 text
More complicated example #1
Slide 196
Slide 196 text
More complicated example #1
Slide 197
Slide 197 text
More complicated example #1
Slide 198
Slide 198 text
More complicated example #2
Slide 199
Slide 199 text
More complicated example #2
Slide 200
Slide 200 text
What the test run looks like
Slide 201
Slide 201 text
More complicated example #3 (a11y)
Slide 202
Slide 202 text
More complicated example #3 (a11y)
Slide 203
Slide 203 text
100% open source:
https://github.com/folio-org/ui-
eholdings
Slide 204
Slide 204 text
What about GraphQL?
Slide 205
Slide 205 text
What about testing
just components?
Slide 206
Slide 206 text
Just a component test
https://github.com/folio-org/stripes-components/tree/master/lib/Checkbox/tests