Testing Big in JavaScript

Fact: Full acceptance test suites that run in the browser are slow, flakey, awkward to write, and hard to maintain. This is the lore that has been handed down to JavaScript developers for generations. But what if that fact was fiction? What if your UI tests were fast, robust and a breeze to maintain? Introducing BigTest. The framework that believes you don't need to make compromises in order to make tests that faithfully replicate your production environment. We’ll explore how BigTest upends the boring and often painful subject of UI testing and makes it fast, robust, and a pleasure to work with.

Transcript

1. Testing Big with BigTest
2. ! I’m Robert DeLuca @robdel12
3. Frontside https://frontside.io
4. Unit tests?
5. Integration tests?
7. UI tests?
8. Let’s get on the same page
9. What are “UI” tests? Render the full application in the browser
10. Re-render a fresh application for each assertion What are “UI” tests?
11. What are “UI” tests? Test the application like it would be used
12. What are “UI” tests? Mocked network requests
13. What are the benefits?
14. UI testing benefits Test the integration of all components together
15. UI testing benefits Test like a user
16. UI testing benefits Test the loop between the browser & the application
17. UI testing benefits Test many different browsers & platforms
18. What about the trade offs?
19. Trade offs Hard to setup
20. Trade offs Hard to maintain
21. Trade offs Slow
22. Trade offs Flakey tests
23. What frameworks can do UI testing?
24. UI test frameworks Selenium
25. UI test frameworks Cypress
26. UI test frameworks Protractor
27. UI test frameworks Jest + Puppeteer
28. UI testing hasn’t changed very much
29. Selenium
30. Cypress
31. Protractor
32. Jest + Puppeteer https://blog.bitsrc.io/testing-your-react-app-with-puppeteer-and-jest-c72b3dfcde59
33. A lot of directing the browser to do things
34. The way we build the UI has changed in a big way
36. Faster rendering
37. Components everywhere!
38. Lots of asynchrony
39. More interactive
40. TL;DR more feature rich
41. Massive boom in tooling
42. Babel, Webpack, eslint, parcel, TypeScript, etc
43. UI Testing tools haven’t evolved with the front end tooling world
44. What are we looking for?
45. Built with components in mind
46. Composability similar to our components
47. Reliable DOM interactions
48. Chainable interactions
49. SPEED
50. Take advantage of modern tooling
51. Maintainability & scaleability
52. Full control over the network
53. Cross framework React / Preact, Ember, Vue, Angular (anywhere there’s DOM & JavaScript)
54. Cross test framework Mocha, Jasmine, Jest*, QUnit, etc *Jest: If you hack jest to run in browser
55. Cross browser IE11, Edge, Safari, Chrome, Firefox, iOS Safari, Android Chrome, etc
56. None of the current frameworks met these criteria
58. BigTest
59. ✅ Cross browser
60. ✅ Cross framework
61. ✅ Cross test framework
62. ✅ Full control over network
63. ✅ Built with components in mind
65. TodoMVC as a simple example
66. Let’s BigTest TodoMVC with an API
68. What are our goals?
69. What are our goals? • Setup BigTest in an existing project • Introduce & build our component interactors together • Mock the network layer • Write BigTests!
70. TodoMVC starter app
72. Use parcel to build
73. $ yarn start
74. Let’s get BigTest setup!
75. Install dependencies
76. $ npx bigtest init
77. Creates this folder structure
78. Tell BigTest launcher how to serve our app
79. Change your bundlers entry to point to the bigtest folder
80. With Parcel it’s really easy
81. Create a `bigtest/ index.html` file
82. Point the entry to the `bigtest/index.html` file
85. If you’re using webpack Change the entry to `bigtest/index.js`
86. Setup `bigtest run`
89. Edit the `/bigtest/ bigtest.opts` file
90. How to serve the app
91. Where the app is served
92. What test framework you’re using
93. Let’s take a look at the test files
94. bigtest/tests/app-test.js
95. bigtest/interactors/app.js
96. Lastly, let’s import our app in `bigtest/helpers/setup-app.js`
97. bigtest/helpers/setup-app.js
98. $ yarn test
99. We have a passing test
100. Review our goals ✅ Setup BigTest in an existing project • Introduce & build our component interactors together • Mock the network layer • Write BigTests!
101. ' Let’s pause to explain interactors
102. Interactors are core to BigTest
103. You don’t have to wait for the *ability* to interact
104. Interactor properties are lazy
105. ✅ Composable
106. ✅ Chainable
107. ( Powerful
108. bigtestjs.io/guides/interactors
109. Let’s start filling in our interactor
110. How do we interact with our app?
111. New Todo TodoItem Delete item Toggle Toggle all Todo count Filters Clear completed Title Item text
112. 'Let’s break this down & tackle adding a todo first
113. New Todo Toggle all Title
114. New Todo Toggle all Title ✅
115. Interactor for creating a Todo
116. Interactor for creating a Todo
117. Interactor for creating a Todo
118. How would we use it?
123. We create a todo now, but what do we assert against?
124. ✅ New Todo TodoItem Delete item Toggle ✅ Toggle all ✅ Title Item text
125. There’s already a TodoItem component
126. Let’s create a TodoItem interactor
127. bigtest/interactors/todo-item.js
128. Compose our TodoItem interactor with our TodoMVC interactor
130. Now we can assert that the Todo was created
132. Run the tests!
133. Fill in the rest of the TodoItem interactor
135. Review our goals ✅ Setup BigTest in an existing project ✅ Introduce & build our component interactors together • Mock the network layer • Write BigTests!
136. Write more tests for editing, deleting, and completing a todo
137. ⚠ These are E2E tests and left over data is causing issues! ⚠
139. @bigtest/mirage to the rescue!
140. Mirage creates a client side server that mimics your API
141. It has a fully featured DB ORM
142. Allows you to have full control over the data in your tests
143. Shout out @samselikoff for building mirage
144. $ npx bigtest init - - network
145. $ yarn add @bigtest/mirage -D
146. Creates a network folder
147. Look at the updated setup-app helper
150. What if we ran our tests now?
152. Mirage intercepts all network requests
153. Let’s mock the GET endpoint
154. bigtest/network/config.js
155. bigtest/network/config.js
156. bigtest/network/config.js
157. bigtest/network/config.js
158. Running the tests
159. Let’s mock the POST endpoint
160. bigtest/network/config.js
161. These tests “pass”…
163. Fixtures won’t get us very far
164. Let’s use dynamic factories
165. We need to create a model & factory
166. In the near future the CLI will take care of this for us
167. bigtest/network/models/index.js
168. bigtest/network/models/todo.js
169. bigtest/network/factories/index.js
170. bigtest/network/factories/todo.js
171. bigtest/network/factories/todo.js
172. We have to uncomment the imports in `bigtest/network/start.js`
173. bigtest/network/start.js
174. Now we can manage dynamic data creation
175. bigtest/network/config.js updated
176. bigtest/network/config.js updated
177. Create default data with a scenario
178. bigtest/network/scenario/default.js
179. Run the tests!
180. We need to serialize the data to match the shape our API has
181. Let’s create a serializer
182. bigtest/network/serializers/todo.js
183. Run the tests!
184. Review our goals ✅ Setup BigTest in an existing project ✅ Introduce & build our component interactors together ✅ Mock the network layer • Write BigTests!
185. Now we can fill in the rest of our tests
186. bigtest/tests/app-test.js
187. bigtest/tests/app-test.js
188. bigtest/tests/app-test.js
189. bigtest/tests/app-test.js
190. bigtest/network/config.js
191. Run the tests!
192. Run the tests in different browsers!
193. You can find the full suite at github.com/robdel12/bigtest-todomvc
194. Review our goals ✅ Setup BigTest in an existing project ✅ Introduce & build our component interactors together ✅ Mock the network layer ✅ Write BigTests!
196. More complicated example #1
197. More complicated example #1
198. More complicated example #1
199. More complicated example #2
200. More complicated example #2
201. What the test run looks like
202. More complicated example #3 (a11y)
203. More complicated example #3 (a11y)
204. 100% open source: https://github.com/folio-org/ui- eholdings
205. What about GraphQL?
206. What about testing just components?
207. Just a component test https://github.com/folio-org/stripes-components/tree/master/lib/Checkbox/tests
208. Just a component test interactor
209. Get started by visiting https://bigtestjs.io
210. The CLI isn’t quite ready yet.
211. BigTest is still in its early days
212. CLI + Network + Runner
213. CLI
214. CLI + Network
215. CLI + Network + Runner
216. BigThanks Wil Wilsman @wwilsman / @wilwilsman
217. BigThanks Frontside for sponsoring the work
218. !