From ed5bd0ce0ac8bf4f11aa9648549bc5b91b809c1c Mon Sep 17 00:00:00 2001 From: Xabier Arbulu Insausti Date: Tue, 20 Jun 2023 11:45:43 +0200 Subject: [PATCH] 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 --- .../HealthSummary/HomeHealthSummary.jsx | 9 +-- .../HomeHealthSummary.stories.jsx | 72 +++++++++++++++++++ .../HealthSummary/HomeHealthSummary.test.jsx | 53 +++++++------- .../HealthSummary/HomeHealthSummaryPage.jsx | 13 ++++ assets/js/components/HealthSummary/index.js | 2 +- assets/js/components/Home/Home.jsx | 4 +- .../js/lib/test-utils/factories/clusters.js | 4 +- .../js/lib/test-utils/factories/executions.js | 5 +- assets/js/lib/test-utils/factories/index.js | 14 ++-- 9 files changed, 128 insertions(+), 48 deletions(-) create mode 100644 assets/js/components/HealthSummary/HomeHealthSummary.stories.jsx create mode 100644 assets/js/components/HealthSummary/HomeHealthSummaryPage.jsx diff --git a/assets/js/components/HealthSummary/HomeHealthSummary.jsx b/assets/js/components/HealthSummary/HomeHealthSummary.jsx index 32e556c5f8..4e738c89d0 100644 --- 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() { ); } + +export default HomeHealthSummary; diff --git a/assets/js/components/HealthSummary/HomeHealthSummary.stories.jsx b/assets/js/components/HealthSummary/HomeHealthSummary.stories.jsx new file mode 100644 index 0000000000..388fc93e5b --- /dev/null +++ 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 ( +
{children}
+ ); +} + +export default { + title: 'HomeHealthSummary', + components: HomeHealthSummary, + decorators: [ + (Story) => ( + + + + ), + ], + render: (args) => ( + + + + ), +}; + +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 index eb27090e20..ffd1526510 100644 --- 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( - , - initialState + const { container } = renderWithRouter( + ); - 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( - , - initialState + const { container } = renderWithRouter( + ); - 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( - , - initialState + const { container } = renderWithRouter( + ); - 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( - , - initialState + const { container } = renderWithRouter( + ); - 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 new file mode 100644 index 0000000000..614eb516dc --- /dev/null +++ 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 ( + + ); +} diff --git a/assets/js/components/HealthSummary/index.js b/assets/js/components/HealthSummary/index.js index 17eedbd0d3..758f82c9dc 100644 --- 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 index 1e6d903c6c..e844dad7cb 100644 --- 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 ; + return ; } export default Home; diff --git a/assets/js/lib/test-utils/factories/clusters.js b/assets/js/lib/test-utils/factories/clusters.js index ecb323250b..1a49a11c1c 100644 --- 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 index 40ee16c0c3..7588273a20 100644 --- 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 index 1d901f5a35..c814ef34aa 100644 --- 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(