Move cypress

.github/workflows/ci.yml

@@ -29,7 +29,7 @@ jobs:
     strategy:
       matrix:
         node: [ '12', '14', '16' ]
-    name: Node ${{ matrix.node }} unit test
+    name: Node ${{ matrix.node }} e2e test
     steps:
       - uses: actions/checkout@v2
       - name: Setup node
@@ -39,7 +39,18 @@ jobs:
           cache: 'npm'
       - run: npm ci
       - run: npm install leaflet@^1.2.0 @mapbox/togeojson@^0.16.0 --no-save
-      - run: npm test
+      - run: npm run e2e
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+            name: cypress-screenshots
+            path: cypress/screenshots
+      # Test run video was always captured, so this action uses "always()" condition
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: cypress-videos
+          path: cypress/videos
 
   publish:
     needs: [lint, test]

cypress.json

@@ -0,0 +1 @@
+{}

cypress/fixtures/example.geojson

@@ -0,0 +1,10 @@
+{
+  "type": "Feature",
+  "geometry": {
+    "type": "Point",
+    "coordinates": [125.6, 10.1]
+  },
+  "properties": {
+    "name": "Dinagat Islands"
+  }
+}

cypress/integration/1-tests/leaflet-filelayer.spec.js

@@ -0,0 +1,43 @@
+/// <reference types="cypress" />
+
+// Welcome to Cypress!
+//
+// This spec file contains a variety of sample tests
+// for a todo list app that are designed to demonstrate
+// the power of writing tests in Cypress.
+//
+// To learn more about how Cypress works and
+// what makes it such an awesome testing tool,
+// please read our getting started guide:
+// https://on.cypress.io/introduction-to-cypress
+
+var _VALID_GEOJSON = {
+  type: 'FeatureCollection',
+  features: [
+    { type: 'Point', coordinates: [0, 0] }
+  ]
+};
+
+describe('example to-do app', () => {
+  beforeEach(() => {
+    // Cypress starts out with a blank slate for each test
+    // so we must tell it to visit our website with the `cy.visit()` command.
+    // Since we want to visit the same URL at the start of all our tests,
+    // we include it in our beforeEach function so that it runs before each test
+    cy.visit('dev/index.html');
+  })
+
+  it('should listen to click once added.', function () {
+    cy.get('a.leaflet-control-filelayer').click().type('{esc}')
+  });
+
+  it('should be able to load several files', function () {
+    cy.get('input.hidden').should('have.attr', 'multiple');
+  });
+
+  it('should add the layer to the map by default', function () {
+    cy.get('input.hidden')
+        .attachFile('example.geojson');
+  });
+
+})

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// 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)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,26 @@
+// ***********************************************
+// 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) => { ... })
+import 'cypress-file-upload';

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// 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'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')