diff --git a/.eslintrc.json b/.eslintrc.json
index 48b77563c..10c183d89 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -13,14 +13,20 @@
"sourceType": "module"
},
"rules": {
+ "no-new": 0,
"no-var": "error",
"max-depth": ["error", 2],
+ "no-alert": 0,
+ "default-case": 0,
"no-console": "warn",
"no-param-reassign": "error",
"no-undefined": 0,
"no-constant-condition": 0,
"no-unused-private-class-members": 0,
+ "class-methods-use-this": 0,
"lines-between-class-members": 0,
- "no-useless-escape": 0
+ "no-useless-escape": 0,
+ "import/no-unresolved": 0,
+ "import/extensions": 0
}
}
diff --git a/README.md b/README.md
index b4241f899..2663d50db 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@
### 데모 페이지
+
[데모 페이지](https://usageness.github.io/javascript-youtube-classroom/)
---
@@ -20,6 +21,8 @@
---
+### Step 1
+
- [x] 메인 화면에서 검색 버튼을 누르면 검색 모달창이 나타난다.
- [x] 유튜브 검색 API를 사용해 내가 보고 싶은 영상들을 검색할 수 있다.
- 엔터키를 눌러 검색할 수 있다.
@@ -34,19 +37,33 @@
- 저장 가능한 최대 동영상의 갯수는 100개이다.
- [x] 이미 저장된 영상이라면 저장 버튼이 보이지 않도록 한다.
+### Step 2
+
+- [x] 가장 처음에는 저장된 영상이 없으므로, 비어있다는 것을 사용자에게 알려주는 상태를 보여준다.
+- [x] 이후 페이지를 방문했을 때 기본 메인 화면은 내가 볼 영상들의 리스트를 보여준다.
+- [x] 영상 카드의 이모지 버튼을 클릭하여 아래와 같은 상태 변경이 가능해야 한다.
+ - ✅ 본 영상으로 체크
+ - 🗑️ 버튼으로 저장된 리스트에서 삭제할 수 있다. (삭제 시 사용자에게 정말 삭제할 것인지 물어봅니다.)
+- [x] 본 영상, 볼 영상 버튼을 눌러 필터링 할 수 있다.
+- [x] 반응형 웹: 유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 변경한다.
+ - 1280px 이상: 4개
+ - 960px이상~1280px 미만: 3개
+ - 600px이상~960px 미만: 2개
+ - 600px 미만: 1개
+
## 테스트 요구사항
---
- [x] 단위 테스트를 Jest로 작성한다.
- [x] E2E 테스트를 Cypress로 작성한다.
+ - 검증이 필요하다고 생각되는 플로우를 1가지 설정하고 이에 대한 검증을 E2E 테스트로 진행한다.
## 배포
---
- [x] 실행 가능한 페이지에 접근할 수 있도록 github page 기능을 이용하고, 해당 링크를 PR과 README에 작성한다.
-- API key를 public repo에 올리지 않은 채로 데모 페이지를 배포하려면, 별도의 설정이 추가로 필요합니다.
## 📝 License
diff --git a/cypress/integration/app.test.js b/cypress/integration/app.test.js
index 840bb2186..cae9f5368 100644
--- a/cypress/integration/app.test.js
+++ b/cypress/integration/app.test.js
@@ -1,35 +1,26 @@
import { ITEMS_PER_REQUEST } from "../../src/js/constants/constants";
-describe("보고싶은 영상 찾기 모달창 전체 로직 테스트", () => {
+describe("나만의 유튜브 강의실 전체 플로우 테스트", () => {
before(() => {
cy.visit("./index.html");
});
const searchKeyword = "xooos";
- const errorSearchKeyword = `\!\@\!\@\$\!\%\@\$\^\%\&\$\^\*\%\!\@\!\$\!\%\&\(\^\*\%\$\!\@!@$$!#@!#)_)&_%^_)&%_^)&_@!@#!#$@#$%$@#^%&$%^&#$@$^#%&$%^$^%*$^&^@#$@#$@#%@#$^#%&^**#^#$%@#$@#$^@#$!$@#%@#$%#$^#$%^$%@#$!@#!@#%)^_&)%_^$%#$%#$^#%^#%^#^&_%^_)&_#$)%_)#_$)%#_$%!@#!@$#$!#@!#)_)&_%^_)&%_^)&_%)^_&)%_^&_%^_)&_#$)%_)#_$)%#_$\%`;
+
+ it("처음 실행하면 저장된 영상이 없다는 안내 문구가 나타난다.", () => {
+ cy.get(".no-result__description").should("be.visible");
+ });
it("초기 화면에서 검색 버튼을 누르면 보고싶은 영상 찾기 모달창이 나타난다.", () => {
cy.openSearchModal();
cy.get(".modal-container").should("be.visible");
});
- /**
- * youtube에 검색한 결과가 없는 경우를 찾기 어려움... (테스트 통과가 되지 않을 확률이 높다.)
- */
- // it("보고싶은 영상 찾기 모달창 안에서 원하는 영상을 검색한 결과가 없는 경우 검색 결과 없음 이미지를 보여준다.", () => {
- // cy.get("#search-input-keyword").type(errorSearchKeyword);
- // cy.get("#search-button").click();
- // cy.get(".search-result--no-result").should("be.visible");
- // });
-
- /**
- * 실제 API 호출 했을 경우 주석을 제거 후 테스트를 돌려주세요.
- */
- // it("보고싶은 영상 찾기 모달창 안에서 검색된 영상을 불러오는 동안 로딩 이미지를 보여준다.", () => {
- // cy.get("#search-input-keyword").clear().type(searchKeyword);
- // cy.get("#search-button").click();
- // cy.get(".skeleton").should("be.visible");
- // });
+ it("보고싶은 영상 찾기 모달창 안에서 검색된 영상을 불러오는 동안 로딩 이미지를 보여준다.", () => {
+ cy.get("#search-input-keyword").clear().type(searchKeyword);
+ cy.get("#search-button").click();
+ cy.get(".skeleton").should("be.visible");
+ });
it("보고싶은 영상 찾기 모달창 안에서 검색창에 검색어를 입력하지 않으면 에러 메시지를 보여준다.", () => {
cy.searchWithNoKeyword();
@@ -53,7 +44,6 @@ describe("보고싶은 영상 찾기 모달창 전체 로직 테스트", () => {
});
it("보고싶은 영상 찾기 모달창 안에서 검색된 영상이 이미 저장된 영상이라면 저장 버튼이 보이지 않아야 한다.", () => {
- cy.searchWithKeyword(searchKeyword);
cy.get(".video-item__save-button").eq(0).should("be.not.visible");
});
@@ -61,4 +51,34 @@ describe("보고싶은 영상 찾기 모달창 전체 로직 테스트", () => {
cy.closeSearchModal();
cy.get(".modal-container").should("be.not.visible");
});
+
+ it("초기 화면에서 저장된 영상을 확인할 수 있어야 한다.", () => {
+ cy.get(".video-item").should("be.visible");
+ });
+
+ it("볼 영상 섹션에서 저장된 영상의 ✅ 버튼을 눌러 본 영상 섹션으로 옮길 수 있어야 한다.", () => {
+ cy.clickVideoWatchButton();
+ cy.get(".video-item").should("be.not.visible");
+ });
+
+ it("초기 화면에서 본 영상 버튼을 눌러 본 영상 목록을 확인할 수 있어야 한다.", () => {
+ cy.clickWatchedVideoListTab();
+ cy.get(".video-item").should("be.visible");
+ });
+
+ it("본 영상 섹션에서 저장된 영상의 ✅ 버튼을 눌러 볼 영상 섹션으로 옮길 수 있어야 한다.", () => {
+ cy.clickVideoWatchButton();
+ cy.clickWatchLaterVideoListTab();
+ cy.get(".video-item").should("be.visible");
+ });
+
+ it("초기 화면에서 저장된 영상의 🗑️ 버튼을 눌러 영상을 삭제할지 확인할 수 있어야 한다.", () => {
+ cy.clickVideoDeleteButton(false);
+ cy.get(".video-item").should("be.visible");
+ });
+
+ it("영상을 삭제할지 확인하는 화면에서 확인을 눌러 삭제할 수 있어야 한다.", () => {
+ cy.clickVideoDeleteButton(true);
+ cy.get(".video-item").should("be.not.visible");
+ });
});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 4c79e443f..6626a8467 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -9,9 +9,11 @@ Cypress.Commands.add("searchWithNoKeyword", () => {
cy.on("window:alert", alertStub);
cy.get("#search-input-keyword").clear().type(" ");
- cy.get("#search-button").click(() => {
- expect(alertStub).to.be.calledWith(ERROR_MESSAGE.SEARCH_INPUT_IS_EMPTY);
- });
+ cy.get("#search-button")
+ .click()
+ .then(() => {
+ expect(alertStub).to.be.calledWith(ERROR_MESSAGE.SEARCH_INPUT_IS_EMPTY);
+ });
});
Cypress.Commands.add("searchWithKeyword", (keyword) => {
@@ -30,3 +32,25 @@ Cypress.Commands.add("loadMoreVideos", () => {
Cypress.Commands.add("closeSearchModal", () => {
cy.get(".dimmer").click({ force: true });
});
+
+Cypress.Commands.add("clickWatchedVideoListTab", () => {
+ cy.get("#watched-video-button").click();
+});
+
+Cypress.Commands.add("clickWatchLaterVideoListTab", () => {
+ cy.get("#watch-later-video-button").click();
+});
+
+Cypress.Commands.add("clickVideoWatchButton", () => {
+ cy.get(".video-item__watched-button").eq(0).click();
+});
+
+Cypress.Commands.add("clickVideoDeleteButton", (confirmButtonClick) => {
+ cy.get(".video-item__delete-button").eq(0).click();
+
+ cy.on("window:confirm", (text) => {
+ console.log(text);
+ expect(text).to.contains("정말로 삭제하시겠습니까?");
+ return confirmButtonClick;
+ });
+});
diff --git a/index.html b/index.html
index ced1e263f..8c2fe4d2a 100644
--- a/index.html
+++ b/index.html
@@ -9,12 +9,34 @@
-