-
Notifications
You must be signed in to change notification settings - Fork 155
[2단계 - 영화 목록 불러오기] 두부 미션 제출합니다. #306
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: boboyoii
Are you sure you want to change the base?
Changes from 64 commits
ab98b35
eb0458c
3ea0f8b
00ff192
2bff17a
07fd962
534ade5
32e6536
d0d406c
2911dbc
181716b
1a4964c
6a16aa5
895e47a
99c3f0e
9877f63
29f0b85
1c62e42
fcf82b3
3c5b5a3
4aa9426
5815f2c
f190475
982c938
b3ef101
c2edebe
912ac5e
07d9f48
b8cf963
d109d2a
be6f5ce
fba5450
e507eb8
e34f8ac
147a72a
e8f24f7
2f566ef
bfce691
76d42d8
7c71154
27d39bd
5b607a3
b78d3ef
a7b8008
dd12706
198c1ca
1cd6b40
0d2baf6
6097254
58a0b2c
7454174
58a6fed
f8905d3
ec3272e
d0c0c3e
37c7ac3
b7c6219
3bc2492
49be0e8
5c5905e
c5715c6
047f86a
deb2ec4
661fac1
e37cfa3
5d212b9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { movieDetailFixture, moviesFixture } from "../../test/fixtures"; | ||
|
|
||
| describe("영화 모달 기능 테스트", () => { | ||
| const openMovieModal = () => { | ||
| cy.get("#movie-list li").first().click(); | ||
| cy.wait("@getMovieDetail"); | ||
| cy.get("#modal-background").should("have.class", "active"); | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| cy.intercept("GET", "**/movie/popular?page=1&language=ko-KR", { | ||
| statusCode: 200, | ||
| body: { | ||
| page: 1, | ||
| results: [...moviesFixture], | ||
| total_pages: 2, | ||
| total_results: 40, | ||
| }, | ||
| }).as("getPopularPage1"); | ||
|
|
||
| cy.intercept("GET", "**/movie/640146?language=ko-KR", { | ||
| statusCode: 200, | ||
| body: movieDetailFixture, | ||
| }).as("getMovieDetail"); | ||
|
Comment on lines
+21
to
+24
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Description: Check if movie ID 640146 matches the fixture
# Expected: moviesFixture should have id: 640146 as first element
echo "=== Checking moviesFixture for movie ID ==="
rg -n "640146|id:" test/fixturesRepository: woowacourse/javascript-movie-review Length of output: 193 🏁 Script executed: #!/bin/bash
# Find fixture files in the repository
echo "=== Finding fixture files ==="
find . -name "*fixture*" -type f 2>/dev/null | head -20Repository: woowacourse/javascript-movie-review Length of output: 127 🏁 Script executed: #!/bin/bash
# Check the actual test file structure
echo "=== Checking movie-modal.cy.ts file ==="
cat -n cypress/e2e/movie-modal.cy.tsRepository: woowacourse/javascript-movie-review Length of output: 1957 🏁 Script executed: #!/bin/bash
# Search for moviesFixture and movie IDs throughout the codebase
echo "=== Searching for moviesFixture ==="
rg -n "moviesFixture" --type ts --type js | head -20Repository: woowacourse/javascript-movie-review Length of output: 1045 🏁 Script executed: #!/bin/bash
# Read the fixtures file to check the first movie's ID
echo "=== Reading test/fixtures.ts ==="
cat -n test/fixtures.ts | head -50Repository: woowacourse/javascript-movie-review Length of output: 2629 하드코딩된 영화 ID와 fixture의 연계성을 개선하세요. 현재 다음을 고려해 보세요:
🤖 Prompt for AI AgentsThere was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 요것도 좋은 리뷰인 것 같습니다! |
||
|
|
||
| cy.visit("localhost:5173"); | ||
| cy.wait("@getPopularPage1"); | ||
| }); | ||
|
|
||
| it("영화 목록을 클릭하면 모달이 뜨고 닫기 버튼으로 닫을 수 있다", () => { | ||
| openMovieModal(); | ||
|
|
||
| cy.get("#close-modal").click(); | ||
| cy.get("#modal-background").should("not.have.class", "active"); | ||
| }); | ||
|
|
||
| it("ESC 버튼을 누르면 모달이 닫힌다", () => { | ||
| openMovieModal(); | ||
|
|
||
| cy.get("body").type("{esc}"); | ||
| cy.get("#modal-background").should("not.have.class", "active"); | ||
| }); | ||
|
|
||
| it("모달창이 아닌 부분을 클릭하면 모달이 닫힌다", () => { | ||
| openMovieModal(); | ||
|
|
||
| cy.get("#modal-background").click("topLeft"); | ||
| cy.get("#modal-background").should("not.have.class", "active"); | ||
| }); | ||
|
|
||
| it("모달창이 뜨면 배경 스크롤이 적용되지 않는다", () => { | ||
| openMovieModal(); | ||
|
|
||
| cy.get("body").should("have.class", "modal-open"); | ||
| }); | ||
| }); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { movieDetailFixture, moviesFixture } from "../../test/fixtures"; | ||
| import { RATING_SCORES, RATING_TEXTS } from "../../src/constants/rating"; | ||
|
|
||
| describe("영화 별점 기능 테스트", () => { | ||
| const openMovieModal = () => { | ||
| cy.get("#movie-list li").first().click(); | ||
| cy.wait("@getMovieDetail"); | ||
| cy.get("#modal-background").should("have.class", "active"); | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| cy.intercept("GET", "**/movie/popular?page=1&language=ko-KR", { | ||
| statusCode: 200, | ||
| body: { | ||
| page: 1, | ||
| results: [...moviesFixture], | ||
| total_pages: 2, | ||
| total_results: 40, | ||
| }, | ||
| }).as("getPopularPage1"); | ||
|
|
||
| cy.intercept("GET", "**/movie/640146?language=ko-KR", { | ||
| statusCode: 200, | ||
| body: movieDetailFixture, | ||
| }).as("getMovieDetail"); | ||
|
|
||
| cy.visit("localhost:5173"); | ||
| cy.wait("@getPopularPage1"); | ||
| cy.clearLocalStorage(); | ||
| }); | ||
|
|
||
| it("모달창에서 별점을 클릭하면 해당 별만큼 채워지고 점수와 평가 문구가 바뀐다", () => { | ||
| openMovieModal(); | ||
|
|
||
| cy.get(".movie-rating .stars img").eq(3).click(); | ||
|
|
||
| cy.get(".movie-rating .stars img") | ||
| .eq(0) | ||
| .should("have.attr", "src") | ||
| .and("include", "star_filled.png"); | ||
|
|
||
| cy.get(".movie-rating .stars img") | ||
| .eq(3) | ||
| .should("have.attr", "src") | ||
| .and("include", "star_filled.png"); | ||
|
|
||
| cy.get(".movie-rating .stars img") | ||
| .eq(4) | ||
| .should("have.attr", "src") | ||
| .and("include", "star_empty.png"); | ||
|
|
||
| cy.get(".rating-text").should("have.text", RATING_TEXTS[3]); | ||
| cy.get("#rating-value").should("have.text", RATING_SCORES[3]); | ||
| }); | ||
|
|
||
| it("별점을 매기고 다시 모달을 열면 이전 별점이 유지된다", () => { | ||
| openMovieModal(); | ||
|
|
||
| cy.get(".movie-rating .stars img").eq(3).click(); | ||
| cy.get("#close-modal").click(); | ||
|
|
||
| openMovieModal(); | ||
|
|
||
| cy.get(".rating-text").should("have.text", RATING_TEXTS[3]); | ||
| cy.get("#rating-value").should("have.text", RATING_SCORES[3]); | ||
|
|
||
| cy.get(".movie-rating .stars img") | ||
| .eq(3) | ||
| .should("have.attr", "src") | ||
| .and("include", "star_filled.png"); | ||
|
|
||
| cy.get(".movie-rating .stars img") | ||
| .eq(4) | ||
| .should("have.attr", "src") | ||
| .and("include", "star_empty.png"); | ||
| }); | ||
| }); |
| Original file line number | Diff line number | Diff line change | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -11,6 +11,7 @@ | |||||||||||
| <link rel="stylesheet" href="./styles/skeleton.css" /> | ||||||||||||
| <link rel="stylesheet" href="./styles/search.css" /> | ||||||||||||
| <link rel="stylesheet" href="./styles/message-box.css" /> | ||||||||||||
| <link rel="stylesheet" href="./styles/modal.css" /> | ||||||||||||
| <title>영화 리뷰</title> | ||||||||||||
| </head> | ||||||||||||
| <body> | ||||||||||||
|
|
@@ -243,8 +244,7 @@ <h2 id="movie-list-title">지금 인기 있는 영화</h2> | |||||||||||
| </div> | ||||||||||||
| </li> | ||||||||||||
| </ul> | ||||||||||||
|
|
||||||||||||
| <button class="primary" id="more-button">더보기</button> | ||||||||||||
| <div class="scroll-sentinel"></div> | ||||||||||||
| </section> | ||||||||||||
| </main> | ||||||||||||
| </div> | ||||||||||||
|
|
@@ -254,6 +254,49 @@ <h2 id="movie-list-title">지금 인기 있는 영화</h2> | |||||||||||
| <p><img src="./images/woowacourse_logo.png" width="180" /></p> | ||||||||||||
| </footer> | ||||||||||||
| </div> | ||||||||||||
|
|
||||||||||||
| <div class="modal-background" id="modal-background"> | ||||||||||||
| <div class="modal"> | ||||||||||||
| <button class="close-modal" id="close-modal"> | ||||||||||||
| <img src="./images/modal_button_close.png" /> | ||||||||||||
| </button> | ||||||||||||
| <div class="modal-container"> | ||||||||||||
|
Comment on lines
+258
to
+263
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 모달 접근성 시맨틱이 부족해 스크린리더 사용성이 떨어집니다. Line 258-263, 268 구간에서 대화상자 역할( 개선 예시-<div class="modal-background" id="modal-background">
- <div class="modal">
- <button class="close-modal" id="close-modal">
- <img src="./images/modal_button_close.png" />
+<div class="modal-background" id="modal-background">
+ <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+ <button class="close-modal" id="close-modal" aria-label="모달 닫기">
+ <img src="./images/modal_button_close.png" alt="" />
</button>
@@
- <h2></h2>
+ <h2 id="modal-title"></h2>Also applies to: 268-268 🤖 Prompt for AI Agents |
||||||||||||
| <div class="modal-image"> | ||||||||||||
| <img src="" /> | ||||||||||||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 빈 Line 265의 수정 예시-<img src="" />
+<img
+ src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
+ alt="영화 포스터"
+/>📝 Committable suggestion
Suggested change
🧰 Tools🪛 HTMLHint (1.9.2)[error] 265-265: The attribute [ src ] of the tag [ img ] must have a value. (src-not-empty) 🤖 Prompt for AI Agents |
||||||||||||
| </div> | ||||||||||||
| <div class="modal-description"> | ||||||||||||
| <h2></h2> | ||||||||||||
| <p class="category"></p> | ||||||||||||
| <p class="rate"> | ||||||||||||
| <span class="rate-label">평균</span> | ||||||||||||
| <img src="./images/star_filled.png" class="star" /><span | ||||||||||||
| class="rate-value" | ||||||||||||
| ></span> | ||||||||||||
| </p> | ||||||||||||
| <hr /> | ||||||||||||
| <h3>내 별점</h3> | ||||||||||||
| <div class="movie-rating"> | ||||||||||||
| <span class="stars" | ||||||||||||
| ><img src="./images/star_empty.png" alt="star" /> | ||||||||||||
| <img src="./images/star_empty.png" alt="star" /> | ||||||||||||
| <img src="./images/star_empty.png" alt="star" /> | ||||||||||||
| <img src="./images/star_empty.png" alt="star" /> | ||||||||||||
| <img src="./images/star_empty.png" alt="star" /> | ||||||||||||
| </span> | ||||||||||||
| <span class="rating-text">평가해주세요</span> | ||||||||||||
| <span class="rating-score" | ||||||||||||
| >(<span id="rating-value">0</span>/10)</span | ||||||||||||
| > | ||||||||||||
| </div> | ||||||||||||
|
|
||||||||||||
| <hr /> | ||||||||||||
| <h3>줄거리</h3> | ||||||||||||
| <p class="detail"></p> | ||||||||||||
| </div> | ||||||||||||
| </div> | ||||||||||||
| </div> | ||||||||||||
| </div> | ||||||||||||
|
|
||||||||||||
| <script type="module" src="./src/main.ts"></script> | ||||||||||||
| </body> | ||||||||||||
| </html> | ||||||||||||
|
|
||||||||||||
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.
movie-rating.cy.ts 도 동일한 openMovieModal() 헬퍼를 각각 정의하고 있는데요. 공통유틸로 분리해보면 어떨까요?