[2단계 - 상세 정보 & UI/UX 개선하기] 벤지 미션 제출합니다. #297
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
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,98 @@ | ||
| describe("모달 열기 테스트", () => { | ||
| beforeEach(() => { | ||
| cy.intercept("GET", "**/movie/popular**", { fixture: "movies.json" }).as( | ||
| "getMovies", | ||
| ); | ||
| cy.intercept("GET", "**/movie/1001**", { fixture: "moviedetail.json" }).as( | ||
| "getMovieDetail", | ||
| ); | ||
| cy.visit("http://localhost:5173"); | ||
| cy.wait("@getMovies"); | ||
| }); | ||
|
|
||
| it("영화 아이템을 클릭하면 모달이 열린다", () => { | ||
| cy.get(".thumbnail-list li").first().find(".item").click(); | ||
| cy.wait("@getMovieDetail"); | ||
| cy.get("#modalBackground").should("have.class", "active"); | ||
| cy.get(".modal-container h2").should("contain", "영화 1"); | ||
| }); | ||
| }); | ||
|
|
||
| describe("모달 닫기 테스트", () => { | ||
| beforeEach(() => { | ||
| cy.intercept("GET", "**/movie/popular**", { fixture: "movies.json" }).as( | ||
| "getMovies", | ||
| ); | ||
| cy.intercept("GET", "**/movie/1001**", { fixture: "moviedetail.json" }).as( | ||
| "getMovieDetail", | ||
| ); | ||
| cy.visit("http://localhost:5173"); | ||
| cy.wait("@getMovies"); | ||
| cy.get(".thumbnail-list li").first().find(".item").click(); | ||
| cy.wait("@getMovieDetail"); | ||
| }); | ||
|
|
||
| it("닫기 버튼 클릭 시 모달이 닫힌다", () => { | ||
| cy.get("#closeModal").click(); | ||
| cy.get("#modalBackground").should("not.have.class", "active"); | ||
| cy.get(".modal-container").should("not.exist"); | ||
| }); | ||
|
|
||
| it("Escape 키 입력 시 모달이 닫힌다", () => { | ||
| cy.get("body").type("{esc}"); | ||
| cy.get("#modalBackground").should("not.have.class", "active"); | ||
| cy.get(".modal-container").should("not.exist"); | ||
| }); | ||
|
|
||
| it("배경 클릭 시 모달이 닫힌다", () => { | ||
| cy.get("#modalBackground").click({ force: true }); | ||
| cy.get("#modalBackground").should("not.have.class", "active"); | ||
| cy.get(".modal-container").should("not.exist"); | ||
| }); | ||
| }); | ||
|
|
||
| describe("모달 반응형 테스트 - 태블릿", () => { | ||
| beforeEach(() => { | ||
| cy.viewport(768, 1024); | ||
| cy.intercept("GET", "**/movie/popular**", { fixture: "movies.json" }).as( | ||
| "getMovies", | ||
| ); | ||
| cy.intercept("GET", "**/movie/1001**", { fixture: "moviedetail.json" }).as( | ||
| "getMovieDetail", | ||
| ); | ||
| cy.visit("http://localhost:5173"); | ||
| cy.wait("@getMovies"); | ||
| cy.get(".thumbnail-list li").first().find(".item").click(); | ||
| cy.wait("@getMovieDetail"); | ||
| }); | ||
|
|
||
| it("태블릿 화면에서 모달이 하단 고정으로 표시된다", () => { | ||
| cy.get("#modalBackground").should("have.css", "align-items", "flex-end"); | ||
| cy.get(".modal").should("have.css", "width", "768px"); | ||
| }); | ||
|
|
||
| it("태블릿 화면에서 포스터와 설명이 세로 정렬된다", () => { | ||
| cy.get(".modal-container").should("have.css", "flex-direction", "column"); | ||
| cy.get(".modal-image img").should("have.css", "width", "160px"); | ||
| }); | ||
| }); | ||
|
|
||
| describe("모달 반응형 테스트 - 모바일", () => { | ||
| beforeEach(() => { | ||
| cy.viewport(375, 667); | ||
| cy.intercept("GET", "**/movie/popular**", { fixture: "movies.json" }).as( | ||
| "getMovies", | ||
| ); | ||
| cy.intercept("GET", "**/movie/1001**", { fixture: "moviedetail.json" }).as( | ||
| "getMovieDetail", | ||
| ); | ||
| cy.visit("http://localhost:5173"); | ||
| cy.wait("@getMovies"); | ||
| cy.get(".thumbnail-list li").first().find(".item").click(); | ||
| cy.wait("@getMovieDetail"); | ||
| }); | ||
|
|
||
| it("모바일 화면에서 포스터 이미지가 숨겨진다", () => { | ||
| cy.get(".modal-image").should("have.css", "display", "none"); | ||
| }); | ||
| }); |
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,49 @@ | ||
| describe("로컬스토리지 평점 저장 테스트", () => { | ||
| beforeEach(() => { | ||
| cy.clearLocalStorage(); | ||
| cy.intercept("GET", "**/movie/popular**", { fixture: "movies.json" }).as( | ||
| "getMovies", | ||
| ); | ||
| cy.intercept("GET", "**/movie/1001**", { fixture: "moviedetail.json" }).as( | ||
| "getMovieDetail", | ||
| ); | ||
| cy.visit("http://localhost:5173"); | ||
| cy.wait("@getMovies"); | ||
| cy.get(".thumbnail-list li").first().find(".item").click(); | ||
| cy.wait("@getMovieDetail"); | ||
| }); | ||
|
|
||
| it("별점을 클릭하면 로컬스토리지에 저장된다", () => { | ||
| cy.get(".my-rate-stars .my-star").eq(3).click(); | ||
| cy.window() | ||
| .its("localStorage") | ||
| .invoke("getItem", "movieRatings") | ||
| .then((val) => { | ||
| if (val) { | ||
| expect(JSON.parse(val)).to.deep.equal({ "1001": 8 }); | ||
| } | ||
| }); | ||
|
||
| }); | ||
|
||
|
|
||
| it("새로고침 후 같은 영화 모달을 열면 저장된 평점이 유지된다", () => { | ||
| cy.get(".my-rate-stars .my-star").eq(3).click(); | ||
| cy.reload(); | ||
| cy.wait("@getMovies"); | ||
| cy.get(".thumbnail-list li").first().find(".item").click(); | ||
| cy.wait("@getMovieDetail"); | ||
|
|
||
| cy.get(".my-rate-stars .my-star").each((star, index) => { | ||
| if (index <= 3) { | ||
| cy.wrap(star) | ||
| .should("have.attr", "src") | ||
| .and("include", "star_filled.png"); | ||
| } else { | ||
| cy.wrap(star) | ||
| .should("have.attr", "src") | ||
| .and("include", "star_empty.png"); | ||
| } | ||
| }); | ||
| cy.get(".my-score-label").should("contain", "재미있어요"); | ||
| cy.get(".my-rate-value").should("contain", "(8/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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| { | ||
| "id": 1001, | ||
| "title": "영화 1", | ||
| "poster_path": "/test0.jpg", | ||
| "backdrop_path": "/backdrop0.jpg", | ||
| "release_date": "2024-01-01", | ||
| "genres": [ | ||
| { "id": 28, "name": "액션" }, | ||
| { "id": 12, "name": "모험" } | ||
| ], | ||
| "vote_average": 7.5, | ||
| "overview": "테스트용 영화 줄거리입니다." | ||
| } |
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.
🧩 Analysis chain
🏁 Script executed:
Repository: woowacourse/javascript-movie-review
Length of output: 957
🏁 Script executed:
Repository: woowacourse/javascript-movie-review
Length of output: 316
cy.visit()호출에서 프로토콜 누락으로 환경 의존성 발생cypress.config.ts에baseUrl이 설정되지 않았으므로,cy.visit()는 항상 완전한 URL(프로토콜 포함)을 필요로 합니다. 현재 라인 9, 14, 47에서cy.visit("localhost:5173")처럼 프로토콜 없이 작성되어 있어 테스트 실행이 불안정할 수 있습니다."http://localhost:5173"로 일관되게 작성되어 있습니다.두 가지 접근이 가능합니다:
cypress.config.ts에baseUrl을 설정하고cy.visit("/")로 통일하는 방식cy.visit()호출에 프로토콜을 명시하여 일관성 있게 작성하는 방식어느 방식을 선택하든 현재 3개 라인의 불일치를 해결해야 합니다.
🤖 Prompt for AI Agents