test: 예시 통합 테스트 추가

.dockerignore

@@ -0,0 +1,17 @@
+# Ignore node_modules
+node_modules
+
+# Ignore build output
+build
+dist
+
+# Ignore development files
+# src/**/*.test.js
+# src/**/*.spec.js
+# src/**/*.stories.js
+
+# Ignore miscellaneous files
+.DS_Store
+npm-debug.log
+yarn-debug.log
+yarn-error.log

.github/workflows/playwright.yml

@@ -0,0 +1,60 @@
+name: 테스트
+on:
+  push:
+    branches: [develop]
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  e2e:
+    environment: test
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: ${{ runner.os }}-pnpm-store-
+
+      - name: install dependencies
+        run: |
+          pnpm install --frozen-lockfile
+
+      - name: Build app
+        run: pnpm run build
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+        env:
+          REACT_APP_API: ${{ secrets.REACT_APP_API }}
+          PORT: ${{ vars.PORT }}
+          REACT_APP_WISH: ${{ vars.REACT_APP_WISH }}
+          REACT_APP_SUGGESTION: ${{ vars.REACT_APP_SUGGESTION }}
+          REACT_APP_E_BOOK_LIBRARY: ${{ vars.REACT_APP_E_BOOK_LIBRARY }}
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -25,3 +25,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -119,6 +119,29 @@
     pnpm ladle serve
     ```
 
+## 프로젝트 테스트 방법
+
+```sh
+
+  pnpm exec playwright test
+    Runs the end-to-end tests.
+
+  pnpm exec playwright test --ui
+    Starts the interactive UI mode.
+
+  pnpm exec playwright test --project=chromium
+    Runs the tests only on Desktop Chrome.
+
+  pnpm exec playwright test example
+    Runs the tests in a specific file.
+
+  pnpm exec playwright test --debug
+    Runs the tests in debug mode.
+
+  pnpm exec playwright codegen
+    Auto generate tests with Codegen.
+```
+
 ## 📌 팀원소개
 
 서울42 인트라 아이디로 소개합니다!

app.dockerfile

@@ -0,0 +1,15 @@
+FROM node:20-alpine
+
+RUN npm install -g [email protected]
+
+WORKDIR /app
+
+# Copy the necessary file into image
+COPY package.json pnpm-lock.yaml ./
+
+# Install
+RUN pnpm install --frozen-lockfile
+
+RUN echo "pnpm version: $(pnpm --version)"
+
+CMD ["pnpm", "dev"]

e2e/compose.yml

@@ -0,0 +1,19 @@
+services:
+  playwright:
+    build:
+      context: ..
+      dockerfile: e2e/dockerfile
+    command: pnpm e2e # ls -al e2e # pnpm e2e
+    environment:
+      DISPLAY: ${DISPLAY}
+    env_file: ../.env
+    volumes:
+      - /tmp/.X11-unix:/tmp/.X11-unix
+      - ../src:/app/src:ro
+      - ../vite.config.ts:/app/vite.config.ts:ro
+      - ../package.json:/app/package.json:ro
+      - ../e2e:/app/e2e:ro
+      - ../test-results.docker:/app/test-results
+      - ../playwright-report.docker:/app/playwright-report.docker
+    ports:
+      - 9323:9323

e2e/dockerfile

@@ -0,0 +1,14 @@
+FROM mcr.microsoft.com/playwright:v1.37.1-jammy
+
+WORKDIR /app
+
+# Corepack으로 pnpm 설치
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+# 브라우저 의존성 설치
+RUN pnpm dlx playwright install-deps
+
+COPY package.json pnpm-lock.yaml /app/
+RUN pnpm install --frozen-lockfile
+
+ENV IS_DOCKER=true

e2e/playwright.browsers.ts

@@ -0,0 +1,38 @@
+import { devices } from "@playwright/test";
+import os from "node:os";
+
+// https://github.com/microsoft/playwright/issues/23296
+const disableWebkit =
+  os.platform() === "linux" && !process.env.CI && !process.env.IS_DOCKER;
+
+export const nonLTSLinuxBrowsers = [
+  { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+  { name: "firefox", use: { ...devices["Desktop Firefox"] } },
+];
+
+const macBrowser = { name: "webkit", use: { ...devices["Desktop Safari"] } };
+
+export const majorBrowsers = disableWebkit
+  ? nonLTSLinuxBrowsers
+  : [...nonLTSLinuxBrowsers, macBrowser];
+
+/* Test against mobile viewports. */
+const mobileViewports = [
+  { name: "Mobile Chrome", use: { ...devices["Pixel 5"] } },
+  { name: "Mobile Safari", use: { ...devices["iPhone 12"] } },
+];
+
+/* Test against branded browsers. */
+const brandedBrowsers = [
+  {
+    name: "Microsoft Edge",
+    use: { ...devices["Desktop Edge"], channel: "msedge" },
+  },
+  {
+    name: "Google Chrome",
+    use: { ...devices["Desktop Chrome"], channel: "chrome" },
+  },
+];
+
+/** List of all browsers to test against. */
+export const projects = majorBrowsers;

e2e/playwright.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig } from "@playwright/test";
+import { projects } from "./playwright.browsers";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+const baseURL = `http://127.0.0.1:${process.env.PORT || 4242}`;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ["list"],
+    [
+      "html",
+      process.env.IS_DOCKER
+        ? { open: "never", host: "0.0.0.0" }
+        : { open: "on-failure" },
+    ],
+  ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects,
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "pnpm dev",
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+  },
+});

e2e/tests/auth.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test.skip('42 로그인 페이지 이동', async ({ page }) => {
+  await page.goto('http://localhost:4242/');
+  await page.getByRole('link', { name: 'login 로그인' }).click();
+  await page.getByRole('link', { name: '42 intra 로그인' }).click();
+  await page.getByRole('link', { name: 'Sign in as student' }).click();
+  await page.getByPlaceholder('Login or email').click();
+  await page.locator('body').click();
+});

e2e/tests/example.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects the URL to contain intro.
+  await expect(page).toHaveURL(/.*intro/);
+});

e2e/tests/frontpage.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+
+test("집현전 로고가 보임", async ({ page }) => {
+  await page.goto("http://localhost:4242/");
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/집현전/);
+});

e2e/tests/search.spec.ts

@@ -0,0 +1,23 @@
+import { test } from "@playwright/test";
+
+test("전체 도서 목록 열람", async ({ page }) => {
+  await page.goto("http://localhost:4242/");
+  await page.getByRole("link", { name: "도서목록" }).click();
+  await page.getByRole("button", { name: "IT 일반" }).click();
+  await page.getByRole("button", { name: "nextCategory" }).click();
+  await page.getByRole("button", { name: "preCategory" }).click();
+  await page.getByRole("button", { name: "순수과학" }).click();
+});
+
+test("러닝 리액트 도서 검색", async ({ page }) => {
+  await page.goto("http://localhost:4242/");
+  await page.getByRole("textbox").click();
+  await page.getByRole("textbox").fill("리액트");
+  await page.getByRole("textbox").press("Enter");
+  await page
+    .getByRole("link")
+    .filter({
+      hasText: "러닝 리액트 러닝 리액트 알렉스 뱅크스 | 한빛미디어",
+    })
+    .click();
+});

package.json

@@ -30,7 +30,9 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "e2e": "playwright test --config e2e",
+    "e2e:docker": "docker compose -f e2e/compose.yml up"
   },
   "eslintConfig": {
     "extends": [
@@ -51,6 +53,8 @@
     ]
   },
   "devDependencies": {
+    "@playwright/test": "^1.37.1",
+    "@types/node": "^20.3.1",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@types/react-router-dom": "^5.3.3",