feat(ui/styles): setup visual regression testing with storybook and p…

…laywright | tg / sc | #28

.gitignore

@@ -11,5 +11,6 @@ dist
 .velite
 apps/docs/tsconfig.tsbuildinfo
 apps/docs/tsconfig.tsbuildinfo
+packages/ui/test-results
 
 *storybook.log

packages/styles/src/components/drawer/variants.ts

@@ -14,10 +14,10 @@ export const drawerVariants = tv({
 			horizontal: "h-fit !w-full min-h-[320px] max-h-full !max-w-full",
 		},
 		placement: {
-			right: "right-0 border-l-2 animate-in slide-in-from-right ease-in",
-			left: "left-0 border-r-2 animate-in slide-in-from-left ease-in",
-			bottom: "bottom-0 border-t-2 animate-in slide-in-from-bottom ease-in",
-			top: "top-0 border-b-2 animate-in slide-in-from-top ease-in",
+			right: "right-0 border-l-2 rounded-r-none animate-in slide-in-from-right ease-in",
+			left: "left-0 border-r-2 rounded-l-none animate-in slide-in-from-left ease-in",
+			bottom: "bottom-0 border-t-2 rounded-b-none animate-in slide-in-from-bottom ease-in",
+			top: "top-0 border-b-2 rounded-t-none animate-in slide-in-from-top ease-in",
 		},
 	},
 	defaultVariants: {

packages/ui/package.json

@@ -8,6 +8,7 @@
 	},
 	"scripts": {
 		"test": "jest",
+		"test:vrt": "playwright test",
 		"lint": "eslint . --max-warnings 0",
 		"generate:component": "turbo gen react-component",
 		"build": "bunchee --tsconfig tsconfig.build.json",
@@ -37,6 +38,7 @@
 	"devDependencies": {
 		"@chromatic-com/storybook": "^1.3.3",
 		"@pixelshades/typescript-config": "workspace:*",
+		"@playwright/test": "^1.44.0",
 		"@storybook/addon-essentials": "^8.0.10",
 		"@storybook/addon-interactions": "^8.0.10",
 		"@storybook/addon-links": "^8.0.10",
@@ -46,6 +48,7 @@
 		"@storybook/react": "^8.0.10",
 		"@storybook/react-vite": "^8.0.10",
 		"@storybook/test": "^8.0.10",
+		"@storybook/test-runner": "^0.18.0",
 		"@tailwindcss/typography": "^0.5.13",
 		"@testing-library/react": "^15.0.7",
 		"@turbo/gen": "^1.13.3",

packages/ui/playwright.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig, devices } from "@playwright/test"
+
+export default defineConfig({
+	testDir: "./tests",
+	snapshotDir: "./tests/__screenshots__",
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+		{
+			name: "webkit",
+			use: { ...devices["Desktop Safari"] },
+		},
+	],
+})

packages/ui/tests/drawer.vrt.test.ts

@@ -0,0 +1,31 @@
+import { expect, test } from "@playwright/test"
+import { PLACEMENTS } from "../src/components"
+
+const placements = [...PLACEMENTS, "default"]
+
+test.describe("Visual Regression Tests", () => {
+	for (const placement of placements) {
+		test(`Drawer ${placement}`, async ({ page }) => {
+			await page.goto(`http://localhost:6006/?path=/story/components-ui-drawer--${placement}`) // URL for the Storybook iframe of the component
+
+			await expect(page.locator("#preview-loader")).toBeHidden()
+
+			const iFrame = page.locator("#storybook-preview-iframe")
+			const screenshot = await iFrame.screenshot()
+
+			expect(screenshot).toMatchSnapshot(`drawer-${placement}.png`)
+		})
+	}
+
+	test("Drawer hide close button", async ({ page }) => {
+		await page.goto("http://localhost:6006/?path=/story/components-ui-drawer--hide-close-button") // URL for the Storybook iframe of the component
+
+		await expect(page.locator("#preview-loader")).toBeHidden()
+		await expect(page.locator("div.sb-preparing-story.sb-wrapper")).toBeHidden()
+
+		const iFrame = page.locator("#storybook-preview-iframe")
+		const screenshot = await iFrame.screenshot()
+
+		expect(screenshot).toMatchSnapshot("drawer-hide-close-button.png")
+	})
+})