$30 off During Our Annual Pro Sale. View Details »

Testing Big in JavaScript (Bleeding edge web)

Robert DeLuca
September 20, 2018

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.

Robert DeLuca

September 20, 2018
Tweet

More Decks by Robert DeLuca

Other Decks in Programming

Transcript

  1. Testing Big with BigTest

    View Slide

  2. !
    I’m Robert DeLuca
    @robdel12

    View Slide

  3. Frontside
    https://frontside.io

    View Slide

  4. View Slide

  5. How about “UI Test”

    View Slide

  6. What is a UI test?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. What are the benefits?

    View Slide

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

    View Slide

  13. UI testing benefits
    Test like a user

    View Slide

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

    View Slide

  15. UI testing benefits
    Test many different
    browsers & platforms

    View Slide

  16. What frameworks can do
    UI testing?

    View Slide

  17. UI test frameworks
    Selenium

    View Slide

  18. UI test frameworks
    Cypress

    View Slide

  19. UI test frameworks
    Protractor

    View Slide

  20. UI test frameworks
    Jest + Puppeteer

    View Slide

  21. UI testing hasn’t changed
    very much

    View Slide

  22. Selenium

    View Slide

  23. Cypress

    View Slide

  24. Protractor

    View Slide

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

    View Slide

  26. A lot of directing the
    browser to do things

    View Slide

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

    View Slide

  28. View Slide

  29. Faster rendering

    View Slide

  30. Components everywhere!

    View Slide

  31. Lots of asynchrony

    View Slide

  32. More interactive

    View Slide

  33. TL;DR more feature rich

    View Slide

  34. Massive boom in tooling

    View Slide

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

    View Slide

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

    View Slide

  37. What are we looking for?

    View Slide

  38. Built with components
    in mind

    View Slide

  39. Composability similar to
    our components

    View Slide

  40. Reliable DOM interactions

    View Slide

  41. Chainable interactions

    View Slide


  42. SPEED

    View Slide

  43. Take advantage of
    modern tooling

    View Slide

  44. Maintainability & scaleability

    View Slide

  45. Full control over the network

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  49. None of the current
    frameworks met these criteria

    View Slide

  50. BigTest

    View Slide

  51. View Slide

  52. ✅ Cross browser

    View Slide

  53. ✅ Cross framework

    View Slide

  54. ✅ Cross test framework

    View Slide

  55. ✅ Full control over network

    View Slide

  56. ✅ Built with
    components in mind

    View Slide

  57. View Slide

  58. TodoMVC as a
    simple example

    View Slide

  59. Let’s BigTest
    TodoMVC with an API

    View Slide

  60. View Slide

  61. What are our goals?

    View Slide

  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!

    View Slide

  63. TodoMVC starter app

    View Slide

  64. View Slide

  65. Use parcel to build

    View Slide

  66. $ yarn start

    View Slide

  67. Let’s get BigTest setup!

    View Slide

  68. Install dependencies

    View Slide

  69. $ npx bigtest init

    View Slide

  70. Creates this folder structure

    View Slide

  71. Tell BigTest launcher
    how to serve our app

    View Slide

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

    View Slide

  73. With Parcel it’s really easy

    View Slide

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

    View Slide

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

    View Slide

  76. View Slide

  77. View Slide

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

    View Slide

  79. Setup `bigtest run`

    View Slide

  80. View Slide

  81. View Slide

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

    View Slide

  83. How to serve the app

    View Slide

  84. Where the app is served

    View Slide

  85. What test framework you’re using

    View Slide

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

    View Slide

  87. bigtest/tests/app-test.js

    View Slide

  88. bigtest/interactors/app.js

    View Slide

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

    View Slide

  90. bigtest/helpers/setup-app.js

    View Slide

  91. $ yarn test

    View Slide

  92. We have a passing test

    View Slide

  93. Review our goals
    ✅ Setup BigTest in an existing project
    • Introduce & explain interactors
    • Build our component interactors
    • Gain control over the network
    • Write BigTests!

    View Slide

  94. ' Let’s pause to
    explain interactors

    View Slide

  95. Interactors are core
    to BigTest

    View Slide

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

    View Slide

  97. Interactor properties
    are lazy

    View Slide

  98. ✅ Composable

    View Slide

  99. ✅ Chainable

    View Slide

  100. ( Powerful

    View Slide

  101. Can be used with *any* JS
    test framework

    View Slide

  102. bigtestjs.io/guides/interactors

    View Slide

  103. Review our goals
    ✅ Setup BigTest in an existing project
    ✅ Introduce & explain interactors
    • Build our component interactors
    • Gain control over the network
    • Write BigTests!

    View Slide

  104. Let’s start filling in
    our interactor

    View Slide

  105. How do we interact
    with our app?

    View Slide

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

    View Slide

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

    View Slide

  108. New Todo
    Toggle all
    Title

    View Slide

  109. New Todo
    Toggle all
    Title

    View Slide

  110. Interactor for creating a Todo

    View Slide

  111. Interactor for creating a Todo

    View Slide

  112. Interactor for creating a Todo

    View Slide

  113. How would we use it?

    View Slide

  114. View Slide

  115. View Slide

  116. View Slide

  117. View Slide

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

    View Slide

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

    View Slide

  120. There’s already a
    TodoItem component

    View Slide

  121. Let’s create a
    TodoItem interactor

    View Slide

  122. bigtest/interactors/todo-item.js

    View Slide

  123. Compose our TodoItem interactor
    with our TodoMVC interactor

    View Slide

  124. View Slide

  125. Now we can assert that the
    Todo was created

    View Slide

  126. View Slide

  127. Run the tests!

    View Slide

  128. Fill in the rest of the
    TodoItem interactor

    View Slide

  129. View Slide

  130. Review our goals
    ✅ Setup BigTest in an existing project
    ✅ Introduce & explain interactors
    ✅ Build our component interactors
    • Gain control over the network
    • Write BigTests!

    View Slide

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

    View Slide

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

    View Slide

  133. Remember we want “UI
    Tests” not E2E

    View Slide

  134. View Slide

  135. @bigtest/mirage to
    the rescue!

    View Slide

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

    View Slide

  137. It has a fully
    featured DB ORM

    View Slide

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

    View Slide

  139. Shout out @samselikoff for
    building mirage

    View Slide

  140. $ npx bigtest init - - network

    View Slide

  141. $ yarn add @bigtest/mirage -D

    View Slide

  142. Creates a network folder

    View Slide

  143. Look at the updated
    setup-app helper

    View Slide

  144. View Slide

  145. View Slide

  146. What if we ran our tests now?

    View Slide

  147. View Slide

  148. Mirage intercepts all network requests

    View Slide

  149. Let’s mock the GET endpoint

    View Slide

  150. bigtest/network/config.js

    View Slide

  151. bigtest/network/config.js

    View Slide

  152. bigtest/network/config.js

    View Slide

  153. bigtest/network/config.js

    View Slide

  154. Running the tests

    View Slide

  155. Let’s mock the POST endpoint

    View Slide

  156. bigtest/network/config.js

    View Slide

  157. These tests “pass”…

    View Slide

  158. View Slide

  159. Fixtures won’t get us very far

    View Slide

  160. Let’s use dynamic factories

    View Slide

  161. We need to create a model & factory

    View Slide

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

    View Slide

  163. bigtest/network/models/index.js

    View Slide

  164. bigtest/network/models/todo.js

    View Slide

  165. bigtest/network/factories/index.js

    View Slide

  166. bigtest/network/factories/todo.js

    View Slide

  167. bigtest/network/factories/todo.js

    View Slide

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

    View Slide

  169. bigtest/network/start.js

    View Slide

  170. Now we can manage
    dynamic data creation

    View Slide

  171. bigtest/network/config.js updated

    View Slide

  172. bigtest/network/config.js updated

    View Slide

  173. Create default data
    with a scenario

    View Slide

  174. bigtest/network/scenario/default.js

    View Slide

  175. Run the tests!

    View Slide

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

    View Slide

  177. Let’s create a serializer

    View Slide

  178. bigtest/network/serializers/todo.js

    View Slide

  179. Run the tests!

    View Slide

  180. Review our goals
    ✅ Setup BigTest in an existing project
    ✅ Introduce & explain interactors
    ✅ Build our component interactors
    ✅ Gain control over the network
    • Write BigTests!

    View Slide

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

    View Slide

  182. bigtest/tests/app-test.js

    View Slide

  183. bigtest/tests/app-test.js

    View Slide

  184. bigtest/tests/app-test.js

    View Slide

  185. bigtest/tests/app-test.js

    View Slide

  186. bigtest/network/config.js

    View Slide

  187. Run the tests!

    View Slide

  188. Run the tests in different browsers!

    View Slide

  189. Go to 192.168.37.95:4567

    View Slide

  190. This test suite is ported exactly
    over from the example Cypress has

    View Slide

  191. Cypress test suite

    View Slide

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

    View Slide

  193. Review our goals
    ✅ Setup BigTest in an existing project
    ✅ Introduce & explain interactors
    ✅ Build our component interactors
    ✅ Gain control over the network
    ✅ Write BigTests!

    View Slide

  194. View Slide

  195. More complicated example #1

    View Slide

  196. More complicated example #1

    View Slide

  197. More complicated example #1

    View Slide

  198. More complicated example #2

    View Slide

  199. More complicated example #2

    View Slide

  200. What the test run looks like

    View Slide

  201. More complicated example #3 (a11y)

    View Slide

  202. More complicated example #3 (a11y)

    View Slide

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

    View Slide

  204. What about GraphQL?

    View Slide

  205. What about testing
    just components?

    View Slide

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

    View Slide

  207. Just a component test interactor

    View Slide

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

    View Slide

  209. BigTest is still in its early days

    View Slide

  210. CLI
    +
    Network
    +
    Runner

    View Slide

  211. CLI

    View Slide

  212. CLI
    +
    Network

    View Slide

  213. CLI
    +
    Network
    +
    Runner

    View Slide

  214. BigThanks Wil Wilsman
    @wwilsman / @wilwilsman

    View Slide

  215. BigThanks Frontside for
    sponsoring the work

    View Slide

  216. !

    View Slide