Merge pull request #81 from SamuelHe2024/WEB-38

chore: create tests for Navbar and Button to increase coverage (WEB-38)

src/app/components/button/__snapshots__/button.test.js.snap

@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders correctly with non-primary variant 1`] = `
+<DocumentFragment>
+  <button
+    class="button "
+    data-testid="button-secondary"
+  >
+    Secondary Button
+  </button>
+</DocumentFragment>
+`;
+
 exports[`renders correctly with primary variant 1`] = `
 <DocumentFragment>
   <button

src/app/components/button/button.test.js

@@ -27,6 +27,13 @@ test('renders correctly with primary variant', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
+test('renders correctly with non-primary variant', () => {
+  const { asFragment } = render(
+    <Button buttonText='Secondary Button' variant='secondary' />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
 test('shows icon when showIcon is true', () => {
   render(<Button buttonText='Button with Icon' showIcon />);
   const iconElement = screen.getByTestId('button-icon');

src/app/components/navbar/navbar.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 import Navbar from './navbar';
 
 describe('Navbar', () => {
@@ -35,4 +35,21 @@ describe('Navbar', () => {
     expect(navbarElement).toHaveTextContent('Contact Us');
     expect(navbarElement).toHaveTextContent('Meetups');
   });
+
+  test('navbar toggles when expand/collapse button is pressed', () => {
+    const component = render(
+      <Navbar
+        label={{
+          lblHome: 'Dallas Software Developers',
+          lblCommunity: 'Community Impact',
+          lblContact: 'Contact Us',
+          lblMeetup: 'Meetups',
+        }}
+      />
+    );
+    expect(component.getByTestId('navbar-expand')).toBeInTheDocument();
+    fireEvent.click(component.getByTestId('navbar-expand'));
+    expect(component.getByTestId('navbar-collapse')).toBeInTheDocument();
+    fireEvent.click(component.getByTestId('navbar-collapse'));
+  });
 });

src/app/components/navbar/navbar.tsx

@@ -38,13 +38,21 @@ export default function Navbar({ label }: NavbarProps) {
         </div>
         {isNavVisible ? (
           <div className={styles.crossContainer}>
-            <div onClick={toggleNav} className={styles.cross}>
+            <div
+              onClick={toggleNav}
+              className={styles.cross}
+              data-testid='navbar-collapse'
+            >
               <div className={styles.line}></div>
               <div className={styles.line}></div>
             </div>
           </div>
         ) : (
-          <div className={styles.hamburger} onClick={toggleNav}>
+          <div
+            className={styles.hamburger}
+            onClick={toggleNav}
+            data-testid='navbar-expand'
+          >
             <div className={styles.line}></div>
             <div className={styles.line}></div>
             <div className={styles.line}></div>