From a928a6fa79e3c338e1a63b475d40bc8c2cfdade4 Mon Sep 17 00:00:00 2001
From: Mehak Nasir <mehaknasir94@gmail.com>
Date: Thu, 13 Jan 2022 21:09:24 +0500
Subject: [PATCH] test: fixed mobile header tests according to new UI

---
 src/studio-header/Header.jsx       | 110 +++++------------------------
 src/studio-header/Header.test.jsx  |   5 +-
 src/studio-header/MobileHeader.jsx |   2 +-
 3 files changed, 20 insertions(+), 97 deletions(-)

diff --git a/src/studio-header/Header.jsx b/src/studio-header/Header.jsx
index 9a4dd08a2..4c5d4ddbd 100644
--- a/src/studio-header/Header.jsx
+++ b/src/studio-header/Header.jsx
@@ -35,53 +35,22 @@ function Header({
       submenuContent: (
         <>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/course/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.outline'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/course/${courseId}`}>{intl.formatMessage(messages['header.links.outline'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/course_info/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.updates'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/course_info/${courseId}`}>{intl.formatMessage(messages['header.links.updates'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/tabs/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.pages'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/tabs/${courseId}`}>{intl.formatMessage(messages['header.links.pages'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/assets/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.filesAndUploads'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/assets/${courseId}`}>{intl.formatMessage(messages['header.links.filesAndUploads'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/textbooks/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.textbooks'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/textbooks/${courseId}`}>{intl.formatMessage(messages['header.links.textbooks'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/videos/${courseId}`}
-            >{
-              intl.formatMessage(messages['header.links.videoUploads'])
-            }
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/videos/${courseId}`}>{intl.formatMessage(messages['header.links.videoUploads'])}</a>
           </div>
         </>
       ),
@@ -92,52 +61,22 @@ function Header({
       submenuContent: (
         <>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/settings/details/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.scheduleAndDetails'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/details/${courseId}`}>{intl.formatMessage(messages['header.links.scheduleAndDetails'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/settings/grading/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.grading'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/grading/${courseId}`}>{intl.formatMessage(messages['header.links.grading'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/course_team/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.courseTeam'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/course_team/${courseId}`}>{intl.formatMessage(messages['header.links.courseTeam'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/group_configurations/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.groupConfigurations'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/group_configurations/${courseId}`}>{intl.formatMessage(messages['header.links.groupConfigurations'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/settings/advanced/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.advancedSettings'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/advanced/${courseId}`}>{intl.formatMessage(messages['header.links.advancedSettings'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/certificates/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.certificates'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/certificates/${courseId}`}>{intl.formatMessage(messages['header.links.certificates'])}</a>
           </div>
         </>
       ),
@@ -148,28 +87,13 @@ function Header({
       submenuContent: (
         <>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/import/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.import'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/import/${courseId}`}>{intl.formatMessage(messages['header.links.import'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/export/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.export'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/export/${courseId}`}>{intl.formatMessage(messages['header.links.export'])}</a>
           </div>
           <div className="mb-1 small">
-            <a
-              rel="noopener"
-              href={`${config.STUDIO_BASE_URL}/checklists/${courseId}`}
-            >
-              {intl.formatMessage(messages['header.links.checklists'])}
-            </a>
+            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/checklists/${courseId}`}>{intl.formatMessage(messages['header.links.checklists'])}</a>
           </div>
         </>
       ),
@@ -219,8 +143,8 @@ function Header({
       )}
     >
       <a
-        className="course-title-lockup"
-        style={{ lineHeight: 1, width: '25%' }}
+        className="course-title-lockup w-25"
+        style={{ lineHeight: 1 }}
         href={`${config.STUDIO_BASE_URL}/course/${courseId}`}
         aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
       >
diff --git a/src/studio-header/Header.test.jsx b/src/studio-header/Header.test.jsx
index 6263fb531..73a09165c 100644
--- a/src/studio-header/Header.test.jsx
+++ b/src/studio-header/Header.test.jsx
@@ -64,8 +64,7 @@ describe('<Header />', () => {
     ));
 
     render(component);
-    expect(screen.getAllByTestId('course-org-number')[0].textContent).toEqual(expect.stringContaining('edX DemoX'));
-    expect(screen.getAllByTestId('course-title')[0].textContent).toEqual(expect.stringContaining('Demonstration Course'));
+    expect(screen.getByTestId('edx-header-logo'));
   });
 
   it('renders desktop header correctly with bad API call', async () => {
@@ -93,7 +92,7 @@ describe('<Header />', () => {
     ));
 
     render(component);
-    expect(screen.getAllByTestId('course-title')[0].textContent).toEqual(expect.stringContaining('course-v1:edX+DemoX+Demo_Course'));
+    expect(screen.getByTestId('edx-header-logo'));
   });
 
   afterEach(() => {
diff --git a/src/studio-header/MobileHeader.jsx b/src/studio-header/MobileHeader.jsx
index 228bb0d6d..e3f75baaf 100644
--- a/src/studio-header/MobileHeader.jsx
+++ b/src/studio-header/MobileHeader.jsx
@@ -107,7 +107,7 @@ class MobileHeader extends React.Component {
             ) : null}
         </div>
         <div className="d-flex align-items-center mobile-lockup">
-          {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
+          {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" data-testid="edx-header-logo" />}
         </div>
         <div className="w-100 d-flex justify-content-end align-items-center">
           <Menu tag="nav" aria-label="Secondary" className="position-static">