Merge pull request #195 from 1ilsang/feat/github-action-enhance

feat(github-action): Separate jobs for enhancement build script

.github/actions/nextjs-build-export/action.yml

@@ -0,0 +1,32 @@
+# https://docs.github.com/en/actions/creating-actions/creating-a-composite-action?platform=mac#creating-an-action-metadata-file
+name: nextjs-build-export
+
+inputs:
+  e2e:
+    required: false
+    default: 'false'
+
+runs:
+  using: composite
+
+  steps:
+    - name: Restore Next.js related caches
+      uses: actions/cache@v4
+      with:
+        path: |
+          ${{ github.workspace }}/.next
+          ${{ github.workspace }}/out
+        key: ${{ runner.os }}-nextjs-store-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}-${{ inputs.e2e == 'true' && 'e2e' || 'default' }}
+        restore-keys: |
+          ${{ runner.os }}-nextjs-store-${{ hashFiles('**/pnpm-lock.yaml') }}-
+      id: cache-nextjs-build
+
+    - name: Build and Export [default]
+      shell: bash
+      if: steps.cache-nextjs-build.outputs.cache-hit != 'true' && inputs.e2e == 'false'
+      run: pnpm deploy-blog
+
+    - name: Build and Export [e2e]
+      shell: bash
+      if: steps.cache-nextjs-build.outputs.cache-hit != 'true' && inputs.e2e == 'true'
+      run: pnpm e2e:build

.github/actions/playwright-install/action.yml

@@ -0,0 +1,25 @@
+name: playwright-install
+
+runs:
+  using: composite
+
+  steps:
+    # https://github.com/microsoft/playwright/issues/7249#issuecomment-1373375487
+    - name: Get playwright version
+      shell: bash
+      run: |
+        echo "PLAYWRIGHT_VERSION=$(node -e "process.stdout.write(require('@playwright/test/package.json').version)")" >> $GITHUB_OUTPUT
+      id: playwright-version
+
+    - name: Cache Playwright Browsers for Playwright's Version
+      uses: actions/cache@v4
+      with:
+        # https://playwright.dev/docs/browsers#managing-browser-binaries
+        path: ~/Library/Caches/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
+      id: cache-playwright-browsers
+
+    - name: Setup Playwright
+      shell: bash
+      if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+      run: pnpm e2e:install

.github/actions/pnpm-install/action.yml

@@ -0,0 +1,33 @@
+name: pnpm-install
+
+runs:
+  using: composite
+
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version-file: .nvmrc
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@v3
+      with:
+        version: 8
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - name: Setup pnpm cache
+      uses: actions/cache@v4
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install

.github/workflows/code.yml

@@ -0,0 +1,30 @@
+name: code
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  lint:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: 🌱 Install pnpm
+        uses: ./.github/actions/pnpm-install
+
+      - name: 🏁 Lint
+        run: pnpm lint
+
+  build-export:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: 🌱 Install pnpm
+        uses: ./.github/actions/pnpm-install
+
+      - name: 🏗 Build and Export
+        uses: ./.github/actions/nextjs-build-export

.github/workflows/e2e-reusable.yml

@@ -0,0 +1,55 @@
+# https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions
+name: e2e-reusable
+
+on:
+  workflow_call:
+    inputs:
+      others:
+        type: boolean
+        default: false
+      dom-snapshot:
+        type: boolean
+        default: false
+      screen-snapshot:
+        type: boolean
+        default: false
+
+jobs:
+  i:
+    timeout-minutes: 60
+    runs-on: macos-latest
+    env:
+      TZ: Asia/Seoul
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: 🌱 Install pnpm
+        uses: ./.github/actions/pnpm-install
+
+      - name: 🥦 Install playwright
+        uses: ./.github/actions/playwright-install
+
+      - name: 🏗 Build and Export
+        uses: ./.github/actions/nextjs-build-export
+        with:
+          e2e: 'true'
+
+      - name: 🍄 Run Playwright [others]
+        if: inputs.others
+        run: pnpm e2e:others
+
+      - name: 🧊 Run Playwright [dom-snapshot]
+        if: inputs.dom-snapshot
+        run: pnpm e2e:dom
+
+      - name: 🩸 Run Playwright [screen-snapshot]
+        if: inputs.screen-snapshot
+        run: pnpm e2e:screen
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report-$${{ inputs.others && 'others' || inputs.dom-snapshot && 'dom-snapshot' || inputs.screen-snapshot && 'screen-snapshot' || 'no-input-name' }}
+          path: playwright-report/
+          retention-days: 10

.github/workflows/e2e.yml

@@ -0,0 +1,23 @@
+name: e2e
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  others:
+    uses: './.github/workflows/e2e-reusable.yml'
+    with:
+      others: true
+
+  dom-snapshot:
+    uses: './.github/workflows/e2e-reusable.yml'
+    with:
+      dom-snapshot: true
+
+  screen-snapshot:
+    uses: './.github/workflows/e2e-reusable.yml'
+    with:
+      screen-snapshot: true

e2e/404.spec.ts

@@ -1,19 +1,20 @@
 import { expect, test } from '@playwright/test';
-import { screenshotFullPage } from './utils';
+import { screenshotFullPage, waitImages } from './shared/utils';
+import { MACRO_SUITE } from './shared/constants';
 
 test.describe('404', () => {
   test('should redirect 404', async ({ page }) => {
     await page.goto('/something_wrong_path');
     await expect(page.getByText(/404 ERROR/)).toBeVisible();
   });
 
-  test(`screen`, async ({ page }) => {
+  test(MACRO_SUITE.SCREEN_SNAPSHOT, async ({ page }) => {
     await screenshotFullPage({ page, url: `/404`, arg: [`404.png`] });
   });
 
-  test(`dom`, async ({ page }) => {
+  test(MACRO_SUITE.DOM_SNAPSHOT, async ({ page }) => {
     await page.goto(`/404`);
-    await page.waitForTimeout(2000);
+    await waitImages({ page });
     const body = await page.locator('#__next').innerHTML();
     expect(body).toMatchSnapshot([`404.html`]);
   });

e2e/__snapshots__/404.spec.ts/desktop/404.html

@@ -1,4 +1,4 @@
-<main class="not-found-layout"><nav class="nav flex-wrap water-rainbow nav-shadow"><h2 class="tracking-tight focus:text-gray-700 text-2xl font-bold mt-2 mb-2 ml-3.5"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight focus:text-gray-700 text-xl mt-2.5 mr-6"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="tracking-tight focus:text-gray-700 text-xl mt-2.5 mr-6"><a class="hover-underline" href="/tags">tags</a></h2><div class="rounded-full mr-2 relative nav-avatar"><a href="/about"><img src="/assets/chul.png" alt="1ilsang"></a></div></div></nav><div class="not-found-container"><div><img src="/assets/404.webp" alt="surfing" width="720" height="580"></div><audio class="mt-4" src="/assets/jackpot.mp4" controls="" autoplay="" loop=""></audio><pre><code>
+<main class="not-found-layout"><nav class="nav flex-wrap water-rainbow"><h2 class="tracking-tight focus:text-gray-700 text-2xl font-bold mt-2 mb-2 ml-3.5"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight focus:text-gray-700 text-xl mt-2.5 mr-6"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="tracking-tight focus:text-gray-700 text-xl mt-2.5 mr-6"><a class="hover-underline" href="/tags">tags</a></h2><div class="rounded-full mr-2 relative nav-avatar"><a href="/about"><img src="/assets/chul.png" alt="1ilsang"></a></div></div></nav><div class="not-found-container"><div><img src="/assets/404.webp" alt="surfing" width="720" height="580"></div><audio class="mt-4" src="/assets/jackpot.mp4" controls="" autoplay="" loop=""></audio><pre><code>
 
       404 ERROR
 

e2e/__snapshots__/404.spec.ts/mobile/404.html

@@ -1,4 +1,4 @@
-<main class="not-found-layout"><nav class="nav flex-wrap water-rainbow nav-shadow"><h2 class="tracking-tight focus:text-gray-700 text-2xl font-bold mt-2 mb-2 ml-3.5"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight focus:text-gray-700 text-xl mt-2.5 mr-6"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="tracking-tight focus:text-gray-700 text-xl mt-2.5 mr-6"><a class="hover-underline" href="/tags">tags</a></h2><div class="rounded-full mr-2 relative nav-avatar"><a href="/about"><img src="/assets/chul.png" alt="1ilsang"></a></div></div></nav><div class="not-found-container"><div><img src="/assets/404.webp" alt="surfing" width="720" height="580"></div><audio class="mt-4" src="/assets/jackpot.mp4" controls="" autoplay="" loop=""></audio><pre><code>
+<main class="not-found-layout"><nav class="nav flex-wrap water-rainbow"><h2 class="tracking-tight focus:text-gray-700 text-2xl font-bold mt-2 mb-2 ml-3.5"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight focus:text-gray-700 text-xl mt-2.5 mr-6"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="tracking-tight focus:text-gray-700 text-xl mt-2.5 mr-6"><a class="hover-underline" href="/tags">tags</a></h2><div class="rounded-full mr-2 relative nav-avatar"><a href="/about"><img src="/assets/chul.png" alt="1ilsang"></a></div></div></nav><div class="not-found-container"><div><img src="/assets/404.webp" alt="surfing" width="720" height="580"></div><audio class="mt-4" src="/assets/jackpot.mp4" controls="" autoplay="" loop=""></audio><pre><code>
 
       404 ERROR
 

e2e/about.spec.ts

@@ -1,12 +1,13 @@
 import { expect, test } from '@playwright/test';
-import { screenshotFullPage } from './utils';
+import { screenshotFullPage } from './shared/utils';
+import { MACRO_SUITE } from './shared/constants';
 
 test.describe('about', () => {
-  test(`screen`, async ({ page }) => {
+  test(MACRO_SUITE.SCREEN_SNAPSHOT, async ({ page }) => {
     await screenshotFullPage({ page, url: `/about`, arg: [`about.png`] });
   });
 
-  test(`dom`, async ({ page }) => {
+  test(MACRO_SUITE.DOM_SNAPSHOT, async ({ page }) => {
     await page.goto(`/about`);
     const body = await page.locator('#__next').innerHTML();
     expect(body).toMatchSnapshot([`about.html`]);

e2e/post/dom.spec.ts

@@ -1,14 +1,14 @@
 import { expect, test } from '@playwright/test';
 import { urls } from './utils';
+import { MACRO_SUITE } from 'e2e/shared/constants';
 
-test.describe('dom', () => {
+test.describe(MACRO_SUITE.DOM_SNAPSHOT, () => {
   for (let i = 0; i < urls.length; i++) {
     const url = urls[i];
 
     test(`${url}`, async ({ page }) => {
       await page.goto(`/posts/${url}`);
-      // TODO: floating이 깜빡이는 문제가 존재함.
-      await page.waitForTimeout(1000);
+      await page.evaluate(() => document.fonts.ready);
       const body = await page.locator('#__next').innerHTML();
       expect(body).toMatchSnapshot([`${url}.html`]);
     });