From 132cff77d5654911f8daff8a8597e1df9b6040be Mon Sep 17 00:00:00 2001 From: olekkorob Date: Fri, 23 Dec 2022 04:27:36 +0200 Subject: [PATCH 01/21] feat: basic config for unit test --- web/.eslintrc.js | 16 ++++++++++++++++ web/.gitignore | 1 + web/jest.config.js | 5 +++++ web/package.json | 24 +++++++++++++++--------- web/tests/unit/Warning.spec.js | 25 +++++++++++++++++++++++++ 5 files changed, 62 insertions(+), 9 deletions(-) create mode 100644 web/jest.config.js create mode 100644 web/tests/unit/Warning.spec.js diff --git a/web/.eslintrc.js b/web/.eslintrc.js index 8bb6fea80..d0ed66328 100644 --- a/web/.eslintrc.js +++ b/web/.eslintrc.js @@ -1,12 +1,16 @@ module.exports = { root: true, + env: { node: true, }, + extends: ['plugin:vue/recommended', 'eslint:recommended', 'prettier'], + parserOptions: { parser: '@babel/eslint-parser', }, + rules: { 'no-unused-vars': 'off', 'no-undef': 'off', @@ -22,4 +26,16 @@ module.exports = { 'vue/no-template-shadow': 'off', 'vue/component-definition-name-casing': 'off', }, + + overrides: [ + { + files: [ + '**/__tests__/*.{j,t}s?(x)', + '**/tests/unit/**/*.spec.{j,t}s?(x)' + ], + env: { + jest: true + } + } + ] }; diff --git a/web/.gitignore b/web/.gitignore index a0dddc6fb..4583f0f2a 100644 --- a/web/.gitignore +++ b/web/.gitignore @@ -1,6 +1,7 @@ .DS_Store node_modules /dist +coverage # local env files .env.local diff --git a/web/jest.config.js b/web/jest.config.js new file mode 100644 index 000000000..31092171b --- /dev/null +++ b/web/jest.config.js @@ -0,0 +1,5 @@ +module.exports = { + preset: '@vue/cli-plugin-unit-jest', + collectCoverage: true, + collectCoverageFrom: ['/src/**/*.vue'], +}; diff --git a/web/package.json b/web/package.json index e024a5869..fd8c902d8 100644 --- a/web/package.json +++ b/web/package.json @@ -5,6 +5,7 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", + "test:unit": "vue-cli-service test:unit", "lint": "vue-cli-service lint" }, "dependencies": { @@ -56,14 +57,19 @@ "@vue/cli-plugin-babel": "~5.0.8", "@vue/cli-plugin-eslint": "~5.0.8", "@vue/cli-plugin-router": "~5.0.8", + "@vue/cli-plugin-unit-jest": "^5.0.8", "@vue/cli-plugin-vuex": "~5.0.8", "@vue/cli-service": "~5.0.8", "@vue/eslint-config-prettier": "^7.0.0", + "@vue/test-utils": "^1.3.3", + "@vue/vue2-jest": "^27.0.0-alpha.2", + "babel-jest": "^27.0.6", "babel-loader": "^9.1.0", "eslint": "^7.32.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-vue": "^9.7.0", "husky": "^8.0.1", + "jest": "^27.0.5", "lint-staged": "^13.0.3", "prettier": "^2.7.1", "raw-loader": "^4.0.2", @@ -72,11 +78,10 @@ "vue-template-compiler": "^2.6.11", "webpack-chain": "^6.5.1" }, - "resolutions": { - "error-stack-parser": "2.1.4", - "@pixi/graphics-smooth": "0.0.30", - "pixi.js": "7.0.3" - }, + "browserslist": [ + "> 1%", + "last 2 versions" + ], "husky": { "hooks": { "pre-commit": "lint-staged" @@ -85,8 +90,9 @@ "lint-staged": { "**/*.{vue,js,jsx,ts,tsx}": "npm run prettier:write" }, - "browserslist": [ - "> 1%", - "last 2 versions" - ] + "resolutions": { + "error-stack-parser": "2.1.4", + "@pixi/graphics-smooth": "0.0.30", + "pixi.js": "7.0.3" + } } diff --git a/web/tests/unit/Warning.spec.js b/web/tests/unit/Warning.spec.js new file mode 100644 index 000000000..38bdb0853 --- /dev/null +++ b/web/tests/unit/Warning.spec.js @@ -0,0 +1,25 @@ +import { mount } from '@vue/test-utils'; +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'; +import Warning from '@/components/Warning'; + +library.add(faExclamationCircle); + +describe('Warning', () => { + it('make sure component is rendered', () => { + const textProp = 'This is test'; + const wrapper = mount(Warning, { + stubs: { FontAwesomeIcon }, + propsData: { + text: textProp, + align_left: true, + animate: false, + }, + }); + expect(wrapper.props().text).toBe(textProp); + expect(wrapper.props().align_left).toBe(true); + expect(wrapper.props().animate).toBe(false); + expect(wrapper.text()).toContain(textProp); + }); +}); From 2154875393006a63c3200c18fd9a1ca469de3b14 Mon Sep 17 00:00:00 2001 From: olekkorob Date: Tue, 27 Dec 2022 02:59:17 +0200 Subject: [PATCH 02/21] chore: setup e2e --- web/cypress.config.js | 11 ++++ web/cypress/fixtures/example.json | 5 ++ web/cypress/support/commands.js | 25 ++++++++ web/cypress/support/e2e.js | 20 +++++++ web/package.json | 5 +- web/src/components/Warning.vue | 3 + web/tests/e2e/specs/Warning.spec.js | 19 +++++++ web/vue.config.js | 88 ++++++++++++++--------------- 8 files changed, 131 insertions(+), 45 deletions(-) create mode 100644 web/cypress.config.js create mode 100644 web/cypress/fixtures/example.json create mode 100644 web/cypress/support/commands.js create mode 100644 web/cypress/support/e2e.js create mode 100644 web/tests/e2e/specs/Warning.spec.js diff --git a/web/cypress.config.js b/web/cypress.config.js new file mode 100644 index 000000000..95591193c --- /dev/null +++ b/web/cypress.config.js @@ -0,0 +1,11 @@ +const { defineConfig } = require('cypress'); + +module.exports = defineConfig({ + e2e: { + setupNodeEvents(on, config) { + // implement node event listeners here + }, + baseUrl: 'http://localhost:8080', + specPattern: 'tests/e2e/specs/*.spec.js', + }, +}); diff --git a/web/cypress/fixtures/example.json b/web/cypress/fixtures/example.json new file mode 100644 index 000000000..02e425437 --- /dev/null +++ b/web/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/web/cypress/support/commands.js b/web/cypress/support/commands.js new file mode 100644 index 000000000..66ea16ef0 --- /dev/null +++ b/web/cypress/support/commands.js @@ -0,0 +1,25 @@ +// *********************************************** +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** +// +// +// -- This is a parent command -- +// Cypress.Commands.add('login', (email, password) => { ... }) +// +// +// -- This is a child command -- +// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This will overwrite an existing command -- +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) \ No newline at end of file diff --git a/web/cypress/support/e2e.js b/web/cypress/support/e2e.js new file mode 100644 index 000000000..0e7290a13 --- /dev/null +++ b/web/cypress/support/e2e.js @@ -0,0 +1,20 @@ +// *********************************************************** +// This example support/e2e.js is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +import './commands' + +// Alternatively you can use CommonJS syntax: +// require('./commands') \ No newline at end of file diff --git a/web/package.json b/web/package.json index fd8c902d8..2f6413c30 100644 --- a/web/package.json +++ b/web/package.json @@ -6,6 +6,7 @@ "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", + "test:e2e": "vue-cli-service test:e2e --mode e2e", "lint": "vue-cli-service lint" }, "dependencies": { @@ -55,6 +56,7 @@ "devDependencies": { "@babel/eslint-parser": "^7.19.1", "@vue/cli-plugin-babel": "~5.0.8", + "@vue/cli-plugin-e2e-cypress": "^5.0.8", "@vue/cli-plugin-eslint": "~5.0.8", "@vue/cli-plugin-router": "~5.0.8", "@vue/cli-plugin-unit-jest": "^5.0.8", @@ -62,9 +64,10 @@ "@vue/cli-service": "~5.0.8", "@vue/eslint-config-prettier": "^7.0.0", "@vue/test-utils": "^1.3.3", - "@vue/vue2-jest": "^27.0.0-alpha.2", + "@vue/vue2-jest": "^27.0.0", "babel-jest": "^27.0.6", "babel-loader": "^9.1.0", + "cypress": "^12.2.0", "eslint": "^7.32.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-vue": "^9.7.0", diff --git a/web/src/components/Warning.vue b/web/src/components/Warning.vue index 452fba05e..78a0094e8 100644 --- a/web/src/components/Warning.vue +++ b/web/src/components/Warning.vue @@ -2,9 +2,11 @@

diff --git a/web/tests/e2e/specs/Warning.spec.js b/web/tests/e2e/specs/Warning.spec.js new file mode 100644 index 000000000..878145ece --- /dev/null +++ b/web/tests/e2e/specs/Warning.spec.js @@ -0,0 +1,19 @@ +import Warning from '../../../src/components/Warning.vue'; + +describe('Warning', () => { + it('should apply passed props values', () => { + const propText = 'Warning Text'; + cy.mount(Warning, { + propsData: { text: propText, align_left: true, animate: true }, + }); + const wrapperSelector = '[data-cy="wrapper"]'; + const textWrapperSelector = '[data-cy="text-wrapper"]'; + cy.get(wrapperSelector) + .should('be.visible') + .should('have.class', 'scale-in-center'); + cy.get(textWrapperSelector) + .should('be.visible') + .should('have.class', 'text-left') + .and('have.text', propText); + }); +}); diff --git a/web/vue.config.js b/web/vue.config.js index 79dcd8932..3a1163612 100644 --- a/web/vue.config.js +++ b/web/vue.config.js @@ -9,54 +9,54 @@ process.env.VUE_APP_VERSION = require('./package.json').version; APP_DESCRIPTION = - 'Outbreak.info explores COVID-19 and SARS-CoV-2 data with variant surveillance reports, data on cases and deaths, and a searchable research library.'; + 'Outbreak.info explores COVID-19 and SARS-CoV-2 data with variant surveillance reports, data on cases and deaths, and a searchable research library.'; APP_TITLE = 'outbreak.info SARS-CoV-2 data explorer'; module.exports = { - css: { - loaderOptions: { - sass: { - prependData: `@import "@/styles/_global.scss";`, - }, - }, + css: { + loaderOptions: { + sass: { + prependData: `@import "@/styles/_global.scss";`, + }, }, - chainWebpack: (config) => { - const version = process.env.VUE_APP_VERSION; - config.output - .filename(`js/[name].[hash:8].${version}.js`) - .chunkFilename(`js/[name].[chunkhash:8].${version}.js`); + }, + chainWebpack: (config) => { + const version = process.env.VUE_APP_VERSION; + config.output + .filename(`js/[name].[hash:8].${version}.js`) + .chunkFilename(`js/[name].[chunkhash:8].${version}.js`); + }, + configureWebpack: { + // plugins, + optimization: { + splitChunks: { + chunks: 'async', + minSize: 10000, + maxSize: 250000, + }, }, - configureWebpack: { - // plugins, - optimization: { - splitChunks: { - chunks: 'async', - minSize: 10000, - maxSize: 250000 - } + module: { + rules: [ + { + test: /\.mjs$/, + include: /node_modules/, + type: 'javascript/auto', + }, + { + test: /\.js$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader', + }, }, - module: { - rules: [ - { - test: /\.mjs$/, - include: /node_modules/, - type: "javascript/auto" - }, - { - test: /\.js$/, - exclude: /node_modules/, - use: { - loader: "babel-loader", - }, - }, - { - test: /\.xml$/i, - exclude: /node_modules/, - use: { - loader: "raw-loader" - } - }, - ] - } - } + { + test: /\.xml$/i, + exclude: /node_modules/, + use: { + loader: 'raw-loader', + }, + }, + ], + }, + }, }; From b369b88fef5d50dae39e4f88728468ce972a86cf Mon Sep 17 00:00:00 2001 From: olekkorob Date: Wed, 28 Dec 2022 09:57:35 +0200 Subject: [PATCH 03/21] chore: remove cypress --- web/cypress.config.js | 11 ---- web/package.json | 2 - web/tests/e2e/specs/Warning.spec.js | 19 ------- web/tests/unit/citationConverter.spec.js | 67 ++++++++++++++++++++++++ 4 files changed, 67 insertions(+), 32 deletions(-) delete mode 100644 web/cypress.config.js delete mode 100644 web/tests/e2e/specs/Warning.spec.js create mode 100644 web/tests/unit/citationConverter.spec.js diff --git a/web/cypress.config.js b/web/cypress.config.js deleted file mode 100644 index 95591193c..000000000 --- a/web/cypress.config.js +++ /dev/null @@ -1,11 +0,0 @@ -const { defineConfig } = require('cypress'); - -module.exports = defineConfig({ - e2e: { - setupNodeEvents(on, config) { - // implement node event listeners here - }, - baseUrl: 'http://localhost:8080', - specPattern: 'tests/e2e/specs/*.spec.js', - }, -}); diff --git a/web/package.json b/web/package.json index 2f6413c30..e5be619bd 100644 --- a/web/package.json +++ b/web/package.json @@ -56,7 +56,6 @@ "devDependencies": { "@babel/eslint-parser": "^7.19.1", "@vue/cli-plugin-babel": "~5.0.8", - "@vue/cli-plugin-e2e-cypress": "^5.0.8", "@vue/cli-plugin-eslint": "~5.0.8", "@vue/cli-plugin-router": "~5.0.8", "@vue/cli-plugin-unit-jest": "^5.0.8", @@ -67,7 +66,6 @@ "@vue/vue2-jest": "^27.0.0", "babel-jest": "^27.0.6", "babel-loader": "^9.1.0", - "cypress": "^12.2.0", "eslint": "^7.32.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-vue": "^9.7.0", diff --git a/web/tests/e2e/specs/Warning.spec.js b/web/tests/e2e/specs/Warning.spec.js deleted file mode 100644 index 878145ece..000000000 --- a/web/tests/e2e/specs/Warning.spec.js +++ /dev/null @@ -1,19 +0,0 @@ -import Warning from '../../../src/components/Warning.vue'; - -describe('Warning', () => { - it('should apply passed props values', () => { - const propText = 'Warning Text'; - cy.mount(Warning, { - propsData: { text: propText, align_left: true, animate: true }, - }); - const wrapperSelector = '[data-cy="wrapper"]'; - const textWrapperSelector = '[data-cy="text-wrapper"]'; - cy.get(wrapperSelector) - .should('be.visible') - .should('have.class', 'scale-in-center'); - cy.get(textWrapperSelector) - .should('be.visible') - .should('have.class', 'text-left') - .and('have.text', propText); - }); -}); diff --git a/web/tests/unit/citationConverter.spec.js b/web/tests/unit/citationConverter.spec.js new file mode 100644 index 000000000..eec57f6f8 --- /dev/null +++ b/web/tests/unit/citationConverter.spec.js @@ -0,0 +1,67 @@ +import { formatRIS } from '@/js/citationConverter'; + +describe('CitationConverter test', () => { + const mockData = { + '@context': { + outbreak: 'https://discovery.biothings.io/view/outbreak/', + schema: 'http://schema.org/', + }, + '@type': 'Publication', + _id: 'pmid35460221', + author: [ + { + '@type': 'outbreak:Person', + familyName: 'Sookaromdee', + givenName: 'Pathum', + name: 'Pathum Sookaromdee', + }, + { + '@type': 'outbreak:Person', + familyName: 'Wiwanitkit', + givenName: 'Viroj', + name: 'Viroj Wiwanitkit', + }, + ], + curatedBy: { + '@type': 'schema:WebSite', + curationDate: '2022-08-06', + name: 'litcovid', + url: 'https://www.ncbi.nlm.nih.gov/research/coronavirus/publication/35460221', + }, + date: '2022-08-05', + dateCompleted: '2022-08-05', + dateCreated: '2022-04-24', + dateModified: '2022-08-05', + datePublished: '2022-08-04', + doi: '10.1093/ajcp/aqac050', + identifier: '35460221', + issueNumber: '1943-7722', + journalAbbreviation: 'Am J Clin Pathol', + journalName: 'American journal of clinical pathology', + name: 'Lymphohistiocytic Myocarditis and Moderna mRNA-1273 Vaccine.', + pmid: '35460221', + publicationType: ['Journal Article'], + url: 'https://www.doi.org/10.1093/ajcp/aqac050', + volumeNumber: '158', + }; + const resultMock = + 'TY - JOUR\n' + + 'A1 - Pathum Sookaromdee\n' + + 'A1 - Viroj Wiwanitkit\n' + + 'AN - 35460221\n' + + 'DA - 2022-08-04\n' + + 'DO - 10.1093/ajcp/aqac050\n' + + 'IS - 1943-7722\n' + + 'JO - American journal of clinical pathology\n' + + 'JA - 1943-7722\n' + + 'L2 - https://www.doi.org/10.1093/ajcp/aqac050\n' + + 'UR - https://www.ncbi.nlm.nih.gov/research/coronavirus/publication/35460221\n' + + 'TI - Lymphohistiocytic Myocarditis and Moderna mRNA-1273 Vaccine.\n' + + 'VL - 158\n' + + 'ER - '; + + it('should return proper data with converted format with give data', () => { + const result = formatRIS(mockData); + expect(result).toEqual(resultMock); + }); +}); From bdfec26e73fccf17587ce76add2cf534e72b1b13 Mon Sep 17 00:00:00 2001 From: olekkorob Date: Wed, 28 Dec 2022 10:02:38 +0200 Subject: [PATCH 04/21] chore: add folder in unit --- web/tests/unit/{ => components}/Warning.spec.js | 0 web/tests/unit/{ => js}/citationConverter.spec.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename web/tests/unit/{ => components}/Warning.spec.js (100%) rename web/tests/unit/{ => js}/citationConverter.spec.js (100%) diff --git a/web/tests/unit/Warning.spec.js b/web/tests/unit/components/Warning.spec.js similarity index 100% rename from web/tests/unit/Warning.spec.js rename to web/tests/unit/components/Warning.spec.js diff --git a/web/tests/unit/citationConverter.spec.js b/web/tests/unit/js/citationConverter.spec.js similarity index 100% rename from web/tests/unit/citationConverter.spec.js rename to web/tests/unit/js/citationConverter.spec.js From ac447c88124f67ca6b5325e2fdfc47a9f5ab7e98 Mon Sep 17 00:00:00 2001 From: olekkorob Date: Wed, 28 Dec 2022 10:34:51 +0200 Subject: [PATCH 05/21] chore: update jest config --- web/jest.config.js | 1 + web/src/js/stats.js | 6 +++--- web/tests/unit/js/stats.spec.js | 12 ++++++++++++ 3 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 web/tests/unit/js/stats.spec.js diff --git a/web/jest.config.js b/web/jest.config.js index 31092171b..67fb08f97 100644 --- a/web/jest.config.js +++ b/web/jest.config.js @@ -2,4 +2,5 @@ module.exports = { preset: '@vue/cli-plugin-unit-jest', collectCoverage: true, collectCoverageFrom: ['/src/**/*.vue'], + transformIgnorePatterns: ['!node_modules/'], }; diff --git a/web/src/js/stats.js b/web/src/js/stats.js index d40badf0c..bd0812834 100644 --- a/web/src/js/stats.js +++ b/web/src/js/stats.js @@ -1,4 +1,4 @@ -import { sum } from 'd3-array'; +import { quantile, sum } from 'd3-array'; import { timeDay } from 'd3-time'; import { timeParse } from 'd3-time-format'; @@ -62,8 +62,8 @@ export const calcPrevalence = ( }; export const calcCI = (x, n) => { - const upper = quantile(0.975, x + 0.5, n - x + 0.5); - const lower = quantile(0.025, x + 0.5, n - x + 0.5); + const upper = quantile([0.975], x + 0.5); + const lower = quantile([0.025], x + 0.5); const est = x / n; return { diff --git a/web/tests/unit/js/stats.spec.js b/web/tests/unit/js/stats.spec.js new file mode 100644 index 000000000..d945e7f80 --- /dev/null +++ b/web/tests/unit/js/stats.spec.js @@ -0,0 +1,12 @@ +import { calcCI } from '@/js/stats'; + +describe('Stats js helper', () => { + it('should return calc result', () => { + const result = calcCI(2, 10); + expect(result).toEqual({ + est: 0.2, + lower: 0.025, + upper: 0.975, + }); + }); +}); From 9482347bd3aec0b9c5be9610eebc09a0ad9b38fb Mon Sep 17 00:00:00 2001 From: olekkorob Date: Thu, 29 Dec 2022 01:47:35 +0200 Subject: [PATCH 06/21] feat: add vuex geo test --- web/tests/unit/vuex/geo/mutations.spec.js | 82 +++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 web/tests/unit/vuex/geo/mutations.spec.js diff --git a/web/tests/unit/vuex/geo/mutations.spec.js b/web/tests/unit/vuex/geo/mutations.spec.js new file mode 100644 index 000000000..1da42c410 --- /dev/null +++ b/web/tests/unit/vuex/geo/mutations.spec.js @@ -0,0 +1,82 @@ +import { createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import store from '../../../../src/store'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('geo mutations', () => { + const state = { + allPlaces: [], + regionDict: [ + { + display: false, + displayMore: false, + region: 'East Asia & Pacific: China', + }, + { + display: false, + displayMore: false, + region: 'East Asia & Pacific', + }, + { + display: false, + displayMore: false, + region: 'North America', + }, + { + display: false, + displayMore: false, + region: 'Sub-Saharan Africa', + }, + { + display: false, + displayMore: false, + region: 'Europe & Central Asia', + }, + + { + display: false, + displayMore: false, + region: 'Middle East & North Africa', + }, + + { + display: false, + displayMore: false, + region: 'Latin America & Caribbean', + }, + { + display: false, + displayMore: false, + region: 'South Asia', + }, + { + display: false, + displayMore: false, + region: 'Cruises', + }, + ], + }; + + it('setRegionToolTip', () => { + const payload = { + region: 'North America', + display: true, + displayMore: true, + currentCases: null, + x: 1, + y: 1, + }; + + store.commit('geo/setRegionTooltip', payload); + expect(store.state.geo.regionDict[2]).toEqual({ + display: true, + displayMore: true, + region: 'North America', + currentCases: null, + x: 1, + y: 1, + }); + }); +}); From 17670fd5cb7fbf059bc3050f309b6231bce57f27 Mon Sep 17 00:00:00 2001 From: olekkorob Date: Thu, 29 Dec 2022 05:56:07 +0200 Subject: [PATCH 07/21] feat: add test for getters --- web/tests/unit/vuex/admin/mutations.spec.js | 18 +++++++ web/tests/unit/vuex/colors/getters.spec.js | 47 +++++++++++++++++ web/tests/unit/vuex/colors/mutations.spec.js | 15 ++++++ web/tests/unit/vuex/geo/mutations.spec.js | 53 -------------------- 4 files changed, 80 insertions(+), 53 deletions(-) create mode 100644 web/tests/unit/vuex/admin/mutations.spec.js create mode 100644 web/tests/unit/vuex/colors/getters.spec.js create mode 100644 web/tests/unit/vuex/colors/mutations.spec.js diff --git a/web/tests/unit/vuex/admin/mutations.spec.js b/web/tests/unit/vuex/admin/mutations.spec.js new file mode 100644 index 000000000..d86b5716b --- /dev/null +++ b/web/tests/unit/vuex/admin/mutations.spec.js @@ -0,0 +1,18 @@ +import { createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import store from '../../../../src/store'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('admin mutations test', () => { + it('setLoading: change loading state', () => { + store.commit('admin/setLoading', true); + expect(store.state.admin.loading).toEqual(true); + }); + + it('setReportLoading: change reportLoading state', () => { + store.commit('admin/setReportLoading', true); + expect(store.state.admin.reportloading).toEqual(true); + }); +}); diff --git a/web/tests/unit/vuex/colors/getters.spec.js b/web/tests/unit/vuex/colors/getters.spec.js new file mode 100644 index 000000000..7c047a0fb --- /dev/null +++ b/web/tests/unit/vuex/colors/getters.spec.js @@ -0,0 +1,47 @@ +import { createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import store from '../../../../src/store'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('colors getters', () => { + it('getLightColor', () => { + const payload = ['US']; + store.commit('colors/setLocations', payload); + const result = store.getters['colors/getLightColor']('GBR'); + expect(result).not.toEqual(null); + expect(typeof result).toEqual('object'); + }); + + it('getDarkColor', () => { + const payload = ['US']; + store.commit('colors/setLocations', payload); + const result = store.getters['colors/getDarkColor']('GBR'); + expect(result).not.toEqual(null); + expect(typeof result).toEqual('object'); + }); + + it('getRegionColor', () => { + const result = store.getters['colors/getRegionColor']('North America'); + expect(result).toEqual('#f28e2c'); + }); + + it('getRegionColorFromLocation', () => { + const result = + store.getters['colors/getRegionColorFromLocation']('North America'); + expect(result).not.toEqual(null); + expect(result).toEqual('#f28e2c'); + }); + + it('getRegionColorPalette', () => { + store.commit('colors/setLocations', []); + const result = store.getters['colors/getRegionColorPalette']( + 'North America', + 2, + 1, + ); + expect(result).not.toEqual(null); + expect(typeof result).toEqual('object'); + }); +}); diff --git a/web/tests/unit/vuex/colors/mutations.spec.js b/web/tests/unit/vuex/colors/mutations.spec.js new file mode 100644 index 000000000..f8fef750d --- /dev/null +++ b/web/tests/unit/vuex/colors/mutations.spec.js @@ -0,0 +1,15 @@ +import { createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import store from '../../../../src/store'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('colors mutations', () => { + it('should change state with payload', () => { + const payload = ['US']; + store.commit('colors/setLocations', payload); + expect(store.state.colors.epiLocations).toEqual(payload); + expect(store.state.colors.locationScale).not.toEqual(null); + }); +}); diff --git a/web/tests/unit/vuex/geo/mutations.spec.js b/web/tests/unit/vuex/geo/mutations.spec.js index 1da42c410..8821ad580 100644 --- a/web/tests/unit/vuex/geo/mutations.spec.js +++ b/web/tests/unit/vuex/geo/mutations.spec.js @@ -6,59 +6,6 @@ const localVue = createLocalVue(); localVue.use(Vuex); describe('geo mutations', () => { - const state = { - allPlaces: [], - regionDict: [ - { - display: false, - displayMore: false, - region: 'East Asia & Pacific: China', - }, - { - display: false, - displayMore: false, - region: 'East Asia & Pacific', - }, - { - display: false, - displayMore: false, - region: 'North America', - }, - { - display: false, - displayMore: false, - region: 'Sub-Saharan Africa', - }, - { - display: false, - displayMore: false, - region: 'Europe & Central Asia', - }, - - { - display: false, - displayMore: false, - region: 'Middle East & North Africa', - }, - - { - display: false, - displayMore: false, - region: 'Latin America & Caribbean', - }, - { - display: false, - displayMore: false, - region: 'South Asia', - }, - { - display: false, - displayMore: false, - region: 'Cruises', - }, - ], - }; - it('setRegionToolTip', () => { const payload = { region: 'North America', From b5853ec4b3b566321824a1a3cde09ec506022c2e Mon Sep 17 00:00:00 2001 From: olekkorob Date: Thu, 29 Dec 2022 09:40:04 +0200 Subject: [PATCH 08/21] feat: add router test --- web/tests/unit/router/router.spec.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 web/tests/unit/router/router.spec.js diff --git a/web/tests/unit/router/router.spec.js b/web/tests/unit/router/router.spec.js new file mode 100644 index 000000000..c76395aba --- /dev/null +++ b/web/tests/unit/router/router.spec.js @@ -0,0 +1,24 @@ +import { createLocalVue, mount } from '@vue/test-utils'; +import VueRouter from 'vue-router'; +import router from '@/router'; +import App from '@/App'; +import Home from '@/views/Home'; + +const localVue = createLocalVue(); +localVue.use(VueRouter); + +beforeAll(() => { + jest.spyOn(console, 'error').mockImplementation(jest.fn()); + jest.spyOn(console, 'debug').mockImplementation(jest.fn()); +}); + +describe('Router testing', () => { + it('render home page', async () => { + const wrapper = mount(App, { + localVue, + router, + }); + await router.push('/'); + expect(wrapper.findComponent(Home).exists()).toBe(true); + }); +}); From 79004a296f33d030f3b2499ab3557d8a3b38a83a Mon Sep 17 00:00:00 2001 From: olekkorob Date: Thu, 29 Dec 2022 12:34:53 +0200 Subject: [PATCH 09/21] chore: remove test attribute --- web/src/components/Warning.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/web/src/components/Warning.vue b/web/src/components/Warning.vue index 78a0094e8..452fba05e 100644 --- a/web/src/components/Warning.vue +++ b/web/src/components/Warning.vue @@ -2,11 +2,9 @@

From 46431a1d95469fa957149627ba47d94e033e9f3c Mon Sep 17 00:00:00 2001 From: olekkorob Date: Thu, 12 Jan 2023 09:29:49 +0200 Subject: [PATCH 10/21] update: home, header e2e --- web/.gitignore | 1 + web/cypress.config.js | 11 ++ web/package.json | 2 + web/src/App.vue | 67 ++++++- web/src/views/Home.vue | 3 +- .../e2e}/fixtures/example.json | 0 web/tests/e2e/specs/home/header.cy.js | 184 ++++++++++++++++++ web/tests/e2e/specs/home/home.cy.js | 9 + .../e2e/support/command.js} | 2 +- web/{cypress => tests/e2e}/support/e2e.js | 4 +- 10 files changed, 269 insertions(+), 14 deletions(-) create mode 100644 web/cypress.config.js rename web/{cypress => tests/e2e}/fixtures/example.json (100%) create mode 100644 web/tests/e2e/specs/home/header.cy.js create mode 100644 web/tests/e2e/specs/home/home.cy.js rename web/{cypress/support/commands.js => tests/e2e/support/command.js} (98%) rename web/{cypress => tests/e2e}/support/e2e.js (93%) diff --git a/web/.gitignore b/web/.gitignore index 4583f0f2a..ef5750fa5 100644 --- a/web/.gitignore +++ b/web/.gitignore @@ -2,6 +2,7 @@ node_modules /dist coverage +cypress # local env files .env.local diff --git a/web/cypress.config.js b/web/cypress.config.js new file mode 100644 index 000000000..bb002f166 --- /dev/null +++ b/web/cypress.config.js @@ -0,0 +1,11 @@ +const { defineConfig } = require('cypress'); + +module.exports = defineConfig({ + e2e: { + setupNodeEvents(on, config) { + // implement node event listeners here + }, + baseUrl: 'http://localhost:8080', + specPattern: 'tests/e2e/**/**/*.cy.{js,jsx,ts,tsx}', + }, +}); diff --git a/web/package.json b/web/package.json index e5be619bd..8d48d2a1f 100644 --- a/web/package.json +++ b/web/package.json @@ -56,6 +56,7 @@ "devDependencies": { "@babel/eslint-parser": "^7.19.1", "@vue/cli-plugin-babel": "~5.0.8", + "@vue/cli-plugin-e2e-cypress": "^5.0.8", "@vue/cli-plugin-eslint": "~5.0.8", "@vue/cli-plugin-router": "~5.0.8", "@vue/cli-plugin-unit-jest": "^5.0.8", @@ -66,6 +67,7 @@ "@vue/vue2-jest": "^27.0.0", "babel-jest": "^27.0.6", "babel-loader": "^9.1.0", + "cypress": "^12.3.0", "eslint": "^7.32.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-vue": "^9.7.0", diff --git a/web/src/App.vue b/web/src/App.vue index cd9a80c1d..77a87466a 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -6,6 +6,7 @@