jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-20 12:03:11 -04:00
Code Issues Projects Releases Wiki Activity

test(e2e,playwright): form-helper component (#51974)

Browse Source 
Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
Shabeeb Khalid
2023-10-19 00:35:30 +03:00
committed by GitHub
parent a63f7d9e85
commit c1a09c2154
3 changed files with 104 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/formHelpers/form-fields.tsx
View File

@@ -92,7 +92,12 @@ function FormFields({ formFields, options }: FormFieldsProps): JSX.Element {
const isURL = types[name] === 'url';
return (
<FormGroup key={name}>
<ControlLabel htmlFor={name}>{label}</ControlLabel>
<ControlLabel
htmlFor={name}
data-playwright-test-label={`${name}-control-label`}
>
{label}
</ControlLabel>
<FormControl
id={name}
name={name}
@@ -102,6 +107,7 @@ function FormFields({ formFields, options }: FormFieldsProps): JSX.Element {
rows={4}
type='url'
value={value as string}
data-playwright-test-label={`${name}-form-control`}
/>
{nullOrWarning(
value as string,

1
client/src/components/formHelpers/form.tsx
View File

@@ -107,6 +107,7 @@ export const StrictSolutionForm = ({
id={`dynamic-${id}`}
onSubmit={handleSubmit as (e: FormEvent) => void}
style={{ width: '100%' }}
data-playwright-test-label='form-helper-form'
>
<FormFields formFields={formFields} options={options} />
<BlockSaveButton

96
e2e/form-helper.spec.ts Normal file
View File

@@ -0,0 +1,96 @@
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
test.use({ storageState: 'playwright/.auth/certified-user.json' });
test.describe('Test form with only solution link', () => {
test.beforeEach(async ({ page }) => {
await page.goto(
'learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine'
);
});
test('The form is visible and has only solution link input', async ({
page
}) => {
// The solution form should be present and visible
const solutionForm = page.getByTestId('form-helper-form');
await expect(solutionForm).toBeVisible();
// The form submit button should be disabled as the form is not filled
const solutionFormButton = solutionForm.getByRole('button', {
name: `${translations.learn['i-completed']}`
});
await expect(solutionFormButton).toBeVisible();
await expect(solutionFormButton).toBeDisabled();
const solutionLinkInputLabel = solutionForm.getByTestId(
'solution-control-label'
);
await expect(solutionLinkInputLabel).toBeVisible();
await expect(solutionLinkInputLabel).toHaveText(
translations.learn['solution-link']
);
const solutionLinkInput = solutionForm.getByTestId('solution-form-control');
await expect(solutionLinkInput).toBeVisible();
const githubLinkInputLabel = solutionForm.getByTestId(
'githubLink-control-label'
);
await expect(githubLinkInputLabel).not.toBeVisible();
// The form submit button should be enabled as the form is now filled
await solutionLinkInput.fill('test-input');
await expect(solutionFormButton).toBeEnabled();
});
});
test.describe('Test form with solution link and github link', () => {
test.beforeEach(async ({ page }) => {
await page.goto(
'learn/quality-assurance/quality-assurance-projects/personal-library'
);
});
test('The form is visible and has solution link and github link input', async ({
page
}) => {
// The solution form should be present and visible
const solutionForm = page.getByTestId('form-helper-form');
await expect(solutionForm).toBeVisible();
// The form submit button should be disabled as the form is not filled
const solutionFormButton = solutionForm.getByRole('button', {
name: `${translations.learn['i-completed']}`
});
await expect(solutionFormButton).toBeVisible();
await expect(solutionFormButton).toBeDisabled();
const solutionLinkInputLabel = solutionForm.getByTestId(
'solution-control-label'
);
await expect(solutionLinkInputLabel).toBeVisible();
await expect(solutionLinkInputLabel).toHaveText(
translations.learn['solution-link']
);
const solutionLinkInput = solutionForm.getByTestId('solution-form-control');
await expect(solutionLinkInput).toBeVisible();
const githubLinkInputLabel = solutionForm.getByTestId(
'githubLink-control-label'
);
await expect(githubLinkInputLabel).toBeVisible();
await expect(githubLinkInputLabel).toHaveText(
translations.learn['github-link']
);
const githubLinkInput = solutionForm.getByTestId('githubLink-form-control');
await expect(githubLinkInput).toBeVisible();
// The form submit button should be enabled as the form is now filled
await solutionLinkInput.fill('test-input');
await expect(solutionFormButton).toBeEnabled();
});
});