Cypress testing

.vscode/terminals.json

@@ -2,32 +2,31 @@
     "autokill": true,
     "terminals": [
         {
-            "name": "🧪 build-watch",
+            "name": "🧪🔥 Build watch",
             "command": "npm run build-watch"
         },
         {
-            "name": "🧪 prettier-watch",
-            "command": "npm run prettier-watch",
-            "onlySingle": true
+            "name": "🧪🔥 Samples",
+            "command": "node ./samples/_samplesServer.js"
         },
         {
-            "name": "🧪 test-watch",
-            "command": "npm run test-watch",
+            "name": "🧪 Unit tests",
+            "command": "npm run test-unit",
             "onlySingle": true
         },
         {
-            "name": "🧪 Test",
-            "command": "npm run test",
+            "name": "🧪 Integration tests",
+            "command": "npm run test-integration",
             "onlySingle": true
         },
         {
-            "name": "🧪 Lint",
-            "command": "npm run lint",
+            "name": "🧪🔥 Integration tests (interactive)",
+            "command": "npm run test-integration-interactive",
             "onlySingle": true
         },
         {
-            "name": "🧪 Samples",
-            "command": "node ./samples/_samplesServer.js",
+            "name": "🧪 Lint",
+            "command": "npm run lint",
             "onlySingle": true
         },
         {

cypress.json

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

cypress/.gitignore

@@ -0,0 +1,3 @@
+screenshots
+snapshots
+videos

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/forAllImagesInElement.spec.ts

@@ -0,0 +1,38 @@
+import { forAllImagesInElement } from '../../src/functions/forAllImagesInElement';
+
+context('waitasecond samples', () => {
+    /*
+    beforeEach(() => {
+        // TODO: Run server (there is problem with running the express/http here)
+    });
+    */
+
+    const SCREENSHOT_CONFIG: [string, object] = [
+        'forAllImagesInElement',
+        {
+            capture: 'viewport',
+        },
+    ];
+
+    describe('cleanup of elements', () => {
+        it('wait untill all images are load', async () => {
+            cy.visit(`http://localhost:8070/samples/forAllImagesInElement.html`)
+                // Test NOT matchImageSnapshot
+                //.screenshot(...SCREENSHOT_CONFIG)
+                .window()
+                .then(async (window) => {
+                    await forAllImagesInElement(window.document.body);
+                })
+                .wait(1000);
+
+            cy.matchImageSnapshot(...SCREENSHOT_CONFIG);
+            cy.matchImageSnapshot(...SCREENSHOT_CONFIG);
+            /*
+            for (let i = 0; i < 5; i++) {
+                cy.log(`Visit ${i}`);
+                cy.matchImageSnapshot(...SCREENSHOT_CONFIG);
+            }
+            */
+        });
+    });
+});

cypress/plugins/index.ts

@@ -0,0 +1,25 @@
+/// <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)
+
+import { addMatchImageSnapshotPlugin } from '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);
+};

cypress/support/commands.ts

@@ -0,0 +1,8 @@
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+
+addMatchImageSnapshotCommand({
+    failureThreshold: 0.00005, // threshold for entire image
+    failureThresholdType: 'percent', // percent of image or number of pixels
+    customDiffConfig: { threshold: 0.1 }, // threshold for each pixel
+    capture: 'viewport', // capture viewport in screenshot
+});

cypress/support/index.ts

@@ -0,0 +1,16 @@
+// ***********************************************************
+// 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';

cypress/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "declaration": true,
+        "alwaysStrict": true,
+        "forceConsistentCasingInFileNames": true,
+        "lib": ["dom", "es2017"],
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "resolveJsonModule": true,
+        "esModuleInterop": true
+    }
+}