greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: convert portfolio test to Playwright (#54908)

pull/54979/head
Sem Bauke 2024-05-24 22:43:19 +02:00 committed by GitHub
parent eeb7cb090e
commit d11090b41d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 158 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/settings/portfolio.tsx
View File

@ -275,11 +275,13 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
required={true}
type='text'
value={title}
data-cy='portfolio-title'
name='portfolio-title'
id={`${id}-title-input`}
/>
{titleMessage ? (
<HelpBlock data-cy='validation-message'>{titleMessage}</HelpBlock>
<HelpBlock data-playwright-test-label='title-validation'>
{titleMessage}
</HelpBlock>
) : null}
</FormGroup>
<FormGroup
@ -294,11 +296,13 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
required={true}
type='url'
value={url}
data-cy='portfolio-url'
name='portfolio-url'
id={`${id}-url-input`}
/>
{urlMessage ? (
<HelpBlock data-cy='validation-message'>{urlMessage}</HelpBlock>
<HelpBlock data-playwright-test-label='url-validation'>
{urlMessage}
</HelpBlock>
) : null}
</FormGroup>
<FormGroup
@ -312,11 +316,13 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
onChange={this.createOnChangeHandler(id, 'image')}
type='url'
value={image}
data-cy='portfolio-image'
name='portfolio-image'
id={`${id}-image-input`}
/>
{imageMessage ? (
<HelpBlock data-cy='validation-message'>{imageMessage}</HelpBlock>
<HelpBlock data-playwright-test-label='image-validation'>
{imageMessage}
</HelpBlock>
) : null}
</FormGroup>
<FormGroup
@ -330,11 +336,11 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
componentClass='textarea'
onChange={this.createOnChangeHandler(id, 'description')}
value={description}
data-cy='portfolio-description'
name='portfolio-description'
id={`${id}-description-input`}
/>
{descriptionMessage ? (
<HelpBlock data-cy='validation-message'>
<HelpBlock data-playwright-test-label='description-validation'>
{descriptionMessage}
</HelpBlock>
) : null}
@ -342,6 +348,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
<BlockSaveButton
disabled={isButtonDisabled}
bgSize='large'
data-playwright-test-label='save-portfolio'
{...(isButtonDisabled && { tabIndex: -1 })}
>
{t('buttons.save-portfolio')}

56
cypress/e2e/default/settings/portfolio.ts
View File

@ -1,56 +0,0 @@
describe('Add Portfolio Item', () => {
beforeEach(() => {
cy.task('seed');
cy.login();
});
it('should be possible to add a portfolio item', () => {
cy.visit('/settings');
cy.get('[data-cy="add-portfolio"]')
.contains('Add a new portfolio Item')
.click();
cy.get('[data-cy="validation-message"]').contains('A title is required');
cy.get('[data-cy="portfolio-title"]').type('This is a portfolio item');
cy.get('button')
.contains('Save this portfolio item')
.should('not.be.disabled');
cy.get('[data-cy="portfolio-url"]').type('This is a portfolio item');
cy.get('[data-cy="validation-message"]').contains(
'URL must start with http or https'
);
cy.get('[data-cy="portfolio-url"]').clear().type('http://google.com');
cy.get('[data-cy="portfolio-image"]').type('hello');
cy.get('[data-cy="validation-message"]').contains(
'URL must start with http or https'
);
cy.get('[data-cy="portfolio-image"]')
.clear()
.type(
'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
);
cy.get('[data-cy="portfolio-description"]').type(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod metus velit, vel accumsan lorem facilisis ac. Maecenas vitae ultrices dolor. Fusce in lobortis arcu, vel congue risus. Sed id neque nec nibh hendrerit bibendum. Integer venenatie.'
);
cy.get('[data-cy="validation-message"]').contains(
'There is a maximum limit of 288 characters, you have 40 left'
);
cy.get('[data-cy="portfolio-description"]').type(
'Lorem ipsum dolor sit amet, consecteturs.'
);
cy.get('[data-cy="validation-message"]').contains(
'There is a maximum limit of 288 characters, you have 0 left'
);
cy.get('button')
.contains('Save this portfolio item')
.should('not.be.disabled');
cy.get('[data-cy="portfolio-description"]').type('{backspace}');
cy.get('button[type=submit]').contains('Save this portfolio item').click();
});
});

143
e2e/portfolio.spec.ts Normal file
View File

@ -0,0 +1,143 @@
import { execSync } from 'child_process';
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
test.use({ storageState: 'playwright/.auth/development-user.json' });
test.beforeAll(() => {
execSync('node ./tools/scripts/seed/seed-demo-user');
});
test.afterAll(() => {
execSync('node ./tools/scripts/seed/seed-demo-user certified-user');
});
test.describe('Add Portfolio Item', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/settings');
});
test('The title has validation', async ({ page }) => {
await page
.getByRole('button', { name: 'Add a new portfolio Item' })
.click();
await page.getByLabel(translations.settings.labels.title).fill('T');
await expect(page.getByTestId('title-validation')).toContainText(
'Title is too short'
);
await page
.getByLabel(translations.settings.labels.title)
.fill(
'This is the longest title you will ever see in your entire life, you will never see such a long title again. This is the longest title in existen'
);
await expect(page.getByTestId('title-validation')).toContainText(
'Title is too long'
);
await page
.getByLabel(translations.settings.labels.title)
.fill('My portfolio');
await expect(page.getByTestId('title-validation')).toBeHidden();
});
test('The url has validation', async ({ page }) => {
await page
.getByRole('button', { name: 'Add a new portfolio Item' })
.click();
await page.getByLabel(translations.settings.labels.url).fill('T');
await expect(page.getByTestId('url-validation')).toContainText(
'Please use a valid URL'
);
await page
.getByLabel(translations.settings.labels.url)
.fill('http://helloworld.com');
await expect(page.getByTestId('url-validation')).toBeHidden();
});
test('The image has validation', async ({ page }) => {
await page
.getByRole('button', { name: 'Add a new portfolio Item' })
.click();
await page.getByLabel(translations.settings.labels.image).fill('T');
await expect(page.getByTestId('image-validation')).toContainText(
'URL must link directly to an image file'
);
await page
.getByLabel(translations.settings.labels.image)
.fill('http://helloworld.com/image.png');
await expect(page.getByTestId('image-validation')).toBeHidden();
});
test('The description has validation', async ({ page }) => {
await page
.getByRole('button', { name: 'Add a new portfolio Item' })
.click();
await page
.getByLabel(translations.settings.labels.description)
.fill(
'This is the longest description you will ever see in your entire life, you will never see such a long description again. This is the longest description in existence. Nothing will ever come close to be being so long again in the entire history of the world. I only have 30 characters left.'
);
await expect(page.getByTestId('description-validation')).toContainText(
'There is a maximum limit of 288 characters, you have 0 left'
);
await page
.getByLabel(translations.settings.labels.description)
.fill('My description');
await expect(page.getByTestId('description-validation')).toBeHidden();
});
test('It should be possible to delete a portfolio item', async ({ page }) => {
await page
.getByRole('button', { name: 'Add a new portfolio Item' })
.click();
await page
.getByLabel(translations.settings.labels.title)
.fill('My portfolio');
await page
.getByLabel(translations.settings.labels.url)
.fill('https://my-portfolio.com');
await page
.getByLabel(translations.settings.labels.image)
.fill('https://my-portfolio.com/image.png');
await page
.getByLabel(translations.settings.labels.description)
.fill('My description');
await page
.getByRole('button', { name: 'Remove this portfolio item' })
.click();
await expect(page.getByTestId('portfolio-items')).toBeHidden();
});
test('It should be possible to add a portfolio item', async ({ page }) => {
await page
.getByRole('button', { name: 'Add a new portfolio Item' })
.click();
await expect(
page.getByRole('button', { name: 'Add a new portfolio Item' })
).toBeDisabled();
await page
.getByLabel(translations.settings.labels.title)
.fill('My portfolio');
await page
.getByLabel(translations.settings.labels.url)
.fill('https://my-portfolio.com');
await page
.getByLabel(translations.settings.labels.image)
.fill('https://my-portfolio.com/image.png');
await page
.getByLabel(translations.settings.labels.description)
.fill('My description');
await page
.getByRole('button', { name: 'Save this portfolio item' })
.click();
await expect(page.getByTestId('flash-message')).toContainText(
/We have updated your portfolio/
);
});
// TODO: Add test for viewing portfolio item
});

49
e2e/settings.spec.ts
View File

@ -186,55 +186,6 @@ test.describe('Settings', () => {
await expect(saveButton).toBeVisible();
});
test('Should validate Portfolio Settings', async ({ page }) => {
await expect(
page.getByRole('heading', {
name: translations.settings.headings.portfolio
})
).toBeVisible();
await expect(
page.getByText(translations.settings['share-projects'])
).toBeVisible();
const addPortfolioButton = page.getByText(
translations.buttons['add-portfolio']
);
await expect(addPortfolioButton).toBeVisible();
await addPortfolioButton.click();
await expect(addPortfolioButton).toBeDisabled(); // Add button should be disabled after clicking
const portfolioItems = page.getByTestId(settingsTestIds.portfolioItems);
await expect(portfolioItems).toBeVisible();
const saveButton = page.getByRole('button', {
name: translations.buttons['save-portfolio']
});
await expect(saveButton).toBeVisible();
await expect(saveButton).toBeDisabled();
const removeButton = page.getByRole('button', {
name: translations.buttons['remove-portfolio']
});
await expect(removeButton).toBeVisible();
await page
.getByLabel(translations.settings.labels.title)
.fill('My portfolio');
await page
.getByLabel(translations.settings.labels.url)
.fill('https://my-portfolio.com');
await page
.getByLabel(translations.settings.labels.image)
.fill('https://my-portfolio.com/image.png');
await page
.getByLabel(translations.settings.labels.description)
.fill('My description');
await saveButton.click();
await expect(
page.getByText(translations.flash['portfolio-item-updated'])
).toBeVisible();
await removeButton.click();
await expect(addPortfolioButton).toBeEnabled();
await expect(portfolioItems).toBeHidden();
await expect(saveButton).toBeHidden();
await expect(removeButton).toBeHidden();
});
test('Should validate Personal Information Settings', async ({ page }) => {
await expect(
page.getByRole('heading', {