Add e2e test

.gitattributes

@@ -1,3 +1,4 @@
 # We'll let Git's auto-detection algorithm infer if a file is text. If it is,
 # enforce LF line endings regardless of OS or git configurations.
-* text=auto eol=lf
+* text=auto eol=lf
+e2e/fixtures/** filter=lfs diff=lfs merge=lfs -text

.github/workflows/e2e.yml

@@ -0,0 +1,53 @@
+name: End-to-end tests
+on: [push]
+
+jobs:
+  e2e:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        lfs: true
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: pnpm
+    - name: Install dependencies
+      run: pnpm i
+    - name: Build
+      run: npm run build
+
+    - name: Run Cypress Tests
+      uses: cypress-io/github-action@v5
+      with:
+        start: npm run e2e:demo
+        wait-on: 'http://localhost:5175'
+        wait-on-timeout: 120 
+        browser: chrome
+    - name: Upload Diff
+      if: failure()
+      uses: actions/upload-artifact@v3
+      with:
+        name: cypress-diff
+        path: e2e/diff/
+    - name: Upload Origin
+      if: failure()
+      uses: actions/upload-artifact@v3
+      with:
+        name: cypress-origin
+        path: e2e/fixtures/originImage
+    - name: Upload Screenshots
+      if: failure()
+      uses: actions/upload-artifact@v3
+      with:
+        name: cypress-screenshots
+        path: e2e/screenshots/

.gitignore

@@ -7,6 +7,7 @@ tmp
 /packages/*/types
 /packages/*/doc
 /tests/node_modules
+/e2e/node_modules
 /playground/node_modules
 types
 /packages/*/test/fixtures/**/node_modules
@@ -25,3 +26,7 @@ stats.html
 tsconfig.tsbuildinfo
 api
 yarn.lock
+e2e/videos/*
+e2e/screenshots/*
+e2e/diff/*
+e2e/.dev/mpa

.husky/post-checkout

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-checkout'.\n"; exit 2; }
+git lfs post-checkout "$@"

.husky/post-commit

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-commit'.\n"; exit 2; }
+git lfs post-commit "$@"

.husky/post-merge

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-merge'.\n"; exit 2; }
+git lfs post-merge "$@"

.husky/pre-push

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/pre-push'.\n"; exit 2; }
+git lfs pre-push "$@"

cypress.config.ts

@@ -0,0 +1,71 @@
+import { defineConfig } from "cypress";
+import { compare } from "odiff-bin";
+
+const path = require("path");
+const fs = require("fs-extra");
+
+const downloadDirectory = path.join(__dirname, "e2e/downloads");
+let isRunningInCommandLine = false;
+export default defineConfig({
+  e2e: {
+    viewportWidth: 1200,
+    viewportHeight: 800,
+    baseUrl: "http://localhost:5175",
+    defaultCommandTimeout: 60000,
+    fileServerFolder: "e2e",
+    supportFile: "e2e/support/e2e.ts",
+    fixturesFolder: "e2e/fixtures",
+    screenshotsFolder: "e2e/screenshots",
+    videosFolder: "e2e/videos",
+    specPattern: "e2e/tests/*.cy.ts",
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      on("before:browser:launch", (browser, launchOptions) => {
+        console.log("launching browser %s is headless? %s", browser.name, browser.isHeadless);
+        // supply the absolute path to an unpacked extension's folder
+        // NOTE: extensions cannot be loaded in headless Chrome
+        if (fs.existsSync("e2e/diff")) {
+          fs.rmdirSync("e2e/diff", { recursive: true });
+        }
+        if (browser.name === "chrome") {
+          launchOptions.preferences.default["download"] = {
+            default_directory: downloadDirectory
+          };
+        }
+        if (browser.isHeadless) {
+          isRunningInCommandLine = true;
+        }
+        launchOptions.args.push("--force-device-scale-factor=1");
+        return launchOptions;
+      }),
+        on("task", {
+          async compare({ fileName, options }) {
+            fileName += ".png";
+            const baseFolder = "e2e/fixtures/originImage/";
+            const newFolder = path.join("e2e/screenshots", isRunningInCommandLine ? options.specFolder : "");
+            const diffFolder = path.join("e2e/diff", options.specFolder);
+            if (!fs.existsSync(diffFolder)) {
+              fs.mkdirSync(diffFolder, { recursive: true });
+            }
+            const baseImage = path.join(baseFolder, fileName);
+            const newImage = path.join(newFolder, fileName);
+            const diffImage = path.join(diffFolder, fileName);
+            console.log("comparing base image %s to the new image %s", baseImage, newImage);
+            if (options) {
+              console.log("odiff options %o", options);
+            }
+            const started = +new Date();
+
+            const result = await compare(baseImage, newImage, diffImage, options);
+            const finished = +new Date();
+            const elapsed = finished - started;
+            console.log("odiff took %dms", elapsed);
+
+            console.log(result);
+            return result;
+          }
+        });
+    }
+  },
+  chromeWebSecurity: false
+});

e2e/.dev/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Galacean Demo</title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="header">
+        <a class="logo" href="https://galacean.antgroup.com/" target="Home">
+          <img
+            src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*ppQsSphM7uUAAAAAAAAAAAAADtKFAQ/original"
+            alt=""
+          />
+          <span> Galacean </span>
+        </a>
+      </div>
+      <input
+        placeholder="search..."
+        class="search-bar"
+        id="searchBar"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+      <div class="nav-left">
+        <div class="item-list" id="itemList"></div>
+      </div>
+
+      <div class="nav-right">
+        <iframe id="iframe" allowfullscreen src="" frameborder="0"></iframe>
+      </div>
+    </div>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>

e2e/.dev/index.js

@@ -0,0 +1,76 @@
+import './index.sass';
+import demoList from './mpa/.demoList.json';
+const itemListDOM = document.getElementById('itemList');
+const searchBarDOM = document.getElementById('searchBar');
+const iframe = document.getElementById('iframe');
+const items = []; // itemDOM,label
+
+Object.keys(demoList).forEach((group) => {
+  const demos = demoList[group];
+  const groupDOM = document.createElement('div');
+  const demosDOM = document.createElement('ul');
+  itemListDOM.appendChild(groupDOM);
+  groupDOM.appendChild(demosDOM);
+
+  demos.forEach((item) => {
+    const { label, src } = item;
+    const itemDOM = document.createElement('a');
+
+    itemDOM.innerHTML = src;
+    itemDOM.title = `${src}`;
+    itemDOM.onclick = function () {
+      clickItem(itemDOM);
+    };
+    demosDOM.appendChild(itemDOM);
+
+    items.push({
+      itemDOM,
+      label,
+      src,
+    });
+  });
+});
+
+searchBarDOM.oninput = () => {
+  updateFilter(searchBar.value);
+};
+
+function updateFilter(value) {
+  const reg = new RegExp(value, 'i');
+
+  items.forEach(({ itemDOM, label, src }) => {
+    reg.lastIndex = 0;
+    if (reg.test(label) || reg.test(src)) {
+      itemDOM.classList.remove('hide');
+    } else {
+      itemDOM.classList.add('hide');
+    }
+  });
+}
+
+function clickItem(itemDOM) {
+  window.location.hash = `#mpa/${itemDOM.title}`;
+}
+
+function onHashChange() {
+  const hashPath = window.location.hash.split('#')[1];
+  if (!hashPath) {
+    clickItem(items[0].itemDOM);
+    return;
+  }
+  iframe.src = hashPath + '.html';
+
+  items.forEach(({ itemDOM }) => {
+    const itemPath = `mpa/${itemDOM.title}`;
+    if (itemPath === hashPath) {
+      itemDOM.classList.add('active');
+    } else {
+      itemDOM.classList.remove('active');
+    }
+  });
+}
+
+window.onhashchange = onHashChange;
+
+// init
+onHashChange();

e2e/.dev/index.sass

@@ -0,0 +1,97 @@
+$header-height: 3.5rem
+$header-padding: 1rem
+$container-gap: 2rem
+$transition-duration: 0.5s
+
+*
+    box-sizing: border-box
+
+html, body
+    margin: 0
+    width: 100%
+    height: 100%
+    overflow: hidden
+
+body
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif
+    font-size: 16px
+
+a
+    text-decoration: none
+    color: inherit
+    display: inline-block
+
+.container
+    display: flex
+    height: 100%
+    user-select: none
+    .header
+        position: absolute
+        top: 0
+        left: 0
+        height: $header-height
+        padding: $header-padding $container-gap
+        .logo
+            height: $header-height - 2 * $header-padding
+            display: flex
+            align-items: center
+            img
+                height: 100%
+            span
+                font-weight: bold
+                padding-left: 10px
+                font-size: 1.2em
+    .search-bar
+        position: absolute
+        top: $header-height
+        left: 1rem
+        padding: $header-padding $container-gap
+        background: #fff url("//gw-office.alipayobjects.com/basement_prod/225a73b9-1281-4388-9555-1e671899bc25.svg") .6rem .55rem no-repeat
+        cursor: text
+        width: 10rem
+        height: 2rem
+        color: #666
+        display: inline-block
+        border: 1px solid #ccc
+        border-radius: 2rem
+        font-size: .9rem
+        line-height: 2rem
+        outline: none
+    .nav-left
+        display: flex
+        flex-direction: column
+        overflow: auto
+        padding: 1rem $container-gap
+        margin-top: $header-height + 2rem
+
+        .item-list
+            .hide
+                height: 0
+            ul
+                padding-left: 20px
+                margin: 0
+            .title
+                font-weight: bold
+                cursor: default
+                font-size: 1.2em
+            a
+                height: 2rem
+                line-height: 2rem
+                cursor: pointer
+                transition-property: color,height
+                transition-duration: $transition-duration
+                overflow: hidden
+                display: block
+                &.active
+                    text-decoration: underline
+                    color: #096dd9
+                &:hover
+                    color: #096dd9
+
+    .nav-right
+        flex: 1
+        box-shadow: rgb(125 121 121) -2px 0px 8px
+
+        iframe
+            width: 100%
+            height: 100%