⬆️ 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/kind-masks-begin.md

@@ -0,0 +1,5 @@
+---
+"socialify": patch
+---
+
+used daisyui color config instead of hard-code

.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/short-flies-wonder.md

@@ -0,0 +1,5 @@
+---
+"socialify": patch
+---
+
+Enforced 100% Playwright snapshot consistency; updated snapshots.

.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,67 @@
+import { type Page, expect, test } from '@playwright/test'
+
+// Give navigation expects a generous timeout of 60 seconds.
+const customPageLoadTimeout = { timeout: 60000 }
+
+// Give component transition/animation expects a generous timeout of 1 second(s).
+const customTransitionTimeout = { timeout: 1000 }
+
+// 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('/', customPageLoadTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customPageLoadTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+
+  test('is consistent for error (404) page', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto('/404', customPageLoadTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customPageLoadTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+
+  test('is consistent for preview config page', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(repoPreviewURL, customPageLoadTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customPageLoadTimeout)
+
+    // To maintain consistency, de-select the 'Stars' checkbox,
+    // and selects the 'Description' checkbox.
+    await page.click('input[name="stargazers"]')
+    await page.click('input[name="description"]')
+
+    // Wait for the component transition/animation to finish completely.
+    await page.waitForTimeout(customTransitionTimeout.timeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+
+    // Also check the toaster UI consistency.
+    await page.click('button:has-text("URL")')
+    await page.waitForSelector('[role="alert"]', customPageLoadTimeout)
+
+    // Wait for the component transition/animation to finish completely.
+    await page.waitForTimeout(customTransitionTimeout.timeout)
+
+    const toastImage = await page.screenshot()
+    expect(toastImage).toMatchSnapshot()
+  })
+})

.playwright/simpleUserStory.spec.ts

@@ -0,0 +1,63 @@
+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\?description=1&language=1&name=1&owner=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)
+
+  // Wait for the page to load/hydrate completely.
+  await page.waitForLoadState('networkidle', 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 page.waitForSelector('button:has-text("URL")', customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+    await expect(page).toHaveURL(expectedConfigURL)
+
+    // To maintain consistency, de-select the 'Stars' checkbox,
+    // and selects the 'Description' checkbox.
+    await page.click('input[name="stargazers"]')
+    await page.click('input[name="description"]')
+
+    // Obtain the consistent preview image URL.
+    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)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', 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',
   },

next.config.js

@@ -28,6 +28,10 @@ const nextConfig = {
       },
     ]
   },
+  // Disable NextJS dev server icon for Playwright screenshot consistency.
+  devIndicators: {
+    appIsrStatus: false,
+  },
 }
 
 module.exports = nextConfig

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": [