Crossref Front End Framework
|Product Manager / Owner||rmasih|
|Tech Lead||Joe Wass|
|Description||Crossref Front End Framework|
|Quality||No Sentry, no SONAR|
Our framework for building new browser-based user interfaces. Built with Vue.js framework, on Vuetify component framework. New components can be built within this framework and then included into places where needed.
We follow Vuetify’s browser support policy, which is currently:
|Chromium (Chrome, Edge Insider)||Supported|
|IE11/Safari 9||Supported with polyfill|
|IE 10 and below||Not Supported|
|Safari 8 and below||Not Supported|
We include the polyfill for IE11/Safari 9, and note the caveat relating to IE 11
<template> tag support.
Run eslint with
eslint --ext .js,.vue src to check all .js or .vue files within the src/ directory.
Run eslint with
eslint --fix --ext .js,.vue src to check and fix the same
In the Frontend VueJS project repo, the vue CLI service lint command is configured to run ESLint with
--fix enabled against the Standard Style ruleset, and an extra ruleset that checks for deviations from the recommended VueJS component style guide.
Run Vue CLI lint with
npm run lint to check and fix all .js and .vue files within the Vue project.
When running the project with
npm run serve, lint on save is enabled by default. This can be controlled by the
lintOnSave paramter within
Unit tests should be written to target the Jest test runner.
Unit tests targetting Vue components should use the Vue Test Utils.
Intergration tests should be written to for Cypress.
When creating manual mocks, use
mockResolvedValue for returning simple values, or
mockImplementation for more complex cases.
Json-server and MirageJS let you fake an entire API, and use it during development as well as while running tests (including Cypress tests). MirageJS has the advantage of running entirely within the app (it hijacks XHRs) and json-server has the advantage that it simulate the real network conditions of requesting an API exposed on a different domain/port (which allows you to test things like CORS).