Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Testing Big in JavaScript

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.

53f03faec1f8e5de88b555cb02ae6ac9?s=128

Robert DeLuca

August 21, 2018
Tweet

Transcript

  1. Testing Big with BigTest

  2. ! I’m Robert DeLuca @robdel12

  3. Frontside https://frontside.io

  4. Unit tests?

  5. Integration tests?

  6. None
  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
  35. None
  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

  57. None
  58. BigTest

  59. ✅ Cross browser

  60. ✅ Cross framework

  61. ✅ Cross test framework

  62. ✅ Full control over network

  63. ✅ Built with components in mind

  64. None
  65. TodoMVC as a simple example

  66. Let’s BigTest TodoMVC with an API

  67. None
  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

  71. None
  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

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

  86. Setup `bigtest run`

  87. None
  88. None
  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?

  119. None
  120. None
  121. None
  122. None
  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

  129. None
  130. Now we can assert that the Todo was created

  131. None
  132. Run the tests!

  133. Fill in the rest of the TodoItem interactor

  134. None
  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! ⚠
  138. None
  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

  148. None
  149. None
  150. What if we ran our tests now?

  151. None
  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”…

  162. None
  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!
  195. None
  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. !