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.

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
TodoItemDelete itemToggle
Toggle all
Todo count
Filters
Clear completed
Title
Item text

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

113. New TodoToggle all
Title

114. New TodoToggle 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
TodoItemDelete itemToggle
✅ 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. !