chore(RHIF-277): add cypress rest coverages (RedHatInsights#2045)

cypress/support/interceptors.js

@@ -198,6 +198,37 @@ export const hostsInterceptors = {
       'getHosts'
     );
   },
+  successHybridSystems: () => {
+    cy.intercept(
+      '/api/inventory/v1/hosts*',
+      { hostname: 'localhost' },
+      (req) => {
+        if (req.url.includes('filter[system_profile][host_type]=edge')) {
+          req.reply({
+            statusCode: 200,
+            body: {
+              count: 1,
+              page: 1,
+              per_page: DEFAULT_ROW_COUNT,
+              total: 1,
+              results: ['some-edge-device'],
+            },
+          });
+        } else {
+          req.reply({
+            statusCode: 200,
+            body: {
+              count: 0,
+              page: 1,
+              per_page: DEFAULT_ROW_COUNT,
+              total: 0,
+              results: [],
+            },
+          });
+        }
+      }
+    );
+  },
 };
 
 export const systemProfileInterceptors = {
@@ -235,6 +266,40 @@ export const featureFlagsInterceptors = {
       },
     }).as('getFeatureFlag');
   },
+  edgeParitySuccessful: () => {
+    cy.intercept('GET', '/feature_flags*', {
+      statusCode: 200,
+      body: {
+        toggles: [
+          {
+            name: 'edgeParity.inventory-list',
+            enabled: true,
+            variant: {
+              name: 'disabled',
+              enabled: true,
+            },
+          },
+        ],
+      },
+    }).as('getEdgeFeatureFlag');
+  },
+  edgeParityDisabled: () => {
+    cy.intercept('GET', '/feature_flags*', {
+      statusCode: 200,
+      body: {
+        toggles: [
+          {
+            name: 'edgeParity.inventory-list',
+            enabled: false,
+            variant: {
+              name: 'disabled',
+              enabled: false,
+            },
+          },
+        ],
+      },
+    }).as('getEdgeFeatureFlag');
+  },
 };
 
 export const edgeInterceptors = {

src/components/InventoryTabs/HybridInventoryTabs.cy.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import HybridInventoryTabs from './HybridInventoryTabs';
+import {
+  featureFlagsInterceptors,
+  hostsInterceptors,
+} from '../../../cypress/support/interceptors';
+import { Route, Routes } from 'react-router-dom';
+
+const MockConventionalTab = () => (
+  <div id="conventional">Mock conventional tab</div>
+);
+const MockImmutableTab = () => <div id="immutable">Mock immutable tab</div>;
+// eslint-disable-next-line react/prop-types
+const MockRouter = ({ path = '/insights/inventory', ...props }) => (
+  <Routes>
+    <Route path={path} element={<HybridInventoryTabs {...props} />} />
+    <Route
+      path={path + '/manage-edge-inventory'}
+      element={<HybridInventoryTabs {...props} isImmutableTabOpen />}
+    />
+  </Routes>
+);
+
+const defaultProps = {
+  ImmutableDevicesTab: <MockImmutableTab />,
+  ConventionalSystemsTab: <MockConventionalTab />,
+};
+
+const mountWithProps = (props) => {
+  return cy.mountWithContext(
+    MockRouter,
+    {
+      routerProps: { initialEntries: ['/insights/inventory'] },
+    },
+    props
+  );
+};
+
+before(() => {
+  cy.mockWindowChrome();
+});
+
+describe('When edge parity feature is enabled', () => {
+  beforeEach(() => {
+    cy.intercept('*', { statusCode: 200, body: { results: [] } });
+    hostsInterceptors.successful();
+    featureFlagsInterceptors.edgeParitySuccessful();
+  });
+
+  it('renders conventional tab correctly for Inventory frontend without tabPath', () => {
+    mountWithProps(defaultProps);
+    cy.get('div[id="conventional"]').should('have.length', 1);
+    cy.get('div[id="immutable"]').should('not.exist');
+  });
+
+  it('renders conventional tab correctly for Inventory frontend without tabPath', () => {
+    mountWithProps({ isImmutableTabOpen: true, ...defaultProps });
+    cy.get('div[id="conventional"]').should('not.exist');
+    cy.get('div[id="immutable"]').should('have.length', 1);
+  });
+
+  it('should change to immutable tab correctly from conventional', () => {
+    mountWithProps(defaultProps);
+
+    //conventional tab should be default
+    cy.get('div[id="conventional"]').should('have.length', 1);
+
+    cy.get('button[aria-label="Immutable tab"]').click();
+    cy.get('div[id="immutable"]').should('have.length', 1);
+  });
+
+  it('should prepend tabPath in front of tab key', () => {
+    // other consumer apps have custom tab pathname. Tabs should work as normal
+    const tabPathname = '/insights/vulnerability/';
+    cy.mountWithContext(
+      MockRouter,
+      {
+        routerProps: { initialEntries: [tabPathname] },
+      },
+      { ...defaultProps, path: tabPathname, tabPathname: tabPathname }
+    );
+
+    cy.get('div[id="conventional"]').should('have.length', 1);
+    cy.get('button[aria-label="Immutable tab"]').click();
+
+    cy.get('div[id="immutable"]').should('have.length', 1);
+  });
+});
+
+describe('When there are edge devices, but no conventional systems', () => {
+  beforeEach(() => {
+    cy.intercept('*', { statusCode: 200, body: { results: [] } });
+    hostsInterceptors.successHybridSystems();
+    featureFlagsInterceptors.edgeParitySuccessful();
+  });
+  it('should open immutable tab as default when there are edge devices, but not conventional', () => {
+    mountWithProps(defaultProps);
+
+    cy.get('div[id="conventional"]').should('not.exist');
+    cy.get('div[id="immutable"]').should('have.length', 1);
+  });
+});
+
+describe('When edge parity feature is disabled', () => {
+  beforeEach(() => {
+    cy.intercept('*', { statusCode: 200, body: { results: [] } });
+    featureFlagsInterceptors.edgeParityDisabled();
+  });
+
+  it('should render only conventional systems without tab wrapper', () => {
+    mountWithProps(defaultProps);
+
+    cy.get('div[id="conventional"]').should('have.length', 1);
+    cy.get('div[id="immutable"]').should('not.exist');
+    cy.get('.pf-c-tabs').should('not.exist');
+  });
+});

src/components/InventoryTabs/HybridInventoryTabs.js

@@ -24,7 +24,6 @@ const HybridInventoryTabs = ({
   const navigate = useNavigate();
   const [hasEdgeImages, setHasEdgeImages] = useState(false);
   const EdgeParityEnabled = useFeatureFlag('edgeParity.inventory-list');
-
   useEffect(() => {
     if (EdgeParityEnabled) {
       try {
@@ -42,6 +41,7 @@ const HybridInventoryTabs = ({
               .then((conventionalImages) => {
                 const accountHasConventionalImages =
                   conventionalImages?.data?.total > 0;
+
                 if (accountHasEdgeImages && !accountHasConventionalImages) {
                   handleTabClick(
                     undefined,
@@ -54,7 +54,7 @@ const HybridInventoryTabs = ({
         console.log(e);
       }
     }
-  }, []);
+  }, [EdgeParityEnabled]);
 
   const activeTab = isImmutableTabOpen
     ? hybridInventoryTabKeys.immutable.key
@@ -84,12 +84,14 @@ const HybridInventoryTabs = ({
       unmountOnExit
     >
       <Tab
+        aria-label="Conventional tab"
         eventKey={hybridInventoryTabKeys.conventional.key}
         title={<TabTitleText>Conventional (RPM-DNF)</TabTitleText>}
       >
         {ConventionalSystemsTab}
       </Tab>
       <Tab
+        aria-label="Immutable tab"
         eventKey={hybridInventoryTabKeys.immutable.key}
         title={<TabTitleText>Immutable (OSTree)</TabTitleText>}
       >