Fixing isAdmin check

Author: ananya-agarwal

desktop/core/src/desktop/js/apps/admin/Overview/OverviewTab.test.tsx

@@ -16,25 +16,33 @@
 
 import '@testing-library/jest-dom';
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { queryByText, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Overview from './OverviewTab';
 import Analytics from './Analytics';
-// import ApiHelper from '../../../api/apiHelper';
-// import saveCollectUsagePreference from
+import saveCollectUsagePreference from '../Overview/Analytics';
+import * as hueConfigModule from '../../../config/hueConfig';
+
+import { post } from '../../../api/utils';
 
 jest.mock('./ConfigStatus', () => () => <div>MockedConfigStatusComponent</div>);
 jest.mock('./Examples', () => () => <div>MockedExamplesComponent</div>);
 jest.mock('./Analytics', () => () => <div>MockedAnalyticsComponent</div>);
 
-jest.mock('../../../api/apiHelper', () => ({
-  ...jest.requireActual('../../../api/apiHelper'),
-  updatePreferences: jest.fn(() => Promise.resolve({ status: 0, data: 'Success message' }))
+jest.mock('../../../config/hueConfig', () => ({
+  getLastKnownConfig: jest.fn()
 }));
+
 describe('OverviewTab', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
+beforeEach(() => {
+  (hueConfigModule.getLastKnownConfig as jest.Mock).mockReturnValue({
+    hue_config: { is_admin: true }
   });
+});
+   afterEach(() => {
+     jest.clearAllMocks();
+   });
+
   test('renders the Tabs with the correct tab labels', () => {
     render(<Overview />);
     expect(screen.getByText('ConfigStatus')).toBeInTheDocument();
@@ -56,34 +64,69 @@ describe('OverviewTab', () => {
     ).toBeInTheDocument();
   });
 
-  jest.mock('../../../config/hueConfig', () => ({
-    getLastKnownConfig: () => ({ hue_config: { is_admin: false } })
-  }));
 
   test('it should not render Overview for non-admin users', () => {
-    const { queryByTestId } = render(<Overview />);
-    const overviewComponent = queryByTestId('overview-component');
+    (hueConfigModule.getLastKnownConfig as jest.Mock).mockReturnValue({
+      hue_config: { is_admin: false }
+    });
 
-    expect(overviewComponent).toBeNull();
+    const { queryByText } = render(<Overview />);
+    const trademarkText = queryByText('Hue and the Hue logo are trademarks of Cloudera, Inc.');
+    expect(trademarkText).toBeNull();
   });
 
-  //verify table contents
 
+  // jest.mock('../Overview/Analytics', () => ({
+  //   __esModule: true,
+  //   saveCollectUsagePreference: jest.fn(() => Promise.resolve({ status: 0 }))
+  // }));
+  // jest.mock('../../../api/utils', () => ({
+  //   post: jest.fn(() => Promise.resolve({ status: 0 }))
+  // }));
+
+  //   describe('Analytics Component', () => {
+  //      beforeEach(() => {
+  //        jest.clearAllMocks();
+  //      });
+  //  test('renders Analytics tab and can interact with the checkbox', async () => {
+  //     render(<Analytics />);
+  //  const checkbox = screen.getByRole('checkbox', {
+  //    name: /help improve hue with anonymous usage analytics\./i
+  //  });
+
+  //     expect(checkbox).not.toBeChecked();
+  //     await userEvent.click(checkbox);
+  //     await waitFor(() => expect(checkbox).toBeChecked());
+  //   expect(saveCollectUsagePreference).toHaveBeenCalledWith(true);
+
+  //     await userEvent.click(checkbox);
+  //     await waitFor(() => expect(checkbox).not.toBeChecked());
+  //   expect(saveCollectUsagePreference).toHaveBeenCalledWith(false);
+  //   });
+  // });
   // describe('Analytics Component', () => {
-  //   test('renders Analytics tab and can interact with the checkbox', async () => {
-  //     render(<Overview />);
-  //     const analyticsTabButton = screen.getByText('Analytics');
-  //     userEvent.click(analyticsTabButton);
+  //   beforeEach(() => {
+  //     jest.clearAllMocks();
+  //   });
 
-  //     const checkbox = await screen.findByTitle('Check to enable usage analytics');
+  //   test('renders Analytics tab and can interact with the checkbox', async () => {
+  //     render(<Analytics />);
+  //     const checkbox = screen.getByRole('checkbox', {
+  //       name: /help improve hue with anonymous usage analytics\./i
+  //     });
 
   //     expect(checkbox).not.toBeChecked();
-  //     userEvent.click(checkbox);
+  //     await userEvent.click(checkbox);
   //     await waitFor(() => expect(checkbox).toBeChecked());
-  //     expect(ApiHelper.updatePreferences).toHaveBeenCalledWith({ collect_usage: 'on' });
-  //     userEvent.click(checkbox);
+
+  //     // Now that we are mocking 'post', we assert that the post API call was made
+  //     expect(post).toHaveBeenCalledWith('/about/update_preferences', { collect_usage: 'on' });
+
+  //     await userEvent.click(checkbox);
   //     await waitFor(() => expect(checkbox).not.toBeChecked());
-  //     expect(ApiHelper.updatePreferences).toHaveBeenCalledWith({ collect_usage: null });
+
+  //     // Again we check that the 'post' was called with the new state ('null' for off)
+  //     expect(post).toHaveBeenCalledWith('/about/update_preferences', { collect_usage: null });
   //   });
   // });
 });

desktop/core/src/desktop/js/apps/admin/Overview/OverviewTab.tsx

@@ -20,18 +20,14 @@ import Examples from './Examples';
 import ConfigStatus from './ConfigStatus';
 import Analytics from './Analytics';
 import { i18nReact } from '../../../utils/i18nReact';
-// import { getLastKnownConfig } from '../../../config/hueConfig';
+import { getLastKnownConfig } from '../../../config/hueConfig';
 import './Overview.scss';
 
 const Overview = (): JSX.Element | null => {
   const { t } = i18nReact.useTranslation();
-  // const [isAdmin, setIsAdmin] = useState(false);
-
-  // useEffect(() => {
-  // const config = getLastKnownConfig();
-  // setIsAdmin(config?.hue_config.is_admin ?? false);
-  // }, []);
 
+  const config = getLastKnownConfig();
+  const isAdmin = config?.hue_config.is_admin ?? false;
   const items = [
     {
       label: t('ConfigStatus'),
@@ -50,19 +46,14 @@ const Overview = (): JSX.Element | null => {
     }
   ];
 
-  // if (!isAdmin) {
-  //     // console.log('User is not admin, rendering null.');
-  //   return null;
-  // }
-
-  return (
+  return isAdmin ? (
     <div className="hue-overview-component">
       <Tabs tabPosition="left" items={items} />
       <div className="config__trademark-text">
         Hue and the Hue logo are trademarks of Cloudera, Inc.
       </div>
     </div>
-  );
+  ) : null;
 };
 
 export default Overview;