✅ Added Playwright behavior tests to image api endpoints

Screenshot all 4 GET image api endpoints with complex config per viewport type (Chrome and Mobile Chrome) in preparation for migration. Also updated TailwindCSS config from .js to .ts.

.playwright/imageAPIEndpoints.spec.ts

@@ -0,0 +1,63 @@
+import { type Page, expect, test } from '@playwright/test'
+
+const customTimeout = { timeout: 30000 }
+
+const defaultImageURL: string =
+  '/wei/socialify/image?description=1&font=Raleway&language=1&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Dark'
+const svgImageURL: string =
+  '/wei/socialify/svg?description=1&font=Raleway&language=1&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Dark'
+const pngImageURL: string =
+  '/wei/socialify/png?description=1&font=Raleway&language=1&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Dark'
+// Backward compatibility route.
+const jpgImageURL: string =
+  '/wei/socialify/jpg?description=1&font=Raleway&language=1&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Dark'
+
+test.describe('Socialify image api', () => {
+  test('respond consistently for default endpoint', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(defaultImageURL, customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+
+  test('respond consistently for svg endpoint', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(svgImageURL, customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+
+  test('respond consistently for png endpoint', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(pngImageURL, customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+
+  test('respond consistently for backwards-compatible jpg endpoint', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(jpgImageURL, customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+})

tailwind.config.js → tailwind.config.ts

@@ -1,9 +1,16 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./pages/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}'],
+import daisyui from 'daisyui'
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {},
   },
+  plugins: [daisyui],
   daisyui: {
     themes: [
       {
@@ -16,5 +23,4 @@ module.exports = {
       },
     ],
   },
-  plugins: [require('daisyui')],
-}
+} satisfies Config