Merge pull request #63 from cassus/component-tests

feat: support component tests

.github/ISSUE_TEMPLATE/bug_report.md

@@ -16,7 +16,7 @@ assignees: ''
 **Then**
 <!-- What did actually happen? If there is error - please post full error message with stack trace -->
 
-**But I expected**
+**But I expect**
 <!-- What did you expect? -->
 
 **Isolated demo**

.github/workflows/test.yaml

@@ -43,7 +43,12 @@ jobs:
         with:
           node-version: 18
       - run: npm ci
-      - run: npm install @playwright/test@${{ matrix.playwrightVersion }} @cucumber/cucumber@${{ matrix.cucumberVersion }}
+      - run: >
+          npm install
+          @playwright/test@${{ matrix.playwrightVersion }}
+          @playwright/experimental-ct-react@${{ matrix.playwrightVersion }}
+          @cucumber/cucumber@${{ matrix.cucumberVersion }}
+
       - run: npx playwright install --with-deps chromium
       - run: npm test
       - uses: actions/upload-artifact@v3

.gitignore

@@ -9,6 +9,7 @@ npm-debug.log
 # my
 /dist
 **/.features-gen/**/*.spec.js
+.cache
 test-results
 playwright-report
 /examples/playwright-bdd*.tgz

.nvmrc

@@ -0,0 +1 @@
+20

.prettierignore

@@ -1,4 +1,5 @@
 dist
 .features-gen
+.cache
 playwright-report
 **/*.md

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## dev
+* support component tests, [#57](https://github.com/vitalets/playwright-bdd/issues/57)
 * generate skipped tests with empty body, [#73](https://github.com/vitalets/playwright-bdd/issues/73)
 * allow outline scenario name to be used as an examples template, [#67](https://github.com/vitalets/playwright-bdd/issues/67)
 * fix empty step locations for esm

README.md

@@ -48,10 +48,10 @@ Have a look on [this section](https://vitalets.github.io/playwright-bdd/#/faq?id
 #### Test locally on different Playwright versions
 ```
 # install needed Playwright version
-npm i --no-save @playwright/test@1.33
+npm i --no-save @playwright/test@1.40 @playwright/[email protected]
 
 # install corresponding chromium without clearing other versions
-npx cross-env PLAYWRIGHT_SKIP_BROWSER_GC=1 playwright install chromium
+npx cross-env PLAYWRIGHT_SKIP_BROWSER_GC=1 npx playwright install chromium
 
 # run all tests
 npm run test

docs/_sidebar.md

@@ -5,6 +5,7 @@
 - [Writing steps](writing-steps.md)
 - [Hooks](./hooks.md)
 - [Decorators](decorators.md)
+- [Component tests](./component-tests.md)
 - [Recipes](recipes.md)
 - [CLI](cli.md)
 - [API](api.md)

docs/component-tests.md

@@ -0,0 +1,78 @@
+# Component tests
+Playwright-bdd supports [component tests](https://playwright.dev/docs/test-components)
+since Playwright **1.39**.
+
+Initialize components testing [per instruction](https://playwright.dev/docs/test-components#how-to-get-started):
+```
+npm init playwright@latest -- --ct
+```
+
+Add `playwright-bdd` configuration to `playwright-ct.config.ts`:
+```ts
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+import { defineBddConfig } from 'playwright-bdd';
+
+const testDir = defineBddConfig({
+  importTestFrom: 'fixtures.ts',
+  paths: ['features/*.feature'],
+  require: ['steps.tsx'],
+});
+
+export default defineConfig({
+  testDir,
+  // ...
+});
+```
+
+Create `fixtures.ts` that exports custom `test`:
+```ts
+import { mergeTests } from '@playwright/test';
+import { test as ctBase } from '@playwright/experimental-ct-react';
+import { test as base } from 'playwright-bdd';
+
+export const test = mergeTests(base, ctBase);
+```
+
+Define steps in `steps.tsx`:
+```ts
+import React from 'react';
+import { expect } from '@playwright/test';
+import { createBdd } from 'playwright-bdd';
+import { test } from './fixtures';
+
+const { Given, When, Then } = createBdd(test);
+
+Given('Mounted input component', async ({ mount }) => {
+  await mount(<textarea data-testid="textField" />);
+});
+
+When('I type {string}', async ({ page }, arg: string) => {
+  await page.getByTestId('textField').fill(arg);
+});
+
+Then('input field has {string}', async ({ page }, arg: string) => {
+  await expect(page.getByTestId('textField')).toHaveValue(arg);
+});
+```
+
+Create feature file `input.feature`:
+```gherkin
+Feature: input component
+
+    Scenario: Mount component and interact with it
+        Given Mounted input component
+        When I type "ABC"
+        Then input field has "ABC"
+```
+
+Update `test-ct` command in `package.json` to run `bddgen` before running Playwright:
+```json
+"scripts": {
+  "test-ct": "npx bddgen -c playwright-ct.config.ts && playwright test -c playwright-ct.config.ts"
+},
+```
+
+Finally, run tests:
+```
+npm run test-ct
+```

eslint.config.js

@@ -6,7 +6,7 @@ const playwright = require('eslint-plugin-playwright');
 
 module.exports = [
   {
-    ignores: ['examples', 'dist', '*.config.js', 'cucumber.js'],
+    ignores: ['examples', 'dist', '*.config.js', 'cucumber.js', 'test/**/.cache'],
   },
   js.configs.recommended,
   {