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