Coverage of default/shared

Author: RoyEJohnson

src/app/layouts/default/shared.tsx

@@ -15,7 +15,7 @@ type BannerInfo = {
 type StickyDataRaw = {
     start: string;
     expires: string;
-    emergency_expires?: string;
+    emergency_expires: string;
     show_popup: boolean;
 };
 
@@ -62,7 +62,7 @@ function getMode(stickyData: StickyDataRaw | null): 'emergency' | 'popup' | 'ban
         return null;
     }
 
-    const expireDate = new Date(stickyData.emergency_expires ?? '');
+    const expireDate = new Date(stickyData.emergency_expires);
     const useEmergency = stickyData.emergency_expires && Date.now() < expireDate.getTime();
 
     if (useEmergency) {

test/src/layouts/default/data/givebanner.json

@@ -0,0 +1 @@
+[{"html_message":"Millions of students are counting on OpenStax this fall. Want to help? Give monthly and open up learning they can trust — today, tomorrow, every semester.","link_text":"Give now!","link_url":"https://riceconnect.rice.edu/donation/support-openstax-banner","banner_thumbnail":"https://assets.openstax.org/oscms-prodcms/media/original_images/Blue_White_Cute_Simple_Doodle_iOS_Icon.png"}]

test/src/layouts/default/default.test.tsx

@@ -9,6 +9,8 @@ import fundraiserData from './data/fundraiser.json';
 import footerData from './data/footer.json';
 import oxmenuData from './data/osmenu.json';
 import giveTodayData from './data/give-today.json';
+import giveBannerData from './data/givebanner.json';
+import * as CF from '~/helpers/cms-fetch';
 import '@testing-library/jest-dom';
 
 // Mock external dependencies
@@ -33,10 +35,6 @@ let mockPathname = {pathname: '/test-path'};
 jest.mock('react-router-dom', () => ({
     useLocation: () => mockPathname
 }));
-// jest.mock('~/layouts/default/microsurvey-popup/microsurvey-popup', () => ({
-//     __esModule: true,
-//     default: () => <></>
-// }));
 
 const mockUseSharedDataContext = jest.fn().mockReturnValue({stickyFooterState: [false, () => undefined]});
 
@@ -62,6 +60,22 @@ Reflect.defineProperty(window, 'localStorage', {
 });
 
 const user = userEvent.setup();
+const basicImplementation = (path: string) => {
+    if (path === 'sticky/') {
+        return Promise.resolve({
+            ...stickyData
+        });
+    }
+    if (path === 'snippets/givebanner') {
+        return Promise.resolve(giveBannerData);
+    }
+    if (path === 'give-today') {
+        return Promise.resolve(giveTodayData);
+    }
+    console.info('**** Whoops', path);
+    return Promise.resolve([]);
+};
+const mockCmsFetch = jest.spyOn(CF, 'default').mockImplementation(basicImplementation);
 
 describe('Layouts Default TypeScript Conversions', () => {
     beforeEach(() => {
@@ -126,6 +140,88 @@ describe('Layouts Default TypeScript Conversions', () => {
             render(<TestComponent />);
             expect(screen.getByTestId('sticky-data')).toHaveTextContent('no data');
         });
+        test('useStickyData hook handles emergency mode', async () => {
+            mockCmsFetch.mockImplementation(
+                (path: string) => {
+                    if (path === 'sticky/') {
+                        /* eslint-disable camelcase */
+                        return Promise.resolve({
+                            ...stickyData,
+                            emergency_expires: '2044-05-31T23:00:00Z'
+                        });
+                        /* eslint-enable camelcase */
+                    }
+                    return basicImplementation(path);
+                }
+            );
+            const TestComponent = () => {
+                const data = useStickyData();
+
+                return (
+                    <div data-testid="sticky-data">
+                        {data ? data.mode : 'no data'}
+                    </div>
+                );
+            };
+
+            render(<TestComponent />);
+            expect(await screen.findByTestId('sticky-data')).toHaveTextContent('emergency');
+            mockCmsFetch.mockImplementation(basicImplementation);
+        });
+        test('useStickyData hook handles microdonation not active', async () => {
+            mockCmsFetch.mockImplementation(
+                (path: string) => {
+                    if (path === 'sticky/') {
+                        return Promise.resolve({
+                            ...stickyData,
+                            expires: '2024-05-31T23:00:00Z'
+                        });
+                    }
+                    return basicImplementation(path);
+                }
+            );
+            const TestComponent = () => {
+                const data = useStickyData();
+
+                return (
+                    <div data-testid="sticky-data">
+                        {data && data.mode === null ? 'mode is null' : 'no data'}
+                    </div>
+                );
+            };
+
+            render(<TestComponent />);
+            expect(await screen.findByTestId('sticky-data')).toHaveTextContent('mode is null');
+            mockCmsFetch.mockImplementation(basicImplementation);
+        });
+        test('useStickyData hook handles show_popup', async () => {
+            mockCmsFetch.mockImplementation(
+                (path: string) => {
+                    if (path === 'sticky/') {
+                        /* eslint-disable camelcase */
+                        return Promise.resolve({
+                            ...stickyData,
+                            show_popup: true
+                        });
+                        /* eslint-enable camelcase */
+                    }
+                    return basicImplementation(path);
+                }
+            );
+            const TestComponent = () => {
+                const data = useStickyData();
+
+                return (
+                    <div data-testid="sticky-data">
+                        {data && data.mode === 'popup' ? 'mode is popup' : 'no data'}
+                    </div>
+                );
+            };
+
+            render(<TestComponent />);
+            expect(await screen.findByTestId('sticky-data')).toHaveTextContent('mode is popup');
+            mockCmsFetch.mockImplementation(basicImplementation);
+        });
     });
 
 //     describe('MenuItem component TypeScript props', () => {
@@ -321,55 +417,3 @@ describe('default layout', () => {
         expect(toggle.getAttribute('aria-expanded')).toBe('false');
     });
 });
-
-// Integration tests for complex TypeScript interactions
-// describe('TypeScript Integration Tests', () => {
-//     test('Complex type interactions work correctly', async () => {
-//         // Test that complex types work together without compilation errors
-//         type ComplexData = {
-//             id: number;
-//             metadata: {
-//                 created: string;
-//                 modified?: string;
-//             };
-//             items: Array<{
-//                 name: string;
-//                 value: number;
-//             }>;
-//         };
-
-//         const testData: ComplexData = {
-//             id: 1,
-//             metadata: {
-//                 created: '2024-01-01'
-//             },
-//             items: [
-//                 {name: 'item1', value: 100},
-//                 {name: 'item2', value: 200}
-//             ]
-//         };
-
-//         expect(testData.id).toBe(1);
-//         expect(testData.items).toHaveLength(2);
-//         expect(testData.metadata.modified).toBeUndefined();
-//     });
-
-//     test('Event handler types are properly defined', () => {
-//         type EventHandlerProps = {
-//             onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-//             onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-//         };
-
-//         const TestComponent = ({onClick, onKeyDown}: EventHandlerProps) => (
-//             <button onClick={onClick} onKeyDown={onKeyDown}>
-//                 Test Button
-//             </button>
-//         );
-
-//         const mockClick = jest.fn();
-//         const mockKeyDown = jest.fn();
-
-//         render(<TestComponent onClick={mockClick} onKeyDown={mockKeyDown} />);
-//         expect(screen.getByRole('button')).toBeInTheDocument();
-//     });
-// });