Skip to content

Commit 8200bfd

Browse files
luzhuangluzhuang
authored
Add e2e test (#1656)
* test: add e2e test
1 parent 6405edd commit 8200bfd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+2506
-58
lines changed

‎.gitattributes

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

‎.github/HOW_TO_CONTRIBUTE.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ The following is a set of guidelines for contributing to Galacean. Please spend
4848
- Clone the Galacean playground repository and write a demo for your change.
4949
- Write an uint test in the Galacean repository and run `npm run test` to execute the uint test.
5050

51+
- [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.
52+
5153

5254

5355
### Submitting a Pull Request
@@ -142,4 +144,4 @@ git pull --ff upstream master
142144
## Credits
143145

144146
<br />Thank you to all the people who have already contributed to Galacean!<br />
145-
<br />// WIP: Contributors
147+
<br />// WIP: Contributors

‎.github/workflows/ci.yml

+50
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,53 @@ jobs:
7373
- name: Upload coverage to Codecov
7474
run: ./node_modules/.bin/codecov
7575
- run: curl -s https://codecov.io/bash
76+
77+
e2e:
78+
79+
runs-on: ubuntu-latest
80+
81+
strategy:
82+
matrix:
83+
node-version: [16.x]
84+
85+
steps:
86+
- uses: actions/checkout@v3
87+
with:
88+
lfs: true
89+
- name: Install pnpm
90+
uses: pnpm/action-setup@v2
91+
- name: Use Node.js ${{ matrix.node-version }}
92+
uses: actions/setup-node@v3
93+
with:
94+
node-version: ${{ matrix.node-version }}
95+
cache: pnpm
96+
- name: Install dependencies
97+
run: pnpm i
98+
- name: Build
99+
run: npm run build
100+
101+
- name: Run Cypress Tests
102+
uses: cypress-io/github-action@v5
103+
with:
104+
start: npm run e2e:case
105+
wait-on: 'http://localhost:5175'
106+
wait-on-timeout: 120
107+
browser: chrome
108+
- name: Upload Diff
109+
if: failure()
110+
uses: actions/upload-artifact@v3
111+
with:
112+
name: cypress-diff
113+
path: e2e/diff/
114+
- name: Upload Origin
115+
if: failure()
116+
uses: actions/upload-artifact@v3
117+
with:
118+
name: cypress-origin
119+
path: e2e/fixtures/originImage
120+
- name: Upload Screenshots
121+
if: failure()
122+
uses: actions/upload-artifact@v3
123+
with:
124+
name: cypress-screenshots
125+
path: e2e/screenshots/

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ tmp
77
/packages/*/types
88
/packages/*/doc
99
/tests/node_modules
10+
/e2e/node_modules
1011
/playground/node_modules
1112
types
1213
/packages/*/test/fixtures/**/node_modules
@@ -25,3 +26,7 @@ stats.html
2526
tsconfig.tsbuildinfo
2627
api
2728
yarn.lock
29+
e2e/videos/*
30+
e2e/screenshots/*
31+
e2e/diff/*
32+
e2e/.dev/mpa

‎.husky/post-checkout

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#!/bin/sh
2+
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; }
3+
git lfs post-checkout "$@"

‎.husky/post-commit

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#!/bin/sh
2+
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; }
3+
git lfs post-commit "$@"

‎.husky/post-merge

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#!/bin/sh
2+
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; }
3+
git lfs post-merge "$@"

‎.husky/pre-push

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#!/bin/sh
2+
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; }
3+
git lfs pre-push "$@"

‎README.md

+10
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,16 @@ Everyone is welcome to join us! Whether you find a bug, have a great feature req
7575

7676
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.
7777

78+
## Clone
79+
Prerequisites:
80+
- [git-lfs](https://git-lfs.com/) (Install by official website)
81+
82+
Clone this repository:
83+
84+
```sh
85+
git clone git@github.com:galacean/runtime.git
86+
```
87+
7888
## Build
7989

8090
Prerequisites:

‎cypress.config.ts

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { defineConfig } from "cypress";
2+
import { compare } from "odiff-bin";
3+
4+
const path = require("path");
5+
const fs = require("fs-extra");
6+
7+
const downloadDirectory = path.join(__dirname, "e2e/downloads");
8+
let isRunningInCommandLine = false;
9+
export default defineConfig({
10+
e2e: {
11+
viewportWidth: 1200,
12+
viewportHeight: 800,
13+
baseUrl: "http://localhost:5175",
14+
defaultCommandTimeout: 60000,
15+
fileServerFolder: "e2e",
16+
supportFile: "e2e/support/e2e.ts",
17+
fixturesFolder: "e2e/fixtures",
18+
screenshotsFolder: "e2e/screenshots",
19+
videosFolder: "e2e/videos",
20+
specPattern: "e2e/tests/*.cy.ts",
21+
setupNodeEvents(on, config) {
22+
// implement node event listeners here
23+
on("before:browser:launch", (browser, launchOptions) => {
24+
console.log("launching browser %s is headless? %s", browser.name, browser.isHeadless);
25+
// supply the absolute path to an unpacked extension's folder
26+
// NOTE: extensions cannot be loaded in headless Chrome
27+
if (fs.existsSync("e2e/diff")) {
28+
fs.rmdirSync("e2e/diff", { recursive: true });
29+
}
30+
if (browser.name === "chrome") {
31+
launchOptions.preferences.default["download"] = {
32+
default_directory: downloadDirectory
33+
};
34+
}
35+
if (browser.isHeadless) {
36+
isRunningInCommandLine = true;
37+
}
38+
launchOptions.args.push("--force-device-scale-factor=1");
39+
return launchOptions;
40+
}),
41+
on("task", {
42+
async compare({ fileName, options }) {
43+
fileName += ".png";
44+
const baseFolder = "e2e/fixtures/originImage/";
45+
const newFolder = path.join("e2e/screenshots", isRunningInCommandLine ? options.specFolder : "");
46+
const diffFolder = path.join("e2e/diff", options.specFolder);
47+
if (!fs.existsSync(diffFolder)) {
48+
fs.mkdirSync(diffFolder, { recursive: true });
49+
}
50+
const baseImage = path.join(baseFolder, fileName);
51+
const newImage = path.join(newFolder, fileName);
52+
const diffImage = path.join(diffFolder, fileName);
53+
console.log("comparing base image %s to the new image %s", baseImage, newImage);
54+
if (options) {
55+
console.log("odiff options %o", options);
56+
}
57+
const started = +new Date();
58+
59+
const result = await compare(baseImage, newImage, diffImage, options);
60+
const finished = +new Date();
61+
const elapsed = finished - started;
62+
console.log("odiff took %dms", elapsed);
63+
64+
console.log(result);
65+
return result;
66+
}
67+
});
68+
}
69+
},
70+
chromeWebSecurity: false
71+
});

‎e2e/.dev/AlibabaSans.ttf

19.1 KB
Binary file not shown.

‎e2e/.dev/index.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Galacean Case</title>
7+
</head>
8+
9+
<body>
10+
<div class="container">
11+
<div class="header">
12+
<a class="logo" href="https://galacean.antgroup.com/" target="Home">
13+
<img
14+
src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*ppQsSphM7uUAAAAAAAAAAAAADtKFAQ/original"
15+
alt=""
16+
/>
17+
<span> Galacean </span>
18+
</a>
19+
</div>
20+
<input
21+
placeholder="search..."
22+
class="search-bar"
23+
id="searchBar"
24+
autocorrect="off"
25+
autocapitalize="off"
26+
spellcheck="false"
27+
/>
28+
<div class="nav-left">
29+
<div class="item-list" id="itemList"></div>
30+
</div>
31+
32+
<div class="nav-right">
33+
<iframe id="iframe" allowfullscreen src="" frameborder="0"></iframe>
34+
</div>
35+
</div>
36+
37+
<script type="module" src="./index.js"></script>
38+
</body>
39+
</html>

‎e2e/.dev/index.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import './index.sass';
2+
import demoList from './mpa/.demoList.json';
3+
const itemListDOM = document.getElementById('itemList');
4+
const searchBarDOM = document.getElementById('searchBar');
5+
const iframe = document.getElementById('iframe');
6+
const items = []; // itemDOM,label
7+
8+
Object.keys(demoList).forEach((group) => {
9+
const demos = demoList[group];
10+
const groupDOM = document.createElement('div');
11+
const demosDOM = document.createElement('ul');
12+
itemListDOM.appendChild(groupDOM);
13+
groupDOM.appendChild(demosDOM);
14+
15+
demos.forEach((item) => {
16+
const { label, src } = item;
17+
const itemDOM = document.createElement('a');
18+
19+
itemDOM.innerHTML = src;
20+
itemDOM.title = `${src}`;
21+
itemDOM.onclick = function () {
22+
clickItem(itemDOM);
23+
};
24+
demosDOM.appendChild(itemDOM);
25+
26+
items.push({
27+
itemDOM,
28+
label,
29+
src,
30+
});
31+
});
32+
});
33+
34+
searchBarDOM.oninput = () => {
35+
updateFilter(searchBar.value);
36+
};
37+
38+
function updateFilter(value) {
39+
const reg = new RegExp(value, 'i');
40+
41+
items.forEach(({ itemDOM, label, src }) => {
42+
reg.lastIndex = 0;
43+
if (reg.test(label) || reg.test(src)) {
44+
itemDOM.classList.remove('hide');
45+
} else {
46+
itemDOM.classList.add('hide');
47+
}
48+
});
49+
}
50+
51+
function clickItem(itemDOM) {
52+
window.location.hash = `#mpa/${itemDOM.title}`;
53+
}
54+
55+
function onHashChange() {
56+
const hashPath = window.location.hash.split('#')[1];
57+
if (!hashPath) {
58+
clickItem(items[0].itemDOM);
59+
return;
60+
}
61+
iframe.src = hashPath + '.html';
62+
63+
items.forEach(({ itemDOM }) => {
64+
const itemPath = `mpa/${itemDOM.title}`;
65+
if (itemPath === hashPath) {
66+
itemDOM.classList.add('active');
67+
} else {
68+
itemDOM.classList.remove('active');
69+
}
70+
});
71+
}
72+
73+
window.onhashchange = onHashChange;
74+
75+
// init
76+
onHashChange();

0 commit comments

Comments
 (0)