Setup tests with Playwright

Gigabyte5671 · Gigabyte5671 · commit 20e669ed4551 · 2023-07-08T12:50:19.000+12:00
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,6 @@
 node_modules
 dist
+/test-results/
+/playwright-report/
+/playwright/.cache/
+tests/GeneratorScript.js
diff --git a/.npmignore b/.npmignore
@@ -1,5 +1,8 @@
 node_modules
 src
 tests
+/test-results/
+/playwright-report/
+/playwright/.cache/
 .gitignore
 tsconfig.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
 	"types": "dist/index.d.ts",
 	"type": "module",
 	"scripts": {
-		"build": "tsc"
+		"build": "tsc",
+		"test": "npm run build && node tests/build.js && npx playwright test"
 	},
 	"repository": {
 		"type": "git",
@@ -27,5 +28,8 @@
 	"bugs": {
 		"url": "https://github.com/CSS-Canvas/CSS-to-HTML/issues"
 	},
-	"homepage": "https://github.com/CSS-Canvas/CSS-to-HTML#readme"
+	"homepage": "https://github.com/CSS-Canvas/CSS-to-HTML#readme",
+	"devDependencies": {
+		"@playwright/test": "^1.35.1"
+	}
 }
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -0,0 +1,40 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './tests',
+	/* 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 */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] },
+		},
+
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] },
+		},
+	],
+});
diff --git a/tests/build.js b/tests/build.js
@@ -0,0 +1,11 @@
+import fs from 'fs';
+
+const file = fs.readFileSync('dist/Generator.js', { encoding: 'utf-8' });
+
+let script = file;
+script = script.replace('export ', '');
+script = script.replace(/\/\/# sourceMappingURL=[a-z\.]+/i, '');
+
+fs.writeFileSync('tests/GeneratorScript.js', script, { encoding: 'utf-8' });
+
+console.log('Done.');
diff --git a/tests/index.html b/tests/index.html
@@ -5,7 +5,7 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Document</title>
-	<script src="index.js" type="module" defer></script>
+	<script src="GeneratorScript.js" type="module" defer></script>
 </head>
 <body style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
 	<p>Press <kbd>F12</kbd> to open the console.</p>
diff --git a/tests/index.js b/tests/index.js
@@ -50,11 +50,15 @@ button {
 	content: 'Double-click me';
 	background-color: blue;
 }
-span:nth-child(4) {}
+span:nth-child(4),
 span.first:first-child {}
 span:nth-of-type(3) {
 	content: '3rd span';
 }
+p.comma,
+.comma {
+	content: ',';
+}
 `;
 
 const output = cssToHtml(input);
