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
   

   View Slide

2. !
   I’m Robert DeLuca
   @robdel12
   

   View Slide

3. Frontside
   https://frontside.io
   

   View Slide

4. Unit tests?
   

   View Slide

5. Integration tests?
   

   View Slide

6. View Slide

7. UI tests?
   

   View Slide

8. Let’s get on the same page
   

   View Slide

9. What are “UI” tests?
   Render the full application
   in the browser
   

   View Slide

10. Re-render a fresh application
    for each assertion
    What are “UI” tests?
    

    View Slide

11. What are “UI” tests?
    Test the application like it
    would be used
    

    View Slide

12. What are “UI” tests?
    Mocked network requests
    

    View Slide

13. What are the benefits?
    

    View Slide

14. UI testing benefits
    Test the integration of all
    components together
    

    View Slide

15. UI testing benefits
    Test like a user
    

    View Slide

16. UI testing benefits
    Test the loop between the
    browser & the application
    

    View Slide

17. UI testing benefits
    Test many different
    browsers & platforms
    

    View Slide

18. What about the trade offs?
    

    View Slide

19. Trade offs
    Hard to setup
    

    View Slide

20. Trade offs
    Hard to maintain
    

    View Slide

21. Trade offs
    Slow
    

    View Slide

22. Trade offs
    Flakey tests
    

    View Slide

23. What frameworks can do
    UI testing?
    

    View Slide

24. UI test frameworks
    Selenium
    

    View Slide

25. UI test frameworks
    Cypress
    

    View Slide

26. UI test frameworks
    Protractor
    

    View Slide

27. UI test frameworks
    Jest + Puppeteer
    

    View Slide

28. UI testing hasn’t changed
    very much
    

    View Slide

29. Selenium
    

    View Slide

30. Cypress
    

    View Slide

31. Protractor
    

    View Slide

32. Jest + Puppeteer
    https://blog.bitsrc.io/testing-your-react-app-with-puppeteer-and-jest-c72b3dfcde59
    

    View Slide

33. A lot of directing the
    browser to do things
    

    View Slide

34. The way we build the UI has
    changed in a big way
    

    View Slide

35. View Slide

36. Faster rendering
    

    View Slide

37. Components everywhere!
    

    View Slide

38. Lots of asynchrony
    

    View Slide

39. More interactive
    

    View Slide

40. TL;DR more feature rich
    

    View Slide

41. Massive boom in tooling
    

    View Slide

42. Babel, Webpack, eslint,
    parcel, TypeScript, etc
    

    View Slide

43. UI Testing tools haven’t
    evolved with the front end
    tooling world
    

    View Slide

44. What are we looking for?
    

    View Slide

45. Built with components
    in mind
    

    View Slide

46. Composability similar to
    our components
    

    View Slide

47. Reliable DOM interactions
    

    View Slide

48. Chainable interactions
    

    View Slide

49. 
    SPEED
    

    View Slide

50. Take advantage of
    modern tooling
    

    View Slide

51. Maintainability & scaleability
    

    View Slide

52. Full control over the network
    

    View Slide

53. Cross framework
    React / Preact, Ember, Vue, Angular
    (anywhere there’s DOM & JavaScript)
    

    View Slide

54. Cross test framework
    Mocha, Jasmine, Jest*, QUnit, etc
    *Jest: If you hack jest to run in browser
    

    View Slide

55. Cross browser
    IE11, Edge, Safari, Chrome, Firefox, iOS Safari,
    Android Chrome, etc
    

    View Slide

56. None of the current
    frameworks met these criteria
    

    View Slide

57. View Slide

58. BigTest
    

    View Slide

59. ✅ Cross browser
    

    View Slide

60. ✅ Cross framework
    

    View Slide

61. ✅ Cross test framework
    

    View Slide

62. ✅ Full control over network
    

    View Slide

63. ✅ Built with
    components in mind
    

    View Slide

64. View Slide

65. TodoMVC as a
    simple example
    

    View Slide

66. Let’s BigTest
    TodoMVC with an API
    

    View Slide

67. View Slide

68. What are our goals?
    

    View Slide

69. What are our goals?
    • Setup BigTest in an existing project
    • Introduce & build our component interactors together
    • Mock the network layer
    • Write BigTests!
    

    View Slide

70. TodoMVC starter app
    

    View Slide

71. View Slide

72. Use parcel to build
    

    View Slide

73. $ yarn start
    

    View Slide

74. Let’s get BigTest setup!
    

    View Slide

75. Install dependencies
    

    View Slide

76. $ npx bigtest init
    

    View Slide

77. Creates this folder structure
    

    View Slide

78. Tell BigTest launcher
    how to serve our app
    

    View Slide

79. Change your bundlers entry
    to point to the bigtest folder
    

    View Slide

80. With Parcel it’s really easy
    

    View Slide

81. Create a `bigtest/
    index.html` file
    

    View Slide

82. Point the entry to the
    `bigtest/index.html` file
    

    View Slide

83. View Slide

84. View Slide

85. If you’re using webpack
    Change the entry to `bigtest/index.js`
    

    View Slide

86. Setup `bigtest run`
    

    View Slide

87. View Slide

88. View Slide

89. Edit the `/bigtest/
    bigtest.opts` file
    

    View Slide

90. How to serve the app
    

    View Slide

91. Where the app is served
    

    View Slide

92. What test framework you’re using
    

    View Slide

93. Let’s take a look at the
    test files
    

    View Slide

94. bigtest/tests/app-test.js
    

    View Slide

95. bigtest/interactors/app.js
    

    View Slide

96. Lastly, let’s import our app in
    `bigtest/helpers/setup-app.js`
    

    View Slide

97. bigtest/helpers/setup-app.js
    

    View Slide

98. $ yarn test
    

    View Slide

99. We have a passing test
    

    View Slide

100. Review our goals
     ✅ Setup BigTest in an existing project
     • Introduce & build our component interactors together
     • Mock the network layer
     • Write BigTests!
     

     View Slide

101. ' Let’s pause to
     explain interactors
     

     View Slide

102. Interactors are core
     to BigTest
     

     View Slide

103. You don’t have to wait for the
     *ability* to interact
     

     View Slide

104. Interactor properties
     are lazy
     

     View Slide

105. ✅ Composable
     

     View Slide

106. ✅ Chainable
     

     View Slide

107. ( Powerful
     

     View Slide

108. bigtestjs.io/guides/interactors
     

     View Slide

109. Let’s start filling in
     our interactor
     

     View Slide

110. How do we interact
     with our app?
     

     View Slide

111. New Todo
     TodoItem
     Delete item
     Toggle
     Toggle all
     Todo count
     Filters
     Clear completed
     Title
     Item text
     

     View Slide

112. 'Let’s break this down &
     tackle adding a todo first
     

     View Slide

113. New Todo
     Toggle all
     Title
     

     View Slide

114. New Todo
     Toggle all
     Title
     ✅
     

     View Slide

115. Interactor for creating a Todo
     

     View Slide

116. Interactor for creating a Todo
     

     View Slide

117. Interactor for creating a Todo
     

     View Slide

118. How would we use it?
     

     View Slide

119. View Slide

120. View Slide

121. View Slide

122. View Slide

123. We create a todo now, but
     what do we assert against?
     

     View Slide

124. ✅ New Todo
     TodoItem
     Delete item
     Toggle
     ✅ Toggle all
     ✅ Title
     Item text
     

     View Slide

125. There’s already a
     TodoItem component
     

     View Slide

126. Let’s create a
     TodoItem interactor
     

     View Slide

127. bigtest/interactors/todo-item.js
     

     View Slide

128. Compose our TodoItem interactor
     with our TodoMVC interactor
     

     View Slide

129. View Slide

130. Now we can assert that the
     Todo was created
     

     View Slide

131. View Slide

132. Run the tests!
     

     View Slide

133. Fill in the rest of the
     TodoItem interactor
     

     View Slide

134. View Slide

135. Review our goals
     ✅ Setup BigTest in an existing project
     ✅ Introduce & build our component interactors together
     • Mock the network layer
     • Write BigTests!
     

     View Slide

136. Write more tests for editing,
     deleting, and completing a todo
     

     View Slide

137. ⚠ These are E2E tests and left
     over data is causing issues! ⚠
     

     View Slide

138. View Slide

139. @bigtest/mirage to
     the rescue!
     

     View Slide

140. Mirage creates a client side
     server that mimics your API
     

     View Slide

141. It has a fully
     featured DB ORM
     

     View Slide

142. Allows you to have full control
     over the data in your tests
     

     View Slide

143. Shout out @samselikoff for
     building mirage
     

     View Slide

144. $ npx bigtest init - - network
     

     View Slide

145. $ yarn add @bigtest/mirage -D
     

     View Slide

146. Creates a network folder
     

     View Slide

147. Look at the updated
     setup-app helper
     

     View Slide

148. View Slide

149. View Slide

150. What if we ran our tests now?
     

     View Slide

151. View Slide

152. Mirage intercepts all network requests
     

     View Slide

153. Let’s mock the GET endpoint
     

     View Slide

154. bigtest/network/config.js
     

     View Slide

155. bigtest/network/config.js
     

     View Slide

156. bigtest/network/config.js
     

     View Slide

157. bigtest/network/config.js
     

     View Slide

158. Running the tests
     

     View Slide

159. Let’s mock the POST endpoint
     

     View Slide

160. bigtest/network/config.js
     

     View Slide

161. These tests “pass”…
     

     View Slide

162. View Slide

163. Fixtures won’t get us very far
     

     View Slide

164. Let’s use dynamic factories
     

     View Slide

165. We need to create a model & factory
     

     View Slide

166. In the near future the CLI
     will take care of this for us
     

     View Slide

167. bigtest/network/models/index.js
     

     View Slide

168. bigtest/network/models/todo.js
     

     View Slide

169. bigtest/network/factories/index.js
     

     View Slide

170. bigtest/network/factories/todo.js
     

     View Slide

171. bigtest/network/factories/todo.js
     

     View Slide

172. We have to uncomment the imports
     in `bigtest/network/start.js`
     

     View Slide

173. bigtest/network/start.js
     

     View Slide

174. Now we can manage
     dynamic data creation
     

     View Slide

175. bigtest/network/config.js updated
     

     View Slide

176. bigtest/network/config.js updated
     

     View Slide

177. Create default data
     with a scenario
     

     View Slide

178. bigtest/network/scenario/default.js
     

     View Slide

179. Run the tests!
     

     View Slide

180. We need to serialize the data
     to match the shape our API has
     

     View Slide

181. Let’s create a serializer
     

     View Slide

182. bigtest/network/serializers/todo.js
     

     View Slide

183. Run the tests!
     

     View Slide

184. Review our goals
     ✅ Setup BigTest in an existing project
     ✅ Introduce & build our component interactors together
     ✅ Mock the network layer
     • Write BigTests!
     

     View Slide

185. Now we can fill in the rest
     of our tests
     

     View Slide

186. bigtest/tests/app-test.js
     

     View Slide

187. bigtest/tests/app-test.js
     

     View Slide

188. bigtest/tests/app-test.js
     

     View Slide

189. bigtest/tests/app-test.js
     

     View Slide

190. bigtest/network/config.js
     

     View Slide

191. Run the tests!
     

     View Slide

192. Run the tests in different browsers!
     

     View Slide

193. You can find the full suite at
     github.com/robdel12/bigtest-todomvc
     

     View Slide

194. Review our goals
     ✅ Setup BigTest in an existing project
     ✅ Introduce & build our component interactors together
     ✅ Mock the network layer
     ✅ Write BigTests!
     

     View Slide

195. View Slide

196. More complicated example #1
     

     View Slide

197. More complicated example #1
     

     View Slide

198. More complicated example #1
     

     View Slide

199. More complicated example #2
     

     View Slide

200. More complicated example #2
     

     View Slide

201. What the test run looks like
     

     View Slide

202. More complicated example #3 (a11y)
     

     View Slide

203. More complicated example #3 (a11y)
     

     View Slide

204. 100% open source:
     https://github.com/folio-org/ui-
     eholdings
     

     View Slide

205. What about GraphQL?
     

     View Slide

206. What about testing
     just components?
     

     View Slide

207. Just a component test
     https://github.com/folio-org/stripes-components/tree/master/lib/Checkbox/tests
     

     View Slide

208. Just a component test interactor
     

     View Slide

209. Get started by visiting
     https://bigtestjs.io
     

     View Slide

210. The CLI isn’t quite ready yet.
     

     View Slide

211. BigTest is still in its early days
     

     View Slide

212. CLI
     +
     Network
     +
     Runner
     

     View Slide

213. CLI
     

     View Slide

214. CLI
     +
     Network
     

     View Slide

215. CLI
     +
     Network
     +
     Runner
     

     View Slide

216. BigThanks Wil Wilsman
     @wwilsman / @wilwilsman
     

     View Slide

217. BigThanks Frontside for
     sponsoring the work
     

     View Slide

218. !
     

     View Slide