fix:1335 creating footer test suite (#1330)

Creating initial test suite

app/scripts/components/common/layout-root/index.tsx

@@ -109,10 +109,8 @@ function LayoutRoot(props: { children?: ReactNode }) {
       {isUSWDSEnabled ? (
         <PageFooter
           settings={footerSettings}
-          primarySection={{
-            mainNavItems,
-            subNavItems
-          }}
+          mainNavItems={mainNavItems}
+          subNavItems={subNavItems}
           hideFooter={hideFooter}
           logoSvg={<NasaLogoColor />}
         />

app/scripts/components/common/page-footer/footer.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { navItems, footerSettings } from '../../../../../mock/veda.config.js';
+import NasaLogoColor from '../nasa-logo-color';
+import { NavItem } from '../page-header/types.js';
+import '@testing-library/jest-dom/extend-expect';
+
+import PageFooter from './index';
+
+const mockMainNavItems: NavItem[] = navItems.mainNavItems;
+const mockSubNavItems: NavItem[] = navItems.subNavItems;
+const mockFooterSettings = footerSettings;
+const hideFooter = false;
+
+describe('PageFooter', () => {
+  beforeEach(() => {
+    render(
+      <PageFooter
+        settings={mockFooterSettings}
+        mainNavItems={mockMainNavItems}
+        subNavItems={mockSubNavItems}
+        hideFooter={hideFooter}
+        logoSvg={<NasaLogoColor />}
+      />
+    );
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  test('renders the PageFooter', () => {
+    const footerElement = document.querySelector('footer');
+
+    expect(footerElement).toBeInTheDocument();
+    expect(footerElement).not.toHaveClass('display-none');
+
+  });
+  test('renders correct buttons and links', () => {
+    expect(screen.getByText('Data Catalog')).toBeInTheDocument();
+    expect(screen.getByText('Exploration')).toBeInTheDocument();
+    expect(screen.getByText('Stories')).toBeInTheDocument();
+
+    expect(screen.getByText('About')).toBeInTheDocument();
+    expect(screen.getByText('Return to top')).toBeInTheDocument();
+  });
+});
+
+describe('PageFooter dynamic functionality', () => {
+  test('Return to top does not show', () => {
+    const updatedMockSettings = { ...mockFooterSettings, returnToTop: false };
+
+    render(
+      <PageFooter
+        settings={updatedMockSettings}
+        mainNavItems={mockMainNavItems}
+        subNavItems={mockSubNavItems}
+        hideFooter={hideFooter}
+        logoSvg={<NasaLogoColor />}
+      />
+    );
+    expect(() => screen.getByText('Return to top')).toThrow();
+  });
+  test('Hide footer should function correctly', () => {
+    const updatedMockSettings = { ...mockFooterSettings, returnToTop: false };
+
+    render(
+      <PageFooter
+        settings={updatedMockSettings}
+        mainNavItems={mockMainNavItems}
+        subNavItems={mockSubNavItems}
+        hideFooter={true}
+        logoSvg={<NasaLogoColor />}
+      />
+    );
+    const footerElement = document.querySelector('footer');
+    expect(footerElement).toHaveClass('display-none');
+  });
+});

app/scripts/components/common/page-footer/index.tsx

@@ -1,26 +1,29 @@
 import React, { useMemo } from 'react';
 import { Icon } from '@trussworks/react-uswds';
-import { NavItemType } from '../page-header/types';
+import { DropdownNavLink, FooterSettings, NavLinkItem } from 'veda';
+import { ActionNavItem, NavItemType } from '../page-header/types';
 import { NavItemCTA } from '../page-header/nav/nav-item-cta';
 import {
   USWDSFooter,
   USWDSFooterNav,
   USWDSAddress
 } from '$components/common/uswds';
-
 import './styles.scss';
 
 interface PageFooterProps {
-  primarySection: any;
-  settings: any;
+  //use of NavItem is causing issues with TS and throwing erros in the .
+  mainNavItems: (NavLinkItem | DropdownNavLink | ActionNavItem)[];
+  subNavItems: (NavLinkItem | DropdownNavLink | ActionNavItem)[];
+  settings: FooterSettings;
   hideFooter?: boolean;
   logoSvg?: SVGElement | JSX.Element;
 }
 //TODO: clean up PageFooterProps, Unexpected any. Specify a different interface.
 
 export default function PageFooter({
   settings,
-  primarySection,
+  mainNavItems,
+  subNavItems,
   hideFooter,
   logoSvg
 }: PageFooterProps) {
@@ -39,7 +42,6 @@ export default function PageFooter({
 
   const { returnToTop, secondarySection } = settings;
   /* eslint-disable */
-  const { mainNavItems, subNavItems } = primarySection;
 
   const createNavElement = (navItems, linkClasses) => {
     //removing 'dropdown' items from array

app/scripts/components/common/page-header/default-config.ts

@@ -71,6 +71,7 @@ let defaultSubNavItems: (
 
 const defaultFooterSettings = {
   secondarySection: {
+    id: 'email test',
     title: 'email test',
     to: '/data-catalog',
     type: 'Email'

jest.setup.js

@@ -6,6 +6,8 @@ jest.mock('veda', () => ({
     one: variable,
     other: variable
   }),
-  getNavItemsFromVedaConfig: () => []
+  getNavItemsFromVedaConfig: () => [],
+  getFooterSettingsFromVedaConfig: () => []
 }));
+
 export default undefined;

mock/veda.config.js

@@ -56,7 +56,7 @@ let footerSettings = {
     id: 'stories',
     title: 'email test',
     to: '/data-catalog',
-    type: 'Email'
+    type: 'email'
   },
   returnToTop: true
 };

parcel-resolver-veda/index.d.ts

@@ -292,14 +292,14 @@ declare module 'veda' {
     type: 'externalLink';
   }
   type NavLinkItem = ExternalNavLink | InternalNavLink;
-
-  interface FooterSettings {
-    secondarySection: {
-      id: string;
-      title: string;
-      href: string;
-      type: 'Email';
-    };
+  export interface SecondarySection {
+    id: string;
+    title: string;
+    to: string;
+    type: string;
+  }
+  export interface FooterSettings {
+    secondarySection: SecondarySection;
     returnToTop: boolean;
   }
 
@@ -365,9 +365,7 @@ declare module 'veda' {
     | undefined;
 
   export const getFooterSettingsFromVedaConfig: () =>
-    | {
-        footerSettings: FooterSettings;
-      }
+    | FooterSettings
     | undefined;
 
   /**