Playwright for components plugin (#262)

* split playwright-ct into its own plugin * export playwright-ct plugin
webpro-nl · Sep 24, 2023 · af3c11b · af3c11b
1 parent 7611360
commit af3c11b
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -267,6 +267,7 @@ Knip contains a growing list of plugins:
 - [Nx][plugin-nx]
 - [nyc][plugin-nyc]
 - [Playwright][plugin-playwright]
+- [Playwright for components][plugin-playwright-ct]
 - [PostCSS][plugin-postcss]
 - [Prettier][plugin-prettier]
 - [Release It][plugin-release-it]
@@ -888,6 +889,7 @@ Special thanks to the wonderful people who have contributed to this project:
 [plugin-nx]: ./src/plugins/nx
 [plugin-nyc]: ./src/plugins/nyc
 [plugin-playwright]: ./src/plugins/playwright
+[plugin-playwright-ct]: ./src/plugins/playwright-ct
 [plugin-postcss]: ./src/plugins/postcss
 [plugin-prettier]: ./src/plugins/prettier
 [plugin-release-it]: ./src/plugins/release-it

diff --git a/fixtures/plugins/playwright-ct/node_modules/@playwright/experimental-ct-react/package.json b/fixtures/plugins/playwright-ct/node_modules/@playwright/experimental-ct-react/package.json
diff --git a/fixtures/plugins/playwright-ct/package.json b/fixtures/plugins/playwright-ct/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@fixtures/playwright-ct",
+  "scripts": {
+    "test-ct": "playwright test -c playwright-ct.config.ts"
+  },
+  "devDependencies": {
+    "@playwright/experimental-ct-react": "*"
+  }
+}
diff --git a/fixtures/plugins/playwright-ct/playwright-ct.config.ts b/fixtures/plugins/playwright-ct/playwright-ct.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+
+export default defineConfig({
+  projects: [
+    {
+      name: 'chromium',
+      use: devices['Desktop Chrome'],
+    },
+  ],
+});
diff --git a/fixtures/plugins/playwright-ct/playwright/index.html b/fixtures/plugins/playwright-ct/playwright/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Testing Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/fixtures/plugins/playwright-ct/playwright/index.tsx b/fixtures/plugins/playwright-ct/playwright/index.tsx
@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';
diff --git a/fixtures/plugins/playwright-ct/test/some.spec.ts b/fixtures/plugins/playwright-ct/test/some.spec.ts
@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+
+test.describe('stuff', () => {
+  test('thing', async () => {
+    expect(null).toMatch(null);
+  });
+});
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
@@ -21,6 +21,7 @@ export * as npmPackageJsonLint from './npm-package-json-lint/index.js';
 export * as nx from './nx/index.js';
 export * as nyc from './nyc/index.js';
 export * as playwright from './playwright/index.js';
+export * as playwrightCt from './playwright-ct/index.js';
 export * as postcss from './postcss/index.js';
 export * as prettier from './prettier/index.js';
 export * as releaseIt from './release-it/index.js';

diff --git a/src/plugins/playwright-ct/README.md b/src/plugins/playwright-ct/README.md
@@ -0,0 +1,22 @@
+# Playwright for components
+
+## Enabled
+
+This plugin is enabled when any of the following package names and/or regular expressions has a match in `dependencies`
+or `devDependencies`:
+
+- `/^@playwright\/experimental-ct-/`
+
+## Default configuration
+
+```json
+{
+  "playwright-ct": {
+    "entry": ["playwright-ct.config.{js,ts}", "playwright/index.{js,ts,jsx,tsx}"]
+  }
+}
+```
+
+Also see [Knip plugins][1] for more information about plugins.
+
+[1]: https://github.com/webpro/knip/blob/main/README.md#plugins
diff --git a/src/plugins/playwright-ct/index.ts b/src/plugins/playwright-ct/index.ts
@@ -0,0 +1,14 @@
+import { hasDependency } from '../../util/plugin.js';
+import type { IsPluginEnabledCallback } from '../../types/plugins.js';
+
+// https://playwright.dev/docs/test-components
+
+export const NAME = 'Playwright for components';
+
+/** @public */
+export const ENABLERS = [/^@playwright\/experimental-ct-/];
+
+export const isEnabled: IsPluginEnabledCallback = ({ dependencies }) => hasDependency(dependencies, ENABLERS);
+
+// `TEST_FILE_PATTERNS` in src/constants.ts are already included by default
+export const ENTRY_FILE_PATTERNS = ['playwright-ct.config.{js,ts}', 'playwright/index.{js,ts,jsx,tsx}'];
diff --git a/tests/plugins/playwright-ct.test.ts b/tests/plugins/playwright-ct.test.ts
@@ -0,0 +1,23 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { main } from '../../src/index.js';
+import { resolve } from '../../src/util/path.js';
+import baseArguments from '../helpers/baseArguments.js';
+import baseCounters from '../helpers/baseCounters.js';
+
+const cwd = resolve('fixtures/plugins/playwright-ct');
+
+test('Find dependencies in Playwright for components configuration', async () => {
+  const { counters } = await main({
+    ...baseArguments,
+    cwd,
+  });
+
+  assert.deepEqual(counters, {
+    ...baseCounters,
+    devDependencies: 0,
+    unlisted: 0,
+    processed: 3,
+    total: 3,
+  });
+});