From 9650683e9a08964e8a2e72d5034ba7e703be3be9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alice=20R=C3=BChl?= <alice@developmentseed.org>
Date: Thu, 21 Nov 2024 09:57:31 +0100
Subject: [PATCH] Add test for header theme mode

---
 .../common/page-header/page-header.test.tsx   | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx
index 58bc12afb..7eb459eb6 100644
--- a/app/scripts/components/common/page-header/page-header.test.tsx
+++ b/app/scripts/components/common/page-header/page-header.test.tsx
@@ -8,7 +8,6 @@ import { NavItem, NavItemType } from './types';
 import PageHeader from './index';
 
 // @NOTE: Possible Test cases
-// light vs dark mode
 // config & create dynamic nav menu list fn - different scenerios, happy vs unhappy path
 
 const mockMainNavItems: NavItem[] = [
@@ -119,3 +118,36 @@ describe('PageHeader', () => {
     expect(within(primaryNav).getByText('Submenu 1')).toBeVisible();
   });
 });
+
+describe('PageHeader light and dark mode', () => {
+  // @NOTE: We do not test css here, only attributes accessible via DOM
+  test('the header is in light mode by default', () => {
+    render(
+      <PageHeader
+        mainNavItems={mockMainNavItems}
+        subNavItems={mockSubNavItems}
+        logo={<NasaLogoColor />}
+        linkProperties={mockLinkProperties}
+        // no mode specified
+      />
+    );
+    const header = screen.getByTestId('header');
+
+    expect(header.id).toEqual('mode-light');
+  });
+
+  test('the header can be changed to dark mode using the prop', () => {
+    render(
+      <PageHeader
+        mainNavItems={mockMainNavItems}
+        subNavItems={mockSubNavItems}
+        logo={<NasaLogoColor />}
+        linkProperties={mockLinkProperties}
+        mode='dark'
+      />
+    );
+    const header = screen.getByTestId('header');
+
+    expect(header.id).toEqual('mode-dark');
+  });
+});