[1단계 - 영화 목록 불러오기] 윤생(이윤성) 미션 제출합니다.

.gitignore

@@ -1 +1,3 @@
 node_modules
+
+src/constants/key.js

README.md

@@ -1,3 +1,45 @@
 # javascript-movie-review
 
 FE 5기 레벨1 영화관 미션
+
+## 페어프로그래밍 룰
+
+1. 드라이버가 주도 네비게이터가 조언
+2. 드라이버 변경시간 30분
+3. 네비게이터는 집중을 잃지 않는다.
+4. 2시간마다 15분 휴식
+5. 모르는 부분 / 논의가 필요한 부분 나오면 타이머 중단
+6. 화장실이나 급한 사정은 유도리 있게
+
+## 컴포넌트를 분리하려는 목적
+
+1. 재사용성이 좋아진다.
+   - 문제 요구사항을 분석했을 때, 재사용 되는 요소들이 많았다고 생각이 들었다.(더보기 버튼, 영화 목록 아이템, 페이지 타이틀)
+   - 또한, 앱의 기능이 확장 되었을 때, 재사용 하려 만든 요소를 이용해 쉽게 기능을 확장할 수 있다고 판단이 들었다.
+2. 가독성이 좋아진다.
+   - 파일을 컴포넌트 단위로 나누고, 컴포넌트를 UI, 기능별로 나누어 한 파일에 한 UI, 기능 단위의 로직만 들어가게 되어 개발자 입장에서 보기 좋은 프로젝트가 된다.
+3. 독립성이 향상된다.
+   - 컴포넌트로 나누게 되면 각각의 다른 컴포넌트(기능)들의 간섭을 덜 받게 되어 로직의 안정성이 높아진다.
+
+## 개발 환경
+
+- node v16.14.0
+- npm 8.3.1
+
+## API Key 설정 방법
+
+- API 키를 숨기기 위해 레퍼지토리에서 숨김 처리 해두었습니다.
+
+1. src/constants 디렉토리 하위에 key.js 생성
+2. 다음의 내용 입력
+
+```javascript
+export const API_KEY = "사용할 API 키";
+```
+
+## e2e 테스트 방법
+
+1. npm run start로 local server 구동(포트 8081 고정)
+2. npm run test-e2e로 cypress 구동
+3. E2E-Testing -> Start E2E Testing in Chrome 클릭
+4. cypress 창이 뜨면 movie-e2e.cy.ts 클릭

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    supportFile: false,
+  },
+});

cypress/e2e/movie-e2e.cy.ts

@@ -0,0 +1,190 @@
+describe("인기 영화 목록 페이지", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+  });
+
+  it("초기 접속 시에 인기 영화목록 상위 20개가 화면에 출력된다.", () => {
+    cy.get("movie-list-page").find("movie-item").should("exist");
+    cy.get("movie-list-page").children().should("have.length", 20);
+  });
+
+  it("헤더 로고 클릭 시 처음 인기 영화목록이 출력된다.", () => {
+    cy.get("img[data-action='popular']").click();
+
+    cy.get("movie-list-page").find("movie-item").should("exist");
+    cy.get("movie-list-page").should("exist");
+  });
+});
+
+describe("인기 영화 목록 더보기", () => {
+  it("사용자가 마지막 페이지에 도달했을 때, 더보기 버튼이 화면에서 보이지 않아야 한다.", () => {
+    cy.intercept(
+      {
+        method: "GET",
+        url: /^https:\/\/api.themoviedb.org\/3\/movie\/popular*/,
+      },
+      { fixture: "movie-popular.json" }
+    ).as("getPopularMovies");
+
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    cy.wait("@getPopularMovies").then(() => {
+      cy.get("button[data-action='more_popular']").should("not.be.visible");
+    });
+  });
+  it("인기 영화 페이지에서 더보기 버튼 클릭시 영화 목록이 추가된다.", () => {
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    cy.get("button[data-action='more_popular']").click();
+
+    cy.get("movie-list-page").find("movie-item").should("exist");
+    cy.get("movie-list-page").should("have.length", 2);
+  });
+});
+
+describe("검색 목록 확인", () => {
+  it("검색창에 해리포터를 입력하고 검색버튼 클릭시, 제목에 '해리포터'가 포함된 영화 목록이 화면에 나온다.", () => {
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    cy.get(".search-box").find("input").type("해리포터");
+    cy.get("button[data-action='search']")
+      .click()
+      .then(() => {
+        cy.get(".item-title").each(() => {
+          cy.get("h3.item-title").contains(/해\s*리\s*포\s*터/);
+        });
+      });
+  });
+
+  it("검색창에 해리포터를 입력하고 엔터키를 누르면, 제목에 '해리포터'가 포함된 영화 목록이 화면에 나타난다.", () => {
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    cy.get(".search-box")
+      .find("input")
+      .type("해리포터{enter}")
+      .then(() => {
+        cy.get(".item-title").each(() => {
+          cy.get("h3.item-title").contains(/해\s*리\s*포\s*터/);
+        });
+      });
+  });
+
+  it("검색창에 검색결과가 없는 검색어를 입력한 후 검색하는데, 결과가 존재하지 않을 시 검색결과 없음 페이지가 화면에 나타난다.", () => {
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    cy.get(".search-box")
+      .find("input")
+      .type("sdmnfbikrdnfivjdnfodmfhfidff{enter}")
+      .then(() => {
+        cy.get(".no-result-title").contains("검색 결과를 찾지 못하였습니다.");
+      });
+  });
+
+  it("검색창에 입력을 하지 않고 엔터키를 누르면 사용자에게 검색어가 없다는 경고창이 화면에 나온다.", () => {
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    const stub = cy.stub();
+
+    cy.on("window:alert", stub);
+
+    cy.get(".search-box")
+      .find("input")
+      .type("{enter}")
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith("검색어를 입력해주세요.");
+      });
+  });
+
+  it("검색창에 입력을 하지 않고 검색버튼을 클릭하면 사용자에게 검색어가 없다는 경고창이 화면에 나온다.", () => {
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    const stub = cy.stub();
+
+    cy.on("window:alert", stub);
+
+    cy.get(".search-button")
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith("검색어를 입력해주세요.");
+      });
+  });
+
+  it("검색창에 공백만을 입력하고 검색버튼을 클릭하면 사용자에게 검색어가 없다는 경고창이 화면에 나온다.", () => {
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    const stub = cy.stub();
+    cy.on("window:alert", stub);
+
+    cy.get(".search-box").find("input").type("     ");
+    cy.get(".search-button")
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith("검색어를 입력해주세요.");
+      });
+  });
+
+  it("검색창에 공백만을 입력하고 엔터키를 누르면 사용자에게 검색어가 없다는 경고창이 화면에 나온다.", () => {
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    const stub = cy.stub();
+    cy.on("window:alert", stub);
+
+    cy.get(".search-box")
+      .find("input")
+      .type("     {enter}")
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith("검색어를 입력해주세요.");
+      });
+  });
+});
+
+describe("검색목록 더보기 확인", () => {
+  it("검색결과 페이지에서 더보기 버튼 클릭시 검색목록이 추가된다. ", () => {
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    cy.get(".search-box")
+      .find("input")
+      .type("전쟁{enter}")
+      .then(() => {
+        cy.get("button[data-action='more_search']").click();
+
+        cy.get("movie-list-page").find("movie-item").should("exist");
+        cy.get("movie-list-page").should("have.length", 2);
+      })
+      .then(() => {
+        cy.get("h3.item-title").each(() => {
+          cy.get("h3.item-title").contains(/전\s*쟁/);
+        });
+      });
+  });
+});
+
+describe("네트워크 에러 확인", () => {
+  it("네트워크 접속 오류 시 에러 페이지가 화면에 나타난다.", () => {
+    cy.intercept(
+      {
+        method: "GET",
+        url: /^https:\/\/api.themoviedb.org\/3\/movie\/popular*/,
+      },
+      { statusCode: 401 }
+    ).as("getErrorData");
+
+    cy.visit("http://localhost:8081/");
+    cy.viewport(1920, 1080);
+
+    cy.wait("@getErrorData").then(() => {
+      cy.get(".error-title").contains("오류");
+    });
+  });
+});