fix: flaky hotkey spec (#55345)

This commit is contained in:
Oliver Eyton-Williams
2024-06-27 21:08:45 +02:00
committed by GitHub
parent 2a5efc1d73
commit b8e03ca5ef

View File

@@ -4,10 +4,11 @@ import translations from '../client/i18n/locales/english/translations.json';
import { authedRequest } from './utils/request';
import { getEditors } from './utils/editor';
const course =
'/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code';
const links = {
basicJS1:
'/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code',
basicJS2:
'/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables',
frontEnd1:
'/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine',
frontEnd2:
@@ -22,11 +23,28 @@ const links = {
'/learn/python-for-everybody/python-for-everybody/introduction-hardware-architecture'
};
const titles = {
basicJS1: /Comment Your JavaScript Code/,
basicJS2: /Declare JavaScript Variables/,
frontEnd2: /Build a Markdown Previewer/,
backEnd2: /Request Header Parser Microservice/,
video2: /Introduction: Hardware Architecture/
};
type PageId = keyof typeof titles;
// The hotkeys are attached to specific elements, so we need to wait for the
// wrapper to be focused before we can test the hotkeys.
const waitUntilListening = async (page: Page) =>
await expect(page.locator('#editor-layout')).toBeFocused();
// This is a hack to work around the fact that the page isn't always hydrated
// with the new content when the URL changes.
const waitUntilHydrated = async (page: Page, pageId: PageId) => {
await page.waitForURL(links[pageId]);
await expect(page).toHaveTitle(titles[pageId]);
await waitUntilListening(page);
};
test.use({ storageState: 'playwright/.auth/certified-user.json' });
test.beforeAll(async ({ request }) => {
@@ -69,21 +87,17 @@ test.afterEach(
);
test('User can use shortcuts in and around the editor', async ({ page }) => {
await page.goto(course);
await page.goto(links.basicJS1);
await expect(getEditors(page)).toBeFocused();
await getEditors(page).press('Escape');
await expect(getEditors(page)).not.toBeFocused();
await page.keyboard.press('n');
const nextCourse = '**/declare-javascript-variables';
await page.waitForURL(nextCourse);
await waitUntilListening(page);
await waitUntilHydrated(page, 'basicJS2');
await page.keyboard.press('p');
const previousCourse = '**/comment-your-javascript-code';
await page.waitForURL(previousCourse);
await waitUntilListening(page);
await waitUntilHydrated(page, 'basicJS1');
await page.keyboard.press('e');
await expect(getEditors(page)).toBeFocused();
@@ -101,8 +115,7 @@ test('User can use shortcuts to navigate between frontend projects', async ({
await page.keyboard.press('Escape');
await page.keyboard.press('n');
await page.waitForURL(links.frontEnd2);
await waitUntilListening(page);
await waitUntilHydrated(page, 'frontEnd2');
await page.keyboard.press('p');
await page.waitForURL(links.frontEnd1);
});
@@ -115,8 +128,7 @@ test('User can use shortcuts to navigate between backend projects', async ({
await page.keyboard.press('Escape');
await page.keyboard.press('n');
await page.waitForURL(links.backEnd2);
await waitUntilListening(page);
await waitUntilHydrated(page, 'backEnd2');
await page.keyboard.press('p');
await page.waitForURL(links.backEnd1);
});
@@ -129,8 +141,7 @@ test('User can use shortcuts to navigate between video-based challenges', async
await page.keyboard.press('Escape');
await page.keyboard.press('n');
await page.waitForURL(links.video2);
await waitUntilListening(page);
await waitUntilHydrated(page, 'video2');
await page.keyboard.press('p');
await page.waitForURL(links.video1);
});