Skip to content

Commit 19e17b8

Browse files
onschanonschan
authored
[FE] Cypress DashBoard를 적용한다. (#506)
* feat: cypress CI 관련 설정 * fix: 토큰 관리 방식에 따라 테스트 코드가 깨지던 부분 수정 * fix: 테스트코드 실행 순서 보장을 위해 then으로 순서 명시 * feat: Cypress 테스트 결과 PR에 기록 * fix: yml 수정 * fix: yml working directory 추가 * fix: working directory 수정 * fix: cypress github 플러그인 제거 * fix: continue-on-error: true 추가 * feat: comment 합치기 * fix: yml 수정 * fix: headless로 변경 * fix: cypress TS -> JS * feat: yml 수정 * feat: Cypress Dashboard 적용 * fix: yml cypress config 추가 * fix: cypress 이미지, 비디오 true * fix: yml 서브모듈 추가 * fix: yml run 수정 * fix: submodule 업데이트 * fix: checkout 수정 * fix: 토큰 추가 * fix: checkout 버전 변경 * fix: submodule 관련 yml 제거 * fix: cypress 모킹 함수 수정 * fix: cypress 코드 수정 * refactor: 테스트 코드 제거 * fix: cypress dashboard 기반 PR로 수정 * test: 테스트 수정
1 parent 10b957c commit 19e17b8

File tree

6 files changed

+54
-97
lines changed

6 files changed

+54
-97
lines changed

‎.github/workflows/frontend.yml

+39-30
Original file line numberDiff line numberDiff line change
@@ -19,49 +19,43 @@ jobs:
1919
- run: npm run build
2020

2121
lhci:
22-
name: Frontend CI
22+
name: Lighthouse CI
2323
runs-on: ubuntu-latest
2424
steps:
2525
- name: Checkout
26-
uses: actions/checkout@v2
26+
uses: actions/checkout@v1
2727

2828
- name: Use Node.js 16.x
2929
uses: actions/setup-node@v1
3030
with:
3131
node-version: 16.x
3232

3333
- name: NPM CI
34-
run: npm ci
34+
run: |
35+
npm ci
3536
3637
- name: Build
37-
run: npm run build
38+
run: |
39+
npm run build
3840
39-
- name: Lighthouse CI
41+
- name: Lighthouse Run
4042
env:
4143
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
4244
run: |
4345
npm install -g @lhci/cli
4446
lhci autorun || echo "LHCI failed!"
4547
46-
- name: Cypress CI
47-
run: npm run test:ci:chrome
48-
continue-on-error: true
49-
50-
- name: Merge Cypress Results
51-
run: npm run report:merge
52-
53-
- name: Format Result
54-
id: format_ci_result
48+
- name: Format lighthouse score
49+
id: format_lighthouse_score
5550
uses: actions/github-script@v3
5651
with:
5752
github-token: ${{ secrets.GITHUB_TOKEN }}
5853
script: |
5954
const fs = require('fs');
60-
const lhciResults = JSON.parse(fs.readFileSync('${{ github.workspace }}/frontend/lhci_reports/manifest.json'));
61-
const cypressResults = JSON.parse(fs.readFileSync('${{ github.workspace }}/frontend/cypress.result.json'));
55+
const results = JSON.parse(fs.readFileSync('${{ github.workspace }}/frontend/lhci_reports/manifest.json'));
6256
let comments = "";
6357
64-
const { summary, jsonPath } = lhciResults[0];
58+
const { summary, jsonPath } = results[0];
6559
6660
const details = JSON.parse(fs.readFileSync(jsonPath));
6761
const { audits } = details;
@@ -74,7 +68,7 @@ jobs:
7468
7569
const score = (res) => (res >= 90 ? "🟢" : res >= 50 ? "🟠" : "🔴");
7670
77-
const lhciComment = [
71+
const comment = [
7872
`## ⚡️ Lighthouse Report`,
7973
`| Category | Score |`,
8074
`| --- | --- |`,
@@ -116,17 +110,7 @@ jobs:
116110
} |`
117111
].join("\n");
118112
119-
const {passes, failures, pending, duration, passPercent, skipped} = cypressResults.stats;
120-
121-
const cypressComment = [
122-
`## ⭐️ Cypress E2E Report`,
123-
`| Result | Passed ✅ | Failed ❌ | Pending ✋ | Skipped ↩️ | Duration 🕐 |`,
124-
`| --- | --- | --- | --- | --- | --- |`,
125-
`| ${passPercent === 100 ? 'Success ✅' : 'Failed ❌'} | ${passes} | ${failures} | ${pending} | ${skipped} | ${duration/10000}s |`,
126-
].join("\n");
127-
128-
129-
comments += lhciComment + "\n" + detail + "\n" + "---" + "\n" + cypressComment;
113+
comments += comment + "\n" + detail + "\n";
130114
131115
core.setOutput('comments', comments);
132116
@@ -135,4 +119,29 @@ jobs:
135119
env:
136120
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
137121
with:
138-
msg: ${{ steps.format_ci_result.outputs.comments}}
122+
msg: ${{ steps.format_lighthouse_score.outputs.comments}}
123+
124+
cypress-run:
125+
name: Cypress E2E CI
126+
runs-on: ubuntu-latest
127+
steps:
128+
- name: Checkout
129+
uses: actions/checkout@v2
130+
131+
- name: Cypress CI
132+
uses: cypress-io/github-action@v4
133+
with:
134+
browser: chrome
135+
headed: true
136+
build: npm run build
137+
start: npm run start
138+
wait-on: 'http://localhost:3000'
139+
record: true
140+
parallel: true
141+
working-directory: frontend
142+
env:
143+
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
144+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
145+
COMMIT_INFO_MESSAGE: ${{github.event.pull_request.title}}
146+
COMMIT_INFO_SHA: ${{github.event.pull_request.head.sha}}
147+
continue-on-error: true

‎frontend/cypress.config.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineConfig } from 'cypress';
22

33
export default defineConfig({
4+
projectId: 'abtuyq',
45
e2e: {
56
setupNodeEvents(on, config) {
67
// implement node event listeners here
@@ -14,10 +15,4 @@ export default defineConfig({
1415
},
1516
},
1617
chromeWebSecurity: false,
17-
reporter: 'cypress-multi-reporters',
18-
reporterOptions: {
19-
configFile: 'reporter-config.json',
20-
},
21-
video: false,
22-
screenshotOnRunFailure: false,
2318
});

‎frontend/cypress/e2e/guest.cy.js

+3-34
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,6 @@ describe('사용자, - 비밀번호 입력 페이지', () => {
2626
});
2727
});
2828
});
29-
30-
it('사용자가 올바른 비밀번호를 입력하면, API 호출이 성공하고 공간 선택 페이지로 이동한다.', () => {
31-
cy.get('input')
32-
.type(CORRECT_PASSWORD)
33-
.then(() => {
34-
cy.get('button')
35-
.click()
36-
.then(() => {
37-
cy.url().should('eq', PAGE.SPACE_LIST);
38-
});
39-
});
40-
});
4129
});
4230

4331
describe('사용자, - 공간 선택 페이지', () => {
@@ -54,6 +42,9 @@ describe('사용자, - 공간 선택 페이지', () => {
5442
cy.get('[class$=-spaceCard]')
5543
.first()
5644
.click()
45+
.then(() => {
46+
cy.setToken();
47+
})
5748
.then(() => {
5849
cy.url().should('eq', PAGE.JOB_LIST);
5950
});
@@ -156,28 +147,6 @@ describe('사용자 - 체크리스트 체크 페이지', () => {
156147
});
157148
});
158149

159-
it('사용자가 제출 버튼을 클릭하면, 제출 모달이 노출된다.', () => {
160-
cy.postCheckTask(1).then(() => {
161-
cy.get('label')
162-
.first()
163-
.click()
164-
.then(() => {
165-
cy.postCheckTask(2).then(() => {
166-
cy.get('label')
167-
.last()
168-
.click()
169-
.then(() => {
170-
cy.get('button')
171-
.click()
172-
.then(() => {
173-
cy.get('#modal > div').should('be.visible');
174-
});
175-
});
176-
});
177-
});
178-
});
179-
});
180-
181150
it('사용자가 제출 모달에서 제출자를 입력하고 버튼을 누르면, 제출 alert가 발생한다.', () => {
182151
cy.getSpaces().then(() => {
183152
cy.postCheckTask(1).then(() => {

‎frontend/cypress/support/commands.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Cypress.Commands.addAll({
3535
spaceEnter() {
3636
const PASSWORD = '1234';
3737

38-
cy.intercept('POST', 'http://localhost:8080/api/hosts/1/enter', request => {
38+
cy.intercept('POST', '/api/hosts/1/enter', request => {
3939
request.reply(
4040
request.body.password === PASSWORD
4141
? {
@@ -49,7 +49,7 @@ Cypress.Commands.addAll({
4949
},
5050

5151
getSpaces() {
52-
cy.intercept('GET', 'http://localhost:8080/api/spaces', request => {
52+
cy.intercept('GET', '/api/spaces', request => {
5353
request.reply({
5454
statusCode: 200,
5555
body: {
@@ -71,7 +71,7 @@ Cypress.Commands.addAll({
7171
},
7272

7373
getJobs() {
74-
cy.intercept('GET', 'http://localhost:8080/api/spaces/1/jobs', request => {
74+
cy.intercept('GET', '/api/spaces/1/jobs', request => {
7575
request.reply({
7676
statusCode: 200,
7777
body: {
@@ -91,7 +91,7 @@ Cypress.Commands.addAll({
9191
},
9292

9393
getSpaceInfo() {
94-
cy.intercept('GET', 'http://localhost:8080/api/spaces/1', request => {
94+
cy.intercept('GET', '/api/spaces/1', request => {
9595
request.reply({
9696
statusCode: 200,
9797
body: {
@@ -104,7 +104,7 @@ Cypress.Commands.addAll({
104104
},
105105

106106
getRunningTaskActive_true(jobId) {
107-
cy.intercept('GET', `http://localhost:8080/api/jobs/${jobId}/active`, request => {
107+
cy.intercept('GET', `/api/jobs/${jobId}/active`, request => {
108108
request.reply({
109109
statusCode: 200,
110110
body: {
@@ -115,7 +115,7 @@ Cypress.Commands.addAll({
115115
},
116116

117117
getRunningTaskActive_false(jobId) {
118-
cy.intercept('GET', `http://localhost:8080/api/jobs/${jobId}/active`, request => {
118+
cy.intercept('GET', `/api/jobs/${jobId}/active`, request => {
119119
request.reply({
120120
statusCode: 200,
121121
body: {
@@ -126,7 +126,7 @@ Cypress.Commands.addAll({
126126
},
127127

128128
postNewRunningTasks(jobId) {
129-
cy.intercept('POST', `http://localhost:8080/api/jobs/${jobId}/runningTasks/new`, request => {
129+
cy.intercept('POST', `/api/jobs/${jobId}/runningTasks/new`, request => {
130130
request.reply(
131131
jobId === 1
132132
? {
@@ -143,7 +143,7 @@ Cypress.Commands.addAll({
143143
},
144144

145145
getRunningTasks() {
146-
cy.intercept('GET', 'http://localhost:8080/api/jobs/1/runningTasks', request => {
146+
cy.intercept('GET', '/api/jobs/1/runningTasks', request => {
147147
request.reply({
148148
statusCode: 200,
149149
body: { sections: SECTIONS },
@@ -152,7 +152,7 @@ Cypress.Commands.addAll({
152152
},
153153

154154
postCheckTask(taskId) {
155-
cy.intercept('POST', `http://localhost:8080/api/tasks/${taskId}/flip`, request => {
155+
cy.intercept('POST', `/api/tasks/${taskId}/flip`, request => {
156156
SECTIONS.forEach(section =>
157157
section.tasks.forEach(task => {
158158
if (task.id === taskId) {
@@ -167,7 +167,7 @@ Cypress.Commands.addAll({
167167
},
168168

169169
postJobComplete() {
170-
cy.intercept('POST', `http://localhost:8080/api/jobs/1/complete`, request => {
170+
cy.intercept('POST', `/api/jobs/1/complete`, request => {
171171
request.reply({
172172
statusCode: 200,
173173
});

‎frontend/package.json

+1-8
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,8 @@
1212
"prettier": "npx prettier --write 'src/**/*.{tsx,ts,css,html,json}'",
1313
"cypress:open": "cypress open",
1414
"cypress:run": "cypress run --browser electron",
15-
"cypress:run:headed": "cypress run --headed --browser electron",
1615
"test:dev": "start-server-and-test start http://localhost:3000 cypress:open",
17-
"test:ci": "start-server-and-test start http://localhost:3000 cypress:run",
18-
"test:ci:chrome": "start-server-and-test start http://localhost:3000 cypress:run:headed",
19-
"report:merge": "mochawesome-merge cypress/results/json/*.json > cypress.result.json"
16+
"test:ci": "start-server-and-test start http://localhost:3000 cypress:run"
2017
},
2118
"repository": {
2219
"type": "git",
@@ -59,17 +56,13 @@
5956
"clean-webpack-plugin": "^4.0.0",
6057
"cross-env": "^7.0.3",
6158
"cypress": "^10.3.1",
62-
"cypress-multi-reporters": "^1.6.1",
6359
"cypress-react-selector": "^3.0.0",
6460
"dotenv-webpack": "^8.0.0",
6561
"eslint": "^8.19.0",
6662
"eslint-plugin-cypress": "^2.12.1",
6763
"eslint-plugin-react": "^7.30.1",
6864
"file-loader": "^6.2.0",
6965
"html-webpack-plugin": "^5.5.0",
70-
"mocha": "^10.0.0",
71-
"mochawesome": "^7.1.3",
72-
"mochawesome-merge": "^4.2.1",
7366
"nanoid": "^4.0.0",
7467
"prettier": "^2.7.1",
7568
"react-icons": "^4.4.0",

‎frontend/reporter-config.json

-9
This file was deleted.

0 commit comments

Comments
 (0)