gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: convert scrollbar test to playwright (#54665)

Browse Source
This commit is contained in:
Sem Bauke
2024-05-07 09:38:54 +02:00
committed by GitHub
parent 15bfd091c5
commit 5694b0837c
2 changed files with 58 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/e2e/default/settings/scrollbar-width.ts
-41
View File
@@ -1,41 +0,0 @@
describe('Editor scrollbar width', () => {
beforeEach(() => {
cy.login();
cy.visit('/settings');
});
let upperJawWidth;
it('Default editor scrollbar width should be 5px', () => {
cy.get('#scrollbar-width-slider').should('have.value', '5');
cy.visit(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
);
cy.get('.editor-upper-jaw').then($editorUpperJaw => {
upperJawWidth = Number($editorUpperJaw.outerWidth());
});
cy.get('#editor-lower-jaw').should($editorLowerJaw => {
expect(upperJawWidth).to.equal(Number($editorLowerJaw.outerWidth()));
});
cy.get('.monaco-scrollable-element').should($scrollable => {
expect(upperJawWidth).to.equal(Number($scrollable.outerWidth()) - 5);
});
});
it('Should allow you to change editor scrollbar width to 25px', () => {
cy.get('.scrollbar-width-numbers > [data-value="25"]').click();
cy.get('#scrollbar-width-slider').should('have.value', '25');
cy.visit(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
);
cy.get('.editor-upper-jaw').then($editorUpperJaw => {
upperJawWidth = Number($editorUpperJaw.outerWidth());
});
cy.get('#editor-lower-jaw').should($editorLowerJaw => {
expect(upperJawWidth).to.equal(Number($editorLowerJaw.outerWidth()));
});
cy.get('.monaco-scrollable-element').should($scrollable => {
expect(upperJawWidth).to.equal(Number($scrollable.outerWidth()) - 25);
});
});
});
e2e/scrollbar-width.spec.ts
+58
View File
@@ -0,0 +1,58 @@
import { test, expect } from '@playwright/test';
test.use({ storageState: 'playwright/.auth/certified-user.json' });
test.describe('Editor scrollbar width', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/settings');
});
test('Default editor scrollbar width should be 5px', async ({ page }) => {
await expect(page.locator('#scrollbar-width-slider')).toHaveValue('5');
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
);
const upperJawElement = page.locator('.editor-upper-jaw');
const upperJawWidth = await upperJawElement.evaluate(
(node: HTMLElement) => node.offsetWidth
);
const lowerJawElement = page.locator('#editor-lower-jaw');
expect(
await lowerJawElement.evaluate((node: HTMLElement) => node.offsetWidth)
).toEqual(upperJawWidth);
const scrollableElement = page.locator('.monaco-scrollable-element');
expect(
await scrollableElement.evaluate(
(node: HTMLElement) => node.offsetWidth - 5
)
).toEqual(upperJawWidth);
});
test('Should allow you to change editor scrollbar width to 25px', async ({
page
}) => {
await page.locator('.scrollbar-width-numbers > [data-value="25"]').click();
await expect(page.locator('#scrollbar-width-slider')).toHaveValue('25');
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
);
const upperJawElement = page.locator('.editor-upper-jaw');
const upperJawWidth = await upperJawElement.evaluate(
(node: HTMLElement) => node.offsetWidth
);
const lowerJawElement = page.locator('#editor-lower-jaw');
expect(
await lowerJawElement.evaluate((node: HTMLElement) => node.offsetWidth)
).toEqual(upperJawWidth);
const scrollableElement = page.locator('.monaco-scrollable-element');
expect(
await scrollableElement.evaluate(
(node: HTMLElement) => node.offsetWidth - 25
)
).toEqual(upperJawWidth);
});
});