⬆️ Upgrade DaisyUI v4

.changeset/big-eggs-appear.md

@@ -0,0 +1,5 @@
+---
+"socialify": patch
+---
+
+moved strictly build-time deps to dev-deps list in package.json

.changeset/lemon-spies-exist.md

@@ -0,0 +1,5 @@
+---
+"socialify": patch
+---
+
+Updated landing input box bg color to closer match the original DaisyUI v2 app.

.changeset/sweet-chairs-agree.md

@@ -0,0 +1,5 @@
+---
+"socialify": minor
+---
+
+Bumped DaisyUI to v4 with full Playwright UI + user story test suite.

.changeset/warm-singers-pump.md

@@ -0,0 +1,5 @@
+---
+"socialify": minor
+---
+
+Added playwright e2e testing to workflow.

.dockerignore

@@ -1,5 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Playwright results
+/.playwright/test-report/
+/.playwright/test-results/
+/.playwright/.cache/
+
 # dependencies
 /node_modules
 /.pnp

.gitignore

@@ -1,5 +1,13 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Local vscode
+.vscode
+
+# Playwright
+/.playwright/.cache
+/.playwright/test-report
+/.playwright/test-results
+
 # dependencies
 /node_modules
 /.pnp

.playwright/mainUIConsistency.spec.ts

@@ -0,0 +1,41 @@
+import { type Page, expect, test } from '@playwright/test'
+
+// Give each expect a generous timeout of 60 seconds.
+const customTimeout = { timeout: 60000 }
+
+// Due to the dynamic rendering nature of this NextJS app,
+// give each test a "generous" threshold of max 2% difference.
+const customDiffPixelRatio = { maxDiffPixelRatio: 0.02 }
+
+// Testing constants.
+const repoPreviewURL: string =
+  '/wei/socialify?language=1&owner=1&name=1&stargazers=1&theme=Light'
+
+test.describe('Socialify UI:', () => {
+  test(`is consistent for landing page`, async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto('/', customTimeout)
+    await page.waitForSelector('button[type="submit"]', customTimeout)
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot(customDiffPixelRatio)
+  })
+
+  test(`is consistent for error (404) page`, async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto('/404', customTimeout)
+    await page.waitForSelector('a[href="/"]', customTimeout)
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot(customDiffPixelRatio)
+  })
+
+  test(`is consistent for preview config page`, async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(repoPreviewURL, customTimeout)
+    await page.waitForSelector('button:has-text("URL")', customTimeout)
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot(customDiffPixelRatio)
+  })
+})

.playwright/simpleUserStory.spec.ts

@@ -0,0 +1,46 @@
+import { type Page, expect, test } from '@playwright/test'
+
+// Give each expect a generous timeout of 60 seconds.
+const customTimeout = { timeout: 60000 }
+
+// Testing constants.
+const repo: string = 'wei/socialify'
+const expectedConfigURL: string =
+  '/wei/socialify?language=1&owner=1&name=1&stargazers=1&theme=Light'
+const expectedImageURLRegExp: RegExp =
+  /\/wei\/socialify\/image\?language=1&owner=1&name=1&stargazers=1&theme=Light$/
+
+async function getClipboardText(page: Page): Promise<string> {
+  return await page.evaluate(async () => {
+    return await navigator.clipboard.readText()
+  })
+}
+
+test.beforeEach(async ({ page }: { page: Page }): Promise<void> => {
+  await page.goto('/', customTimeout)
+})
+
+test.describe('A simple user story:', () => {
+  test(`user can enter a GitHub repo ("username/repo"), click submit button, click "URL", and get the social preview image`, async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    // Input and submit the repo following accessibility best practices.
+    await page.fill('input[name="repo-input"]', repo)
+    await page.click('button[type="submit"]')
+
+    // Wait for navigation to the preview config page.
+    await expect(page).toHaveURL(expectedConfigURL, customTimeout)
+
+    await page.click('button:has-text("URL")')
+
+    // Compare the clipboard content to the expected image URL.
+    // (Only check the end of the URL due to dynamic localhost port allocation.)
+    const url: string = await getClipboardText(page)
+    expect(url).toMatch(expectedImageURLRegExp)
+
+    // Visit the image URL and snapshot the image.
+    await page.goto(url, customTimeout)
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+})

jest.config.js

@@ -20,6 +20,12 @@ const customJestConfig = {
     '<rootDir>/**/__tests__/**/*.{js,jsx,ts,tsx}',
     '<rootDir>/**/*.{spec,test}.{js,jsx,ts,tsx}',
   ],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/.next/',
+    '/.vercel/',
+    '/.playwright/',
+  ],
   moduleNameMapper: {
     '\\.(css|less)$': 'identity-obj-proxy',
   },

package.json

@@ -3,15 +3,25 @@
   "version": "2.12.1",
   "description": "Socialify your project. Share with the world!",
   "author": "@CryogenicPlanet, @wei",
+  "contributors": [
+    {
+      "name": "Keming He",
+      "email": "[email protected]",
+      "url": "https://linkedin.com/in/keminghe"
+    }
+  ],
   "license": "MIT",
   "repository": "https://github.com/wei/socialify.git",
   "scripts": {
     "dev": "next dev",
     "debug": "NODE_OPTIONS='--inspect' next",
     "build": "next build",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:update-snapshot": "jest -u",
+    "test:unit": "jest",
+    "test:unit:watch": "jest --watch",
+    "test:unit:update-snapshot": "jest -u",
+    "test:e2e": "playwright test",
+    "test:e2e:update-snapshot": "playwright test --update-snapshots",
+    "test": "yarn test:unit && yarn test:e2e",
     "start": "next start",
     "lint": "biome ci --max-diagnostics=999 .",
     "lint:fix": "biome check --write --verbose --max-diagnostics=999 .",
@@ -27,15 +37,12 @@
   },
   "dependencies": {
     "@resvg/resvg-wasm": "^2.6.2",
-    "autoprefixer": "^10.4.20",
     "badgen": "^3.2.3",
     "clsx": "^2.1.1",
     "copee": "^1.0.6",
-    "daisyui": "^2.52.0",
     "hero-patterns": "^2.1.0",
     "is-ci": "^3.0.1",
     "next": "^14.2.8",
-    "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
@@ -44,25 +51,29 @@
     "satori": "^0.10.14",
     "simple-icons": "^13.17.0",
     "styled-jsx": "^5.1.6",
-    "tailwindcss": "^3.4.15",
-    "typescript": "~5.7.2",
     "use-debounce": "^10.0.4",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@changesets/cli": "^2.27.10",
+    "@playwright/test": "^1.49.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.14",
     "@types/react": "18.3.12",
+    "autoprefixer": "^10.4.20",
+    "daisyui": "^4.12.14",
     "graphql": "^16.9.0",
     "graphql-compiler": "^1.7.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0"
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.7.2"
   },
   "browserslist": {
     "production": [

playwright.config.ts

@@ -0,0 +1,109 @@
+import { defineConfig, devices } from '@playwright/test'
+
+// See https://playwright.dev/docs/test-configuration.
+export default defineConfig({
+  testDir: './.playwright',
+  testMatch: '**/*.spec.ts',
+
+  // 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 for more.
+  reporter: [
+    [
+      'html',
+      {
+        outputFolder: './.playwright/test-report',
+      },
+    ],
+  ],
+
+  // Folder for test artifacts such as screenshots and trace files.
+  outputDir: './.playwright/test-results',
+
+  // Shared settings for all the projects below.
+  // See https://playwright.dev/docs/api/class-testoptions.
+  use: {
+    // Base URL to use in actions such as `await page.goto("/")`.
+    baseURL: 'http://127.0.0.1:3000',
+
+    // Collect trace when retrying the failed test.
+    // See https://playwright.dev/docs/trace-viewer for more.
+    trace: 'on-first-retry',
+  },
+
+  // Configure projects for major browsers.
+  projects: [
+    /* Test against desktop viewports. */
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        permissions: ['clipboard-read'],
+      },
+    },
+
+    // Firefox supports clipboard permission by default.
+    // (In fact, clipboard permission is not defined for Firefox. DO NOT ADD IT.)
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    // Playwright's clipboard permission is bugged on Safari.
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] }
+    // },
+
+    /* Test against mobile viewports. */
+    {
+      name: 'Mobile Chrome',
+      use: {
+        ...devices['Pixel 5'],
+        permissions: ['clipboard-read'],
+      },
+    },
+
+    // Playwrights's clipboard permission is bugged on Mobile Safari, too.
+    // {
+    //   name: "Mobile Safari",
+    //   use: { ...devices["iPhone 12"] }
+    // },
+
+    /* Test against branded browsers. */
+    {
+      name: 'Microsoft Edge',
+      use: {
+        ...devices['Desktop Edge'],
+        channel: 'msedge',
+        permissions: ['clipboard-read'],
+      },
+    },
+    {
+      name: 'Google Chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chrome',
+        permissions: ['clipboard-read'],
+      },
+    },
+  ],
+
+  // Run your local dev server before starting the tests.
+  webServer: {
+    command: 'yarn dev',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+})

src/components/configuration/checkBoxWrapper.tsx

@@ -20,15 +20,15 @@ const CheckBoxWrapper = ({
     <div className="form-control">
       <label className="label cursor-pointer justify-start gap-2">
         <input
-          className="checkbox checkbox-sm"
+          className="checkbox checkbox-sm bg-base-100"
           type="checkbox"
           checked={!!checked}
           disabled={disabled}
           onChange={(e) => {
             handleChange({ state: e.target.checked }, keyName)
           }}
         />
-        <span className="label-text">{title}</span>
+        <span className="label-text font-semibold">{title}</span>
       </label>
     </div>
   )

src/components/configuration/config.tsx

@@ -132,7 +132,7 @@ const Config = ({ repository }: ConfigProp) => {
   }
 
   return (
-    <div className="card w-96 max-w-[90vw] bg-base-200 text-primary-content shadow-xl">
+    <div className="card w-96 max-w-[90vw] bg-neutral text-primary-content shadow-xl">
       <div className="card-body">
         <SelectWrapper
           title="Theme"

src/components/configuration/inputWrapper.tsx

@@ -22,11 +22,11 @@ const InputWrapper = ({
   return (
     <div className="form-control w-full">
       <label className="label">
-        <span className="label-text">{title}</span>
-        {alt && <span className="label-text-alt">{alt}</span>}
+        <span className="label-text font-semibold">{title}</span>
+        {alt && <span className="label-text-alt font-semibold">{alt}</span>}
       </label>
       <input
-        className="input input-bordered w-full input-sm"
+        className="input input-bordered text-white font-semibold w-full input-sm"
         type="text"
         value={value || ''}
         disabled={!!disabled}

src/components/configuration/selectWrapper.tsx

@@ -20,11 +20,11 @@ const SelectWrapper = ({
   return (
     <div className="form-control w-full">
       <label className="label">
-        <span className="label-text">{title}</span>
-        {alt && <span className="label-text-alt">{alt}</span>}
+        <span className="label-text font-semibold">{title}</span>
+        {alt && <span className="label-text-alt font-semibold">{alt}</span>}
       </label>
       <select
-        className="select select-bordered select-sm"
+        className="select select-bordered select-sm text-white font-semibold"
         onChange={(e) => {
           handleChange({ val: e.target.value, required: true }, keyName)
         }}