Wip bump and migrate tests

service/vue3-client/.eslintrc.cjs

@@ -14,7 +14,7 @@ module.exports = {
       files: [
         'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'
       ],
-      'extends': [
+      extends: [
         'plugin:cypress/recommended'
       ]
     }

service/vue3-client/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

service/vue3-client/cypress.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   e2e: {
-    specPattern: 'cypress/specs/*.{js,jsx,ts,tsx}',
+    specPattern: 'tests/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
     baseUrl: 'http://localhost:4173'
   }
 })

service/vue3-client/cypress/plugins/index.js

@@ -0,0 +1,24 @@
+/* eslint-disable arrow-body-style */
+// https://docs.cypress.io/guides/guides/plugins-guide.html
+
+// if you need a custom webpack configuration you can uncomment the following import
+// and then use the `file:preprocessor` event
+// as explained in the cypress docs
+// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
+
+// /* eslint-disable import/no-extraneous-dependencies, global-require */
+// const webpack = require('@cypress/webpack-preprocessor')
+
+module.exports = (on, config) => {
+  // on('file:preprocessor', webpack({
+  //  webpackOptions: require('@vue/cli-service/webpack.config'),
+  //  watchOptions: {}
+  // }))
+
+  // eslint-disable-next-line global-require
+  require('@cypress/code-coverage/task')(on, config);
+
+  return {
+    ...config,
+  };
+};

service/vue3-client/cypress/specs/.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  extends: [
+    'plugin:cypress/recommended'
+  ],
+  env: {
+    node: true,
+  },
+  rules: {
+    strict: 'off',
+  },
+};

service/vue3-client/cypress/specs/bibliometrics.js

@@ -1,11 +1,10 @@
 /* eslint-disable no-unused-expressions */
 describe('Bibliometrics', () => {
   beforeEach(() => {
-    cy.server();
-    cy.route('**/info/sources', 'fixture:sources.json').as('sources');
-    cy.route('**/info/research-subjects', 'fixture:research-subjects.json').as('researchSubjects');
-    cy.route('**/info/output-types', 'fixture:output-types.json').as('outputTypes');
-    cy.route('POST', '**/bibliometrics', 'fixture:bibliometrics.json').as('bibliometrics');
+    cy.intercept('**/info/sources', { fixture: 'sources.json' }).as('sources');
+    cy.intercept('**/info/research-subjects', { fixture: 'research-subjects.json' }).as('researchSubjects');
+    cy.intercept('**/info/output-types', { fixture: 'output-types.json' }).as('outputTypes');
+    cy.intercept('POST', '**/bibliometrics', { fixture: 'bibliometrics.json' }).as('bibliometrics');
   });
 
   it('displays the view when visiting app root', () => {
@@ -19,39 +18,40 @@ describe('Bibliometrics', () => {
   });
 
   it('enables submit button by default', () => {
+    cy.visit('/bibliometrics');
     cy.get('#submit-btn').should('not.be.disabled');
   });
 
   it('fetches sources by default', () => {
     cy.visit('/bibliometrics');
-    cy.wait('@sources').then((xhr) => {
-      expect(xhr.method).to.eq('GET');
+    cy.wait('@sources').then((interception) => {
+      expect(interception.request.method).to.eq('GET');
     });
     cy.get('#select-source-select').should('be.visible');
   });
 
   it('fetches research-subjects by default', () => {
     cy.visit('/bibliometrics');
-    cy.wait('@researchSubjects').then((xhr) => {
-      expect(xhr.method).to.eq('GET');
+    cy.wait('@researchSubjects').then((interception) => {
+      expect(interception.request.method).to.eq('GET');
     });
     cy.get('#select-subject-select').should('be.visible');
   });
 
   it('fetches output-types by default', () => {
     cy.visit('/bibliometrics');
-    cy.wait('@outputTypes').then((xhr) => {
-      expect(xhr.method).to.eq('GET');
+    cy.wait('@outputTypes').then((interception) => {
+      expect(interception.request.method).to.eq('GET');
     });
     cy.get('#select-output-select').should('be.visible');
   });
 
   it('makes limited post request to bibliometrics api on search', () => {
     cy.visit('/bibliometrics');
     cy.get('#submit-btn').click();
-    cy.wait('@bibliometrics').then((xhr) => {
-      expect(xhr.method).to.eq('POST');
-      expect(xhr.requestBody.limit).to.eq(20);
+    cy.wait('@bibliometrics').then((interception) => {
+      expect(interception.request.method).to.eq('POST');
+      expect(interception.request.body.limit).to.eq(20);
     });
   });
 
@@ -75,14 +75,23 @@ describe('Bibliometrics', () => {
   });
 
   it('clears the year input error and enables submit button', () => {
+    cy.visit('/bibliometrics');
+    cy.get('#year-from')
+      .clear()
+      .type('2020');
+    cy.get('#year-to')
+      .clear()
+      .type('2019')
+      .should('have.attr', 'aria-invalid', 'true');
+    cy.get('.YearPicker .error').should('be.visible');
     cy.get('.YearPicker .error').should('be.visible');
     cy.get('#year-from')
       .clear()
       .type('2020');
     cy.get('#year-to')
       .clear()
       .type('2020');
-    cy.get('.YearPicker .error').should('not.be.visible');
+    cy.get('.YearPicker .error').should('not.exist');
     cy.get('#submit-btn').should('not.be.disabled');
   });
 
@@ -233,14 +242,13 @@ describe('Bibliometrics', () => {
   });
 
   it('prints an error on fetch fail', () => {
-    cy.route({
-      method: 'POST',
-      url: '**/bibliometrics',
-      status: 500,
-      response: {
-        message: 'test error',
+    cy.visit('/bibliometrics');
+    cy.intercept('POST', '**/bibliometrics', {
+      statusCode: 500,
+      body: {
+        name: 'test error',
       },
-    });
+    })
     cy.reload();
     cy.get('#preview-section .error').should('be.visible');
   });

service/vue3-client/cypress/support/index.ts

@@ -0,0 +1,4 @@
+Cypress.on('window:before:load', (win) => {
+  const htmlNode = win.document.querySelector('html');
+  htmlNode.classList.add('cypress-tests');
+});

service/vue3-client/package.json

@@ -48,9 +48,9 @@
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.4.0",
-    "cypress": "^12.14.0",
+    "cypress": "^13.2.0",
     "eslint": "^8.39.0",
-    "eslint-plugin-cypress": "^2.13.3",
+    "eslint-plugin-cypress": "^2.14.0",
     "eslint-plugin-vue": "^9.11.0",
     "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",

service/vue3-client/tests/e2e/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  extends: [
+    'plugin:cypress/recommended'
+  ]
+};

service/vue3-client/tests/e2e/1_mainnav.spec.js

@@ -0,0 +1,72 @@
+// e2e tests requires api services running and at least one source harvested
+
+describe('Main navigation', () => {
+  beforeEach(() => {
+    cy.intercept('**/info/sources', { fixture: 'sources.json' }).as('sources');
+    cy.intercept('**/info/research-subjects', { fixture: 'research-subjects.json' }).as('researchSubjects');
+    cy.intercept('**/info/output-types', { fixture: 'output-types.json' }).as('outputTypes');
+    cy.intercept('**/datastatus', { fixture: 'datastatus.json' }).as('datastatus');
+    cy.intercept('**/datastatus/ssif', { fixture: 'datastatus_ssif.json' }).as('ssif');
+    cy.intercept('**/datastatus/validations', { fixture: 'datastatus_validations.json' }).as('validations');
+  }); 
+
+  it('can navigate to /process', () => {
+    cy.visit('/');
+    cy.get('.MainNav a[href="/process"]')
+      .click();
+    cy.location('pathname', { timeout: 10000 }).should('eq', '/process')
+    cy.get('.Process').should('be.visible');
+    cy.title().should('include', 'Databearbetning')
+  });
+
+  it('can navigate to /classify', () => {
+    cy.visit('/');
+    cy.get('.MainNav a[href="/classify"]')
+      .click();
+    cy.location('pathname', { timeout: 10000 }).should('eq', '/classify')
+    cy.get('.Classify').should('be.visible');
+    cy.title().should('include', 'Ämnesklassificering')
+  });
+
+  it('can navigate to /datastatus', () => {
+    cy.visit('/');
+    cy.get('.MainNav a[href="/datastatus"]')
+      .click();
+    cy.location('pathname', { timeout: 10000 }).should('eq', '/datastatus')
+    cy.get('.Datastatus').should('be.visible');
+    cy.title().should('include', 'Datastatus')
+  });
+
+  it('can navigate to /bibliometrics', () => {
+    cy.visit('/');
+    cy.get('.MainNav a[href="/bibliometrics"]')
+      .click();
+    cy.location('pathname', { timeout: 10000 }).should('eq', '/bibliometrics')
+    cy.get('.Bibliometrics').should('be.visible');
+    cy.title().should('include', 'Bibliometri')
+  });
+
+  it('navigates back', () => {
+    cy.visit('/process');
+      cy.get('.MainNav a[href="/classify"]')
+      .click();
+    cy.go('back');
+    cy.get('.Process')
+      .should('be.visible');
+  });
+
+  it('navigates forward', () => {
+    cy.visit('/process');
+    cy.get('.MainNav a[href="/classify"]')
+    .click();
+    cy.go('back');
+    cy.go('forward');
+    cy.get('.Classify')
+      .should('be.visible');
+  });
+
+  it('displays the 404 page', () => {
+    cy.visit('/test');
+    cy.get('.NotFound').should('exist');
+  });
+});