feat: convert progressbar test to Playwright (#54636)

Co-authored-by: Naomi <nhcarrigan@gmail.com>
This commit is contained in:
Sem Bauke
2024-05-07 17:59:02 +02:00
committed by GitHub
parent 17f2e184bd
commit c3b5c11afc
2 changed files with 31 additions and 85 deletions
@@ -1,85 +0,0 @@
describe('progress bar', () => {
beforeEach(() => {
cy.task('seed');
cy.login();
});
it(
'Should show the progress bar showing the completed percent on legacy challenges',
{ browser: 'electron' },
() => {
cy.visit(
'/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables'
);
cy.get(`${'.react-monaco-editor-container'} textarea`, { timeout: 16000 })
.click()
.focused()
.type('{ctrl}a')
.clear()
.type('var myName;');
cy.contains('Run the Tests (Ctrl + Enter)').click({ force: true });
cy.contains('Submit and go to next challenge');
cy.get('.progress-bar-container').contains('1% complete');
}
);
it(
'Should show the progress bar showing the completed percent on modern challenges',
{ browser: 'electron' },
() => {
cy.visit(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
);
cy.get(`${'.react-monaco-editor-container'} textarea`, { timeout: 16000 })
.click()
.focused()
.type('{ctrl}a')
.clear()
.type(`<h1>CatPhotoApp</h1>\n<h2>Cat Photos</h2>`);
cy.contains('Check Your Code (Ctrl + Enter)').click({ force: true });
cy.contains('Submit and go to next challenge');
cy.get('.progress-bar-container').contains('1% complete');
}
);
it(
'Should show the progress bar showing the completed percent on modern challenges',
{ browser: 'electron' },
() => {
cy.visit(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
cy.get(`${'.react-monaco-editor-container'} textarea`, { timeout: 16000 })
.click()
.focused()
.type('{ctrl}a')
.clear()
.type(
`<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>`
);
cy.contains('Check Your Code (Ctrl + Enter)').click({ force: true });
cy.contains('Submit and go to next challenge');
cy.get('.progress-bar-container').contains('1% complete');
}
);
it(
'Should show the progress bar showing the completed percent on modern challenges',
{ browser: 'electron' },
() => {
cy.visit(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-4'
);
cy.get(`${'.react-monaco-editor-container'} textarea`, { timeout: 16000 })
.click()
.focused()
.type('{ctrl}a')
.clear()
.type(
`<!-- TODO: Add link to cat photos -->\n<p>See more cat photos in our gallery.</p>`
);
cy.contains('Check Your Code (Ctrl + Enter)').click({ force: true });
cy.contains('Submit and go to next challenge');
cy.get('.progress-bar-container').contains('3% complete');
}
);
});
+31
View File
@@ -1,4 +1,5 @@
import { expect, test } from '@playwright/test';
test.use({ storageState: 'playwright/.auth/certified-user.json' });
test.describe('Progress bar component', () => {
test('Should appear with the correct content after the user has submitted their code', async ({
@@ -33,4 +34,34 @@ test.describe('Progress bar component', () => {
.getByRole('button', { name: 'Submit and go to next challenge' })
.click();
});
test('should appear in the completion modal after user has submitted their code', async ({
page
}) => {
await page.goto(
'/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables'
);
const monacoEditor = page.getByLabel('Editor content');
await monacoEditor.focus();
await page.keyboard.press('Control+A');
await page.keyboard.press('Meta+A');
await page.keyboard.press('Backspace');
await page.keyboard.insertText('var myName;');
await page
.getByRole('button', { name: 'Run the Tests (Ctrl + Enter)' })
.click();
await expect(page.locator('.completion-block-meta')).toContainText(
'99% complete'
);
await page
.getByRole('button', { name: 'Submit and go to next challenge' })
.click();
});
});