Page MenuHomePhabricator

Install Jest for unit tests for Vue.js search
Closed, ResolvedPublic3 Estimated Story Points

Description

This task encompasses the boilerplate to actually add Jest as a project development dependency.

Configuration

Via T249301#6056623 and T249301#6057642:

Patches

Acceptance criteria

  • Jest is added a development dependency.
  • An NPM script is added that runs all Jest unit tests.
  • A test for one component is written. For example, App.
  • The configuration documentation on wiki is updated.
  • Globals and MediaWiki environment specific variables are minimized.
  • A failing test fails CI.

QA

No functional changes so no QA needed.

Event Timeline

If we decline this task, we will need to pick up T239268.

Niedzielski renamed this task from Install Jest for unit tests to Install Jest for unit tests for Vue.js search.Apr 5 2020, 4:22 PM

Hi @Niedzielski – if you want a Jest boilerplate that's suitable for use in a Mediawiki environment, take a look at the testing setup in the Vue.js fork of the MachineVision that @AnneT and I are building: https://github.com/egardner/mediawiki-extensions-MachineVision

Some things worth noting:

  1. Jest is my recommendation (not sure that the FAWG has an official one) because it's possible to test single-file components without relying on Webpack. The vue-jest plugin makes this possible (you just have to specify which files need to be transformed for testing).
  2. Look at jest.config.js in that repo. This file was generated by the Jest CLI and then tweaked a little. You'll want to include the "vue-jest" part of that config around line 67 or so, as well as the "transform" line at 145. You could probably copy the whole file as a starting point. You can ignore certain files/folders, configure how coverage reports are generated, etc.
  3. I had some issues getting coverage reports working with Jest v25, so I'm using version 24 for now. It looks like it may be safe to upgrade as long as you use v25.2.4 or greater.
  4. jest.setup.js in the same repo stubs out a dummy MediaWiki environment for use in testing. A lot of this was cribbed from the web team's mw-nodw-qunit repo. jQuery and OOJS are available for use in a Node environment as long as they are included in your package.json.
  5. Jest is "batteries included" so there shouldn't be much need for other tools like Sinon, Istanbul, assertion libraries, etc. I think having fewer dependencies to keep track of here is a good thing.

Eventually it would be good to move some of this re-usable config stuff into a shared library or some kind of boilerplate project. In the mean time hopefully you don't have to re-invent too many wheels and can use some of this.

Thanks, @egardner! I've updated the task description with some of your notes and pointed to your comment for the rest.

Hi @Niedzielski – if you want a Jest boilerplate that's suitable for use in a Mediawiki environment, take a look at the testing setup in the Vue.js fork of the MachineVision that @AnneT and I are building: https://github.com/egardner/mediawiki-extensions-MachineVision

Some things worth noting:

In addition to this, snapshot testing is usefult to make sure your UI does not change unexpectedly.

Thanks, @santhosh! I've made a note in the task description with some examples from ContentTranslation that I hope are acceptable. (Please revise the task description if you're thinking of some better examples that would help the future assignee of this task!)

Niedzielski added a subscriber: ovasileva.

@ovasileva, I'm adding this to the Web board for tracking and visibility purposes. Anri is working on this task as part of ramping up and #Vue.js-Search.

ovasileva set the point value for this task to 3.Jun 15 2020, 5:17 PM
Niedzielski added a subscriber: Jdrewniak.

I think @Jdrewniak said he'd sign this one off so I'm putting his face on it. Please undo if I'm mistaken!

There's just one question remaining in the patch about whether or not babel-preset-vue and babel-core are required dependancies for Jest, but I'll let @Anribolon answer that on Github.