feat: convert multifile tests to Playwright (#54833)

cypress/e2e/default/learn/challenges/multifile.ts

@@ -1,92 +0,0 @@
-import translations from '../../../../../client/i18n/locales/english/translations.json';
-const location =
-  '/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-2';
-const selectors = {
-  monacoTabs: '.monaco-editor-tabs',
-  signInButton: '[data-cy=sign-in-button]',
-  submitLowerJawButton: '[data-cy=submit-lowerJaw-button]',
-  checkLowerJawButton: '[data-cy=check-lowerJaw-button]',
-  resetCodeButton: '[data-cy=reset-code-button]',
-  instructionContainer: '.action-row-container'
-};
-
-describe('Challenge with multifile editor', () => {
-  beforeEach(() => {
-    cy.visit(location);
-  });
-  it('renders correctly', () => {
-    // it renders the file tab buttons
-    cy.get(selectors.monacoTabs).contains('index.html');
-    cy.get(selectors.monacoTabs).contains('styles.css');
-
-    // it checks for correct text at different widths
-    cy.viewport(768, 660);
-    cy.get(selectors.checkLowerJawButton).contains(
-      'Check Your Code (Ctrl + Enter)'
-    );
-
-    cy.viewport(767, 660);
-    cy.get(selectors.checkLowerJawButton)
-      .should('not.contain.text', '(Ctrl + Enter)')
-      .contains('Check Your Code');
-  });
-
-  it('resets the lower jaw when prompted', () => {
-    cy.get('[data-cy=failing-test-feedback]').should('not.exist');
-
-    cy.contains('Check Your Code').click();
-    cy.get('[data-cy=failing-test-feedback]').should('be.visible');
-    cy.get(selectors.resetCodeButton).click();
-    cy.get('[data-cy=reset-modal-confirm').click();
-
-    cy.get('[data-cy=failing-test-feedback]').should('not.exist');
-  });
-
-  it('prompts unauthenticated user to sign in to save progress', () => {
-    cy.focused()
-      .click()
-      .type('{end}{enter}<meta charset="UTF-8" />')
-      .type('{ctrl}{enter}', { release: false, delay: 100 });
-    cy.get(selectors.signInButton).contains(translations.learn['sign-in-save']);
-    cy.contains(translations.learn['congratulations']);
-    cy.get(selectors.signInButton).click();
-    cy.go('back');
-    cy.get(selectors.signInButton).should('not.exist');
-  });
-
-  it('focuses on the submit button after tests passed', () => {
-    cy.focused().click().type('{end}{enter}<meta charset="UTF-8" />');
-    cy.get(selectors.checkLowerJawButton).should('not.be.focused');
-    cy.get(selectors.checkLowerJawButton).click();
-    cy.get(selectors.submitLowerJawButton).should('be.focused');
-  });
-
-  it(
-    'brings back the check button after reset',
-    { browser: '!chrome' }, // TODO: seems to be a bug in Chrome, try again when a new version is released
-    () => {
-      cy.focused().click().type('{end}{enter}<meta charset="UTF-8" />');
-      cy.get(selectors.checkLowerJawButton).should('not.be.focused');
-      cy.get(selectors.checkLowerJawButton).click();
-      // Ready to submit (submit button replaces check button)
-      cy.get(selectors.submitLowerJawButton).should('be.visible');
-      cy.get(selectors.checkLowerJawButton).should('not.be.visible');
-      // Reset
-      cy.get(selectors.resetCodeButton).click();
-      cy.get('[data-cy=reset-modal-confirm').click();
-      // First we need to click on the description or Cypress will not be able
-      // to scroll to the button
-      cy.get('.editor-upper-jaw').click();
-      cy.get(selectors.checkLowerJawButton).should('be.visible');
-      cy.get(selectors.submitLowerJawButton).should('not.be.visible');
-    }
-  );
-
-  it('checks hotkeys when instruction is focused', () => {
-    cy.focused().type('{end}{enter}<meta charset="UTF-8" />');
-    cy.get(selectors.instructionContainer)
-      .click('topRight')
-      .trigger('keydown', { ctrlKey: true, keyCode: 13 }); // keyCode : 13 enter key
-    cy.get(selectors.submitLowerJawButton).should('not.be.focused');
-  });
-});

e2e/lower-jaw.spec.ts

@@ -1,4 +1,6 @@
 import { test, expect } from '@playwright/test';
+import { clearEditor, focusEditor, getEditors } from './utils/editor';
+import { signout } from './utils/logout';
 
 test.beforeEach(async ({ page }) => {
   await page.goto(
@@ -29,13 +31,101 @@ test('Click on the "check your code" button', async ({ page }) => {
   await expect(hint).toBeVisible();
 });
 
-test('Click on the "Reset" button', async ({ page }) => {
-  const resetButton = page.getByTestId('lowerJaw-reset-button');
-  await resetButton.click();
+test('Resets the lower jaw when prompted', async ({ page }) => {
+  const checkButton = page.getByRole('button', { name: 'Check Your Code' });
+
+  await checkButton.click();
+
+  const failing = page.getByTestId('lowerJaw-failing-test-feedback');
+  const hint = page.getByTestId('lowerJaw-failing-hint');
+  await expect(failing).toBeVisible();
+  await expect(hint).toBeVisible();
+
+  await page.getByRole('button', { name: 'Reset' }).click();
 
   await expect(
     page.getByRole('dialog', { name: 'Reset this lesson?' })
   ).toBeVisible();
+
+  await page.getByRole('button', { name: 'Reset this lesson' }).click();
+  await expect(failing).not.toBeVisible();
+  await expect(hint).not.toBeVisible();
+
+  await expect(checkButton).toBeVisible();
+});
+
+test('Checks hotkeys when instruction is focused', async ({
+  page,
+  browserName
+}) => {
+  const editor = getEditors(page);
+  const checkButton = page.getByRole('button', { name: 'Check Your Code' });
+  const description = page.locator('#description');
+
+  await editor.fill(
+    '<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>'
+  );
+
+  await description.click();
+
+  if (browserName === 'webkit') {
+    await page.keyboard.press('Meta+Enter');
+  } else {
+    await page.keyboard.press('Control+Enter');
+  }
+
+  await expect(checkButton).not.toBeFocused();
+});
+
+test('Focuses on the submit button after tests passed', async ({
+  page,
+  browserName,
+  isMobile
+}) => {
+  const editor = getEditors(page);
+  const checkButton = page.getByRole('button', { name: 'Check Your Code' });
+  const submitButton = page.getByRole('button', {
+    name: 'Submit and go to next challenge'
+  });
+  await focusEditor({ page, browserName, isMobile });
+  await clearEditor({ page, browserName });
+
+  await editor.fill(
+    '<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>'
+  );
+  await checkButton.click();
+
+  await expect(submitButton).toBeFocused();
+});
+
+test('Prompts unauthenticated user to sign in to save progress', async ({
+  page,
+  browserName,
+  isMobile
+}) => {
+  await signout(page);
+  await page.reload();
+  const editor = getEditors(page);
+  const checkButton = page.getByRole('button', { name: 'Check Your Code' });
+  const loginButton = page.getByRole('link', {
+    name: 'Sign in to save your progress'
+  });
+  await focusEditor({ page, browserName, isMobile });
+  await clearEditor({ page, browserName });
+
+  await editor.fill(
+    '<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>'
+  );
+
+  await checkButton.click();
+
+  await expect(loginButton).toBeVisible();
+
+  await loginButton.click();
+
+  await page.goBack();
+
+  await expect(loginButton).not.toBeVisible();
 });
 
 test('Should render UI correctly', async ({ page }) => {