Convert the library to use Signals and reactive elements

cypress.config.ts

@@ -2,9 +2,10 @@ import { defineConfig } from "cypress";
 import { configureVisualRegression } from "cypress-visual-regression";
 
 module.exports = defineConfig({
+  viewportWidth: 1000,
   trashAssetsBeforeRuns: true,
   env: {
-    failSilently: false,
+    visualRegressionFailSilently: false,
   },
   e2e: {
     screenshotsFolder: "./cypress/snapshots/actual",

cypress/setup/index.html

@@ -14,15 +14,15 @@
       crossorigin="anonymous"
     />
 
-    <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
       href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
       rel="stylesheet"
     />
 
+    <link href="http://localhost:10001/dist/introjs.css" rel="stylesheet" />
+    <link href="http://host.docker.internal:10001/dist/introjs.css" rel="stylesheet" />
+
     <style type="text/css">
       body,
       h1,
@@ -157,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; YEAR
+          &copy; 2021
         </footer>
       </div>
     </main>

cypress/support/index.ts

@@ -4,6 +4,7 @@ import { addCompareSnapshotCommand } from "cypress-visual-regression/dist/comman
 
 addCompareSnapshotCommand({
   capture: "fullPage",
+  errorThreshold: 0.09
 });
 
 Cypress.Commands.add("nextStep", () => {

package.json

@@ -26,7 +26,7 @@
     "test:prettier": "prettier --check '(src|tests)/**/*.(js|ts|json|html)' '!tests/cypress/setup/dist'",
     "test:watch": "jest --watch",
     "test:jest": "jest --coverage --silent --ci --coverage --coverageReporters=\"text\" --coverageReporters=\"text-summary\"",
-    "test:cypress": "start-server-and-test dev http://localhost:10001/dist/intro.js 'docker run -it -v $PWD:/e2e -w /e2e --entrypoint=cypress cypress/included run --env type=regression || cypress run --env type=regression'",
+    "test:cypress": "start-server-and-test dev http://localhost:10001/dist/intro.js 'docker run -it -v $PWD:/e2e -w /e2e --entrypoint=cypress cypress/included run --env visualRegressionType=regression || cypress run --env visualRegressionType=regression'",
     "release": "./bin/release.sh || true",
     "prebuild": "rimraf ./dist",
     "build": "rollup -c",
@@ -48,7 +48,7 @@
     "core-js": "^3.6.5",
     "cypress": "^13.12.0",
     "cypress-real-events": "^1.13.0",
-    "cypress-visual-regression": "^5.0.2",
+    "cypress-visual-regression": "^5.2.1",
     "eslint": "^8.0.1",
     "jest": "^29.5.0",
     "jest-extended": "^3.2.4",