Merge branch 'master' into eahmadjaved/ENT-7286

src/components/IconWithTooltip/IconWithTooltip.test.jsx

@@ -3,9 +3,6 @@ import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import IconWithTooltip from './index';
-import useWindowSize from '../../hooks/useWindowSize';
-
-jest.mock('./../../hooks/useWindowSize');
 
 const defaultAltText = 'infoooo';
 const defaultTooltipText = 'Tooool';
@@ -17,7 +14,8 @@ const DEFAULT_PROPS = {
 
 describe('<IconWithTooltip />', () => {
   it('renders the icon passed to it with alt text', () => {
-    useWindowSize.mockReturnValue({ width: 800 });
+    global.innerWidth = 800;
+    global.dispatchEvent(new Event('resize'));
     const { container } = render(<IconWithTooltip {...DEFAULT_PROPS} />);
     expect(container.querySelector(`[data-icon=${faInfoCircle.iconName}]`)).toBeTruthy();
   });
@@ -26,7 +24,8 @@ describe('<IconWithTooltip />', () => {
     { windowSize: 700, expectedLocation: 'top' },
   ].forEach((data) => {
     it(`renders the tooltip on the ${data.expectedLocation} for ${data.windowSize}px screen`, () => {
-      useWindowSize.mockReturnValue({ width: data.windowSize });
+      global.innerWidth = data.windowSize;
+      global.dispatchEvent(new Event('resize'));
       const { container } = render(<IconWithTooltip {...DEFAULT_PROPS} />);
       const icon = container.querySelector(`[data-icon=${faInfoCircle.iconName}]`);
       expect(icon).toBeTruthy();

src/components/IconWithTooltip/index.jsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { OverlayTrigger, Tooltip } from '@edx/paragon';
-import useWindowSize from '../../hooks/useWindowSize';
+import { OverlayTrigger, Tooltip, useWindowSize } from '@edx/paragon';
 
 const IconWithTooltip = ({
   icon, altText, tooltipText, placementSm = 'right', placementLg = 'top', trigger = ['hover', 'focus'], breakpoint = 768, iconClassNames = 'ml-1',
 }) => {
-  const windowSize = useWindowSize();
-  const placement = windowSize.width >= breakpoint ? placementSm : placementLg;
+  const { width } = useWindowSize();
+  const placement = width >= breakpoint ? placementSm : placementLg;
   return (
     <OverlayTrigger
       trigger={trigger}
-      placement={windowSize.width >= breakpoint ? placementSm : placementLg}
+      placement={placement}
       data-testid={`tooltip-${placement}`}
       overlay={(
         <Tooltip id={`tooltip-${placement}`}>

src/components/forms/tests/ValidatedFormControl.test.tsx

@@ -28,8 +28,8 @@ const ValidatedFormControlWrapper = ({
     formFields: { [formId]: formValue },
   };
   if (formError) {
-    contextValue = 
-    { ...contextValue, 
+    contextValue = {
+      ...contextValue,
       errorMap: { [formId]: [formError] },
       showErrors: true,
     };

src/containers/Sidebar/Sidebar.test.jsx

@@ -45,6 +45,7 @@ const initialState = {
     enableCodeManagementScreen: true,
     enableSubscriptionManagementScreen: true,
     enableAnalyticsScreen: true,
+    enableReportingConfigScreenLink: true,
   },
 };
 
@@ -269,7 +270,7 @@ describe('<Sidebar />', () => {
     });
 
     render(<SidebarWrapper store={store} />);
-    const subscriptionManagementLink = screen.queryByRole('link', { name: 'Subscription Management' }, { exact: false });
+    const subscriptionManagementLink = screen.queryByRole('link', { name: 'Subscription Management' });
     expect(subscriptionManagementLink).toBeNull();
   });
 
@@ -283,8 +284,40 @@ describe('<Sidebar />', () => {
       },
     });
     render(<SidebarWrapper store={store} />);
-    const subscriptionManagementLink = screen.getByRole('link', { name: 'Subscription Management' }, { exact: false });
+    const subscriptionManagementLink = screen.getByRole('link', { name: 'Subscription Management' });
     expect(subscriptionManagementLink).toBeInTheDocument();
+    expect(subscriptionManagementLink).toHaveAttribute('href', '/test-enterprise-slug/admin/subscriptions');
+  });
+
+  it('renders correctly when enableReportingConfigScreen is false', () => {
+    const store = mockStore({
+      sidebar: {
+        ...initialState.sidebar,
+      },
+      portalConfiguration: {
+        enableReportingConfigScreen: false,
+      },
+    });
+    features.REPORTING_CONFIGURATIONS = true;
+    render(<SidebarWrapper store={store} />);
+    const enableReportingConfigScreenLink = screen.queryByRole('link', { name: 'Reporting Configurations' });
+    expect(enableReportingConfigScreenLink).toBeNull();
+  });
+
+  it('renders correctly when enableReportingConfigScreen is enabled', async () => {
+    const store = mockStore({
+      sidebar: {
+        ...initialState.sidebar,
+      },
+      portalConfiguration: {
+        enableReportingConfigScreen: true,
+      },
+    });
+    features.REPORTING_CONFIGURATIONS = true;
+    render(<SidebarWrapper store={store} enableReportingConfigScreen />);
+    const enableReportingConfigScreenLink = screen.getByRole('link', { name: 'Reporting Configurations' });
+    expect(enableReportingConfigScreenLink).toBeInTheDocument();
+    expect(enableReportingConfigScreenLink).toHaveAttribute('href', '/test-enterprise-slug/admin/reporting');
   });
 
   it('renders settings link if the settings page has visible tabs.', () => {
@@ -298,7 +331,9 @@ describe('<Sidebar />', () => {
     features.SETTINGS_PAGE = true;
 
     render(<SidebarWrapper store={store} />);
-    expect(screen.getByRole('link', { name: 'Settings' })).toBeInTheDocument();
+    const settingsLink = screen.getByRole('link', { name: 'Settings' });
+    expect(settingsLink).toBeInTheDocument();
+    expect(settingsLink).toHaveAttribute('href', '/test-enterprise-slug/admin/settings');
   });
 
   it('renders manage learner credit link if the canManageLearnerCredit = true.', () => {
@@ -310,7 +345,9 @@ describe('<Sidebar />', () => {
     });
 
     render(<SidebarWrapper store={store} />);
-    expect(screen.getByRole('link', { name: 'Learner Credit Management' })).toBeInTheDocument();
+    const enableLearnerCreditLink = screen.getByRole('link', { name: 'Learner Credit Management' });
+    expect(enableLearnerCreditLink).toBeInTheDocument();
+    expect(enableLearnerCreditLink).toHaveAttribute('href', '/test-enterprise-slug/admin/learner-credit');
   });
 
   it('hides manage learner credit link if the canManageLearnerCredit = false.', () => {

src/hooks/index.js

@@ -1,3 +1,2 @@
 export { default as useInterval } from './useInterval';
-export { default as useWindowSize } from './useWindowSize';
 export { default as useOnMount } from './useOnMount';