Fixes #38323 - Add test cases to host details cards

webpack/components/extensions/HostDetails/DetailsTabCards/HwPropertiesCard.js

@@ -39,7 +39,7 @@ HostDisks.defaultProps = {
   blockDevices: '',
 };
 
-const HwPropertiesCard = ({ isExpandedGlobal, hostDetails }) => {
+const HwPropertiesCard = ({ hostDetails }) => {
   if (hostIsNotRegistered({ hostDetails })) return null;
   const { facts } = hostDetails || {};
   const model = facts?.['virt::host_type'];
@@ -53,7 +53,6 @@ const HwPropertiesCard = ({ isExpandedGlobal, hostDetails }) => {
     <CardTemplate
       header={__('HW properties')}
       expandable
-      isExpandedGlobal={isExpandedGlobal}
       masonryLayout
     >
       <DescriptionList isHorizontal>
@@ -90,7 +89,6 @@ const HwPropertiesCard = ({ isExpandedGlobal, hostDetails }) => {
 };
 
 HwPropertiesCard.propTypes = {
-  isExpandedGlobal: PropTypes.bool,
   hostDetails: PropTypes.shape({
     facts: PropTypes.shape({
       model: PropTypes.string,
@@ -104,7 +102,6 @@ HwPropertiesCard.propTypes = {
 };
 
 HwPropertiesCard.defaultProps = {
-  isExpandedGlobal: false,
   hostDetails: {},
 };
 

webpack/components/extensions/HostDetails/DetailsTabCards/ImageModeCard.js

@@ -23,7 +23,7 @@ const actionUrl = hostname => createJob({
   inputs: {},
 });
 
-const ImageModeCard = ({ isExpandedGlobal, hostDetails }) => {
+const ImageModeCard = ({ hostDetails }) => {
   const imageMode = hostDetails?.content_facet_attributes?.bootc_booted_image;
   if (!imageMode) return null;
   const getValueOrDash = value => (value || '—');
@@ -32,7 +32,6 @@ const ImageModeCard = ({ isExpandedGlobal, hostDetails }) => {
       header={cardHeader}
       expandable
       masonryLayout
-      isExpandedGlobal={isExpandedGlobal}
       ouiaId="image-mode"
     >
       <a href={actionUrl(hostDetails.name)}>{__('Modify via remote execution')}</a>
@@ -64,7 +63,6 @@ const ImageModeCard = ({ isExpandedGlobal, hostDetails }) => {
 };
 
 ImageModeCard.propTypes = {
-  isExpandedGlobal: PropTypes.bool,
   hostDetails: PropTypes.shape({
     name: PropTypes.string,
     content_facet_attributes: PropTypes.shape({
@@ -81,7 +79,6 @@ ImageModeCard.propTypes = {
 };
 
 ImageModeCard.defaultProps = {
-  isExpandedGlobal: false,
   hostDetails: {},
 };
 

webpack/components/extensions/HostDetails/DetailsTabCards/InstalledProductsCard.js

@@ -4,15 +4,14 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { List, ListItem } from '@patternfly/react-core';
 import CardTemplate from 'foremanReact/components/HostDetails/Templates/CardItem/CardTemplate';
 
-const InstalledProductsCard = ({ isExpandedGlobal, hostDetails }) => {
+const InstalledProductsCard = ({ hostDetails }) => {
   const installedProducts = hostDetails?.subscription_facet_attributes?.installed_products;
   if (!installedProducts?.length) return null;
   return (
     <CardTemplate
       header={__('Installed products')}
       expandable
       masonryLayout
-      isExpandedGlobal={isExpandedGlobal}
     >
       <List isPlain>
         {installedProducts.map(product => (
@@ -26,7 +25,6 @@ const InstalledProductsCard = ({ isExpandedGlobal, hostDetails }) => {
 };
 
 InstalledProductsCard.propTypes = {
-  isExpandedGlobal: PropTypes.bool,
   hostDetails: PropTypes.shape({
     subscription_facet_attributes: PropTypes.shape({
       installed_products: PropTypes.arrayOf(PropTypes.shape({
@@ -38,7 +36,6 @@ InstalledProductsCard.propTypes = {
 };
 
 InstalledProductsCard.defaultProps = {
-  isExpandedGlobal: false,
   hostDetails: {},
 };
 

webpack/components/extensions/HostDetails/DetailsTabCards/__test__/HwPropertiesCard.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { renderWithRedux } from 'react-testing-lib-wrapper';
+import { CardExpansionContext } from 'foremanReact/components/HostDetails/CardExpansionContext';
+import HwPropertiesCard from '../HwPropertiesCard';
+
+const hostDetails = {
+  subscription_facet_attributes: {
+    uuid: '1234567',
+    facts: {
+      'memory::memtotal': '24346164',
+      'cpu::core(s)_per_socket': '1',
+      'cpu::cpu(s)': '6',
+      'cpu::cpu_socket(s)': '6',
+      'virt::host_type': 'redhat, kvm',
+    },
+  },
+};
+const customRender = (ui, { providerProps, ...renderOptions }) => renderWithRedux(
+  <CardExpansionContext.Provider value={providerProps}>{ui}</CardExpansionContext.Provider>,
+  renderOptions,
+);
+
+describe('HwPropertiesCard', () => {
+  test('shows details when expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'HW properties': true },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { getByText }
+      = customRender(<HwPropertiesCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('HW properties')).toBeInTheDocument();
+    expect(getByText('Model')).toBeInTheDocument();
+  });
+
+  test('does not show card when host is not registered', () => {
+    const providerProps = {
+      cardExpandStates: { 'HW properties': true },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { queryByText }
+      = customRender(<HwPropertiesCard hostDetails={{ name: 'not-registered' }} />, { providerProps });
+
+    const element = queryByText((_, e) => e.textContent === 'HW properties');
+    expect(element).not.toBeInTheDocument();
+  });
+
+  test('does not show details when not expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'HW properties': false },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { queryByText, getByText }
+      = customRender(<HwPropertiesCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('HW properties')).toBeInTheDocument();
+    const element = queryByText((_, e) => e.textContent === 'Model');
+    expect(element).not.toBeInTheDocument();
+  });
+});

webpack/components/extensions/HostDetails/DetailsTabCards/__test__/ImageModeCard.test.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { renderWithRedux } from 'react-testing-lib-wrapper';
+import { CardExpansionContext } from 'foremanReact/components/HostDetails/CardExpansionContext';
+import ImageModeCard from '../ImageModeCard';
+
+const hostDetails = {
+  name: 'test-host',
+  content_facet_attributes: {
+    bootc_booted_image: 'quay.io/centos-bootc/centos-bootc:42',
+    bootc_booted_digest: 'sha256:18ec8a272258b22bf9707b1963d72b8987110c8965c3d08b496fac0b1fb22159',
+    bootc_available_image: '',
+    bootc_available_digest: '',
+    bootc_staged_image: 'quay.io/fedora/fedora-bootc:40',
+    bootc_staged_digest: 'sha256:b2b888aa0a05f3278e4957cb658fd088e3579e214140dc88ca138f47144d6a05',
+    bootc_rollback_image: 'quay.io/centos-bootc/centos-bootc:stream9',
+    bootc_rollback_digest: 'sha256:893b636bbc5725378ce602f222f26c29f51334f93243ae8657d31391634eb024',
+  },
+};
+const customRender = (ui, { providerProps, ...renderOptions }) => renderWithRedux(
+  <CardExpansionContext.Provider value={providerProps}>{ui}</CardExpansionContext.Provider>,
+  renderOptions,
+);
+
+describe('image mode card', () => {
+  test('shows image mode details when expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'image-mode': true },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { getByText }
+      = customRender(<ImageModeCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('Image mode details')).toBeInTheDocument();
+
+    const rexLink = getByText('Modify via remote execution');
+    expect(rexLink).toBeInTheDocument();
+    expect(rexLink).toHaveAttribute(
+      'href',
+      '/job_invocations/new?feature=katello_bootc_action&search=name%20%5E%20(test-host)',
+    );
+
+    expect(getByText('Running image')).toBeInTheDocument();
+    expect(getByText('Running image digest')).toBeInTheDocument();
+    expect(getByText('Staged image')).toBeInTheDocument();
+    expect(getByText('Staged image digest')).toBeInTheDocument();
+    expect(getByText('Available image')).toBeInTheDocument();
+    expect(getByText('Available image digest')).toBeInTheDocument();
+    expect(getByText('Rollback image')).toBeInTheDocument();
+    expect(getByText('Rollback image digest')).toBeInTheDocument();
+
+    expect(getByText('quay.io/centos-bootc/centos-bootc:42')).toBeInTheDocument();
+    expect(getByText('sha256:18ec8a272258b22bf9707b1963d72b8987110c8965c3d08b496fac0b1fb22159')).toBeInTheDocument();
+    expect(getByText('quay.io/fedora/fedora-bootc:40')).toBeInTheDocument();
+    expect(getByText('sha256:b2b888aa0a05f3278e4957cb658fd088e3579e214140dc88ca138f47144d6a05')).toBeInTheDocument();
+    expect(getByText('quay.io/centos-bootc/centos-bootc:stream9')).toBeInTheDocument();
+    expect(getByText('sha256:893b636bbc5725378ce602f222f26c29f51334f93243ae8657d31391634eb024')).toBeInTheDocument();
+  });
+
+  test('does not show details when not expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'image-mode': false },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { queryByText, getByText }
+      = customRender(<ImageModeCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('Image mode details')).toBeInTheDocument();
+    const element = queryByText((_, e) => e.textContent === 'Running image');
+    expect(element).not.toBeInTheDocument();
+  });
+});

webpack/components/extensions/HostDetails/DetailsTabCards/__test__/InstalledProductsCard.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { renderWithRedux } from 'react-testing-lib-wrapper';
+import { CardExpansionContext } from 'foremanReact/components/HostDetails/CardExpansionContext';
+import InstalledProductsCard from '../InstalledProductsCard';
+
+const hostDetails = {
+  subscription_facet_attributes: {
+    installed_products: [
+      { productId: '479', productName: 'Red Hat Enterprise Linux for x86_64' },
+    ],
+  },
+};
+const customRender = (ui, { providerProps, ...renderOptions }) => renderWithRedux(
+  <CardExpansionContext.Provider value={providerProps}>{ui}</CardExpansionContext.Provider>,
+  renderOptions,
+);
+
+describe('Installed Products Card', () => {
+  test('shows details when expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'Installed products': true },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { getByText }
+      = customRender(<InstalledProductsCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('Installed products')).toBeInTheDocument();
+    expect(getByText('Red Hat Enterprise Linux for x86_64')).toBeInTheDocument();
+  });
+
+  test('does not show details when not expanded', () => {
+    const providerProps = {
+      cardExpandStates: { 'Installed products': false },
+      dispatch: () => {},
+      registerCard: () => {},
+    };
+    const { queryByText, getByText }
+      = customRender(<InstalledProductsCard hostDetails={hostDetails} />, { providerProps });
+
+    expect(getByText('Installed products')).toBeInTheDocument();
+    const element = queryByText((_, e) => e.textContent === 'Red Hat Enterprise Linux for x86_64');
+    expect(element).not.toBeInTheDocument();
+  });
+});