merge branch feature/map-actions

docker-compose.snapshots.update.yml

@@ -3,7 +3,7 @@ services:
     e2e:
         image: cypress/included:8.4.1
         container_name: wisemapping-integration-tests
-        entrypoint: '/bin/sh -c "yarn install && yarn bootstrap && yarn test:integration"'
+        entrypoint: '/bin/sh -c "yarn bootstrap && yarn test:integration"'
         working_dir: /e2e
         environment:
             - CYPRESS_imageSnaphots=true

docker-compose.snapshots.yml

@@ -3,7 +3,7 @@ services:
     e2e:
         image: cypress/included:8.4.1
         container_name: wisemapping-integration-tests
-        entrypoint: '/bin/sh -c "yarn install && yarn bootstrap && yarn test:integration"'
+        entrypoint: '/bin/sh -c "yarn bootstrap && yarn test:integration"'
         working_dir: /e2e
         environment:
             - CYPRESS_imageSnaphots=true

packages/editor/.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ]
+}

packages/editor/.gitignore

@@ -0,0 +1,4 @@
+cypress/screenshots
+cypress/videos
+cypress/downloads
+cypress/snapshots/*/__diff_output__

packages/editor/cypress.json

@@ -0,0 +1,6 @@
+{
+    "video": false,
+    "videoUploadOnPasses": false,
+    "baseUrl": "http://localhost:8081"
+  }
+  

packages/editor/cypress/integration/playground.test.js

@@ -0,0 +1,22 @@
+context('Playground', () => {
+  it('viewmode page should match its snapshot', () => {
+    ['welcome', 'sample1', 'sample2', 'sample3', 'sample4', 'sample5', 'sample6', 'complex', 'img-support', 'icon-sample'].forEach((mapId) => {
+      cy.visit(`/viewmode.html?id=${mapId}`);
+      cy.get('#mindplot.ready').should('exist');
+      cy.matchImageSnapshot(`viewmode-${mapId}`);
+    });
+  });
+  it('the playground container.html page should match its snapshot', () => {
+    cy.visit('/container.html');
+    cy.getIframeBody()
+      .find('#mindplot.ready')
+      .should('exist');
+    cy.matchImageSnapshot('container');
+  });
+  it('the playground editor.html page should match its snapshot', () => {
+    cy.visit('/editor.html');
+    cy.get('#mindplot.ready').should('exist');
+    // TODO: why is the editor appearing twice in the snapshot?
+    cy.matchImageSnapshot('editor');
+  });
+});

packages/editor/cypress/plugins/index.js

@@ -0,0 +1,24 @@
+/// <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)
+
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  addMatchImageSnapshotPlugin(on, config);
+};

packages/editor/cypress/support/commands.js

@@ -0,0 +1,24 @@
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+
+// make matchImageSnapshot() call the real implementation only if CYPRESS_imageSnaphots is set
+// otherwise it calls a noop
+if (Cypress.env('imageSnaphots')) {
+  addMatchImageSnapshotCommand({
+    failureThreshold: 0.001,
+    failureThresholdType: 'percent',
+  });
+} else {
+  Cypress.Commands.add(
+    'matchImageSnapshot',
+    {
+      prevSubject: ['optional', 'element', 'window', 'document'],
+    },
+    () => Promise.resolve(),
+  );
+}
+
+// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
+Cypress.Commands.add('getIframeBody', () => cy
+  .get('iframe')
+  .its('0.contentDocument.body').should('not.be.empty')
+  .then(cy.wrap));

packages/editor/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')