Refs #38107 - fix empty state, fix page caps, do more testing

lib/katello/plugin.rb

@@ -72,7 +72,7 @@
 
     menu :top_menu,
          :booted_container_images,
-         :caption => N_('Booted container images'),
+         :caption => N_('Booted Container Images'),
          :url_hash => {:controller => 'katello/api/v2/host_bootc_images',
                        :action => 'bootc_images'},
          :url => '/booted_container_images',

webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js

@@ -145,7 +145,7 @@ const BootedContainerImagesPage = () => {
                 </Td>
               </Tr>
             )}
-            {!status === STATUS.PENDING &&
+            {!(status === STATUS.PENDING) &&
               results.length === 0 &&
               !errorMessage && (
                 <Tr ouiaId="table-empty">

webpack/scenes/BootedContainerImages/__tests__/bootedContainerImages.fixtures.js

@@ -15,15 +15,15 @@ const bootedContainerImagesResponse = Immutable({
         },
         {
           bootc_booted_digest: 'sha256:54256a998f0c62e16f3927c82b570f90bd8449a52e03daabd5fd16d6419fd573',
-          host_count: 1,
+          host_count: 2,
         },
         {
           bootc_booted_digest: 'sha256:54256a998f0c62e16f3927c82b570f90bd8449a52e03daabd5fd16d6419fd574',
-          host_count: 1,
+          host_count: 3,
         },
         {
           bootc_booted_digest: 'sha256:54256a998f0c62e16f3927c82b570f90bd8449a52e03daabd5fd16d6419fd575',
-          host_count: 1,
+          host_count: 4,
         },
       ],
     },
@@ -32,7 +32,7 @@ const bootedContainerImagesResponse = Immutable({
       digests: [
         {
           bootc_booted_digest: 'sha256:54256a998f0c62e16f3927c82b570f90bd8449a52e03daabd5fd16d6419fd576',
-          host_count: 1,
+          host_count: 6,
         },
       ],
     },

webpack/scenes/BootedContainerImages/__tests__/bootedContainerImagesPage.test.js

@@ -5,6 +5,7 @@ import api from '../../../services/api';
 import BOOTED_CONTAINER_IMAGES_KEY from '../BootedContainerImagesConstants';
 import BootedContainerImagesPage from '../BootedContainerImagesPage';
 import bootcImagesData from './bootedContainerImages.fixtures';
+import { cvVersionTaskPollingKey } from '../../ContentViews/ContentViewsConstants';
 
 // const bootedContainerImagesIndexPath = api.getApiUrl('/booted_container_images');
 // const renderOptions = { apiNamespace: BOOTED_CONTAINER_IMAGES_KEY };
@@ -14,14 +15,22 @@ const autocompleteQuery = {
   search: '',
 };
 
-let firstImage;
-let secondImage;
+let centos10Image;
+let centos9Image;
+let stream10Digest1;
+let stream10Digest2;
+let stream10Digest3;
+let stream10Digest4;
+let stream9Digest;
 beforeEach(() => {
   const { results } = bootcImagesData;
-  [firstImage, secondImage] = results;
+  [centos10Image, centos9Image] = results;
+  [stream10Digest1, stream10Digest2, stream10Digest3, stream10Digest4] =
+    centos10Image.digests.map(digest => digest.bootc_booted_digest);
+  stream9Digest = centos9Image.digests[0].bootc_booted_digest;
 });
 
-test('BootedContainerImagesPage renders correctly', async (done) => {
+test('BootedContainerImagesPage renders correctly expanded', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
   const scope = nockInstance
     .get(bootcImagesUrl)
@@ -30,11 +39,42 @@ test('BootedContainerImagesPage renders correctly', async (done) => {
     .times(2)
     .reply(200, bootcImagesData);
 
-  const { queryByText, queryAllByText } = renderWithRedux(<BootedContainerImagesPage />);
-  expect(queryByText(firstImage.bootc_booted_image)).toBeNull();
+  const {
+    queryByText, queryAllByText, queryAllByRole,
+  } = renderWithRedux(<BootedContainerImagesPage />);
+
+  expect(queryByText(centos10Image.bootc_booted_image)).toBeNull();
 
   await patientlyWaitFor(() => {
-    expect(queryByText(firstImage.bootc_booted_image)).toBeInTheDocument();
+    // Expand the rows
+    queryAllByRole('button').find(btn => btn.getAttribute('aria-labelledby') ===
+      'simple-node1 booted-containers-expander-quay.io/centos-bootc/centos-bootc:stream91').click();
+    queryAllByRole('button').find(btn => btn.getAttribute('aria-labelledby') ===
+      'simple-node0 booted-containers-expander-quay.io/centos-bootc/centos-bootc:stream100').click();
+
+    // Check that the digest host count links appear
+    expect(queryAllByText('1').find(link => String(link.getAttribute('href')).includes(stream10Digest1))).toBeVisible();
+    expect(queryAllByText('2').find(link => String(link.getAttribute('href')).includes(stream10Digest2))).toBeVisible();
+    expect(queryAllByText('3').find(link => String(link.getAttribute('href')).includes(stream10Digest3))).toBeVisible();
+    expect(queryAllByText('4').find(link => String(link.getAttribute('href')).includes(stream10Digest4))).toBeVisible();
+    expect(queryAllByText('6').find(link => String(link.getAttribute('href')).includes(stream9Digest))).toBeVisible();
+
+    // Check that the image host count links appear
+    const links = queryAllByRole('link');
+    const stream10Link = links.find(link => link.getAttribute('href') === `/hosts?search=bootc_booted_image%20=%20${centos10Image.bootc_booted_image}`);
+    const stream9Link = links.find(link => link.getAttribute('href') === `/hosts?search=bootc_booted_image%20=%20${centos9Image.bootc_booted_image}`);
+    expect(stream10Link).toBeVisible();
+    expect(stream9Link).toBeVisible();
+
+    // Check that the image names appear
+    expect(queryByText(centos10Image.bootc_booted_image)).toBeVisible();
+    expect(queryByText(centos9Image.bootc_booted_image)).toBeVisible();
+
+    // Check that the digest counts appear
+    // console.log(queryAllByText('4'));
+
+    // Check that the digest names appear
+    // console.log(queryAllByText(stream10Digest1));
   });
 
   assertNockRequest(autocompleteScope);