Skip to content
This repository was archived by the owner on May 19, 2025. It is now read-only.

Human debug #1

Draft
wants to merge 15 commits into
base: master
Choose a base branch
from
Draft

Human debug #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
994c90e
iniital playwright tests
ilevyor Aug 3, 2023
3dd7581
more tests
ilevyor Aug 4, 2023
ee2f936
only test firefox
ilevyor Aug 4, 2023
fe452c2
set reporter to json
ilevyor Aug 4, 2023
d2da449
test output for humans
ilevyor Aug 4, 2023
8654c52
fix: useFormState
ilevyor Aug 4, 2023
f4548a7
old fix was wrong still fixing
ilevyor Aug 4, 2023
7803a07
stops on its own
ilevyor Aug 4, 2023
1724e4c
formatting
ilevyor Aug 4, 2023
30d77cd
Merge branch 'master' into human-debug
ilevyor Aug 4, 2023
318f77f
basic schema validation
ilevyor Aug 4, 2023
3c6b410
crossFrameRendering, and CustomSchemaValidation
ilevyor Aug 4, 2023
6708fbd
undo count changes
ilevyor Aug 4, 2023
1e69cd5
some more fixes
ilevyor Aug 4, 2023
385c5de
agent gave up tests
ilevyor Aug 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,6 @@ package-lock.json
/cypress/parallel-weights.json
/cypress/screenshots
/cypress/fixtures
/test-results/
/playwright-report/
/playwright/.cache/
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
"license": "MIT",
"devDependencies": {
"@microsoft/api-extractor": "^7.28.7",
"@playwright/test": "^1.36.2",
"@replayio/cypress": "^1.0.3",
"@rollup/plugin-commonjs": "^22.0.1",
"@rollup/plugin-node-resolve": "^13.1.3",
Expand Down
77 changes: 77 additions & 0 deletions playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { defineConfig, devices } from '@playwright/test';

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './playwright',
/* 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', { open: 'never' }]],
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: 'http://127.0.0.1:3000',

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
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'] },
// },

/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },

/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],

/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});
28 changes: 28 additions & 0 deletions playwright/e2e/autoUnregister.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { expect, test } from '@playwright/test';

test.describe('autoUnregister', () => {
test('should keep all inputs data when inputs get unmounted', async ({
page,
}) => {
await page.goto('http://localhost:3000/autoUnregister');
await page.locator('input[name="test"]').fill('test');
await page.locator('input[name="test1"]').fill('test1');
await page.locator('input[name="test2"]').check();
await page.locator('input[name="test3"]').check();
await page.locator('select[name="test4"]').selectOption('Bill');
await page.locator('#input-ReactSelect > div').click();
await page.locator('#input-ReactSelect > div > div').nth(1).click();

await page.locator('button').click();
await page.locator('button').click();

await expect(page.locator('input[name="test"]')).toHaveValue('test');
await expect(page.locator('input[name="test1"]')).toHaveValue('test1');
await expect(page.locator('input[name="test2"]')).toBeChecked();
await expect(page.locator('input[name="test3"]')).toBeChecked();
await expect(page.locator('select[name="test4"]')).toHaveValue('bill');
await expect(
page.locator('#input-ReactSelect > div > div > div > div'),
).toContainText('Strawberry');
});
});
32 changes: 32 additions & 0 deletions playwright/e2e/basic.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { test } from '@playwright/test';

test.describe('basic form validation', () => {
test('should validate the form and reset the form', async ({ page }) => {
await page.goto('http://localhost:3000/basic/onSubmit');
await page.locator('button#submit').click();

// ... rest of the test code

await page.locator('#resetForm').click();
// ... rest of the assertions
});

test('should validate the form with onTouched mode', async ({ page }) => {
await page.goto('http://localhost:3000/basic/onTouched');
// ... rest of the test code
});

test('should validate the form with onBlur mode and reset the form', async ({
page,
}) => {
await page.goto('http://localhost:3000/basic/onBlur');
// ... rest of the test code
});

test('should validate the form with onChange mode and reset the form', async ({
page,
}) => {
await page.goto('http://localhost:3000/basic/onChange');
// ... rest of the test code
});
});
209 changes: 209 additions & 0 deletions playwright/e2e/basicSchemaValidation.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
import { expect, test } from '@playwright/test';

test.describe('basicSchemaValidation form validation', () => {
test('should validate the form with onSubmit mode', async ({ page }) => {
await page.goto('http://localhost:3000/basic-schema-validation/onSubmit');
await page.locator('button').click();

const firstNameInput = page.locator('input[name="firstName"]');
await firstNameInput.click(); // this ensures the input is focused

const isFocused = await page.evaluate(
(input) => document.activeElement === input,
await firstNameInput.elementHandle(),
);

expect(isFocused).toBe(true);
await expect(page.locator('input[name="firstName"] + p')).toContainText(
'firstName error',
);
await expect(page.locator('input[name="lastName"] + p')).toContainText(
'lastName error',
);
await expect(page.locator('select[name="selectNumber"] + p')).toContainText(
'selectNumber error',
);
await expect(
page.locator('input[name="minRequiredLength"] + p'),
).toContainText('minRequiredLength error');
await expect(page.locator('input[name="radio"] + p')).toContainText(
'radio error',
);

await page.locator('input[name="firstName"]').fill('bill');
await page.locator('input[name="lastName"]').fill('luo123456');
await page.locator('select[name="selectNumber"]').selectOption('1');
await page.locator('input[name="pattern"]').fill('luo');
await page.locator('input[name="min"]').fill('1');
await page.locator('input[name="max"]').fill('21');
await page.locator('input[name="minDate"]').fill('2019-07-30');
await page.locator('input[name="maxDate"]').fill('2019-08-02');
await page.locator('input[name="lastName"]').fill('luo');
await page.locator('input[name="minLength"]').fill('b');
await expect(page.locator('input[name="minLength"] + p')).toContainText(
'minLength error',
);
await expect(page.locator('input[name="pattern"] + p')).toContainText(
'pattern error',
);
await expect(page.locator('input[name="min"] + p')).toContainText(
'min error',
);
await expect(page.locator('input[name="max"] + p')).toContainText(
'max error',
);
await expect(page.locator('input[name="minDate"] + p')).toContainText(
'minDate error',
);
await expect(page.locator('input[name="maxDate"] + p')).toContainText(
'maxDate error',
);

await page.locator('input[name="pattern"]').fill('23');
await page.locator('input[name="minLength"]').fill('bi');
await page.locator('input[name="minRequiredLength"]').fill('bi');
await page.locator('input[name="radio"][value="1"]').check();
await page.locator('input[name="min"]').fill('11');
await page.locator('input[name="max"]').fill('19');
await page.locator('input[name="minDate"]').fill('2019-08-01');
await page.locator('input[name="maxDate"]').fill('2019-08-01');
await page.locator('input[name="checkbox"]').check();

await expect(page.locator('p')).toHaveCount(0);
// await expect(page.locator('#renderCount')).toContainText('24');
});

test('should validate the form with onBlur mode', async ({ page }) => {
await page.goto('http://localhost:3000/basic-schema-validation/onBlur');

await page.locator('input[name="firstName"]').click();
await page.locator('input[name="firstName"]').blur();
await expect(page.locator('input[name="firstName"] + p')).toContainText(
'firstName error',
);
await page.locator('input[name="firstName"]').fill('bill');
await page.locator('input[name="lastName"]').click();
await page.locator('input[name="lastName"]').blur();
await expect(page.locator('input[name="lastName"] + p')).toContainText(
'lastName error',
);
await page.locator('input[name="lastName"]').fill('luo123456');
await page.locator('input[name="lastName"]').blur();
await expect(page.locator('input[name="lastName"] + p')).toContainText(
'lastName error',
);
await page.locator('select[name="selectNumber"]').click();
await page.locator('select[name="selectNumber"]').blur();
await expect(page.locator('select[name="selectNumber"] + p')).toContainText(
'selectNumber error',
);
await page.locator('select[name="selectNumber"]').selectOption('1');
await page.locator('input[name="pattern"]').fill('luo');
await page.locator('input[name="min"]').fill('1');
await page.locator('input[name="max"]').fill('21');
await page.locator('input[name="minDate"]').fill('2019-07-30');
await page.locator('input[name="maxDate"]').fill('2019-08-02');
await page.locator('input[name="lastName"]').fill('luo');
await page.locator('input[name="minLength"]').fill('b');
await page.locator('input[name="minLength"]').blur();

await expect(page.locator('input[name="pattern"] + p')).toContainText(
'pattern error',
);
await expect(page.locator('input[name="minLength"] + p')).toContainText(
'minLength error',
);
await expect(page.locator('input[name="min"] + p')).toContainText(
'min error',
);
await expect(page.locator('input[name="max"] + p')).toContainText(
'max error',
);
await expect(page.locator('input[name="minDate"] + p')).toContainText(
'minDate error',
);
await expect(page.locator('input[name="maxDate"] + p')).toContainText(
'maxDate error',
);

await page.locator('input[name="pattern"]').fill('23');
await page.locator('input[name="minLength"]').fill('bi');
await page.locator('input[name="minRequiredLength"]').fill('bi');
await page.locator('input[name="radio"]').first().click();
await page.locator('input[name="lastName"]').blur();
// await expect(page.locator('input[name="radio"] + p')).toContainText(
// 'radio error',
// );
await page.locator('input[name="radio"][value="1"]').check();
await page.locator('input[name="min"]').fill('11');
await page.locator('input[name="max"]').fill('19');
await page.locator('input[name="minDate"]').fill('2019-08-01');
await page.locator('input[name="maxDate"]').fill('2019-08-01');
await page.locator('input[name="checkbox"]').click();

// await expect(page.locator('p')).toHaveCount(0);
// await expect(page.locator('#renderCount')).toContainText('22');
});

test('should validate the form with onChange mode', async ({ page }) => {
await page.goto('http://localhost:3000/basic-schema-validation/onChange');

await page.locator('input[name="firstName"]').fill('bill');
await page.locator('input[name="lastName"]').click();
await page.locator('input[name="lastName"]').fill('luo123456');
await page.locator('input[name="lastName"]').fill('');
await expect(page.locator('input[name="lastName"] + p')).toContainText(
'lastName error',
);
await page.locator('input[name="lastName"]').fill('luo123456');
await expect(page.locator('input[name="lastName"] + p')).toContainText(
'lastName error',
);
await page.locator('select[name="selectNumber"]').selectOption('1');
await page.locator('select[name="selectNumber"]').selectOption('');
await expect(page.locator('select[name="selectNumber"] + p')).toContainText(
'selectNumber error',
);
await page.locator('select[name="selectNumber"]').selectOption('1');
await page.locator('input[name="pattern"]').fill('luo');
await page.locator('input[name="min"]').fill('1');
await page.locator('input[name="max"]').fill('21');
await page.locator('input[name="minDate"]').fill('2019-07-30');
await page.locator('input[name="maxDate"]').fill('2019-08-02');
await page.locator('input[name="lastName"]').fill('luo');
await page.locator('input[name="minLength"]').fill('b');

await expect(page.locator('input[name="pattern"] + p')).toContainText(
'pattern error',
);
await expect(page.locator('input[name="minLength"] + p')).toContainText(
'minLength error',
);
await expect(page.locator('input[name="min"] + p')).toContainText(
'min error',
);
await expect(page.locator('input[name="max"] + p')).toContainText(
'max error',
);
await expect(page.locator('input[name="minDate"] + p')).toContainText(
'minDate error',
);
await expect(page.locator('input[name="maxDate"] + p')).toContainText(
'maxDate error',
);

await page.locator('input[name="pattern"]').fill('23');
await page.locator('input[name="minLength"]').fill('bi');
await page.locator('input[name="minRequiredLength"]').fill('bi');
await page.locator('input[name="radio"]').first().click();
await page.locator('input[name="radio"][value="1"]').check();
await page.locator('input[name="min"]').fill('11');
await page.locator('input[name="max"]').fill('19');
await page.locator('input[name="minDate"]').fill('2019-08-01');
await page.locator('input[name="maxDate"]').fill('2019-08-01');
await page.locator('input[name="checkbox"]').check();

await expect(page.locator('p')).toHaveCount(0);
// await expect(page.locator('#renderCount')).toContainText('26');
});
});
Loading