Feature/ci cd

.gitignore

@@ -18,3 +18,7 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+
+# Cypress e2e
+test/cypress/videos
+test/cypress/screenshots

.gitlab-ci.yml

+# https://about.gitlab.com/2017/09/12/vuejs-app-gitlab/
+cache:
+  key: ${CI_COMMIT_REF_SLUG}
+  paths:
+    - node_modules/
+
+before_script:
+  - yarn install
+  - yarn global add @quasar/cli
+
+build site:
+  image: node:12
+  stage: build
+  script:
+    - quasar build -m pwa
+  artifacts:
+    expire_in: 1 week
+    paths:
+      - dist/pwa
+
+e2e-cypress test:
+  image: node:12
+  stage: test
+  script:
+    - apt-get update
+    - apt-get install -y xvfb libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
+    - yarn install
+    - yarn global add @quasar/cli
+    - yarn global add cypress
+    - cypress install
+    - quasar test --e2e cypress

cypress.json

+{
+  "baseUrl": "http://localhost:8080/",
+  "fixturesFolder": "test/cypress/fixtures",
+  "integrationFolder": "test/cypress/integration",
+  "pluginsFile": "test/cypress/plugins/index.js",
+  "screenshotsFolder": "test/cypress/screenshots",
+  "supportFile": "test/cypress/support/index.js",
+  "videosFolder": "test/cypress/videos",
+  "video": true,
+  "json.schemas": [
+    {
+      "fileMatch": [
+        "cypress.json"
+      ],
+      "url": "https://on.cypress.io/cypress.schema.json"
+    }
+  ]
+}

package.json

@@ -8,7 +8,9 @@
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.vue src",
-    "test": "echo \"No test specified\" && exit 0"
+    "test": "echo \"No test specified\" && exit 0",
+    "test:e2e": "cypress open",
+    "test:e2e:CI": "cypress run"
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
@@ -19,6 +21,10 @@
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0",
+    "@quasar/quasar-app-extension-testing": "^1.0.0",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^1.0.0-beta.10",
+    "@quasar/quasar-app-extension-testing-security": "^1.0.0-alpha.8",
+    "@quasar/quasar-app-extension-testing-security-antivuln": "^1.0.0-alpha.1",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.10.0",

quasar.extensions.json

+{
+  "@quasar/testing": {
+    "harnesses": [
+      "e2e-cypress",
+      "e2e-webdriver",
+      "quality",
+      "security",
+      "security-antivuln"
+    ]
+  },
+  "@quasar/testing-e2e-cypress": {
+    "options": [
+      "scripts"
+    ]
+  },
+  "@quasar/testing-security": {
+    "options": [
+      "zap_local"
+    ],
+    "zapbrowser": "Chrome"
+  },
+  "@quasar/testing-security-antivuln": {
+    "options": [
+      "runOnBuild"
+    ]
+  }
+}

quasar.testing.json

+{
+  "e2e-cypress": {
+    "runnerCommand": "cypress run --config baseUrl=${serverUrl}"
+  },
+  "security-antivuln": {
+    "runnerCommand": "script:../../security-antivuln/src/runner.js"
+  }
+}
\ No newline at end of file

src-pwa/custom-service-worker.js

+/*
+ * This file (which will be your service worker)
+ * is picked up by the build system ONLY if
+ * quasar.conf > pwa > workboxPluginMode is set to "InjectManifest"
+ */

src-pwa/register-service-worker.js

+import { register } from 'register-service-worker'
+
+// The ready(), registered(), cached(), updatefound() and updated()
+// events passes a ServiceWorkerRegistration instance in their arguments.
+// ServiceWorkerRegistration: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
+
+register(process.env.SERVICE_WORKER_FILE, {
+  // The registrationOptions object will be passed as the second argument
+  // to ServiceWorkerContainer.register()
+  // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#Parameter
+
+  // registrationOptions: { scope: './' },
+
+  ready () {
+    console.log('App is being served from cache by a service worker.')
+  },
+
+  registered (registration) {
+    console.log('Service worker has been registered.')
+  },
+
+  cached (registration) {
+    console.log('Content has been cached for offline use.')
+  },
+
+  updatefound (registration) {
+    console.log('New content is downloading.')
+  },
+
+  updated (registration) {
+    console.log('New content is available; please refresh.')
+  },
+
+  offline () {
+    console.log('No internet connection found. App is running in offline mode.')
+  },
+
+  error (err) {
+    console.error('Error during service worker registration:', err)
+  }
+})

test/cypress/fixtures/example.json

+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
\ No newline at end of file

test/cypress/integration/home/init.spec.js

+import * as ctx from  '../../../../quasar.conf.js'
+
+describe('Landing', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+  it('.should() - assert that <title> is correct', () => {
+    cy.title().should('include', 'MAT2')
+  })
+})
+
+// describe('Home page tests', () => {
+//   beforeEach(() => {
+//     cy.visit('/');
+//   });
+//   it('has pretty background', () => {
+//     cy.get('.landing-wrapper')
+//       .should('have.css', 'background').and('match', /(".+(\/img\/background).+\.png)/);
+//   });
+//   it('has pretty logo', () => {
+//     cy.get('.landing-wrapper img')
+//       .should('have.class', 'logo-main')
+//       .and('have.attr', 'src')
+//       .and('match', /^(data:image\/svg\+xml).+/);
+//   });
+//   it('has very important information', () => {
+//     cy.get('.instruction-wrapper')
+//       .should('contain', 'SETUP INSTRUCTIONS')
+//       .and('contain', 'Configure Authentication')
+//       .and('contain', 'Database Configuration and CRUD operations')
+//       .and('contain', 'Continuous Integration & Continuous Deployment CI/CD');
+//   });
+// });

test/cypress/plugins/index.js

+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+// cypress/plugins/index.js
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  // console.log(config); // see what all is in here!
+
+
+  // Chrome:: Hack for shaking AUT. Cypress Issue: https://github.com/cypress-io/cypress/issues/1620
+  on('before:browser:launch', (browser = {}, args) => {
+    if (browser.name === 'chrome') {
+      args.push('--disable-blink-features=RootLayerScrolling');
+      return args;
+    }
+    return true;
+  });
+};

test/cypress/support/commands.js

+// ***********************************************
+// 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
+// ***********************************************
+//
+//
+
+// these two commands let you persist local storage between tests
+const LOCAL_STORAGE_MEMORY = {}
+
+Cypress.Commands.add('saveLocalStorage', () => {
+  Object.keys(localStorage).forEach((key) => {
+    LOCAL_STORAGE_MEMORY[key] = localStorage[key]
+  })
+})
+
+Cypress.Commands.add('restoreLocalStorage', () => {
+  Object.keys(LOCAL_STORAGE_MEMORY).forEach((key) => {
+    localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key])
+  })
+})
+
+// CHAINABLE QUASAR INPUT FIELD TYPES
+// usage:
+//
+// cy.get('[data-cy=target-element]').quasar('text', '');
+//
+// todo: make sure that this is still compliant with 1.0
+//
+Cypress.Commands.add('testRoute', (route) => {
+    cy.location().should((loc) => {
+      expect(loc.hash).to.contain(route)
+    })
+})
+
+Cypress.Commands.add('quasar', { prevSubject: 'element' }, (subject, mode, option) => {
+  if (mode === 'select') {
+    cy.wrap(subject)
+      .invoke('show')
+      .click({ force: true })
+      .then(() => {
+        cy.get('.q-popover')
+          .contains(option)
+          .click()
+      })
+  } else if (mode === 'grid') {
+    cy.wrap(subject).within(() => {
+      cy.get('input').click({ force: true, multiple: true });
+    })
+  } else if (mode === 'tag-list') {
+    Object.keys(option)
+    .forEach((x) => {
+      cy.wrap(subject)
+        .within(() => {
+          cy.get('input')
+            .first()
+            .type(`${option[x]}{enter}`)
+      })
+    })
+  } else {
+    cy.wrap(subject)
+      .invoke('show')
+      .within(($subject) => { // eslint-disable-line
+        switch (mode) {
+          case 'date':
+          case 'text':
+          case 'email':
+            cy.get('input:first')
+              .type(option)
+              .should('have.value', option)
+            break;
+          case 'radio':
+          case 'checkbox':
+            cy.contains(option)
+              .click()
+            break
+          default:
+            break
+        }
+    })
+  }
+})
+
+// Cypress.Commands.add('loadStore', () => {});
+//
+//
+// -- 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 is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

test/cypress/support/index.js

+// ***********************************************************
+// This example support/index.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'
+
+const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/
+
+Cypress.on('uncaught:exception', (err) => {
+  if (resizeObserverLoopErrRe.test(err.message)) {
+    // returning false here prevents Cypress from
+    // failing the test
+    return false
+  }
+})