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

.gitignore

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

client/.babelrc.js

@@ -0,0 +1,16 @@
+import ReactFreshBabelPlugin from 'react-refresh/babel';
+
+/** @type {import('@babel/core').TransformOptions} */
+export default {
+  presets: [
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        development: process.env.NODE_ENV === 'development',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: [process.env.NODE_ENV === 'development' && false && ReactFreshBabelPlugin].filter(Boolean),
+};

client/.npmrc

@@ -0,0 +1,3 @@
+engine-strict = true
+install-strategy = linked
+prefer-offline = true

client/.nvmrc

@@ -0,0 +1 @@
+v18.16.0

client/.storybook/main.ts

@@ -1,11 +1,13 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {},
+    options: {
+      fastRefresh: true,
+    },
   },
   docs: {
     autodocs: 'tag',

client/.storybook/preview.tsx

@@ -1,11 +1,17 @@
 import type { Preview } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initialize, mswDecorator, mswLoader } from 'msw-storybook-addon';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
+import { AuthProvider } from '../src/context/AuthContext';
+import handlers from '../src/mocks/handlers';
 import GlobalStyle from '../src/styles/GlobalStyle';
 import ResetStyle from '../src/styles/ResetStyle';
 import theme from '../src/styles/theme';
 
+initialize();
+
 const customViewports = {
   Default: {
     name: 'Default',
@@ -16,6 +22,14 @@ const customViewports = {
   },
 };
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      suspense: true,
+    },
+  },
+});
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -29,19 +43,29 @@ const preview: Preview = {
       viewports: { ...customViewports },
       defaultViewport: 'Default',
     },
+    msw: {
+      handlers,
+    },
   },
 
   decorators: [
+    mswDecorator,
     (Story) => (
-      <MemoryRouter initialEntries={['/']}>
+      <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
           <ResetStyle />
           <GlobalStyle />
-          <Story />
+          <AuthProvider>
+            <MemoryRouter initialEntries={['/']}>
+              <Story />
+            </MemoryRouter>
+          </AuthProvider>
         </ThemeProvider>
-      </MemoryRouter>
+      </QueryClientProvider>
     ),
   ],
+
+  loaders: [mswLoader],
 };
 
 export default preview;

client/.storybook/webpack.config.js

@@ -1,5 +1,5 @@
 import { merge } from 'webpack-merge';
-import defaultConfig from '../webpack.config.js';
+import defaultConfig from '../webpack.development.js';
 
 export default function ({ config }) {
   return merge(defaultConfig, config);

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,22 +3,29 @@
   <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" />
-    <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-precomposed" sizes="128x128" href="ios.png" />
+    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
+    <title>요즘카페</title>
 
     <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>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= process.env.GOOGLE_ANALYTICS_TRACKING_ID %>"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', '<%= process.env.GOOGLE_ANALYTICS_TRACKING_ID %>');
+    </script>
+
+    <!-- Meta Pixel Code -->
+    <%= process.env.META_PIXEL_CODE %>
+    <!-- End Meta Pixel Code -->
   </head>
   <body>
     <div id="root"></div>