hotfix: E2E 테스트 및 CI 설정 (#412)

* refactor: e2e 테스트 수정 및 ci설정 (#408) * refactor: custom commands 추가 및 네이밍 수정 (#404) * chore: cypress open script 명령어 생성 (#404) * test: 테스트 코드 수정 (#404) * fix: 지도 랜드마크 마커 비활성화 (#404) * feat: e2e 테스트 workflow 작성 (#404) * bug: 데모데이간 나왔던 버그 수정 (#406) * refactor: 검색창에 검색어 입력 후 재입력할 때 전부 지워지도록 수정 (#403) * refactor: 상세 페이지 헤더에 searchBar가 나오지 않도록 수정 (#403) * refactor: 상세 페이지 헤더에 searchBar가 나오지 않도록 수정 (#403) * refactor: 좋아요 표시한 카머의 좋아요 마크 수정 (#403) * chore: defaultTimeout 설정 추가 * fix: yarn install 추가 * fix: workflow step 분리 * fix: workflow 환경변수 설정 * fix: defaultTimeOut 기본 값으로 설정 * fix: defaultTimeOut 10초로 설정 --------- Co-authored-by: Minjae Kim <[email protected]>
woowacourse-teams · Sep 1, 2023 · c1ec179 · c1ec179
1 parent 4644f15
commit c1ec179
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 96 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -0,0 +1,33 @@
+name: 🍔 E2E 테스트 🍔
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    name: E2E Test 딱 대라!
+    env:
+      working-directory: ./frontend
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: 🍔 yarn install
+        run: yarn install
+        working-directory: ${{ env.working-directory }}
+
+      - name: 🍔 E2E 테스트
+        uses: cypress-io/github-action@v5
+        with:
+          working-directory: ${{ env.working-directory }}
+          start: yarn start
+          browser: chrome
+        env:
+          BASE_URL: ${{secrets.DEV_BASE_URL}}
diff --git a/frontend/cypress.config.ts b/frontend/cypress.config.ts
@@ -5,5 +5,6 @@ export default defineConfig({
     viewportWidth: 1920,
     viewportHeight: 1080,
     baseUrl: 'http://localhost:3000',
+    defaultCommandTimeout: 10000,
   },
 });
diff --git a/frontend/cypress/e2e/mapInteraction.cy.ts b/frontend/cypress/e2e/mapInteraction.cy.ts
diff --git a/frontend/cypress/e2e/restaurantListInteraction.cy.ts b/frontend/cypress/e2e/restaurantListInteraction.cy.ts
@@ -1,55 +1,33 @@
 describe('음식점 리스트 상호작용 테스트', () => {
-  it('현재 지도 바운더리 내의 음식점이 리스트에 생성된다.', () => {
-    const restaurantNames = [
-      '바이킹스워프',
-      '소피텔',
-      '몽드샬롯',
-      '대성연탄갈비',
-      '미타우동',
-      '형제상회 가락몰지점',
-      '그랜드 워커힐 서울 더파빌리온',
-      '산과바다',
+  it('선택한 카테고리에 해당하는 음식점이 리스트에 그려지고, 음식점이 존재하지 않는 경우 "일치하는 음식점이 없어요."라는 문구를 가진 화면을 보여준다.', () => {
+    const categories = [
+      '일식당',
+      '한식',
+      '와인',
+      '초밥,롤',
+      '생선회',
+      '양식',
+      '와인',
+      '육류,고기요리',
+      '이자카야',
+      '돼지고기구이',
+      '요리주점',
     ];
 
-    cy.intercept(
-      'GET',
-      `${Cypress.env(
-        'apiUrl',
-      )}/api/restaurants?lowLatitude=37.4526109976426&highLatitude=37.57787843528734&lowLongitude=127.04205511118164&highLongitude=127.16393468881836`,
-      { fixture: 'restaurants' },
-    );
     cy.visit(Cypress.config().baseUrl);
-    cy.shouldBeList(restaurantNames);
-  });
-
-  it('선택한 카테고리에 해당하는 음식점이 리스트에 생성된다.', () => {
-    const categoryToExpectedRestaurants = [
-      [
-        '일식당',
-        ['동양', '냠냠물고기 2호점', '스시이도 오코노미', '스시아오마츠', '텐지몽', '숙성회장', '스시한다', '스시렌'],
-      ],
-      ['한식', ['식도원', '맛좋은순대국', '고흥선어회맛집', '7th Door', '산과바다']],
-      ['와인', ['우오보 파스타 바']],
-    ];
-
-    cy.visit(Cypress.config().baseUrl);
-    cy.wrap(categoryToExpectedRestaurants).each((item: [string, string[]]) => {
-      cy.get(`[data-label='${item[0]}']`).click();
-      cy.shouldBeList(item[1]);
-    });
-  });
-
-  it('검색창에 주소 입력시 해당 주소를 중심좌표로 리스트가 생성된다.', () => {
-    const addressToExpectedRestaurants = [
-      ['대구', ['오늘도한우']],
-      ['분당', ['종로영풍갈비', '스시야']],
-      ['경주', ['영양숯불갈비']],
-    ];
-
-    cy.wrap(addressToExpectedRestaurants).each((item: [string, string[]]) => {
-      cy.visit(Cypress.config().baseUrl);
-      cy.getBySel('지역 검색').type(item[0]).wait(1000).type('{enter}');
-      cy.shouldBeList(item[1]);
+    cy.wrap(categories).each((category: string) => {
+      cy.get(`[data-label='${category}']`).click();
+      cy.getByCy('음식점 리스트').then($restaurantList => {
+        if ($restaurantList.find('[data-cy="음식점 카드"]').length) {
+          cy.getByCy('음식점 카드')
+            .should('exist')
+            .each(restaurantCard => {
+              expect(restaurantCard.text()).to.include(category);
+            });
+        } else {
+          cy.getByCy('음식점 리스트').should('contain.text', '일치하는 음식점이 없어요.');
+        }
+      });
     });
   });
 });
diff --git a/frontend/cypress/support/commands.ts b/frontend/cypress/support/commands.ts
@@ -1,7 +1,8 @@
-Cypress.Commands.add('getBySel', (selector, ...args) => cy.get(`[data-cy='${selector}']`, ...args));
+Cypress.Commands.add('getByCy', (selector, ...args) => cy.get(`[data-cy='${selector}']`, ...args));
+Cypress.Commands.add('getByAriaLabel', (selector, ...args) => cy.get(`[aria-label='${selector}']`, ...args));
 
 Cypress.Commands.add('shouldBeList', restaurantNames => {
   restaurantNames.forEach(name => {
-    cy.getBySel('음식점 리스트').find(`[data-cy="${name} 카드"]`).should('exist');
+    cy.getByAriaLabel('음식점 리스트').find(`[data-cy="${name} 카드"]`).should('exist');
   });
 });
diff --git a/frontend/cypress/support/index.d.ts b/frontend/cypress/support/index.d.ts
@@ -1,6 +1,7 @@
 declare namespace Cypress {
   interface Chainable {
-    getBySel(selector: string, ...args): Chainable;
+    getByCy(selector: string, ...args): Chainable;
+    getByAriaLabel(selector: string, ...args): Chainable;
     shouldBeList(restaurantNames: string[]): Chainable;
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,7 +14,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "jest",
-    "cy:run": "cypress run"
+    "cy:run": "cypress run",
+    "cy:open": "cypress open"
   },
   "dependencies": {
     "@googlemaps/react-wrapper": "^1.1.35",

diff --git a/frontend/src/components/@common/Header/Header.tsx b/frontend/src/components/@common/Header/Header.tsx
@@ -18,7 +18,7 @@ function Header() {
   const { isMobile } = useMediaQuery();
   const { value: isModalOpen, setTrue: openModal, setFalse: closeModal } = useBooleanState(false);
   const navigator = useNavigate();
-  const { id } = useParams();
+  const { id, celebId } = useParams();
   const [token, clearToken, oauth] = useTokenStore(state => [state.token, state.clearToken, state.oauth]);
 
   const options = useMemo(() => (isEmptyString(token) ? OPTION_FOR_NOT_USER : OPTION_FOR_USER), [token]);
@@ -48,7 +48,7 @@ function Header() {
         <Link aria-label="셀럽잇 홈페이지" role="button" to="/">
           <Logo width={136} />
         </Link>
-        {!(isMobile || id) && (
+        {!(isMobile || id || celebId) && (
           <Wrapper apiKey={process.env.GOOGLE_MAP_API_KEY} language="ko" libraries={['places']}>
             <SearchBar />
           </Wrapper>

diff --git a/frontend/src/components/@common/Map/OverlayMarker.tsx b/frontend/src/components/@common/Map/OverlayMarker.tsx
@@ -45,9 +45,9 @@ function OverlayMarker({ celeb, restaurant, map, quadrant, isRestaurantHovered }
           >
             <ProfileImage name={celeb.name} imageUrl={celeb.profileImageUrl} size="100%" />
             {restaurant.isLiked && (
-              <LikeButton aria-label="좋아요" type="button">
-                {restaurant.isLiked && <Love width={20} fill="red" fillOpacity={0.5} aria-hidden="true" />}
-              </LikeButton>
+              <StyledLikeButton aria-label="좋아요" type="button">
+                <Love width={20} fill="red" fillOpacity={0.8} aria-hidden="true" />
+              </StyledLikeButton>
             )}
           </StyledMarker>
           {isClicked && (
@@ -127,7 +127,7 @@ const StyledModal = styled.div<{ quadrant: Quadrant }>`
   box-shadow: 0 4px 6px rgb(0 0 0 / 20%);
 `;
 
-const LikeButton = styled.button`
+const StyledLikeButton = styled.button`
   position: absolute;
   right: -12px;
   bottom: -12px;

diff --git a/frontend/src/components/@common/Map/hooks/useMap.ts b/frontend/src/components/@common/Map/hooks/useMap.ts
@@ -173,6 +173,7 @@ const useMap = ({ center, zoom, onClick, onIdle, markers }: UseDrawMapProps) =>
         disableDefaultUI: true,
         gestureHandling: 'greedy',
         styles,
+        clickableIcons: false,
       });
 
       markers?.forEach(

diff --git a/frontend/src/components/RestaurantCard/RestaurantCard.tsx b/frontend/src/components/RestaurantCard/RestaurantCard.tsx
@@ -41,7 +41,7 @@ function RestaurantCard({ restaurant, celebs, size, type = 'list', setHoveredId
         onClick={onClick}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        data-cy={`${name} 카드`}
+        data-cy="음식점 카드"
         aria-label={`${name} 카드`}
         tabIndex={0}
       >

diff --git a/frontend/src/components/SearchBar/SearchBar.tsx b/frontend/src/components/SearchBar/SearchBar.tsx
@@ -57,9 +57,13 @@ function SearchBar() {
     };
   }, []);
 
+  const clearInput = () => {
+    inputRef.current.value = '';
+  };
+
   return (
     <StyledContainer>
-      <StyledInput placeholder="지역으로 검색하기" data-cy="지역 검색" ref={inputRef} />
+      <StyledInput placeholder="지역으로 검색하기" data-cy="지역 검색" ref={inputRef} onFocus={clearInput} />
       <StyledButton type="button" aria-hidden>
         <SearchIcon aria-label="검색" />
       </StyledButton>

diff --git a/frontend/src/components/SuggestionButton/SuggestionButton.tsx b/frontend/src/components/SuggestionButton/SuggestionButton.tsx
@@ -13,7 +13,6 @@ const labels = [
   '레스토랑 이름이 잘못되었어요.',
   '레스토랑 주소가 잘못되었어요.',
   '레스토랑 전화번호가 잘못되었어요',
-  '레스토랑 위치가 잘못되었어요.',
 ];
 
 function SuggestionButton() {