Skip to content

Testing

Jump to bottom
Adam Argyle edited this page May 21, 2019 · 3 revisions

Running tests locally

  1. npm i
  2. npm run test:ci spins up a server, runs the tests, tears it all down

Developing tests locally

  1. npm i
  2. npm run test:server in terminal #1, puppeteer expects a hosted site (test:server removes browsersync magic)
  3. npm run test:dev will run tests in watch mode, contextually rerunning tests as they change



Architecture

VisBug is a custom element built on top of ES6. There are a few layers to test: functions and DOM manipulations. I've brought in 2 libraries to help me with these tasks, and they play together really nice.

Ava

https://github.com/avajs/ava
Ava's role is the test runner and assertion library. It concurrently runs the tests (which is a huge gain and also tricky) and in each of those concurrent test sets, can run unit or integration tests. As the author you get to tell Ava what you want to test, Ava doesn't know or care if it's unit or integration, which I think is neat. It's essentially an integration test if you do any puppeteer work in your tests, and otherwise a unit test.

Puppeteer

https://github.com/GoogleChrome/puppeteer
Instead of creating tons of virtual DOM layers in order to verify VisBug's DOM manipulation, I chose to use Puppeteer. This let's me spin up a fully working instance of chrome, point it at my running server, and then command the tab/page to mock user interaction and have VisBug respond. With Ava, these tests are run in parallel, and each test gets it's own tab so it doesn't squash what another test is doing.



Ping me on Gitter or Twitter if you have more questions, I'm happy to explain it more, enhance it, tweak it, etc. Let's chat!

Clone this wiki locally