Merge pull request #2064 from usablica/restructure

Restructure the project and public APIs

.github/workflows/nodejs.yml

@@ -17,8 +17,8 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm install
+    - run: npm ci
     - run: npm run build
-    - run: npm test
+    - run: npm run test
       env:
         CI: true

.gitignore

@@ -37,7 +37,7 @@ dist/
 .changelog
 
 # Tests
-tests/cypress/setup/dist
-tests/cypress/videos/
-tests/cypress/snapshots/actual
-tests/cypress/snapshots/diff
+cypress/setup/dist
+cypress/videos/
+cypress/snapshots/actual
+cypress/snapshots/diff

cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "cypress";
+import { configureVisualRegression } from "cypress-visual-regression";
+
+module.exports = defineConfig({
+  trashAssetsBeforeRuns: true,
+  env: {
+    failSilently: false,
+  },
+  e2e: {
+    screenshotsFolder: "./cypress/snapshots/actual",
+    supportFile: "./cypress/support/index.ts",
+    specPattern: "**/*.*cy.*",
+    setupNodeEvents(on, config) {
+      configureVisualRegression(on);
+
+      return config;
+    },
+  },
+});

cypress/plugins/index.ts

@@ -0,0 +1,4 @@
+module.exports = (on, config) => {
+  const getCompareSnapshotsPlugin = require("cypress-visual-regression/dist/plugin");
+  getCompareSnapshotsPlugin(on, config);
+};

tests/cypress/setup/index.html → cypress/setup/index.html

@@ -14,7 +14,8 @@
       crossorigin="anonymous"
     />
 
-    <link href="./dist/introjs.css" rel="stylesheet" />
+    <link href="http://localhost:10001/dist/introjs.css" rel="stylesheet" />
+    <link href="http://host.docker.internal:10001/dist/introjs.css" rel="stylesheet" />
 
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link
@@ -156,7 +157,7 @@ <h2 data-intro="fourth header step" data-hint="secondary header">
           class="pt-3 mt-4 text-muted border-top"
           data-hint="this is the footer"
         >
-          &copy; 2021
+          &copy; YEAR
         </footer>
       </div>
     </main>
@@ -178,6 +179,7 @@ <h2 data-intro="fourth header step" data-hint="secondary header">
         console.log(3);
       };
     </script>
-    <script type="text/javascript" src="./dist/intro.js"></script>
+    <script type="text/javascript" src="http://localhost:10001/dist/intro.js"></script>
+    <script type="text/javascript" src="http://host.docker.internal:10001/dist/intro.js"></script>
   </body>
 </html>

cypress/support/index.d.ts

@@ -0,0 +1,13 @@
+
+declare namespace Cypress {
+  interface Chainable<Subject = any>{
+    nextStep(): Chainable<any>;
+    prevStep(): Chainable<any>;
+  }
+  interface Window {
+    introJs: any;
+    click: () => void;
+    clickRelative: () => void;
+    clickAbsolute: () => void;
+  }
+}

cypress/support/index.ts

@@ -0,0 +1,24 @@
+/// <reference types="./index.d.ts" />
+
+import { addCompareSnapshotCommand } from "cypress-visual-regression/dist/command";
+
+addCompareSnapshotCommand({
+  capture: "fullPage",
+});
+
+Cypress.Commands.add("nextStep", () => {
+  cy.get(".introjs-nextbutton").click();
+});
+
+Cypress.Commands.add("prevStep", () => {
+  cy.get(".introjs-prevbutton").click();
+});
+
+Cypress.on("window:before:load", (win) => {
+  const htmlNode = win.document.querySelector("html");
+  const node = win.document.createElement("style");
+  node.innerHTML = "html { scroll-behavior: inherit !important; }";
+  htmlNode?.appendChild(node);
+});
+
+import "cypress-real-events/support";

jest.config.js

@@ -2,7 +2,7 @@ module.exports = {
   testEnvironment: 'node',
   clearMocks: true,
   setupFilesAfterEnv: ["jest-extended/all"],
-  roots: ["<rootDir>/tests/jest"],
+  roots: ["<rootDir>/tests/jest", "<rootDir>/src"],
   transform: {
     '^.+\\.tsx?$': ['ts-jest', {
       ...require('./tsconfig.test.json')
@@ -17,6 +17,7 @@ module.exports = {
   coverageDirectory: 'coverage',
   collectCoverageFrom: [
     'src/**/*.{ts,tsx,js,jsx}',
+    '!src/**/*.cy.ts',
     '!src/**/*.d.ts',
     '!src/**/*.test.ts',
   ],