[2단계 - 상세 정보 & UI/UX 개선하기] 애니 미션 제출합니다. #317
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,6 +4,7 @@ on: | |
| push: | ||
| branches: | ||
| - step1 | ||
| - step2 | ||
|
|
||
| jobs: | ||
| deploy: | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| export const MOVIE_DETAIL_FIXTURE = { | ||
| id: 1, | ||
| title: "인터스텔라", | ||
| overview: "우주를 탐험하는 이야기", | ||
| poster_path: null, | ||
| release_date: "2014-11-06", | ||
| vote_average: 8.6, | ||
| genres: [{ id: 878, name: "SF" }], | ||
| runtime: 169, | ||
| tagline: "우주의 끝으로", | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| describe("무한 스크롤", () => { | ||
| beforeEach(() => { | ||
| cy.intercept("GET", "**/movie/popular**", (req) => { | ||
| const url = new URL(req.url); | ||
| const page = Number(url.searchParams.get("page")) || 1; | ||
| req.reply({ | ||
| results: Array.from({ length: 20 }, (_, i) => ({ | ||
| id: (page - 1) * 20 + i + 1, | ||
| title: `영화 ${(page - 1) * 20 + i + 1}`, | ||
| poster_path: null, | ||
| vote_average: 7.0, | ||
| })), | ||
| page, | ||
| total_pages: 3, | ||
| }); | ||
| }).as("popularMovies"); | ||
|
|
||
| cy.visit("/"); | ||
| cy.wait("@popularMovies"); | ||
| }); | ||
|
|
||
| it("스크롤 하단 도달 시 다음 페이지가 로드된다", () => { | ||
| cy.get(".item").should("have.length", 20); | ||
| cy.scrollTo("bottom"); | ||
| cy.wait("@popularMovies"); | ||
| cy.get(".item").should("have.length", 40); | ||
| }); | ||
|
|
||
| it("마지막 페이지 도달 시 더 이상 로드되지 않는다", () => { | ||
| cy.scrollTo("bottom"); | ||
| cy.wait("@popularMovies"); | ||
| cy.scrollTo("bottom"); | ||
| cy.wait("@popularMovies"); | ||
| cy.get(".item").should("have.length", 60); | ||
| cy.scrollTo("bottom"); | ||
| cy.get(".item").should("have.length", 60); | ||
| }); | ||
|
|
||
| it("검색 페이지에서도 무한 스크롤이 동작한다", () => { | ||
| cy.intercept("GET", "**/search/movie**", (req) => { | ||
| const url = new URL(req.url); | ||
| const page = Number(url.searchParams.get("page")) || 1; | ||
| req.reply({ | ||
| results: Array.from({ length: 20 }, (_, i) => ({ | ||
| id: (page - 1) * 20 + i + 1, | ||
| title: `검색결과 ${(page - 1) * 20 + i + 1}`, | ||
| poster_path: null, | ||
| vote_average: 7.0, | ||
| })), | ||
| page, | ||
| total_pages: 3, | ||
| }); | ||
| }).as("searchMovies"); | ||
|
|
||
| cy.visit(`/search?query=${encodeURIComponent("영화")}`); | ||
| cy.wait("@searchMovies"); | ||
| cy.get(".item").should("have.length", 20); | ||
| cy.scrollTo("bottom"); | ||
| cy.wait("@searchMovies"); | ||
| cy.get(".item").should("have.length", 40); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { MOVIE_DETAIL_FIXTURE } from "./fixtures"; | ||
|
|
||
| describe("모달", () => { | ||
| beforeEach(() => { | ||
| cy.intercept("GET", "**/movie/popular**", (req) => { | ||
| req.reply({ | ||
| results: Array.from({ length: 20 }, (_, i) => ({ | ||
| id: i + 1, | ||
| title: `영화 ${i + 1}`, | ||
| poster_path: null, | ||
| vote_average: 7.0, | ||
| })), | ||
| page: 1, | ||
| total_pages: 5, | ||
| }); | ||
| }).as("popularMovies"); | ||
|
|
||
| cy.intercept("GET", "**/movie/1**", (req) => { | ||
| req.reply(MOVIE_DETAIL_FIXTURE); | ||
| }).as("movieDetail"); | ||
|
|
||
| cy.visit("/"); | ||
| cy.wait("@popularMovies"); | ||
| }); | ||
|
|
||
| it("영화 카드 클릭 시 모달이 열린다", () => { | ||
| cy.get(".item").first().click(); | ||
| cy.get("dialog.modal").should("be.visible"); | ||
| }); | ||
|
|
||
| it("모달에 영화 정보가 표시된다", () => { | ||
| cy.get(".item").first().click(); | ||
| cy.wait("@movieDetail"); | ||
| cy.get("dialog.modal").within(() => { | ||
| cy.get("h2").should("contain.text", "인터스텔라"); | ||
| cy.get(".overview").should("contain.text", "우주를 탐험하는 이야기"); | ||
| cy.get(".rate-value").should("contain.text", "8.6"); | ||
| cy.get(".category").should("contain.text", "2014"); | ||
| }); | ||
| }); | ||
|
|
||
| it("닫기 버튼 클릭 시 모달이 닫힌다", () => { | ||
| cy.get(".item").first().click(); | ||
| cy.get("dialog.modal").should("be.visible"); | ||
| cy.get("dialog.modal .close-modal").click({ force: true }); | ||
| cy.get("dialog.modal").should("not.be.visible"); | ||
| }); | ||
|
|
||
| it("backdrop 클릭 시 모달이 닫힌다", () => { | ||
| cy.get(".item").first().click(); | ||
| cy.get("dialog.modal").should("be.visible"); | ||
| cy.get("dialog.modal").click("topLeft", { force: true }); | ||
| cy.get("dialog.modal").should("not.be.visible"); | ||
| }); | ||
|
|
||
| it("API 실패 시 에러 메시지가 표시된다", () => { | ||
| cy.intercept("GET", "**/movie/1**", { forceNetworkError: true }).as( | ||
| "movieDetailError", | ||
| ); | ||
| cy.get(".item").first().click(); | ||
| cy.wait("@movieDetailError"); | ||
| cy.get("dialog.modal").within(() => { | ||
| cy.get("h2").should("contain.text", "오류가 발생했습니다"); | ||
| }); | ||
| }); | ||
|
|
||
| it("로딩 중 스켈레톤이 표시된다", () => { | ||
| cy.intercept("GET", "**/movie/1**", (req) => { | ||
| req.on("response", (res) => { | ||
| res.setDelay(500); | ||
| }); | ||
| req.reply(MOVIE_DETAIL_FIXTURE); | ||
| }).as("slowMovieDetail"); | ||
|
|
||
| cy.get(".item").first().click(); | ||
| cy.get("dialog.modal .skeleton-box").should("exist"); | ||
| cy.wait("@slowMovieDetail"); | ||
| cy.get("dialog.modal .skeleton-box").should("not.exist"); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { MOVIE_DETAIL_FIXTURE } from "./fixtures"; | ||
|
|
||
| describe("별점", () => { | ||
| beforeEach(() => { | ||
| cy.clearLocalStorage(); | ||
|
|
||
| cy.intercept("GET", "**/movie/popular**", (req) => { | ||
| req.reply({ | ||
| results: [ | ||
| { id: 1, title: "인터스텔라", poster_path: null, vote_average: 8.6 }, | ||
| ], | ||
| page: 1, | ||
| total_pages: 1, | ||
| }); | ||
| }).as("popularMovies"); | ||
|
|
||
| cy.intercept("GET", "**/movie/1**", (req) => { | ||
| req.reply(MOVIE_DETAIL_FIXTURE); | ||
| }).as("movieDetail"); | ||
|
|
||
| cy.visit("/"); | ||
| cy.wait("@popularMovies"); | ||
| cy.get(".item").first().click(); | ||
| cy.wait("@movieDetail"); | ||
| }); | ||
|
|
||
| it("별점 클릭 시 점수와 라벨이 표시된다", () => { | ||
| cy.get(".my-rating-star").eq(3).click(); | ||
| cy.get(".my-rating-score").should("contain.text", "(8/10)"); | ||
| cy.get(".my-rating-text").should("contain.text", "재미있어요"); | ||
| }); | ||
|
|
||
| it("별점이 localStorage에 저장된다", () => { | ||
| cy.get(".my-rating-star").eq(4).click(); | ||
| cy.window().then((win) => { | ||
| const stored = win.localStorage.getItem("ratings"); | ||
| expect(stored).to.include("10"); | ||
|
There was a problem hiding this comment. "10"이라는 문자열 포함 여부만 체크하면 movieId가 10인 경우에도 통과할 것 같은데요. JSON.parse 후 직접 rating을 확인해야 더 정확할 것 같아요ㅎㅎ |
||
| }); | ||
| }); | ||
|
|
||
| it("모달 재오픈 시 별점이 유지된다", () => { | ||
| cy.get(".my-rating-star").eq(2).click(); | ||
| cy.get("dialog.modal .close-modal").click({ force: true }); | ||
| cy.get(".item").first().click(); | ||
| cy.wait("@movieDetail"); | ||
| cy.get(".my-rating-score").should("contain.text", "(6/10)"); | ||
| }); | ||
|
|
||
| it("별점 hover 시 해당 별까지 채워진다", () => { | ||
| cy.get(".my-rating-star").eq(2).trigger("mouseenter"); | ||
| cy.get(".my-rating-star").eq(0).should("have.class", "filled"); | ||
| cy.get(".my-rating-star").eq(1).should("have.class", "filled"); | ||
| cy.get(".my-rating-star").eq(2).should("have.class", "filled"); | ||
| cy.get(".my-rating-star").eq(3).should("not.have.class", "filled"); | ||
| }); | ||
|
|
||
| it("별점 hover 해제 시 저장된 별점으로 돌아온다", () => { | ||
| cy.get(".my-rating-star").eq(1).click(); | ||
| cy.get(".my-rating-star").eq(4).trigger("mouseenter"); | ||
| cy.get(".my-rating-star").eq(4).trigger("mouseleave"); | ||
| cy.get(".my-rating-score").should("contain.text", "(4/10)"); | ||
| }); | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
생각해보니 위의 테스트와 분리해주신 이유가 있을까요?