test: ensure shortcuts enabled before testing (#54635)

e2e/hotkeys.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 import translations from '../client/i18n/locales/english/translations.json';
+import { authedPut } from './utils/request';
 
 const course =
   '/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code';
@@ -9,6 +10,19 @@ const editorPaneLabel =
 
 test.use({ storageState: 'playwright/.auth/certified-user.json' });
 
+test.beforeAll(async ({ request }) => {
+  await authedPut(request, 'update-my-keyboard-shortcuts', {
+    keyboardShortcuts: false
+  });
+});
+
+test.afterEach(
+  async ({ request }) =>
+    await authedPut(request, 'update-my-keyboard-shortcuts', {
+      keyboardShortcuts: false
+    })
+);
+
 test('User can interact with the app using the keyboard', async ({ page }) => {
   // Enable keyboard shortcuts
   await page.goto('/settings');
@@ -18,6 +32,12 @@ test('User can interact with the app using the keyboard', async ({ page }) => {
   await keyboardShortcutGroup
     .getByRole('button', { name: translations.buttons.on, exact: true })
     .click();
+  // TODO: getByRole('alert', name:
+  // translations.flash['keyboard-shortcut-updated']) did not find the alert.
+  // Should it a) be an alert and b) have a name?
+  await expect(
+    page.getByText(translations.flash['keyboard-shortcut-updated'])
+  ).toBeVisible();
 
   await page.goto(course);
 

e2e/shortcuts-modal.spec.ts

@@ -1,6 +1,7 @@
 import { APIRequestContext, Page, expect, test } from '@playwright/test';
 
 import translations from '../client/i18n/locales/english/translations.json';
+import { authedPut } from './utils/request';
 
 const course =
   '/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code';
@@ -9,24 +10,10 @@ const editorPaneLabel =
 
 test.use({ storageState: 'playwright/.auth/certified-user.json' });
 
-const enableKeyboardShortcuts = async (
-  page: Page,
-  request: APIRequestContext
-) => {
-  const csrfToken = (await request.storageState()).cookies.find(
-    c => c.name === 'csrf_token'
-  )?.value;
-
-  expect(csrfToken).toBeTruthy();
-
-  const res = await request.put(
-    process.env.API_LOCATION + '/update-my-keyboard-shortcuts',
-    {
-      data: { keyboardShortcuts: true },
-      headers: { 'csrf-token': csrfToken! }
-    }
-  );
-  expect(res.status()).toBe(200);
+const enableKeyboardShortcuts = async (request: APIRequestContext) => {
+  const res = await authedPut(request, '/update-my-keyboard-shortcuts', {
+    keyboardShortcuts: true
+  });
   expect(await res.json()).toEqual({
     message: 'flash.keyboard-shortcut-updated',
     type: 'success'
@@ -46,7 +33,7 @@ test.beforeEach(async ({ page, isMobile, request }) => {
     'Skipping on mobile as it does not have a physical keyboard'
   );
 
-  await enableKeyboardShortcuts(page, request);
+  await enableKeyboardShortcuts(request);
   await page.goto(course);
 });
 

e2e/utils/request.ts

@@ -0,0 +1,26 @@
+import { APIRequestContext, expect } from '@playwright/test';
+
+const ensureLeadingSlash = (endpoint: string) =>
+  endpoint[0] === '/' ? endpoint : '/' + endpoint;
+
+export const authedPut = async (
+  request: APIRequestContext,
+  endpoint: string,
+  data: Record<string, unknown>
+) => {
+  const csrfToken = (await request.storageState()).cookies.find(
+    c => c.name === 'csrf_token'
+  )?.value;
+
+  expect(csrfToken).toBeTruthy();
+
+  const res = await request.put(
+    process.env.API_LOCATION + ensureLeadingSlash(endpoint),
+    {
+      data,
+      headers: { 'csrf-token': csrfToken! }
+    }
+  );
+  expect(res.status()).toBe(200);
+  return res;
+};