test: Update tests after adding SaveAndBuild modal

This updates tests with a `openAndDismissSaveAndBuildModal` function that handles closing the SaveAndBuild modal after clicking on Create blueprint for the first time.

src/Components/CreateImageWizardV2/steps/Review/Footer/CreateDropdown.tsx

@@ -82,7 +82,12 @@ export const CreateSaveButton = ({
         onClose={handleClose}
         width="50%"
         actions={[
-          <Button key="back" variant="primary" onClick={handleClose}>
+          <Button
+            key="back"
+            variant="primary"
+            data-testid="close-button-saveandbuild-modal"
+            onClick={handleClose}
+          >
             Close
           </Button>,
         ]}

src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx

@@ -12,7 +12,10 @@ import {
 import userEvent from '@testing-library/user-event';
 import { rest } from 'msw';
 
-import { enterBlueprintName } from './wizardTestUtils';
+import {
+  enterBlueprintName,
+  openAndDismissSaveAndBuildModal,
+} from './wizardTestUtils';
 
 import CreateImageWizard from '../../../Components/CreateImageWizardV2/CreateImageWizard';
 import ShareImageModal from '../../../Components/ShareImageModal/ShareImageModal';
@@ -421,6 +424,9 @@ describe('Step Upload to AWS', () => {
     await clickNext();
     await enterBlueprintName();
     await clickNext();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
 
     await user.click(
       await screen.findByRole('button', { name: /Create blueprint/ })
@@ -1084,9 +1090,9 @@ describe('Step Review', () => {
   test('has Registration expandable section for rhel', async () => {
     await setUp();
     const targetExpandable = screen.getByText(/target environments/i);
-    const registrationExpandable = screen.getByRole('button', {
-      name: /registration/i,
-    });
+    const registrationExpandable = screen.getByTestId(
+      'registration-expandable'
+    );
 
     const contentExpandable = await screen.findByTestId('content-expandable');
     const fscExpandable = screen.getByTestId(

src/test/Components/CreateImageWizardV2/steps/Details/Details.test.tsx

@@ -10,6 +10,7 @@ import {
   enterBlueprintName,
   goToRegistrationStep,
   interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
 } from '../../wizardTestUtils';
 
@@ -87,6 +88,9 @@ describe('registration request generated correctly', () => {
     await goToDetailsStep();
     await enterBlueprintName();
     await goToReviewStep();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 
     const expectedRequest = { ...blueprintRequest };

src/test/Components/CreateImageWizardV2/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx

@@ -13,6 +13,7 @@ import {
   clickRegisterLater,
   enterBlueprintName,
   interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
 } from '../../wizardTestUtils';
 
@@ -114,6 +115,9 @@ describe('file system configuration request generated correctly', () => {
     await goToFileSystemConfigurationStep();
     await clickManuallyConfigurePartitions();
     await goToReviewStep();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 
     const expectedRequest = {

src/test/Components/CreateImageWizardV2/steps/FirstBoot/Firstboot.test.tsx

@@ -13,6 +13,7 @@ import {
   clickRegisterLater,
   enterBlueprintName,
   interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
 } from '../../wizardTestUtils';
 
@@ -110,6 +111,9 @@ describe('First Boot step', () => {
       await openCodeEditor();
       await uploadFile();
       await goToReviewStep();
+      // informational modal pops up in the first test only as it's tied
+      // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+      await openAndDismissSaveAndBuildModal();
       const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 
       const expectedRequest = {

src/test/Components/CreateImageWizardV2/steps/ImageOutput/TargetEnvironment.test.tsx

@@ -332,19 +332,19 @@ describe('set target using query parameter', () => {
   test('image-installer (query parameter provided)', async () => {
     await renderCreateMode({ target: 'iso' });
     await clickToReview();
-    const targetExpandable = await screen.findByRole('button', {
-      name: /Target environments/,
-    });
+    const targetExpandable = await screen.findByTestId(
+      'target-environments-expandable'
+    );
     await userEvent.click(targetExpandable);
     await screen.findByText('Bare metal - Installer (.iso)');
   });
 
   test('guest-installer (query parameter provided)', async () => {
     await renderCreateMode({ target: 'qcow2' });
     await clickToReview();
-    const targetExpandable = await screen.findByRole('button', {
-      name: /Target environments/,
-    });
+    const targetExpandable = await screen.findByTestId(
+      'target-environments-expandable'
+    );
     await userEvent.click(targetExpandable);
     await screen.findByText('Virtualization - Guest image (.qcow2)');
   });

src/test/Components/CreateImageWizardV2/steps/Oscap/Oscap.test.tsx

@@ -14,6 +14,7 @@ import {
   enterBlueprintName,
   interceptBlueprintRequest,
   interceptEditBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
   renderEditMode,
 } from '../../wizardTestUtils';
@@ -123,6 +124,9 @@ describe('oscap', () => {
     await goToOscapStep();
     await selectProfile();
     await goToReviewStep();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
 
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 

src/test/Components/CreateImageWizardV2/steps/Packages/Packages.test.tsx

@@ -9,6 +9,7 @@ import {
   clickRegisterLater,
   enterBlueprintName,
   interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
 } from '../../wizardTestUtils';
 
@@ -108,6 +109,9 @@ describe('packages request generated correctly', () => {
     await searchForPackage();
     await selectFirstPackage();
     await goToReviewStep();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 
     const expectedRequest: CreateBlueprintRequest = {

src/test/Components/CreateImageWizardV2/steps/Registration/Registration.test.tsx

@@ -13,6 +13,7 @@ import {
   interceptBlueprintRequest,
   goToRegistrationStep,
   clickRegisterLater,
+  openAndDismissSaveAndBuildModal,
 } from '../../wizardTestUtils';
 
 jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
@@ -99,6 +100,9 @@ describe('registration request generated correctly', () => {
     await goToRegistrationStep();
     await selectActivationKey();
     await goToReviewStep();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 
     const expectedSubscription = {

src/test/Components/CreateImageWizardV2/steps/Repositories/Repositories.test.tsx

@@ -13,6 +13,7 @@ import {
   clickRegisterLater,
   enterBlueprintName,
   interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
 } from '../../wizardTestUtils';
 
@@ -129,6 +130,9 @@ describe('repositories request generated correctly', () => {
     await goToRepositoriesStep();
     await selectFirstRepository();
     await goToReviewStep();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 
     const expectedRequest: CreateBlueprintRequest = {

src/test/Components/CreateImageWizardV2/steps/Snapshot/Snapshot.test.tsx

@@ -13,6 +13,7 @@ import {
   clickRegisterLater,
   enterBlueprintName,
   interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
 } from '../../wizardTestUtils';
 
@@ -76,11 +77,7 @@ const updateDatePickerWithValue = async (date: string) => {
 };
 
 const clickContentDropdown = async () => {
-  await userEvent.click(
-    (
-      await screen.findAllByRole('button', { name: /Content/i })
-    )[1]
-  );
+  await userEvent.click(await screen.findByTestId('content-expandable'));
 };
 
 const getSnapshotMethodElement = async () =>
@@ -127,6 +124,10 @@ describe('repository snapshot tab - ', () => {
     // Check that the button is clickable (has 1 repo selected)
     expect(snapshotMethodElement).toHaveAttribute('aria-disabled', 'false');
 
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
+
     // Check the date was passed correctly to the blueprint
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
     blueprintRequest.image_requests[0].snapshot_date = '2024-04-22';

src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/AwsTarget.test.tsx

@@ -12,6 +12,7 @@ import {
   clickRegisterLater,
   enterBlueprintName,
   interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
 } from '../../../wizardTestUtils';
 
@@ -101,6 +102,9 @@ describe('aws image type request generated correctly', () => {
     await goToAwsStep();
     await selectSource();
     await goToReview();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 
     const expectedImageRequest: ImageRequest = {

src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/Azure/AzureTarget.test.tsx

@@ -12,6 +12,7 @@ import {
   clickRegisterLater,
   enterBlueprintName,
   interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
 } from '../../../wizardTestUtils';
 
@@ -128,6 +129,9 @@ describe('azure image type request generated correctly', () => {
     await selectSource();
     await selectResourceGroup();
     await goToReview();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 
     const expectedImageRequest: ImageRequest = {

src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/GCPTarget.test.tsx

@@ -15,6 +15,7 @@ import {
   enterBlueprintName,
   imageRequest,
   interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
 } from '../../wizardTestUtils';
 
@@ -97,6 +98,9 @@ describe('gcp image type request generated correctly', () => {
     await clickGCPTarget();
     await selectGoogleAccount('google-account');
     await goToReview();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 
     const expectedImageRequest = createGCPCloudImage('gcp', {

src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/TargetEnvironment.test.tsx

@@ -22,6 +22,7 @@ import {
   goToRegistrationStep,
   imageRequest,
   interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   renderCreateMode,
 } from '../../wizardTestUtils';
 
@@ -134,6 +135,9 @@ describe('distribution request generated correctly', () => {
     await renderCreateMode();
     await selectRhel8();
     await goToReviewStep();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
 
     const expectedRequest: CreateBlueprintRequest = {

src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx

@@ -108,6 +108,17 @@ export const enterBlueprintName = async (name: string = 'Red Velvet') => {
   await userEvent.type(blueprintName, name);
 };
 
+export const openAndDismissSaveAndBuildModal = async () => {
+  await userEvent.click(
+    await screen.findByRole('button', {
+      name: 'Create blueprint',
+    })
+  );
+  await userEvent.click(
+    await screen.findByTestId('close-button-saveandbuild-modal')
+  );
+};
+
 export const interceptBlueprintRequest = async (requestPathname: string) => {
   const receivedRequestPromise = spyOnRequest(requestPathname, 'POST');