add unit test that check disabling build image button when uncheck all targets

src/Components/Blueprints/BuildImagesButton.tsx

@@ -15,42 +15,43 @@ import {
   ButtonProps,
   Button,
 } from '@patternfly/react-core';
+import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import { skipToken } from '@reduxjs/toolkit/query';
 
+import { targetOptions } from '../../constants';
 import { selectSelectedBlueprintId } from '../../store/BlueprintSlice';
-import {useAppDispatch, useAppSelector} from '../../store/hooks';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import {
   ImageTypes,
   useComposeBlueprintMutation,
   useGetBlueprintQuery,
 } from '../../store/imageBuilderApi';
-import {addNotification} from "@redhat-cloud-services/frontend-components-notifications/redux";
 
 export const BuildImagesButton = () => {
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const [deselectedTargets, setDeselectedTargets] = useState<ImageTypes[]>([]);
-  const [buildBlueprint, { isLoading: imageBuildLoading, isError: imageBuildError }] =
-      useComposeBlueprintMutation();
+  const [buildBlueprint, { isLoading: imageBuildLoading }] =
+    useComposeBlueprintMutation();
   const dispatch = useAppDispatch();
 
   const onBuildHandler = async () => {
     if (selectedBlueprintId) {
-      try{
-      await buildBlueprint({
-        id: selectedBlueprintId,
-        body: {
-          image_types: blueprintImageType?.filter(
-            (target) => !deselectedTargets?.includes(target)
-          ),
-        },
-      })}
-      catch(imageBuildError) {
+      try {
+        await buildBlueprint({
+          id: selectedBlueprintId,
+          body: {
+            image_types: blueprintImageType?.filter(
+              (target) => !deselectedTargets?.includes(target)
+            ),
+          },
+        });
+      } catch (imageBuildError) {
         dispatch(
-            addNotification({
-                  variant: 'warning',
-                  title: 'No blueprint was build',
-                })
-            );
+          addNotification({
+            variant: 'warning',
+            title: 'No blueprint was build',
+          })
+        );
       }
     }
   };
@@ -80,24 +81,6 @@ export const BuildImagesButton = () => {
     }
   };
 
-  const handleToggleEnvironment = (target: ImageTypes) => {
-    switch (target) {
-      case 'aws':
-        return 'Amazon Web Services (AWS)';
-      case 'gcp':
-        return 'Google Cloud Platform (GCP)';
-      case 'azure':
-        return 'Microsoft Azure';
-      case 'oci':
-        return 'Oracle Cloud Infrastructure';
-      case 'vsphere-ova':
-        return 'VMware vSphere';
-      case 'guest-image':
-        return 'Virtualization - Guest image (.qcow2)';
-      case 'image-installer':
-        return 'Bare metal - Installer';
-    }
-  };
   return (
     <Dropdown
       isOpen={isOpen}
@@ -105,6 +88,7 @@ export const BuildImagesButton = () => {
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
           variant="primary"
+          data-testid="blueprint-build-image-menu"
           ref={toggleRef}
           isFullWidth
           onClick={onToggleClick}
@@ -113,6 +97,7 @@ export const BuildImagesButton = () => {
             variant: 'action',
             items: [
               <MenuToggleAction
+                data-testid="blueprint-build-image-menu-option"
                 key="split-action"
                 onClick={onBuildHandler}
                 id="wizard-build-image-btn"
@@ -152,6 +137,7 @@ export const BuildImagesButton = () => {
           <MenuList>
             {blueprintImageType?.map((imageType, index) => (
               <MenuItem
+                data-testid="blueprint-menu-items"
                 key={imageType}
                 hasCheckbox
                 itemId={index}
@@ -159,7 +145,7 @@ export const BuildImagesButton = () => {
                   !deselectedTargets || !deselectedTargets.includes(imageType)
                 }
               >
-                {handleToggleEnvironment(imageType)}
+                {targetOptions[imageType]}
               </MenuItem>
             ))}
           </MenuList>

src/Components/ImagesTable/EmptyState.tsx

@@ -22,7 +22,6 @@ import {
   CREATING_IMAGES_WITH_IB_SERVICE_URL,
   MANAGING_WITH_DNF_URL,
 } from '../../constants';
-
 import { BuildImagesButtonEmptyState } from '../Blueprints/BuildImagesButton';
 
 type ImagesEmptyStateProps = {

src/test/Components/Blueprints/Blueprints.test.tsx

@@ -42,6 +42,7 @@ describe('Blueprints', () => {
   const user = userEvent.setup();
   const blueprintNameWithComposes = 'Dark Chocolate';
   const blueprintIdWithComposes = '677b010b-e95e-4694-9813-d11d847f1bfc';
+  const blueprintIdWithMultipleTargets = 'c1cfa347-4c37-49b5-8e73-6aa1d1746cfa';
   const blueprintNameEmptyComposes = 'Milk Chocolate';
   const blueprintIdEmptyComposes = '193482e4-4bd0-4898-a8bc-dc8c33ed669f';
   const blueprintIdOutOfSync = '51243667-8d87-4aef-8dd1-84fc58261b05';
@@ -102,6 +103,55 @@ describe('Blueprints', () => {
     expect(buildImageBtn).toBeEnabled();
   });
 
+  test('uncheck Target option and check that build image button is Disable', async () => {
+    renderWithReduxRouter('', {});
+
+    await selectBlueprintById(blueprintIdWithComposes);
+    const buildImageBtn = await screen.findByRole('button', {
+      name: /Build image/i,
+    });
+    expect(buildImageBtn).toBeEnabled();
+    const buildImageDropDown = screen.getByTestId('blueprint-build-image-menu');
+    await user.click(buildImageDropDown);
+
+    const awsCheckbox = await screen.findByRole('checkbox', {
+      name: /amazon web services/i,
+    });
+    expect(awsCheckbox).toBeChecked();
+
+    await user.click(awsCheckbox);
+    expect(awsCheckbox).not.toBeChecked();
+
+    const buildSelectedBtn = await screen.findByRole('button', {
+      name: /Build selected/i,
+    });
+    expect(buildSelectedBtn).toBeDisabled();
+  });
+
+  test('uncheck one Target option and check that you can build an image', async () => {
+    renderWithReduxRouter('', {});
+
+    await selectBlueprintById(blueprintIdWithMultipleTargets);
+    const buildImageBtn = await screen.findByRole('button', {
+      name: /Build image/i,
+    });
+    expect(buildImageBtn).toBeEnabled();
+    const buildImageDropDown = screen.getByTestId('blueprint-build-image-menu');
+
+    await user.click(buildImageDropDown);
+    const awsCheckbox = await screen.findByRole('checkbox', {
+      name: /amazon web services/i,
+    });
+    expect(awsCheckbox).toBeChecked();
+
+    await user.click(awsCheckbox);
+    expect(awsCheckbox).not.toBeChecked();
+    const buildSelectedBtn = await screen.findByRole('button', {
+      name: /Build selected/i,
+    });
+    expect(buildSelectedBtn).toBeEnabled();
+  });
+
   test('blueprint is out of sync', async () => {
     renderWithReduxRouter('', {});
 
@@ -227,7 +277,7 @@ describe('Blueprints', () => {
       await user.click(button);
 
       await waitFor(() => {
-        expect(screen.getAllByRole('checkbox')).toHaveLength(7);
+        expect(screen.getAllByRole('checkbox')).toHaveLength(8);
       });
     });
   });

src/test/fixtures/blueprints.ts

@@ -10,6 +10,9 @@ export const mockBlueprintsCreation: CreateBlueprintResponse[] = [
   {
     id: '677b010b-e95e-4694-9813-d11d847f1bfc',
   },
+  {
+    id: 'c1cfa347-4c37-49b5-8e73-6aa1d1746cfa',
+  },
 ];
 
 export const mockBlueprintIds = {
@@ -23,6 +26,7 @@ export const mockBlueprintIds = {
   gcp: '34449e42-1b61-4fd7-9bf2-55210b5f21cd',
   azure: '21698d07-10af-425f-bae3-51e6961318b5',
   registration: '00d2bf0f-55fc-40ae-ad3e-14368c69497a',
+  multipleTargets: 'c1cfa347-4c37-49b5-8e73-6aa1d1746cfa',
   oscap: '260823fd-0a51-43fd-bc1c-77255848de04',
   fsc: 'ec486dea-78f8-43ee-9c69-8f76b9d1b143',
   snapshot: '5dafa0fc-a5c8-4dc3-8a03-ceeb3677b28a',
@@ -72,7 +76,7 @@ export const mockBlueprintDescriptions = {
 
 export const mockGetBlueprints: GetBlueprintsApiResponse = {
   links: { first: 'first', last: 'last' },
-  meta: { count: 27 },
+  meta: { count: 28 },
   data: [
     {
       id: '677b010b-e95e-4694-9813-d11d847f1bfc',
@@ -88,6 +92,13 @@ export const mockGetBlueprints: GetBlueprintsApiResponse = {
       version: 1,
       last_modified_at: '2021-09-08T14:38:00.000Z',
     },
+    {
+      id: 'c1cfa347-4c37-49b5-8e73-6aa1d1746cfa',
+      name: 'Multiple Target',
+      description: '70% Dark Chocolate with crunchy cocoa nibs',
+      version: 2,
+      last_modified_at: '2021-09-09T14:38:00.000Z',
+    },
     {
       id: '51243667-8d87-4aef-8dd1-84fc58261b05',
       name: 'Lemon Pie',
@@ -389,6 +400,16 @@ export const mockBlueprintComposes: GetBlueprintComposesApiResponse = {
               },
             },
           },
+          {
+            architecture: 'x86_64',
+            image_type: 'aws',
+            upload_request: {
+              type: 'aws',
+              options: {
+                share_with_accounts: ['123123123123'],
+              },
+            },
+          },
         ],
       },
     },
@@ -413,6 +434,22 @@ export const updatedBlueprints: GetBlueprintsApiResponse = {
   })),
 };
 
+export const multipleTargetsBlueprintResponse: GetBlueprintApiResponse = {
+  ...mockGetBlueprints.data[2],
+  image_requests: mockBlueprintComposes.data[2].request.image_requests,
+  distribution: mockBlueprintComposes.data[2].request.distribution,
+  customizations: {
+    subscription: {
+      organization: 1234,
+      'activation-key': '',
+      'server-url': '',
+      'base-url': '',
+      insights: true,
+      rhc: true,
+    },
+  },
+};
+
 export const darkChocolateBlueprintResponse: GetBlueprintApiResponse = {
   ...mockGetBlueprints.data[0],
   image_requests: mockBlueprintComposes.data[0].request.image_requests,

src/test/fixtures/editMode.ts

@@ -3,6 +3,7 @@ import {
   mockBlueprintDescriptions,
   mockBlueprintIds,
   mockBlueprintNames,
+  multipleTargetsBlueprintResponse,
 } from './blueprints';
 
 import {
@@ -429,6 +430,8 @@ export const getMockBlueprintResponse = (id: string) => {
   switch (id) {
     case mockBlueprintIds['darkChocolate']:
       return darkChocolateBlueprintResponse;
+    case mockBlueprintIds['multipleTargets']:
+      return multipleTargetsBlueprintResponse;
     case mockBlueprintIds['rhel9']:
       return rhel9BlueprintResponse;
     case mockBlueprintIds['rhel8']:

src/test/mocks/handlers.js

@@ -190,8 +190,8 @@ export const handlers = [
   }),
   rest.get(`${IMAGE_BUILDER_API}/blueprints/:id/composes`, (req, res, ctx) => {
     const emptyBlueprintId = mockGetBlueprints.data[1].id;
-    const outOfSyncBlueprintId = mockGetBlueprints.data[2].id;
-    const centosBlueprintId = mockGetBlueprints.data[3].id;
+    const outOfSyncBlueprintId = mockGetBlueprints.data[3].id;
+    const centosBlueprintId = mockGetBlueprints.data[4].id;
 
     switch (req.params.id) {
       case emptyBlueprintId: