test(e2e): add testing for Header menu items

.vscode/settings.json

@@ -6,6 +6,7 @@
     "chainable",
     "codecov",
     "codesandbox",
+    "combobox",
     "flexbugs",
     "gemoji",
     "instanceof",

cypress/integration/header.spec.ts

@@ -0,0 +1,122 @@
+import type { Route } from '@config';
+import { routes, siteConfig } from '@config';
+
+describe('Header', () => {
+  const menuItems = ['/', ...routes, 'SearchBar', 'ThemeSwitch', 'Ellipsis'];
+  const logoIndex = 0;
+  const linksStartIndex = logoIndex + 1;
+  const searchBarIndex = linksStartIndex + routes.length;
+  const themeSwitchIndex = searchBarIndex + 1;
+
+  it('should display fully menu items on each route', () => {
+    cy.wrap(routes).each((route: Route) => {
+      cy.visitRoute(route.path, route.name);
+
+      cy.getByRole('menu')
+        .findByRole('menuitem')
+        .should('have.length', menuItems.length);
+    });
+  });
+
+  it('should route to home page when logo clicked', () => {
+    cy.wrap(routes).each((route: Route) => {
+      cy.visitRoute(route.path, route.name);
+
+      cy.getByRole('menu').findByRole('menuitem').eq(logoIndex).click();
+
+      cy.validRoute('/', siteConfig.title);
+    });
+  });
+
+  it('should route to pages when links clicked', () => {
+    cy.wrap(routes).each((route: Route, index) => {
+      cy.visitRoute(route.path, route.name);
+
+      cy.getByRole('menu')
+        .findByRole('menuitem')
+        .eq(index + linksStartIndex)
+        .click();
+
+      cy.validRoute(routes[index].path, routes[index].name);
+    });
+  });
+
+  it('should focus search bar when search bar clicked', () => {
+    cy.wrap(routes).each((route: Route) => {
+      cy.visitRoute(route.path, route.name);
+
+      cy.getByRole('menu')
+        .findByRole('menuitem')
+        .eq(searchBarIndex)
+        .click()
+        .should('have.class', 'ant-menu-item-selected');
+    });
+  });
+
+  it('should search posts when search bar worked', () => {
+    cy.wrap(routes).each((route: Route) => {
+      cy.visitRoute(route.path, route.name);
+
+      cy.getByRole('menu')
+        .findByRole('menuitem')
+        .eq(searchBarIndex)
+        .findByRole('combobox')
+        .type('Notes')
+        .should('have.value', 'Notes');
+    });
+  });
+
+  it('should clear input when search bar clear button clicked', () => {
+    cy.wrap(routes).each((route: Route) => {
+      cy.visitRoute(route.path, route.name);
+
+      cy.getByRole('menu')
+        .findByRole('menuitem')
+        .eq(searchBarIndex)
+        .findByRole('combobox')
+        .type('Notes')
+        .should('have.value', 'Notes');
+
+      cy.getByRole('menu')
+        .findByRole('menuitem')
+        .eq(searchBarIndex)
+        .findByLabel('close-circle')
+        .click();
+
+      cy.getByRole('menu')
+        .findByRole('menuitem')
+        .eq(searchBarIndex)
+        .findByRole('combobox')
+        .should('have.value', '');
+    });
+  });
+
+  it('should switch theme when theme switch button clicked', () => {
+    cy.wrap(routes).each((route: Route) => {
+      cy.visitRoute(route.path, route.name);
+      cy.clearLocalStorage();
+
+      cy.getByRole('menu')
+        .findByRole('menuitem')
+        .eq(themeSwitchIndex)
+        .findByLabel('Sun')
+        .click();
+
+      cy.window().then(window => {
+        expect(window.localStorage.getItem('dark-mode')).to.equal('true');
+        expect(window.document.body.classList.contains('dark')).to.equal(true);
+      });
+
+      cy.getByRole('menu')
+        .findByRole('menuitem')
+        .eq(themeSwitchIndex)
+        .findByLabel('Moon')
+        .click();
+
+      cy.window().then(window => {
+        expect(window.localStorage.getItem('dark-mode')).to.equal('false');
+        expect(window.document.body.classList.contains('dark')).to.equal(false);
+      });
+    });
+  });
+});

cypress/integration/home.spec.ts

@@ -1,16 +1,11 @@
 import { routes, siteConfig } from '@config';
 
-describe('Home', () => {
+describe('Home Page', () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visitRoute('/', siteConfig.title);
   });
 
-  it('should contain home page route', () => {
-    cy.url().should('include', '/');
-    cy.title().should('include', siteConfig.title);
-  });
-
-  it('should display home page title', () => {
+  it('should display page title', () => {
     cy.getByRole('main').should('be.visible');
   });
 

cypress/support/commands.ts

@@ -26,10 +26,37 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add(
+  'findByLabel',
+  { prevSubject: 'element' },
+  (subject, label, options) => {
+    return cy
+      .wrap(subject, { log: false })
+      .find(`[aria-label="${label}"]`, options);
+  }
+);
+
 Cypress.Commands.add('getByRole', (role, options) => {
   return cy.get(`[role="${role}"]`, options);
 });
 
 Cypress.Commands.add('getByTestId', (testId, options) => {
   return cy.get(`[data-testid="${testId}"]`, options);
 });
+
+Cypress.Commands.add('getByLabel', (label, options) => {
+  return cy.get(`[aria-label="${label}"]`, options);
+});
+
+Cypress.Commands.add('validRoute', (path, title) => {
+  cy.url().should('include', path);
+
+  if (title) {
+    cy.title().should('include', title);
+  }
+});
+
+Cypress.Commands.add('visitRoute', (path, title) => {
+  cy.visit(path);
+  cy.validRoute(path, title);
+});

cypress/support/index.ts

@@ -15,6 +15,11 @@ declare global {
         options?: Parameters<Cypress.ChainableMethods['find']>[1]
       ): Chainable<JQuery<HTMLElement>>;
 
+      findByLabel(
+        label: Parameters<Cypress.ChainableMethods['find']>[0],
+        options?: Parameters<Cypress.ChainableMethods['find']>[1]
+      ): Chainable<JQuery<HTMLElement>>;
+
       getByRole(
         role: Parameters<Cypress.ChainableMethods['get']>[0],
         options?: Parameters<Cypress.ChainableMethods['get']>[1]
@@ -24,6 +29,14 @@ declare global {
         testId: Parameters<Cypress.ChainableMethods['get']>[0],
         options?: Parameters<Cypress.ChainableMethods['get']>[1]
       ): Chainable<JQuery<HTMLElement>>;
+
+      getByLabel(
+        label: Parameters<Cypress.ChainableMethods['get']>[0],
+        options?: Parameters<Cypress.ChainableMethods['get']>[1]
+      ): Chainable<JQuery<HTMLElement>>;
+
+      validRoute(path: string, title?: string): void;
+      visitRoute(path: string, title?: string): void;
     }
   }
 }