refactor: fixed snapshot and store structure in header test file

src/Header.test.jsx

@@ -2,24 +2,38 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
-import { AppContext } from '@edx/frontend-platform/react';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import { Context as ResponsiveContext } from 'react-responsive';
+import { initializeMockApp } from '@edx/frontend-platform';
+import store from './store';
 
 import Header from './index';
 
 const HeaderComponent = ({ width, contextValue }) => (
   <ResponsiveContext.Provider value={width}>
     <IntlProvider locale="en" messages={{}}>
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <Header />
-      </AppContext.Provider>
+      <AppProvider store={store}>
+        <AppContext.Provider
+          value={contextValue}
+        >
+          <Header />
+        </AppContext.Provider>
+      </AppProvider>
     </IntlProvider>
   </ResponsiveContext.Provider>
 );
 
 describe('<Header />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: '123abc',
+        username: 'testuser',
+        administrator: false,
+        roles: [],
+      },
+    });
+  });
   it('renders correctly for anonymous desktop', () => {
     const contextValue = {
       authenticatedUser: null,

src/Notifications/NotificationRowItem.jsx

@@ -16,7 +16,7 @@ const NotificationRowItem = ({ notification }) => {
   timeago.register('time-locale', timeLocale);
   const { authenticatedUser } = useContext(AppContext);
 
-  const handleIconByType = (type) => {
+  const getIconByType = (type) => {
     switch (type) {
       case 'post': return PostOutline;
       case 'help': return HelpOutline;
@@ -34,7 +34,7 @@ const NotificationRowItem = ({ notification }) => {
   };
 
   const getContentMessageByType = useCallback(() => {
-    const typeMap = {
+    const contentMessage = {
       post: messages.notificationPostedContent,
       help: messages.notificationHelpedContent,
       respond: authenticatedUser.username !== notification.author
@@ -49,14 +49,14 @@ const NotificationRowItem = ({ notification }) => {
       commentLiked: messages.notificationCommentLikedLabel,
       edited: messages.notificationEditedLabel,
     };
-    return typeMap[notification.type] ? intl.formatMessage(typeMap[notification.type]) : null;
+    return contentMessage[notification.type] ? intl.formatMessage(contentMessage[notification.type]) : null;
   }, [authenticatedUser, notification, intl]);
 
   return (
     <div className="d-flex notification-item mb-2 notification-item">
       <div className="mr-2 icon-container">
         <Icon
-          src={handleIconByType(notification.type)}
+          src={getIconByType(notification.type)}
           style={{ height: '28px', width: '28px' }}
         />
       </div>

src/Notifications/NotificationTabs.jsx

@@ -16,7 +16,7 @@ const NotificationTabs = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(fetchNotificationList({ notificationType: activeTab || 'reminders', notificationCount: loadMoreCount }));
+    dispatch(fetchNotificationList({ notificationType: activeTab, notificationCount: loadMoreCount }));
   }, [dispatch, activeTab, loadMoreCount]);
 
   const handleActiveTab = useCallback((tab) => {
@@ -42,7 +42,7 @@ const NotificationTabs = () => {
     activeTab && (
     <Tabs
       defaultActiveKey={activeTab}
-      id="uncontrolled-tab-example"
+      id="notification-tab"
       className="notification-tabs"
       onSelect={handleActiveTab}
     >

src/__snapshots__/Header.test.jsx.snap

@@ -237,6 +237,43 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
         aria-label="Secondary"
         className="nav secondary-menu-container align-items-center ml-auto"
       >
+        <div
+          className="d-flex mx-4 my-3 bell-container"
+        >
+          <div
+            className="bell-icon-container"
+          >
+            <button
+              className="btn-icon btn-icon-primary btn-icon-md d-inline-block align-bottom ml-1 bell-icon"
+              onClick={[Function]}
+              type="button"
+            >
+              <span
+                className="btn-icon__icon-container"
+              >
+                <span
+                  className="pgn__icon btn-icon__icon"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V2.5h-3v2.18C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
         <div
           className="menu null"
           onKeyDown={[Function]}