Add HomeHealthSummary storybook (#1529)

* Add HomeHealthSummary storybook * Adapt HomeHealthSummary tests * Get back resultEnum as it does not have unknown value * Add unclustered story * Move render to default export * Add empty story
trento-project · Jun 20, 2023 · ed5bd0c · ed5bd0c
1 parent 4d93d9f
commit ed5bd0c
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 48 deletions.
diff --git a/assets/js/components/HealthSummary/HomeHealthSummary.jsx b/assets/js/components/HealthSummary/HomeHealthSummary.jsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import Table from '@components/Table';
 import HealthIcon from '@components/Health/HealthIcon';
 import { Link } from 'react-router-dom';
-import { useSelector } from 'react-redux';
 import PageHeader from '@components/PageHeader';
 import HealthSummary from '@components/HealthSummary';
 import useQueryStringValues from '@hooks/useQueryStringValues';
@@ -78,11 +77,7 @@ const healthSummaryTableConfig = {
   ],
 };
 
-export function HomeHealthSummary() {
-  const { loading, sapSystemsHealth } = useSelector(
-    (state) => state.sapSystemsHealthSummary
-  );
-
+function HomeHealthSummary({ sapSystemsHealth, loading }) {
   const {
     extractedParams: { health: healthFilters = [] },
     setQueryValues,
@@ -146,3 +141,5 @@ export function HomeHealthSummary() {
     </div>
   );
 }
+
+export default HomeHealthSummary;
diff --git a/assets/js/components/HealthSummary/HomeHealthSummary.stories.jsx b/assets/js/components/HealthSummary/HomeHealthSummary.stories.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { healthSummaryFactory } from '@lib/test-utils/factories';
+
+import HomeHealthSummary from './HomeHealthSummary';
+
+const randomSummary = healthSummaryFactory.buildList(3);
+const healthySummary = healthSummaryFactory.buildList(3, {
+  clustersHealth: 'passing',
+  databaseHealth: 'passing',
+  hostsHealth: 'passing',
+  sapsystemHealth: 'passing',
+});
+const unClusteredSummary = healthSummaryFactory.buildList(3, {
+  clusterId: null,
+  clustersHealth: 'unknown',
+  databaseHealth: 'passing',
+  hostsHealth: 'passing',
+  sapsystemHealth: 'passing',
+});
+
+function ContainerWrapper({ children }) {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">{children}</div>
+  );
+}
+
+export default {
+  title: 'HomeHealthSummary',
+  components: HomeHealthSummary,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  render: (args) => (
+    <ContainerWrapper>
+      <HomeHealthSummary {...args} />
+    </ContainerWrapper>
+  ),
+};
+
+export const Random = {
+  args: {
+    sapSystemsHealth: randomSummary,
+    loading: false,
+  },
+};
+
+export const Empty = {
+  args: {
+    ...Random.args,
+    sapSystemsHealth: [],
+  },
+};
+
+export const Healthy = {
+  args: {
+    ...Random.args,
+    sapSystemsHealth: healthySummary,
+  },
+};
+
+export const UnClustered = {
+  args: {
+    ...Random.args,
+    sapSystemsHealth: unClusteredSummary,
+  },
+};
diff --git a/assets/js/components/HealthSummary/HomeHealthSummary.test.jsx b/assets/js/components/HealthSummary/HomeHealthSummary.test.jsx
@@ -3,12 +3,12 @@ import { screen, fireEvent } from '@testing-library/react';
 import 'intersection-observer';
 import '@testing-library/jest-dom';
 
-import { renderWithRouter, withState } from '@lib/test-utils';
+import { renderWithRouter } from '@lib/test-utils';
 import { healthSummaryFactory } from '@lib/test-utils/factories';
 
-import { HomeHealthSummary } from './HomeHealthSummary';
+import HomeHealthSummary from './HomeHealthSummary';
 
-const homeHealthSummaryActionPayload = [
+const homeHealthSummaryData = [
   healthSummaryFactory.build({
     clustersHealth: 'passing',
     databaseHealth: 'passing',
@@ -38,21 +38,15 @@ const homeHealthSummaryActionPayload = [
   }),
 ];
 
-const initialState = {
-  sapSystemsHealthSummary: {
-    sapSystemsHealth: homeHealthSummaryActionPayload,
-    loading: false,
-  },
-};
-
 describe('HomeHealthSummary component', () => {
   it('should have a clickable SAP INSTANCE icon with link to the belonging instance', () => {
-    const [StatefulHomeHealthSummary] = withState(
-      <HomeHealthSummary />,
-      initialState
+    const { container } = renderWithRouter(
+      <HomeHealthSummary
+        sapSystemsHealth={homeHealthSummaryData}
+        loading={false}
+      />
     );
-    const { container } = renderWithRouter(StatefulHomeHealthSummary);
-    const [{ id }] = homeHealthSummaryActionPayload;
+    const [{ id }] = homeHealthSummaryData;
 
     expect(
       container
@@ -62,12 +56,13 @@ describe('HomeHealthSummary component', () => {
   });
 
   it('should have a clickable PACEMAKER CLUSTER icon with link to the belonging cluster when available', () => {
-    const [StatefulHomeHealthSummary] = withState(
-      <HomeHealthSummary />,
-      initialState
+    const { container } = renderWithRouter(
+      <HomeHealthSummary
+        sapSystemsHealth={homeHealthSummaryData}
+        loading={false}
+      />
     );
-    const { container } = renderWithRouter(StatefulHomeHealthSummary);
-    const [{ clusterId }] = homeHealthSummaryActionPayload;
+    const [{ clusterId }] = homeHealthSummaryData;
 
     expect(
       container
@@ -89,11 +84,12 @@ describe('HomeHealthSummary component', () => {
 
 describe('HomeHealthSummary component', () => {
   it('should have a working link to the passing checks in the overview component', () => {
-    const [StatefulHomeHealthSummary] = withState(
-      <HomeHealthSummary />,
-      initialState
+    const { container } = renderWithRouter(
+      <HomeHealthSummary
+        sapSystemsHealth={homeHealthSummaryData}
+        loading={false}
+      />
     );
-    const { container } = renderWithRouter(StatefulHomeHealthSummary);
 
     expect(
       container
@@ -104,11 +100,12 @@ describe('HomeHealthSummary component', () => {
 
   describe('health box filter behaviour', () => {
     it('should put the filters values in the query string when health filters are selected', async () => {
-      const [StatefulHomeHealthSummary] = withState(
-        <HomeHealthSummary />,
-        initialState
+      const { container } = renderWithRouter(
+        <HomeHealthSummary
+          sapSystemsHealth={homeHealthSummaryData}
+          loading={false}
+        />
       );
-      const { container } = renderWithRouter(StatefulHomeHealthSummary);
 
       expect(container.querySelector('tbody').childNodes.length).toEqual(4);
 

diff --git a/assets/js/components/HealthSummary/HomeHealthSummaryPage.jsx b/assets/js/components/HealthSummary/HomeHealthSummaryPage.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import HomeHealthSummary from './HomeHealthSummary';
+
+export function HomeHealthSummaryPage() {
+  const { loading, sapSystemsHealth } = useSelector(
+    (state) => state.sapSystemsHealthSummary
+  );
+
+  return (
+    <HomeHealthSummary sapSystemsHealth={sapSystemsHealth} loading={loading} />
+  );
+}
diff --git a/assets/js/components/HealthSummary/index.js b/assets/js/components/HealthSummary/index.js
@@ -1,5 +1,5 @@
 import HealthSummary from './HealthSummary';
 
-export { HomeHealthSummary } from './HomeHealthSummary';
+export { HomeHealthSummaryPage } from './HomeHealthSummaryPage';
 
 export default HealthSummary;
diff --git a/assets/js/components/Home/Home.jsx b/assets/js/components/Home/Home.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { HomeHealthSummary } from '@components/HealthSummary';
+import { HomeHealthSummaryPage } from '@components/HealthSummary';
 
 function Home() {
-  return <HomeHealthSummary />;
+  return <HomeHealthSummaryPage />;
 }
 
 export default Home;
diff --git a/assets/js/lib/test-utils/factories/clusters.js b/assets/js/lib/test-utils/factories/clusters.js
@@ -4,7 +4,7 @@ import { Factory } from 'fishery';
 import day from 'dayjs';
 
 import {
-  resultEnum,
+  healthEnum,
   cloudProviderEnum,
   hostFactory,
   sapSystemFactory,
@@ -109,7 +109,7 @@ export const clusterFactory = Factory.define(({ sequence, params }) => {
     hosts_number: faker.datatype.number(),
     resources_number: faker.datatype.number(),
     type: clusterTypeEnum(),
-    health: resultEnum(),
+    health: healthEnum(),
     selected_checks: [],
     provider: cloudProviderEnum(),
     cib_last_written: day(faker.date.recent()).format('ddd MMM D h:mm:ss YYYY'),

diff --git a/assets/js/lib/test-utils/factories/executions.js b/assets/js/lib/test-utils/factories/executions.js
@@ -1,11 +1,14 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { faker } from '@faker-js/faker';
 import { Factory } from 'fishery';
-import { hostFactory, resultEnum, randomObjectFactory } from '.';
+import { hostFactory, randomObjectFactory } from '.';
 
 export const checksExecutionStatusEnum = () =>
   faker.helpers.arrayElement(['running', 'completed', 'requested']);
 
+const resultEnum = () =>
+  faker.helpers.arrayElement(['passing', 'critical', 'warning']);
+
 const expectationReturnTypeEnum = () =>
   faker.helpers.arrayElement(['expect', 'expect_same']);
 

diff --git a/assets/js/lib/test-utils/factories/index.js b/assets/js/lib/test-utils/factories/index.js
@@ -37,16 +37,16 @@ export const randomObjectFactory = Factory.define(({ transientParams }) => {
     );
 });
 
-const healthEnum = () =>
+const executionStateEnum = () =>
   faker.helpers.arrayElement(['requested', 'running', 'not_running']);
 
-export const resultEnum = () =>
-  faker.helpers.arrayElement(['passing', 'critical', 'warning']);
+export const healthEnum = () =>
+  faker.helpers.arrayElement(['passing', 'critical', 'warning', 'unknown']);
 
 export const checkFactory = Factory.define(() => ({
   id: faker.datatype.uuid(),
   description: faker.lorem.paragraph(),
-  executionState: healthEnum,
+  executionState: executionStateEnum,
   health: healthEnum,
 }));
 
@@ -58,10 +58,8 @@ export const healthSummaryFactory = Factory.define(() => ({
   hostsHealth: healthEnum(),
   id: faker.datatype.uuid(),
   sapsystemHealth: healthEnum(),
-  sid: faker.random.alphaNumeric({
-    length: 3,
-    casing: 'upper',
-  }),
+  sid: faker.random.alphaNumeric(3, { casing: 'upper' }),
+  tenant: faker.random.alphaNumeric(3, { casing: 'upper' }),
 }));
 
 export const catalogExpectExpectationFactory = Factory.define(