PMM-13386 Fix Available update & run unit tests for panels

jest.percona.config.js

@@ -0,0 +1,12 @@
+const grafanaConfig = require('./jest.config');
+
+module.exports = {
+  ...grafanaConfig,
+  roots: [
+    '<rootDir>/public/app/percona',
+    '<rootDir>/public/app/plugins/datasource/pmm-pt-summary-datasource',
+    '<rootDir>/public/app/plugins/panel/pmm-check',
+    '<rootDir>/public/app/plugins/panel/pmm-pt-summary-panel',
+    '<rootDir>/public/app/plugins/panel/pmm-update',
+  ],
+};

package.json

@@ -32,7 +32,7 @@
     "lint:fix": "yarn lint:ts --fix",
     "jest": "jest --notify --watch",
     "jest-ci": "mkdir -p reports/junit && export JEST_JUNIT_OUTPUT_DIR=reports/junit && jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%}",
-    "jest-percona-ci": "mkdir -p reports/junit && JEST_JUNIT_OUTPUT_DIR=reports/junit jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%} --roots public/app/percona",
+    "jest-percona-ci": "mkdir -p reports/junit && JEST_JUNIT_OUTPUT_DIR=reports/junit jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%} --config jest.percona.config.js",
     "packages:build": "nx run-many -t build --projects='@grafana/*'",
     "packages:clean": "rimraf ./npm-artifacts && lerna run clean --parallel",
     "packages:prepare": "lerna version --no-push --no-git-tag-version --force-publish --exact",

public/app/plugins/panel/pmm-check/components/Failed/Failed.test.tsx

@@ -2,15 +2,21 @@ import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Provider } from 'react-redux';
 
+import { config } from '@grafana/runtime';
 import { CheckService } from 'app/percona/check/Check.service';
 import { configureStore } from 'app/store/configureStore';
-import { StoreState } from 'app/types';
+import { OrgRole, StoreState } from 'app/types';
 
 import { Failed } from './Failed';
 
 jest.mock('app/percona/check/Check.service');
 
 describe('Failed::', () => {
+  beforeEach(() => {
+    config.bootData.user.isGrafanaAdmin = true;
+    config.bootData.user.orgRole = OrgRole.Admin;
+  });
+
   it('should render a sum of total failed checks with severity details', async () => {
     jest.spyOn(CheckService, 'getAllFailedChecks').mockImplementationOnce(async () => [
       {
@@ -56,6 +62,8 @@ describe('Failed::', () => {
       </Provider>
     );
 
+    await waitFor(() => expect(CheckService.getAllFailedChecks).toHaveBeenCalled());
+
     await waitFor(() => expect(screen.getByTestId('db-check-panel-critical').textContent).toEqual('3'));
     await waitFor(() => expect(screen.getByTestId('db-check-panel-error').textContent).toEqual('0'));
     await waitFor(() => expect(screen.getByTestId('db-check-panel-warning').textContent).toEqual('2'));

public/app/plugins/panel/pmm-update/components/AvailableUpdate/AvailableUpdate.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 
 import { Icon, LinkButton, Tooltip, useStyles2 } from '@grafana/ui';
 
+import { formatDateWithYear } from '../../UpdatePanel.utils';
 import { useToggleOnAltClick } from '../../hooks';
 
 import { Messages } from './AvailableUpdate.messages';
@@ -26,7 +27,7 @@ export const AvailableUpdate: FC<AvailableUpdateProps> = ({ nextVersion, newsLin
           {showFullVersion ? nextVersion?.tag : nextVersion?.version}
         </span>
         <span data-testid="update-latest-release-date" className={styles.releaseDate}>
-          ({nextVersion?.timestamp})
+          {!!nextVersion?.timestamp && `(${formatDateWithYear(nextVersion?.timestamp)})`}
           <Tooltip content={Messages.tooltip} data-testid="update-published-date-info">
             <Icon name="info-circle" className={styles.infoIcon} />
           </Tooltip>

public/app/plugins/panel/pmm-update/components/InfoBox/InfoBox.test.tsx

@@ -1,38 +1,59 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 
 import { InfoBox } from './InfoBox';
 import { Messages } from './InfoBox.messages';
 
 describe('InfoBox::', () => {
   it('should show that there are no updates by default', () => {
-    render(<InfoBox />);
+    render(
+      <MemoryRouter>
+        <InfoBox />
+      </MemoryRouter>
+    );
 
     expect(screen.getByText(Messages.noUpdates)).toBeInTheDocument();
     expect(screen.getByText(Messages.updatesNotice)).toBeInTheDocument();
   });
 
   it('should show a different message if upToDate is true', () => {
-    render(<InfoBox upToDate />);
+    render(
+      <MemoryRouter>
+        <InfoBox upToDate />
+      </MemoryRouter>
+    );
 
     expect(screen.getByText(Messages.upToDate)).toBeInTheDocument();
   });
 
   it('should show an insufficient access message', () => {
-    render(<InfoBox hasNoAccess />);
+    render(
+      <MemoryRouter>
+        <InfoBox hasNoAccess />
+      </MemoryRouter>
+    );
 
     expect(screen.getByText(Messages.noAccess)).toBeInTheDocument();
   });
 
   it('should show updates disabled messages', () => {
-    render(<InfoBox updatesDisabled />);
+    render(
+      <MemoryRouter>
+        <InfoBox updatesDisabled />
+      </MemoryRouter>
+    );
     expect(screen.getByTestId('updates-disabled').textContent).toBe(
       `${Messages.updatesDisabled}${Messages.pmmSettings}`
     );
   });
 
   it('should show not online messages', () => {
-    render(<InfoBox isOnline={false} />);
+    render(
+      <MemoryRouter>
+        <InfoBox isOnline={false} />
+      </MemoryRouter>
+    );
 
     expect(screen.getByText(Messages.notOnline)).toBeInTheDocument();
   });