사용자 스토리를 기반으로 E2E 테스트 작성하기

.gitignore

@@ -41,3 +41,6 @@ server/.nb-gradle/
 server/.vscode/
 
 .env
+
+### Mac OS ###
+.DS_Store

client/cypress.config.ts

@@ -3,5 +3,14 @@ import { defineConfig } from 'cypress';
 export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000',
+    viewportWidth: 390,
+    viewportHeight: 844,
+  },
+
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+    },
   },
 });

client/cypress/e2e/cafe-detail-info.cy.ts

@@ -0,0 +1,27 @@
+/// <reference types="cypress" />
+
+describe('CafeDetailBottomSheet test', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('더보기 버튼을 클릭하면 카페 이름, 주소, 영업시간, 상세설명을 볼 수 있다.', () => {
+    cy.contains('더보기').click({ force: true });
+
+    cy.get('[data-testid=cafe-name]').should('be.visible');
+    cy.get('[data-testid=cafe-address]').should('be.visible');
+    cy.get('[data-testid=cafe-openingHours]').should('be.visible');
+    cy.get('[data-testid=cafe-description]').should('be.visible');
+  });
+
+  it('바텀 시트에서 X 버튼이 보이고, X 버튼을 클릭하면 시트가 닫힌다.', () => {
+    cy.wait(2000);
+    cy.contains('더보기').click({ force: true });
+
+    cy.get('[data-testid=close-button]').should('be.visible');
+
+    cy.get('[data-testid=close-button]').click();
+
+    cy.get('Container').should('not.exist');
+  });
+});

client/cypress/e2e/like-count-button.cy.ts

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+describe('LikeButton', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('좋아요 버튼을 누르면 좋아요 버튼이 활성화되고, 좋아요 카운트가 1 증가한다.', () => {
+    cy.get('[data-testid="likeButton"]').click({ multiple: true, force: true });
+
+    cy.get('[data-testid="likeButton"]').should('have.css', 'color', 'rgb(255, 255, 255)');
+    cy.get('[aria-live="assertive"]').should('contain.text', '좋아요가 추가되었습니다.');
+  });
+
+  it('좋아요한 버튼을 다시 누르면 좋아요 버튼이 비활성화되고, 좋아요 카운트가 1 감소한다', () => {
+    cy.get('[data-testid="likeButton"]').click({ multiple: true, force: true });
+
+    cy.get('[data-testid="likeButton"]').should('have.css', 'color', 'rgb(255, 255, 255)');
+    cy.get('[aria-live="assertive"]').should('contain.text', '좋아요 취소되었습니다.');
+  });
+});

client/cypress/e2e/menu-button.cy.ts

@@ -0,0 +1,25 @@
+describe('CafeMenuBottomSheet', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('메뉴 버튼을 클릭하면 대표메뉴, 메뉴 아이템이 보인다.', () => {
+    cy.contains('메뉴').click({ force: true });
+
+    cy.get('[data-testid="menuBottomSheet"]').should('be.visible');
+
+    cy.contains('대표 메뉴').should('be.visible');
+    cy.get('[data-testid="menu"]').should('be.visible');
+    cy.get('[data-testid="menuItem"]').should('have.length.greaterThan', 0);
+  });
+  it('바텀 시트에서 X 버튼이 보이고, X 버튼을 클릭하면 시트가 닫힌다.', () => {
+    cy.wait(2000);
+    cy.contains('더보기').click({ force: true });
+
+    cy.get('[data-testid=close-button]').should('be.visible');
+
+    cy.get('[data-testid=close-button]').click();
+
+    cy.get('Container').should('not.exist');
+  });
+});

client/cypress/e2e/scroll-cafes.cy.ts

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-context('Scroll Cafes', () => {
+describe('홈 화면에서 카페 이미지를 위로 스크롤하면 다음 카페 이미지가 나온다.', () => {
   beforeEach(() => {
     cy.visit('/');
   });
@@ -13,4 +13,51 @@ context('Scroll Cafes', () => {
     cy.get('main > ul').scrollTo(0, 400);
     cy.contains('성수 카페2 (1호점)').should('be.visible');
   });
+
+  it('스크롤을 2번 하면 세 번째 카페가 나타나야 한다.', () => {
+    cy.get('main > ul').scrollTo(0, 400 * 3);
+    cy.contains('성수 카페3 (1호점)').should('be.visible');
+  });
+});
+
+describe('카페 이미지를 좌우로 스크롤하여 다음, 이전 카페 이미지를 불러온다.', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('should scroll left and right in the carousel', () => {
+    cy.get('[data-testid="cafe-card"]').should('be.visible');
+
+    let currentImageIndex = 0;
+
+    const scrollRight = () => {
+      currentImageIndex++;
+
+      cy.get('[data-testid="cafe-card"]')
+        .get('[data-testid="carousel-image"]')
+        .should('have.attr', 'src', `/images/cafe-image-${currentImageIndex}.png`);
+      cy.get('[data-testid="carousel-dots"]').get('[data-testid="dot"]').eq(currentImageIndex);
+    };
+
+    const scrollLeft = () => {
+      currentImageIndex--;
+      const expectedImageSrc = `/images/cafe-image-${currentImageIndex}.png`;
+
+      cy.get('[data-testid="cafe-card"]')
+        .find('[data-testid="carousel-image"]')
+        .should('have.attr', 'src', expectedImageSrc);
+
+      cy.get('[data-testid="carousel-dots"]')
+        .find('[data-testid="dot"]')
+        .eq(currentImageIndex)
+        .should('have.class', 'active');
+
+      cy.get('[data-testid="cafe-card"]').scrollTo('left');
+    };
+
+    scrollRight();
+    scrollRight();
+    scrollLeft();
+    scrollLeft();
+  });
 });

client/cypress/e2e/share-button.cy.ts

@@ -0,0 +1,19 @@
+/// <reference types="cypress" />
+
+describe('ShareButton', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.window().then((window) => {
+      cy.stub(window.navigator.clipboard, 'writeText').resolves('https://yozm.cafe/cafes/1');
+    });
+  });
+
+  it('공유하기 버튼을 클릭하면 해당 카페 URL이 복사되고, alert창을 띄운다.', () => {
+    cy.contains('공유').click({ force: true });
+
+    cy.window().its('navigator.clipboard').invoke('readText');
+    cy.on('window:alert', (alertText) => {
+      expect(alertText).to.equal('URL이 복사되었습니다!');
+    });
+  });
+});

client/index.html

@@ -3,19 +3,19 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <meta name="theme-color" content="#FFD3D8" />
 
     <meta name="apple-mobile-web-app-title" content="요즘카페" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="#FFD3D8" />
-    <link rel="apple-touch-icon" sizes="128x128" href="ios.png" />
+    <link rel="apple-touch-icon" sizes="128x128" href="/assets/ios.png" />
     <link rel="apple-touch-icon-precomposed" sizes="128x128" href="ios.png" />
 
     <meta property="og:title" content="요즘카페" />
     <meta property="og:url" content="https://yozm.cafe/" />
     <meta property="og:type" content="website" />
-    <meta property="og:image" content="thumbnail-image.png" />
+    <meta property="og:image" content="/assets/thumbnail-image.png" />
     <meta property="og:description" content="트렌디한 성수 지역의 카페를 손쉽게 탐색하는 서비스, 요즘카페" />
 
     <title>요즘카페</title>

client/package.json

@@ -10,8 +10,8 @@
     "solo5star <[email protected]>"
   ],
   "scripts": {
-    "start": "cross-env NODE_ENV=development webpack serve",
-    "build": "cross-env NODE_ENV=production webpack",
+    "start": "cross-env NODE_ENV=development webpack serve --config webpack.development.js",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.production.js",
     "storybook": "cross-env NODE_ENV=development storybook dev -p 6006",
     "build:storybook": "cross-env NODE_ENV=production storybook build",
     "cypress:open": "cypress open --e2e --browser chrome",
@@ -23,7 +23,7 @@
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1",
+    "react-icons": "^4.11.0",
     "react-router-dom": "^6.14.1",
     "styled-components": "^6.0.2"
   },
@@ -45,6 +45,7 @@
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "babel-loader": "^9.1.2",
+    "babel-plugin-react-remove-properties": "^0.3.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "cypress": "^12.17.4",
@@ -74,6 +75,7 @@
     "stylelint-order": "^6.0.3",
     "typescript": "^5.1.6",
     "webpack": "^5.88.1",
+    "webpack-bundle-analyzer": "^4.9.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0"

client/src/components/CafeCard.tsx

@@ -49,14 +49,19 @@ const CafeCard = (props: CardProps) => {
           {`${currentImageIndex + 1}`}/{cafe.images.length}
         </CardQuantityContents>
       </CardQuantityContainer>
-      <CarouselImageList ref={ref}>
+      <CarouselImageList data-testid="cafe-card" ref={ref}>
         {cafe.images.map((image, index) => (
-          <CarouselImage key={index} src={Image.getUrl({ size: '500', filename: image })} alt={`${cafe}의 이미지`} />
+          <CarouselImage
+            data-testid="carousel-image"
+            key={index}
+            src={Image.getUrl({ size: '500', filename: image })}
+            alt={`${cafe}의 이미지`}
+          />
         ))}
       </CarouselImageList>
-      <DotsContainer>
+      <DotsContainer data-testid="carousel-dots">
         {cafe.images.map((_, index) => (
-          <Dot key={index} $active={index === currentImageIndex} />
+          <Dot data-testid="dot" key={index} $active={index === currentImageIndex} />
         ))}
       </DotsContainer>
       <CafeSummary

client/src/components/CafeDetailBottomSheet.tsx

@@ -27,10 +27,10 @@ const CafeDetailBottomSheet = (props: CafeDetailBottomSheetProps) => {
 
   return (
     <Container onClick={handlePreventClickPropagation} role="dialog" aria-modal="true">
-      <CloseButton>
+      <CloseButton data-testid="close-button">
         <CloseIcon onClick={onClose} />
       </CloseButton>
-      <Title>{cafe.name}</Title>
+      <Title data-testid="cafe-name">{cafe.name}</Title>
       <Spacer $size={'4'} />
       <Suspense>
         <CafeMenu cafeId={cafe.id} />
@@ -39,12 +39,12 @@ const CafeDetailBottomSheet = (props: CafeDetailBottomSheetProps) => {
         <LocationDetail>
           <BsGeoAlt />
           <a href={cafe.detail.mapUrl} target="_blank" rel="noopener noreferrer">
-            <LocationName>
+            <LocationName data-testid="cafe-address">
               {cafe.address} <BsBoxArrowUpRight />
             </LocationName>
           </a>
         </LocationDetail>
-        <OpeningHoursDetails>
+        <OpeningHoursDetails data-testid="cafe-openingHours">
           <OpeningHoursDetail openingHours={cafe.detail.openingHours} />
         </OpeningHoursDetails>
         {/* <Info>
@@ -53,7 +53,7 @@ const CafeDetailBottomSheet = (props: CafeDetailBottomSheetProps) => {
         </Info> */}
       </InfoContainer>
       <Spacer $size={'6'} />
-      <Content>
+      <Content data-testid="cafe-description">
         {cafe.detail.description.split('\n').map((paragraph, index) => (
           <p key={index}>{paragraph}</p>
         ))}

client/src/components/CafeMenuBottomSheet.tsx

@@ -37,8 +37,8 @@ const CafeMenuBottomSheet = (props: CafeMenuBottomSheetProps) => {
   return (
     <>
       {createPortal(
-        <Container onClick={handlePreventClickPropagation}>
-          <CloseButton>
+        <Container data-testid="menuBottomSheet" onClick={handlePreventClickPropagation}>
+          <CloseButton data-testid="close-button">
             <CloseIcon onClick={onClose} />
           </CloseButton>
 
@@ -61,7 +61,7 @@ const CafeMenuBottomSheet = (props: CafeMenuBottomSheetProps) => {
 
           {otherMenus.length > 0 && (
             <>
-              <CafeMenuListTitle>메뉴</CafeMenuListTitle>
+              <CafeMenuListTitle data-testid="menu">메뉴</CafeMenuListTitle>
               <CafeMenuList menus={otherMenus} />
               <Spacer $size={'8'} />
             </>

client/src/components/CafeMenuList.tsx

@@ -14,7 +14,7 @@ const CafeMenuList = (props: CafeMenuListProps) => {
   const otherMenus = menus.filter((menuItem) => !menuItem.isRecommended);
 
   return (
-    <MenuList>
+    <MenuList data-testid="menuItem">
       {recommendedMenus.map((menuItem) => (
         <MenuListItem key={menuItem.id} menuItem={menuItem} />
       ))}

client/src/components/LikeButton.tsx

@@ -23,7 +23,7 @@ const LikeButton = (props: LikeButtonProps) => {
   };
 
   return (
-    <Container aria-label="좋아요 버튼" tabIndex={0} role="button">
+    <Container data-testid="likeButton" aria-label="좋아요 버튼" tabIndex={0} role="button">
       <HeartIcon $active={active} onClick={handleLikeClick} />
       <LikeCount>{likeCount}</LikeCount>
       <Announcement aria-live="assertive" aria-atomic="true" aria-relevant="text">

client/src/components/LoginModal.tsx

@@ -4,7 +4,6 @@ import { styled } from 'styled-components';
 import useAuthUrls from '../hooks/useAuthUrls';
 import type { Theme } from '../styles/theme';
 import LoginButton from './LoginButton';
-import Logo from './Logo';
 
 const brandColors: Record<string, keyof Theme['color']> = {
   kakao: 'yellow',
@@ -30,7 +29,7 @@ const LoginModal = (props: ModalProps) => {
         <CloseButtonContainer aria-label="닫기 버튼" role="dialog" aria-modal="true" aria-hidden="true">
           <CloseIcon onClick={onClose} />
         </CloseButtonContainer>
-        <Logo fontSize="5xl" />
+        <Logo />
         <LoginTitle>간편 로그인</LoginTitle>
         <ButtonContainer>
           {urls.map(({ provider, authorizationUrl }) => (
@@ -129,3 +128,7 @@ const ButtonContainer = styled.section`
   justify-content: space-evenly;
   width: 100%;
 `;
+
+const Logo = styled.img.attrs({ src: '/assets/logo.svg' })`
+  height: ${({ theme }) => theme.fontSize['5xl']};
+`;