Testing Big in JavaScript (Bleeding edge web)

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