Add e2e test (#1656)

* test: 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/HOW_TO_CONTRIBUTE.md

@@ -48,6 +48,8 @@ The following is a set of guidelines for contributing to Galacean. Please spend
 - Clone the Galacean playground repository and write a demo for your change.
 - Write an uint test in the Galacean repository and run `npm run test` to execute the uint test.
 
+- [Write an e2e test](https://github.com/galacean/runtime/wiki/How-to-write-an-e2e-Test-for-runtime) in the Galacean repository and run `npm run e2e` to execute the e2e test.
+
 
 
 ### Submitting a Pull Request
@@ -142,4 +144,4 @@ git pull --ff upstream master
 ## Credits
 
 <br />Thank you to all the people who have already contributed to Galacean!<br />
-<br />// WIP: Contributors
+<br />// WIP: Contributors

.github/workflows/ci.yml

@@ -73,3 +73,53 @@ jobs:
       - name: Upload coverage to Codecov
         run: ./node_modules/.bin/codecov
       - run: curl -s https://codecov.io/bash
+
+  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:case
+        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 "$@"

README.md

@@ -75,6 +75,16 @@ Everyone is welcome to join us! Whether you find a bug, have a great feature req
 
 Make sure to read the [Contributing Guide](.github/HOW_TO_CONTRIBUTE.md) / [贡献指南](https://github.com/galacean/engine/wiki/%E5%A6%82%E4%BD%95%E4%B8%8E%E6%88%91%E4%BB%AC%E5%85%B1%E5%BB%BA-Oasis-%E5%BC%80%E6%BA%90%E4%BA%92%E5%8A%A8%E5%BC%95%E6%93%8E) before submitting changes.
 
+## Clone
+Prerequisites:
+- [git-lfs](https://git-lfs.com/) (Install by official website)
+
+Clone this repository:
+
+```sh
+git clone [email protected]:galacean/runtime.git
+```
+
 ## Build
 
 Prerequisites:

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 Case</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();