ci: cypress init (#776)

.github/workflows/ci.yaml

@@ -1,6 +1,5 @@
-name: Actions
+name: CI
 on:
-  push:
   pull_request:
     branches:
       - dev
@@ -11,15 +10,39 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14]
-
+        node-version: [16]
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
+        cache: 'npm'
     - name: Install Dependencies
       run: npm ci
     - name: Run linters
       run: npm run lint
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 16 ]
+        browser: ['chrome', 'firefox']
+    steps:
+    - uses: actions/checkout@v2
+    - name: Run Cypress
+      uses: cypress-io/github-action@v4
+      with:
+        build: npm run build
+        start: npm start
+        browser: ${{ matrix.browser }}
+    - uses: actions/upload-artifact@master
+      with:
+        name: screenshots
+        path: cypress/screenshots
+        if: failure()
+    - uses: actions/upload-artifact@master
+      with:
+        name: videos
+        path: cypress/videos

.github/workflows/release.yml

@@ -13,7 +13,24 @@ jobs:
           token: ${{ secrets.GH_TOKEN }}
       - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
+          cache: 'npm'
+      - name: Install Dependencies
+        run: npm ci
+      - name: Run Cypress
+        uses: cypress-io/github-action@v2
+        with:
+          build: npm run build
+          start: npm start
+      - uses: actions/upload-artifact@master
+        with:
+          name: screenshots
+          path: cypress/screenshots
+          if: failure()
+      - uses: actions/upload-artifact@master
+        with:
+          name: videos
+          path: cypress/videos
       - name: Semantic Release
         uses: cycjimmy/[email protected]
         env:

.gitignore

@@ -91,4 +91,7 @@ sw.*
 
 # Service worker
 static/sw.js
-cypress/
+
+cypress/downloads
+cypress/screenshots
+cypress/videos

cypress.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config);
+    },
+    specPattern: 'cypress/e2e/**/*.spec.js',
+  },
+  component: {
+    setupNodeEvents(on, config) {},
+    specPattern: 'components/**/*.spec.js',
+  },
+});

cypress/.eslintrc.yaml

@@ -0,0 +1,2 @@
+globals:
+  cy: readonly

cypress/e2e/openworld/load.spec.js

@@ -0,0 +1,43 @@
+describe('Maps', () => {
+  ['poe', 'vallis'].forEach((ow) => {
+    beforeEach(() => {
+      cy.visit(`http://localhost:3000/${ow}/map`);
+      cy.wait(1000);
+    });
+    describe(`${ow} map`, () => {
+      it('should load', () => {
+        const map = cy.get('div.vue2leaflet-map');
+        map.should('exist');
+        cy.get('div.leaflet-control-zoom').should('exist');
+        cy.get('div.leaflet-control-layers').should('exist');
+        cy.get('div.leaflet-pane.leaflet-map-pane').should('exist');
+      });
+    });
+  });
+});
+describe('Fish', () => {
+  ['poe', 'vallis', 'deimos'].forEach((ow) => {
+    beforeEach(() => {
+      cy.visit(`http://localhost:3000/${ow}/fish`);
+      cy.wait(1000);
+    });
+    describe(`${ow} fish data`, () => {
+      it('should load', () => {
+        const table = cy.get('div.fish-info');
+        table.should('exist');
+        const rowtypes = table.find('[role=rowgroup]');
+        rowtypes.should('have.length', 2);
+        const head = rowtypes.get('thead');
+        head.should('exist');
+
+        const rows = rowtypes.get('tbody');
+        rows.should('exist');
+        rows.children().should('have.length.gt', 10);
+
+        const first = rows.children().get('tr:nth-of-type(1)');
+        first.should('exist');
+        first.children().should('have.length.gt', 13);
+      });
+    });
+  });
+});

cypress/e2e/synthesis/load.spec.js

@@ -0,0 +1,11 @@
+describe('Synthesis', () => {
+  beforeEach(() => {
+    cy.visit(`http://localhost:3000/synthesis`);
+    cy.wait(1000);
+  });
+  it('should load', () => {
+    const searchBox = cy.get('input#filterInput');
+    searchBox.should('exist');
+    searchBox.siblings('.input-group-append').find('.btn').should('have.text', 'Clear');
+  });
+});

cypress/e2e/timers/load.spec.js

@@ -0,0 +1,33 @@
+describe('Timers', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/');
+    cy.wait(1000);
+  });
+  describe('Fissures', () => {
+    it('should load', () => {
+      const fissures = cy.get('div.fissures');
+      fissures.children().should('have.length', 2);
+    });
+  });
+  describe('Nightwave', () => {
+    it('should load', () => {
+      const nightwave = cy.get('div.nightwave');
+      nightwave.children().should('have.length', 2);
+    });
+  });
+  describe('Sortie', () => {
+    it('should load', () => {
+      const sortie = cy.get('div.sortie');
+      sortie.children().should('have.length', 2);
+    });
+  });
+  describe('Bounties', () => {
+    it('should load', () => {
+      const bounties = cy.get('div.bounties');
+      bounties.should('have.length', 3);
+      bounties.each((bountyPanel) => {
+        expect(bountyPanel.children()).to.have.length(2);
+      });
+    });
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,12 @@
+const { startDevServer } = require('@cypress/webpack-dev-server');
+const { getWebpackConfig } = require('nuxt');
+
+module.exports = (on, config) => {
+  on('dev-server:start', async (options) => {
+    const webpackConfig = await getWebpackConfig();
+    return startDevServer({
+      options,
+      webpackConfig,
+    });
+  });
+};

cypress/support/e2e.js

@@ -0,0 +1 @@
+import './commands';