feat: convert navbar test to Playwright (#55034)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

cypress/e2e/default/learn/common-components/navbar.ts

@@ -1,61 +0,0 @@
-const navBarselectors = {
-  heading: "[data-test-label='landing-header']",
-  smallCallToAction: "[data-test-label='landing-small-cta']",
-  navigationLinks: '.nav-list',
-  avatarContainer: '.avatar-container',
-  defaultAvatar: '.avatar-container',
-  menuButton: '#toggle-button-nav',
-  avatarImage: '.avatar-container .avatar'
-};
-
-describe('Navbar when logged out', () => {
-  it('should have the sign in button on landing and /learn', () => {
-    cy.visit('/');
-
-    cy.contains(navBarselectors.smallCallToAction, 'Sign in');
-
-    cy.visit('/learn');
-    cy.contains(navBarselectors.smallCallToAction, 'Sign in');
-  });
-});
-
-describe('Navbar Logged in', () => {
-  beforeEach(() => {
-    cy.login();
-    cy.visit('/');
-  });
-
-  it('Should render properly', () => {
-    cy.get('#universal-nav').should('be.visible');
-    cy.get('#universal-nav').should('have.class', 'universal-nav');
-  });
-
-  it(
-    'Should take user to learn page when clicked on ' + 'the freeCodeCamp logo',
-    () => {
-      cy.get('#universal-nav-logo').within(() => {
-        cy.get('svg').click();
-      });
-      cy.url().should('include', '/learn');
-    }
-  );
-
-  it('Should have `Profile` link when user is signed in', () => {
-    cy.get(navBarselectors.menuButton).click();
-    cy.get(navBarselectors.navigationLinks).contains('Profile').click();
-    cy.url().should('include', '/developmentuser');
-  });
-
-  it('Should have a profile image with class `default-border`', () => {
-    cy.get(navBarselectors.avatarContainer).should(
-      'have.class',
-      'default-border'
-    );
-    cy.get(navBarselectors.defaultAvatar).should('exist');
-  });
-
-  it('Should have a profile image with dimensions that are <= 26px', () => {
-    cy.get(navBarselectors.avatarImage).invoke('width').should('lte', 26);
-    cy.get(navBarselectors.avatarImage).invoke('height').should('lte', 26);
-  });
-});

e2e/header.spec.ts

@@ -1,3 +1,4 @@
+import { execSync } from 'child_process';
 import { test, expect } from '@playwright/test';
 import translations from '../client/i18n/locales/english/translations.json';
 import { availableLangs, hiddenLangs, LangNames } from '../shared/config/i18n';
@@ -20,12 +21,21 @@ const headerComponentElements = {
 const examUrl =
   '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';
 
-test.use({ storageState: 'playwright/.auth/certified-user.json' });
+test.describe('Header', () => {
+  test.use({ storageState: 'playwright/.auth/development-user.json' });
 
   test.beforeEach(async ({ page }) => {
     await page.goto('/');
   });
 
+  test.beforeAll(() => {
+    execSync('node ./tools/scripts/seed/seed-demo-user');
+  });
+
+  test.afterAll(() => {
+    execSync('node ./tools/scripts/seed/seed-demo-user certified-user');
+  });
+
   test('Has link for skip content', async ({ page }) => {
     const skipContent = page.getByTestId(headerComponentElements.skipContent);
     await expect(skipContent).toBeVisible();
@@ -87,7 +97,9 @@ test('The language list should contain a button for each available language', as
     const langList = page.getByTestId(headerComponentElements.languageList);
     await expect(langList).toBeVisible();
 
-  const langButtons = page.getByTestId(headerComponentElements.languageButton);
+    const langButtons = page.getByTestId(
+      headerComponentElements.languageButton
+    );
     await expect(langButtons).toHaveCount(locales.length);
 
     for (let i = 0; i < locales.length; i++) {
@@ -132,6 +144,7 @@ test('The menu should contain links to: donate, curriculum, forum, news, radio,
     await expect(menu).toBeVisible();
 
     const menuLinks = [
+      { name: translations.buttons.profile, href: '/developmentuser' },
       {
         name: translations.buttons.donate,
         href: '/donate'
@@ -195,28 +208,29 @@ test('The menu should be able to change the theme', async ({ page }) => {
   });
 
   test('The header should contain an avatar', async ({ page }) => {
-  const avatarLink = page.locator('.avatar-nav-link');
+    const avatarLink = page.getByRole('link', { name: 'Profile' });
     await expect(avatarLink).toBeVisible();
-  await expect(avatarLink).toHaveAttribute('href', '/certifieduser');
+    await expect(avatarLink).toHaveAttribute('href', '/developmentuser');
 
-  const avatarContainer = page.locator('.avatar-container');
-  await expect(avatarContainer).toHaveClass('avatar-container blue-border');
+    const avatar = avatarLink.getByRole('img', {
+      name: 'Default Avatar',
+      includeHidden: true // the svg is aria-hidden
+    });
+    await expect(avatar).toBeVisible();
   });
 
-test('Renders exam nav for Foundational C# with Microsoft exam', async ({
-  page
-}) => {
-  await page.goto(examUrl);
-  await page
-    .getByRole('button', {
-      name: translations.buttons['click-start-exam']
-    })
-    .click();
-  await expect(page).toHaveURL(examUrl);
-  await expect(page.getByTestId(headerComponentElements.examNav)).toBeVisible();
-  await expect(
-    page.getByTestId(headerComponentElements.examNavLogo)
-  ).toBeVisible();
+  test('The Avatar should be less or equal to 26px', async ({ page }) => {
+    const avatar = page
+      .getByRole('link', { name: 'Profile' })
+      .getByRole('img', {
+        name: 'Default Avatar',
+        includeHidden: true // the svg is aria-hidden
+      });
+
+    await expect(avatar).toBeVisible();
+    const avatarSize = await avatar.boundingBox();
+    expect(avatarSize?.width).toBeLessThanOrEqual(26);
+    expect(avatarSize?.height).toBeLessThanOrEqual(26);
   });
 
   test('The Sign In button should redirect to api/signin', async ({
@@ -250,6 +264,35 @@ test('When the user is signed out, only certain elements should be visible', asy
       .getByTestId(headerComponentElements.signInButton)
       .nth(0);
     await expect(signInButton).toBeVisible();
-  await expect(page.locator('.avatar-nav-link')).toBeHidden();
-  await expect(page.locator('.avatar-container')).toBeHidden();
+
+    const avatar = page
+      .getByRole('link', { name: 'Profile' })
+      .getByRole('img', {
+        name: 'Default Avatar',
+        includeHidden: true // the svg is aria-hidden
+      });
+    await expect(avatar).toBeHidden();
+  });
+});
+
+test.describe('Exam Header', () => {
+  test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+  test('Renders exam nav for Foundational C# with Microsoft exam', async ({
+    page
+  }) => {
+    await page.goto(examUrl);
+    await page
+      .getByRole('button', {
+        name: translations.buttons['click-start-exam']
+      })
+      .click();
+    await expect(page).toHaveURL(examUrl);
+    await expect(
+      page.getByTestId(headerComponentElements.examNav)
+    ).toBeVisible();
+    await expect(
+      page.getByTestId(headerComponentElements.examNavLogo)
+    ).toBeVisible();
+  });
 });