Testing Big in JavaScript (Bleeding edge web)

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.

53f03faec1f8e5de88b555cb02ae6ac9?s=128

Robert DeLuca

September 20, 2018
Tweet

Transcript

  1. Testing Big with BigTest

  2. ! I’m Robert DeLuca @robdel12

  3. Frontside https://frontside.io

  4. None
  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
  28. None
  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

  51. None
  52. ✅ Cross browser

  53. ✅ Cross framework

  54. ✅ Cross test framework

  55. ✅ Full control over network

  56. ✅ Built with components in mind

  57. None
  58. TodoMVC as a simple example

  59. Let’s BigTest TodoMVC with an API

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

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

  76. None
  77. None
  78. If you’re using webpack Change the entry to `bigtest/index.js`

  79. Setup `bigtest run`

  80. None
  81. None
  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?

  114. None
  115. None
  116. None
  117. None
  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

  124. None
  125. Now we can assert that the Todo was created

  126. None
  127. Run the tests!

  128. Fill in the rest of the TodoItem interactor

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

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

  144. None
  145. None
  146. What if we ran our tests now?

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

  158. None
  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!
  194. None
  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. !