test(*): add cypress and e2e tests

.github/workflows/e2e.yml

@@ -0,0 +1,18 @@
+name: End-to-end tests
+on: push
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Install npm dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2.2.1
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+            build: pnpm build
+            start: pnpm preview --port 5173
+            browser: chrome

.github/workflows/node.js.yml

@@ -5,9 +5,7 @@ name: Node.js CI
 
 on:
   push:
-    branches: [main]
   pull_request:
-    branches: [main]
 
 env:
   NODE_OPTIONS: --max_old_space_size=4096
@@ -28,7 +26,6 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Setup PNPM
-        # uses: pnpm/action-setup@35ab4267a1a21c8e8cb1c087cf1642e891ff57bd
         uses: pnpm/action-setup@v2.2.1
       - run: pnpm install --frozen-lockfile
       - run: pnpm run lint

cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:5173",
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+  component: {
+    devServer: {
+      framework: "svelte",
+      bundler: "vite",
+    },
+  },
+});

cypress/e2e/initial.cy.ts

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+describe("Initial frameworks", () => {
+  it("initial frameworks from scratch", () => {
+    cy.visit("/");
+    cy.get("[data-framework-id-selected-list]").should(
+      "have.attr",
+      "data-framework-id-selected-list",
+      "react,svelte4"
+    );
+  });
+
+  it("initial frameworks from local storage", () => {
+    cy.visit("/", {
+      onBeforeLoad(win) {
+        win.localStorage.setItem("framework_display", '["vue3","svelte4"]');
+      },
+    });
+    cy.get("[data-framework-id-selected-list]").should(
+      "have.attr",
+      "data-framework-id-selected-list",
+      "vue3,svelte4"
+    );
+  });
+});
+
+describe("pages", () => {
+  it("compare page", () => {
+    cy.visit("/compare/vue2-vs-vue3");
+    cy.get("[data-framework-id-selected-list]").should(
+      "have.attr",
+      "data-framework-id-selected-list",
+      "vue2,vue3"
+    );
+  });
+});

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/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts 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) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts 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')

package.json

@@ -15,13 +15,15 @@
     "format:check": "prettier --ignore-path .gitignore --plugin-search-dir=. . --check",
     "build:content": "node scripts/generateContent.js",
     "build:progress": "node scripts/generateReadMeProgress.js",
-    "prepare": "husky"
+    "prepare": "husky",
+    "cy:open-e2e": "cypress open --e2e --browser chrome",
+    "cy:open-unit": "cypress open --component --browser chrome",
+    "cy:run-e2e": "cypress run --e2e",
+    "cy:e2e": "start-server-and-test dev http-get://localhost:5173 cy:open-e2e"
   },
   "dependencies": {
-    "@lit/context": "^1.1.0",
     "@veljs/svelte": "^0.1.11",
     "classnames": "^2.5.1",
-    "eslint-plugin-svelte": "^2.35.1",
     "heroiconsvelte": "^1.0.2",
     "radix3": "^1.1.0"
   },
@@ -35,6 +37,7 @@
     "@babel/eslint-parser": "^7.23.10",
     "@babel/plugin-proposal-decorators": "^7.24.0",
     "@builder.io/qwik": "^1.4.5",
+    "@lit/context": "^1.1.0",
     "@matschik/lz-string": "^0.0.2",
     "@stefanprobst/remark-shiki": "^2.2.1",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
@@ -46,6 +49,7 @@
     "autoprefixer": "^10.4.18",
     "chokidar": "^3.6.0",
     "codesandbox": "^2.2.3",
+    "cypress": "^13.6.6",
     "eslint": "^8.57.0",
     "eslint-plugin-ember": "^12.0.2",
     "eslint-plugin-lit": "^1.11.0",
@@ -53,6 +57,7 @@
     "eslint-plugin-qwik": "^1.4.5",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-solid": "^0.13.1",
+    "eslint-plugin-svelte": "^2.35.1",
     "eslint-plugin-vue": "^9.22.0",
     "esm": "^3.2.25",
     "eta": "^3.2.0",
@@ -75,6 +80,7 @@
     "remark-rehype": "^11.1.0",
     "shiki": "^0.14.7",
     "solid-js": "^1.8.15",
+    "start-server-and-test": "^2.0.3",
     "svelte": "^4.2.12",
     "svelte-preprocess": "^5.1.3",
     "tailwindcss": "^3.4.1",

src/Index.svelte

@@ -203,6 +203,7 @@
   <div class="pb-8 w-10 grow">
     <div
       class="flex px-6 lg:px-20 py-2 sticky top-0 z-20 w-full backdrop-blur bg-gray-900/80 border-b border-gray-700 whitespace-nowrap overflow-x-auto"
+      data-framework-id-selected-list={[...frameworkIdsSelected].join(",")}
     >
       {#each [...frameworksSelected, ...frameworksNotSelected] as framework (framework.id)}
         <button

tsconfig.json

@@ -4,7 +4,6 @@
     "allowJs": true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
-    "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,