diff --git a/src/Components/CreateImageWizardV2/CreateImageWizard.scss b/src/Components/CreateImageWizardV2/CreateImageWizard.scss index 88651edb6..16b0ff4ce 100644 --- a/src/Components/CreateImageWizardV2/CreateImageWizard.scss +++ b/src/Components/CreateImageWizardV2/CreateImageWizard.scss @@ -64,7 +64,3 @@ ul.pf-m-plain { padding-left: 0; margin-left: 0; } - -button.pf-v5-c-menu-toggle { - max-width: 100%; -} diff --git a/src/Components/CreateImageWizardV2/CreateImageWizard.tsx b/src/Components/CreateImageWizardV2/CreateImageWizard.tsx index a16e1fe21..571d52663 100644 --- a/src/Components/CreateImageWizardV2/CreateImageWizard.tsx +++ b/src/Components/CreateImageWizardV2/CreateImageWizard.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Button, @@ -9,58 +9,23 @@ import { } from '@patternfly/react-core'; import { useNavigate } from 'react-router-dom'; -import { - EnvironmentStateType, - filterEnvironment, - hasUserSelectedAtLeastOneEnv, - useGetAllowedTargets, -} from './steps/ImageOutput/Environment'; -import ImageOutputStep from './steps/ImageOutput/ImageOutput'; -import ReviewStep from './steps/Review/ReviewStep'; - -import { RHEL_9, X86_64 } from '../../constants'; +import { useAppDispatch } from '../../store/hooks'; import './CreateImageWizard.scss'; -import { ArchitectureItem, Distributions } from '../../store/imageBuilderApi'; +import { initializeWizard } from '../../store/wizardSlice'; import { resolveRelPath } from '../../Utilities/path'; import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader'; -/** - * @return true if the array in prevAllowedTargets is equivalent to the array - * allowedTargets, false otherwise - */ -const isIdenticalToPrev = ( - prevAllowedTargets: string[], - allowedTargets: string[] -) => { - let identicalToPrev = true; - if (allowedTargets.length === prevAllowedTargets.length) { - allowedTargets.forEach((elem) => { - if (!prevAllowedTargets.includes(elem)) { - identicalToPrev = false; - } - }); - } else { - identicalToPrev = false; - } - return identicalToPrev; -}; - type CustomWizardFooterPropType = { - isNextDisabled: boolean; + disableNext: boolean; }; -/** - * The custom wizard footer is only switching the order of the buttons compared - * to the default wizard footer from the PF5 library. - */ -const CustomWizardFooter = ({ isNextDisabled }: CustomWizardFooterPropType) => { + +export const CustomWizardFooter = ({ + disableNext: disableNext, +}: CustomWizardFooterPropType) => { const { goToNextStep, goToPrevStep, close } = useWizardContext(); return ( - - ); -}; - -const CentOSAcknowledgement = () => { - return ( - - CentOS Stream builds are intended for the development of future - versions of RHEL and are not supported for production workloads or - other use cases. - - } - > -

- Join the to learn about paid and no-cost RHEL - subscription options. -

- - ); -}; - -export default CentOSAcknowledgement; diff --git a/src/Components/CreateImageWizardV2/steps/ImageOutput/Environment.tsx b/src/Components/CreateImageWizardV2/steps/ImageOutput/Environment.tsx deleted file mode 100644 index 0d6c8e8df..000000000 --- a/src/Components/CreateImageWizardV2/steps/ImageOutput/Environment.tsx +++ /dev/null @@ -1,406 +0,0 @@ -import React, { Dispatch, SetStateAction } from 'react'; - -import { - Checkbox, - FormGroup, - Popover, - Radio, - Text, - TextContent, - TextVariants, - Tile, -} from '@patternfly/react-core'; -import { HelpIcon } from '@patternfly/react-icons'; - -import { - useGetArchitecturesQuery, - Distributions, - ArchitectureItem, -} from '../../../../store/imageBuilderApi'; -import { provisioningApi } from '../../../../store/provisioningApi'; -import { useGetEnvironment } from '../../../../Utilities/useGetEnvironment'; - -type useGetAllowedTargetsPropType = { - architecture: ArchitectureItem['arch']; - release: Distributions; -}; - -/** - * Contacts the backend to get a list of valid targets based on the user - * requirements (release & architecture) - * - * @return an array of strings which contains the names of the authorized - * targets. Alongside the array, a couple of flags indicate the status of the - * request. isFetching stays true while the data are in transit. isError is set - * to true if anything wrong happened. isSuccess is set to true otherwise. - * - * @param architecture the selected arch (x86_64 or aarch64) - * @param release the selected release (see RELEASES in constants) - */ -export const useGetAllowedTargets = ({ - architecture, - release, -}: useGetAllowedTargetsPropType) => { - const { data, isFetching, isSuccess, isError } = useGetArchitecturesQuery({ - distribution: release, - }); - - let image_types: string[] = []; - if (isSuccess && data) { - data.forEach((elem) => { - if (elem.arch === architecture) { - image_types = elem.image_types; - } - }); - } - - return { - data: image_types, - isFetching: isFetching, - isSuccess: isSuccess, - isError: isError, - }; -}; - -/** - * Type to represent the state of a target. - * A target can be selected and/or authorized. An authorized target means the - * target can be displayed to the user, selected means the user has selected - * the target. - */ -type TargetType = { - selected: boolean; - authorized: boolean; -}; - -/** - * Defines all the possible targets a user can build. - */ -export type EnvironmentStateType = { - aws: TargetType; - azure: TargetType; - gcp: TargetType; - oci: TargetType; - 'vsphere-ova': TargetType; - vsphere: TargetType; - 'guest-image': TargetType; - 'image-installer': TargetType; - wsl: TargetType; -}; - -/** - * Takes an environment, a list of allowedTargets and updates the authorized - * status of each targets in the environment accordingly. - * - * @param environment the environment to update - * @param allowedTargets the list of targets authorized to get built - * @return an updated environment - */ -export const filterEnvironment = ( - environment: EnvironmentStateType, - allowedTargets: string[] -) => { - const newEnv = { ...environment }; - Object.keys(environment).forEach((target) => { - newEnv[target as keyof EnvironmentStateType].authorized = - allowedTargets.includes(target); - }); - return newEnv; -}; - -/** - * @return true if at least one target has both its flags selected and - * authorized set to true - * @param env the environment to scan - */ -export const hasUserSelectedAtLeastOneEnv = ( - env: EnvironmentStateType -): boolean => { - let atLeastOne = false; - Object.values(env).forEach(({ selected, authorized }) => { - atLeastOne = atLeastOne || (selected && authorized); - }); - return atLeastOne; -}; - -type EnvironmentPropType = { - environment: EnvironmentStateType; - setEnvironment: Dispatch>; -}; - -/** - * Displays a component that allows the user to pick the target they want - * to build on. - */ -const Environment = ({ setEnvironment, environment }: EnvironmentPropType) => { - const prefetchSources = provisioningApi.usePrefetch('getSourceList'); - const { isBeta } = useGetEnvironment(); - - const handleSetEnvironment = (env: string, checked: boolean) => - setEnvironment((prevEnv) => { - const newEnv: EnvironmentStateType = { - ...prevEnv, - }; - newEnv[env as keyof EnvironmentStateType].selected = checked; - return newEnv; - }); - - // each item the user can select is depending on what's compatible with the - // architecture and the distribution they previously selected. That's why - // every sub parts are conditional to the `authorized` status of its - // corresponding key in the state. - return ( - - Public cloud} - data-testid="target-public" - > -
- {environment['aws'].authorized && ( - - } - onClick={() => - handleSetEnvironment('aws', !environment.aws.selected) - } - onMouseEnter={() => prefetchSources({ provider: 'aws' })} - isSelected={environment.aws.selected} - isStacked - isDisplayLarge - /> - )} - {environment['gcp'].authorized && ( - - } - onClick={() => - handleSetEnvironment('gcp', !environment.gcp.selected) - } - isSelected={environment.gcp.selected} - onMouseEnter={() => prefetchSources({ provider: 'gcp' })} - isStacked - isDisplayLarge - /> - )} - {environment['azure'].authorized && ( - - } - onClick={() => - handleSetEnvironment('azure', !environment.azure.selected) - } - onMouseEnter={() => prefetchSources({ provider: 'azure' })} - isSelected={environment.azure.selected} - isStacked - isDisplayLarge - /> - )} - {environment.oci.authorized && isBeta() && ( - - } - onClick={() => - handleSetEnvironment('oci', !environment.oci.selected) - } - isSelected={environment.oci.selected} - isStacked - isDisplayLarge - /> - )} -
- - {environment['vsphere'].authorized && ( - Private cloud} - className="pf-u-mt-sm" - data-testid="target-private" - > - { - handleSetEnvironment('vsphere-ova', checked); - handleSetEnvironment('vsphere', false); - }} - aria-label="VMware checkbox" - id="checkbox-vmware" - name="VMware" - data-testid="checkbox-vmware" - /> - - )} - {environment['vsphere'].authorized && ( - - {environment['vsphere-ova'].authorized && ( - - Open virtualization format (.ova) - - - An OVA file is a virtual appliance used by - virtualization platforms such as VMware vSphere. It is - a package that contains files used to describe a - virtual machine, which includes a VMDK image, OVF - descriptor file and a manifest file. - - - } - > - - - - } - onChange={(_event, checked) => { - handleSetEnvironment('vsphere-ova', checked); - handleSetEnvironment('vsphere', !checked); - }} - isChecked={environment['vsphere-ova'].selected} - isDisabled={ - !( - environment.vsphere.selected || - environment['vsphere-ova'].selected - ) - } - /> - )} - - Virtual disk (.vmdk) - - - A VMDK file is a virtual disk that stores the contents - of a virtual machine. This disk has to be imported into - vSphere using govc import.vmdk, use the OVA version when - using the vSphere UI. - - - } - > - - - - } - onChange={(_event, checked) => { - handleSetEnvironment('vsphere-ova', !checked); - handleSetEnvironment('vsphere', checked); - }} - isChecked={environment.vsphere.selected} - isDisabled={ - !( - environment.vsphere.selected || - environment['vsphere-ova'].selected - ) - } - /> - - )} - Other} - data-testid="target-other" - > - {environment['guest-image'].authorized && ( - - handleSetEnvironment('guest-image', checked) - } - aria-label="Virtualization guest image checkbox" - id="checkbox-guest-image" - name="Virtualization guest image" - data-testid="checkbox-guest-image" - /> - )} - {environment['image-installer'].authorized && ( - - handleSetEnvironment('image-installer', checked) - } - aria-label="Bare metal installer checkbox" - id="checkbox-image-installer" - name="Bare metal installer" - data-testid="checkbox-image-installer" - /> - )} - {environment['wsl'].authorized && isBeta() && ( - handleSetEnvironment('wsl', checked)} - aria-label="windows subsystem for linux checkbox" - id="checkbox-wsl" - name="WSL" - data-testid="checkbox-wsl" - /> - )} - - - ); -}; - -export default Environment; diff --git a/src/Components/CreateImageWizardV2/steps/ImageOutput/ImageOutput.tsx b/src/Components/CreateImageWizardV2/steps/ImageOutput/ImageOutput.tsx deleted file mode 100644 index d40ee0c7a..000000000 --- a/src/Components/CreateImageWizardV2/steps/ImageOutput/ImageOutput.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React, { Dispatch, SetStateAction } from 'react'; - -import { - Text, - Alert, - Bullseye, - Form, - Spinner, - Title, -} from '@patternfly/react-core'; - -import ArchSelect from './ArchSelect'; -import CentOSAcknowledgement from './CentOSAcknowledgement'; -import Environment, { EnvironmentStateType } from './Environment'; -import ReleaseSelect from './ReleaseSelect'; - -import { - ArchitectureItem, - Distributions, -} from '../../../../store/imageBuilderApi'; -import DocumentationButton from '../../../sharedComponents/DocumentationButton'; - -type ImageOutputPropTypes = { - release: Distributions; - setRelease: Dispatch>; - arch: ArchitectureItem['arch']; - setArch: Dispatch>; - environment: EnvironmentStateType; - setEnvironment: Dispatch>; - isFetching: boolean; - isError: boolean; - isSuccess: boolean; -}; - -/** - * Manages the form for the image output step by providing the user with a - * choice for: - * - a distribution - * - a release - * - a set of environments - */ -const ImageOutputStep = ({ - release, - setRelease, - arch, - setArch, - setEnvironment, - environment, - isFetching, - isError, - isSuccess, -}: ImageOutputPropTypes) => { - return ( -
- Image output - - Image builder allows you to create a custom image and push it to target - environments. -
- - - - - {release.match('centos-*') && } - {isFetching && ( - - - - )} - {isError && ( - - API cannot be reached, try again later. - - )} - {isSuccess && !isFetching && ( - - )} - - ); -}; - -export default ImageOutputStep; diff --git a/src/Components/CreateImageWizardV2/steps/ImageOutput/ReleaseSelect.tsx b/src/Components/CreateImageWizardV2/steps/ImageOutput/ReleaseSelect.tsx deleted file mode 100644 index bc37e17ab..000000000 --- a/src/Components/CreateImageWizardV2/steps/ImageOutput/ReleaseSelect.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import React, { - Dispatch, - ReactElement, - SetStateAction, - useRef, - useState, -} from 'react'; - -import { - Select, - SelectOption, - SelectList, - MenuToggle, - FormGroup, -} from '@patternfly/react-core'; - -import { RELEASES } from '../../../../constants'; -import { Distributions } from '../../../../store/imageBuilderApi'; -import isRhel from '../../../../Utilities/isRhel'; - -type ReleaseSelectType = { - setRelease: Dispatch>; - release: Distributions; -}; - -/** - * Allows the user to choose the release they want to build. - * Follows the PF5 pattern: https://www.patternfly.org/components/menus/select#view-more - */ -const ReleaseSelect = ({ setRelease, release }: ReleaseSelectType) => { - // By default the component doesn't show the Centos releases and only the RHEL - // ones. The user has the option to click on a button to make them appear. - const [showDevelopmentOptions, setShowDevelopmentOptions] = useState(false); - const releaseOptions = () => { - const options: ReactElement[] = []; - const filteredRhel = new Map(); - RELEASES.forEach((value, key) => { - // Only show non-RHEL distros if expanded - if (showDevelopmentOptions || isRhel(key)) { - filteredRhel.set(key, value); - } - }); - filteredRhel.forEach((value, key) => { - if (value && key) { - options.push( - - {RELEASES.get(key)} - - ); - } - }); - - return options; - }; - - const [isOpen, setIsOpen] = useState(false); - - const onToggleClick = () => { - setIsOpen(!isOpen); - }; - - const viewMoreRef = useRef(null); - const toggleRef = useRef(null); - const onSelect = ( - _event: React.MouseEvent | undefined, - value: string | number | undefined - ) => { - if (value !== 'loader') { - if (typeof value === 'string') { - setRelease(value as Distributions); - } - setIsOpen(false); - toggleRef?.current?.focus(); // Only focus the toggle when a non-loader option is selected - } - }; - - const toggle = ( - - {RELEASES.get(release)} - - ); - - return ( - - - - ); -}; - -export default ReleaseSelect; diff --git a/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx b/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx deleted file mode 100644 index 51864d9e7..000000000 --- a/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { useState } from 'react'; - -import { ExpandableSection, Form, Title } from '@patternfly/react-core'; - -import { ImageOutputList } from './imageOutput'; - -import { - ArchitectureItem, - Distributions, -} from '../../../../store/imageBuilderApi'; - -type ReviewStepPropTypes = { - release: Distributions; - arch: ArchitectureItem['arch']; -}; - -const ReviewStep = ({ release, arch }: ReviewStepPropTypes) => { - const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(false); - - const onToggleImageOutput = (isExpandedImageOutput: boolean) => - setIsExpandedImageOutput(isExpandedImageOutput); - return ( - <> -
- Review - - onToggleImageOutput(isExpandedImageOutput) - } - isExpanded={isExpandedImageOutput} - isIndented - data-testid="image-output-expandable" - > - - -
- - ); -}; - -export default ReviewStep; diff --git a/src/Components/CreateImageWizardV2/steps/Review/imageOutput.tsx b/src/Components/CreateImageWizardV2/steps/Review/imageOutput.tsx deleted file mode 100644 index d9d24bedd..000000000 --- a/src/Components/CreateImageWizardV2/steps/Review/imageOutput.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; - -import { - TextContent, - TextList, - TextListItem, - TextListVariants, - TextListItemVariants, -} from '@patternfly/react-core'; - -import { RELEASES } from '../../../../constants'; -import { - ArchitectureItem, - Distributions, -} from '../../../../store/imageBuilderApi'; - -type ImageOutputListPropTypes = { - release: Distributions; - arch: ArchitectureItem['arch']; -}; - -export const ImageOutputList = ({ - release, - arch, -}: ImageOutputListPropTypes) => { - return ( - - - - Release - - - {RELEASES.get(release)} - - - Architecture - - {arch} - -
- - ); -}; diff --git a/src/store/index.ts b/src/store/index.ts index 59ea711b5..05cb1f7cb 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -7,6 +7,7 @@ import { edgeApi } from './edgeApi'; import { imageBuilderApi } from './enhancedImageBuilderApi'; import { provisioningApi } from './provisioningApi'; import { rhsmApi } from './rhsmApi'; +import wizardSlice from './wizardSlice'; export const reducer = { [contentSourcesApi.reducerPath]: contentSourcesApi.reducer, @@ -15,6 +16,7 @@ export const reducer = { [rhsmApi.reducerPath]: rhsmApi.reducer, [provisioningApi.reducerPath]: provisioningApi.reducer, notifications: notificationsReducer, + wizard: wizardSlice, }; export const middleware = (getDefaultMiddleware: Function) => diff --git a/src/store/wizardSlice.ts b/src/store/wizardSlice.ts new file mode 100644 index 000000000..713191d19 --- /dev/null +++ b/src/store/wizardSlice.ts @@ -0,0 +1,16 @@ +import { createSlice } from '@reduxjs/toolkit'; + +type wizardState = {}; + +const initialState: wizardState = {}; + +export const wizardSlice = createSlice({ + name: 'wizard', + initialState, + reducers: { + initializeWizard: () => initialState, + }, +}); + +export const { initializeWizard } = wizardSlice.actions; +export default wizardSlice.reducer; diff --git a/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx b/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx index 99891961a..197675b97 100644 --- a/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx +++ b/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx @@ -1,17 +1,31 @@ import React from 'react'; -import '@testing-library/jest-dom'; +// import '@testing-library/jest-dom'; -import { screen, within } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { + screen, + // waitFor, + // waitForElementToBeRemoved, + // within, +} from '@testing-library/react'; +// import userEvent from '@testing-library/user-event'; +// import { rest } from 'msw'; import CreateImageWizard from '../../../Components/CreateImageWizardV2/CreateImageWizard'; import ShareImageModal from '../../../Components/ShareImageModal/ShareImageModal'; -import { server } from '../../mocks/server.js'; +// import { +// IMAGE_BUILDER_API, +// PROVISIONING_API, +// RHEL_8, +// RHSM_API, +// } from '../../../constants.js'; +// import { server } from '../../mocks/server.js'; import { - clickNext, + // clickBack, + // clickNext, + // getNextButton, renderCustomRoutesWithReduxRouter, - verifyCancelButton, + // verifyCancelButton, } from '../../testUtils'; const routes = [ @@ -29,41 +43,72 @@ const routes = [ }, ]; -jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ - useChrome: () => ({ - auth: { - getUser: () => { - return { - identity: { - internal: { - org_id: 5, - }, - }, - }; - }, - }, - isBeta: () => true, - isProd: () => true, - getEnvironment: () => 'prod', - }), -})); - -jest.mock('@unleash/proxy-client-react', () => ({ - useUnleashContext: () => jest.fn(), - useFlag: jest.fn((flag) => - flag === 'image-builder.enable-content-sources' ? true : false - ), -})); - -beforeAll(() => { - // scrollTo is not defined in jsdom - window.HTMLElement.prototype.scrollTo = function () {}; -}); +// let router = undefined; -afterEach(() => { - jest.clearAllMocks(); - server.resetHandlers(); -}); +// jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ +// useChrome: () => ({ +// auth: { +// getUser: () => { +// return { +// identity: { +// internal: { +// org_id: 5, +// }, +// }, +// }; +// }, +// }, +// isBeta: () => false, +// isProd: () => true, +// getEnvironment: () => 'prod', +// }), +// })); + +// jest.mock('@unleash/proxy-client-react', () => ({ +// useUnleashContext: () => jest.fn(), +// useFlag: jest.fn((flag) => +// flag === 'image-builder.enable-content-sources' ? true : false +// ), +// })); + +// const searchForAvailablePackages = async (searchbox, searchTerm) => { +// const user = userEvent.setup(); +// await user.type(searchbox, searchTerm); +// await user.click( +// await screen.findByRole('button', { +// name: /search button for available packages/i, +// }) +// ); +// }; + +// const switchToAWSManual = async () => { +// const user = userEvent.setup(); +// const manualRadio = screen.getByRole('radio', { +// name: /manually enter an account id\./i, +// }); +// await user.click(manualRadio); +// return manualRadio; +// }; + +// const getSourceDropdown = async () => { +// const sourceDropdown = screen.getByRole('textbox', { +// name: /select source/i, +// }); +// await waitFor(() => expect(sourceDropdown).toBeEnabled()); + +// return sourceDropdown; +// }; + +// beforeAll(() => { +// // scrollTo is not defined in jsdom +// window.HTMLElement.prototype.scrollTo = function () {}; +// }); + +// afterEach(() => { +// jest.clearAllMocks(); +// router = undefined; +// server.resetHandlers(); +// }); describe('Create Image Wizard', () => { test('renders component', () => { @@ -71,75 +116,1486 @@ describe('Create Image Wizard', () => { // check heading screen.getByRole('heading', { name: /Image Builder/ }); - screen.getByRole('button', { name: 'Image output' }); + // screen.getByRole('button', { name: 'Image output' }); + // screen.getByRole('button', { name: 'Register' }); + // screen.getByRole('button', { name: 'File system configuration' }); + // screen.getByRole('button', { name: 'Content' }); + // screen.getByRole('button', { name: 'Additional Red Hat packages' }); + // screen.getByRole('button', { name: 'Custom repositories' }); + // screen.getByRole('button', { name: 'Details' }); + // screen.getByRole('button', { name: 'Review' }); }); }); -describe('Step Image output', () => { - test('clicking Next loads the review step with correct information about the image output', async () => { - const user = userEvent.setup(); - await renderCustomRoutesWithReduxRouter('imagewizard', {}, routes); +// describe('Step Image output', () => { +// const user = userEvent.setup(); +// const setUp = async () => { +// ({ router } = await renderCustomRoutesWithReduxRouter( +// 'imagewizard', +// {}, +// routes +// )); - // select aws as upload destination - await user.click(await screen.findByTestId('upload-aws')); - await screen.findByRole('heading', { name: 'Image output' }); +// // select aws as upload destination +// await user.click(await screen.findByTestId('upload-aws')); - await clickNext(); +// await screen.findByRole('heading', { name: 'Image output' }); +// }; - await screen.findByRole('heading', { name: 'Review' }); - const view = screen.getByTestId('image-output-expandable'); - await user.click(await within(view).findByText(/image output/i)); - expect(await screen.findByText(/x86_64/i)).not.toBeNaN(); - expect( - await screen.findByText(/red hat enterprise linux \(rhel\) 9/i) - ).not.toBeNaN(); - }); +// test('clicking Next loads Upload to AWS', async () => { +// await setUp(); - test('selecting rhel8 and aarch64 shows accordingly in the review step', async () => { - const user = userEvent.setup(); - await renderCustomRoutesWithReduxRouter('imagewizard', {}, routes); - - // select rhel8 - const releaseMenu = screen.getAllByRole('button', { - name: /Red Hat Enterprise Linux \(RHEL\) 9/, - })[0]; - await user.click(releaseMenu); - await user.click( - await screen.findByRole('option', { - name: /Red Hat Enterprise Linux \(RHEL\) 8/, - }) - ); - - // Change to aarch - await user.selectOptions( - await screen.findByRole('combobox', { - name: /architecture/i, - }), - 'aarch64' - ); - - // select aws as upload destination - await user.click(await screen.findByTestId('upload-aws')); - - await clickNext(); - - await screen.findByRole('heading', { name: 'Review' }); - const view = screen.getByTestId('image-output-expandable'); - await user.click(await within(view).findByText(/image output/i)); - expect(await screen.findByText(/aarch64/i)).not.toBeNaN(); - expect( - await screen.findByText(/red hat enterprise linux \(rhel\) 8/i) - ).not.toBeNaN(); - }); +// await clickNext(); - test('clicking Cancel loads landing page', async () => { - const { router } = await renderCustomRoutesWithReduxRouter( - 'imagewizard', - {}, - routes - ); - await clickNext(); +// await switchToAWSManual(); +// await screen.findByText('AWS account ID'); +// }); - await verifyCancelButton(router); - }); -}); +// test('clicking Cancel loads landing page', async () => { +// await setUp(); +// await clickNext(); + +// await verifyCancelButton(router); +// }); + +// test('target environment is required', async () => { +// await setUp(); + +// const destination = screen.getByTestId('target-select'); +// const required = within(destination).getByText('*'); +// expect(destination).toBeEnabled(); +// expect(destination).toContainElement(required); +// }); + +// test('selecting and deselecting a tile disables the next button', async () => { +// await setUp(); +// const nextButton = await getNextButton(); + +// const awsTile = screen.getByTestId('upload-aws'); +// // this has already been clicked once in the setup function +// await user.click(awsTile); // deselect + +// const googleTile = screen.getByTestId('upload-google'); +// await user.click(googleTile); // select +// await user.click(googleTile); // deselect + +// const azureTile = screen.getByTestId('upload-azure'); +// await user.click(azureTile); // select +// await user.click(azureTile); // deselect + +// await waitFor(() => expect(nextButton).toBeDisabled()); +// }); + +// test('expect only RHEL releases before expansion', async () => { +// await setUp(); + +// const releaseMenu = screen.getAllByRole('button', { +// name: /options menu/i, +// })[0]; +// await user.click(releaseMenu); + +// await screen.findByRole('option', { +// name: /Red Hat Enterprise Linux \(RHEL\) 8/, +// }); +// await screen.findByRole('option', { +// name: /Red Hat Enterprise Linux \(RHEL\) 9/, +// }); +// await screen.findByRole('button', { +// name: 'Show options for further development of RHEL', +// }); + +// await user.click(releaseMenu); +// }); + +// test('expect all releases after expansion', async () => { +// await setUp(); + +// const releaseMenu = screen.getAllByRole('button', { +// name: /options menu/i, +// })[0]; +// await user.click(releaseMenu); + +// const showOptionsButton = screen.getByRole('button', { +// name: 'Show options for further development of RHEL', +// }); +// await user.click(showOptionsButton); + +// await screen.findByRole('option', { +// name: /Red Hat Enterprise Linux \(RHEL\) 8/, +// }); +// await screen.findByRole('option', { +// name: /Red Hat Enterprise Linux \(RHEL\) 9/, +// }); +// await screen.findByRole('option', { +// name: 'CentOS Stream 8', +// }); +// await screen.findByRole('option', { +// name: 'CentOS Stream 9', +// }); + +// expect(showOptionsButton).not.toBeInTheDocument(); + +// await user.click(releaseMenu); +// }); + +// test('release lifecycle chart appears only when RHEL 8 is chosen', async () => { +// await setUp(); + +// const releaseMenu = screen.getAllByRole('button', { +// name: /options menu/i, +// })[0]; +// await user.click(releaseMenu); + +// await user.click( +// await screen.findByRole('option', { +// name: /Red Hat Enterprise Linux \(RHEL\) 9/, +// }) +// ); +// expect( +// screen.queryByTestId('release-lifecycle-chart') +// ).not.toBeInTheDocument(); + +// await user.click(releaseMenu); + +// await user.click( +// await screen.findByRole('option', { +// name: /Red Hat Enterprise Linux \(RHEL\) 8/, +// }) +// ); +// expect( +// await screen.findByTestId('release-lifecycle-chart') +// ).toBeInTheDocument(); +// }); + +// test('CentOS acknowledgement appears', async () => { +// await setUp(); + +// const releaseMenu = screen.getAllByRole('button', { +// name: /options menu/i, +// })[0]; +// await user.click(releaseMenu); + +// const showOptionsButton = screen.getByRole('button', { +// name: 'Show options for further development of RHEL', +// }); +// await user.click(showOptionsButton); + +// const centOSButton = screen.getByRole('option', { +// name: 'CentOS Stream 9', +// }); +// await user.click(centOSButton); + +// await screen.findByText( +// 'CentOS Stream builds are intended for the development of future versions of RHEL and are not supported for production workloads or other use cases.' +// ); +// }); +// }); + +// describe('Step Upload to AWS', () => { +// const user = userEvent.setup(); +// const setUp = async () => { +// ({ router } = await renderCustomRoutesWithReduxRouter( +// 'imagewizard', +// {}, +// routes +// )); + +// // select aws as upload destination +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-aws')) +// ); + +// await clickNext(); + +// await screen.findByRole('heading', { +// name: 'Target environment - Amazon Web Services', +// }); +// }; + +// test('clicking Next loads Registration', async () => { +// await setUp(); + +// await switchToAWSManual(); +// await user.type( +// await screen.findByTestId('aws-account-id'), +// '012345678901' +// ); +// await clickNext(); + +// await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); + +// screen.getByText('Automatically register and enable advanced capabilities'); +// }); + +// test('clicking Back loads Release', async () => { +// await setUp(); + +// await clickBack(); + +// screen.getByTestId('upload-aws'); +// }); + +// test('clicking Cancel loads landing page', async () => { +// await setUp(); + +// await verifyCancelButton(router); +// }); + +// test('component renders error state correctly', async () => { +// server.use( +// rest.get(`${PROVISIONING_API}/sources`, (req, res, ctx) => +// res(ctx.status(500)) +// ) +// ); +// await setUp(); +// await screen.findByText( +// /sources cannot be reached, try again later or enter an aws account id manually\./i +// ); +// }); + +// test('validation works', async () => { +// await setUp(); +// const nextButton = await getNextButton(); + +// expect(nextButton).toHaveClass('pf-m-disabled'); + +// await user.click( +// screen.getByRole('radio', { name: /manually enter an account id\./i }) +// ); + +// expect(nextButton).toHaveClass('pf-m-disabled'); + +// const awsAccId = screen.getByTestId('aws-account-id'); +// expect(awsAccId).toHaveValue(''); +// expect(awsAccId).toBeEnabled(); +// await user.type(awsAccId, '012345678901'); + +// expect(nextButton).not.toHaveClass('pf-m-disabled'); + +// await user.click( +// screen.getByRole('radio', { +// name: /use an account configured from sources\./i, +// }) +// ); + +// await waitFor(() => expect(nextButton).toHaveClass('pf-m-disabled')); + +// const sourceDropdown = await getSourceDropdown(); +// await user.click(sourceDropdown); + +// const source = await screen.findByRole('option', { +// name: /my_source/i, +// }); +// await user.click(source); + +// await waitFor(() => expect(nextButton).not.toHaveClass('pf-m-disabled')); +// }); + +// test('compose request share_with_sources field is correct', async () => { +// await setUp(); + +// const sourceDropdown = await getSourceDropdown(); +// await user.click(sourceDropdown); + +// const source = await screen.findByRole('option', { +// name: /my_source/i, +// }); +// await user.click(source); + +// await clickNext(); + +// // registration +// await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); + +// const registerLaterRadio = screen.getByLabelText('Register later'); +// await user.click(registerLaterRadio); + +// // click through to review step +// await clickNext(); +// await clickNext(); +// await clickNext(); +// await clickNext(); +// await clickNext(); + +// await user.click(screen.getByRole('button', { name: /Create/ })); + +// // returns back to the landing page +// await waitFor(() => +// expect(router.state.location.pathname).toBe('/insights/image-builder') +// ); +// // set test timeout of 10 seconds +// }, 10000); +// }); + +// describe('Step Upload to Google', () => { +// const user = userEvent.setup(); +// const setUp = async () => { +// ({ router } = await renderCustomRoutesWithReduxRouter( +// 'imagewizard', +// {}, +// routes +// )); + +// // select gcp as upload destination +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-google')) +// ); + +// await clickNext(); + +// await screen.findByRole('heading', { +// name: 'Target environment - Google Cloud Platform', +// }); +// }; + +// test('clicking Next loads Registration', async () => { +// await setUp(); + +// const shareRadioButton = await screen.findByRole('radio', { +// name: /share image with a google account/i, +// }); +// await user.click(shareRadioButton); + +// const googleEmailInput = await screen.findByTestId('input-google-email'); + +// await user.type(googleEmailInput, 'test@test.com'); +// await clickNext(); + +// await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); + +// screen.getByText('Automatically register and enable advanced capabilities'); +// }); + +// test('clicking Back loads Release', async () => { +// await setUp(); + +// await clickBack(); + +// screen.getByTestId('upload-google'); +// }); + +// test('clicking Cancel loads landing page', async () => { +// await setUp(); + +// await verifyCancelButton(router); +// }); + +// test('the google account id field is shown and required', async () => { +// await setUp(); + +// await waitFor(() => { +// screen.getByTestId('account-sharing'); +// }); + +// await user.click(screen.getByTestId('account-sharing')); +// const accessKeyId = await screen.findByTestId('input-google-email'); +// expect(accessKeyId).toHaveValue(''); +// expect(accessKeyId).toBeEnabled(); +// }); + +// test('the google email field must be a valid email', async () => { +// await setUp(); + +// await user.click(screen.getByTestId('account-sharing')); +// await user.type(screen.getByTestId('input-google-email'), 'a'); +// expect(await getNextButton()).toHaveClass('pf-m-disabled'); +// expect(await getNextButton()).toBeDisabled(); +// await user.type(screen.getByTestId('input-google-email'), 'test@test.com'); +// expect(await getNextButton()).not.toHaveClass('pf-m-disabled'); +// expect(await getNextButton()).toBeEnabled(); +// }); +// }); + +// describe('Step Registration', () => { +// const user = userEvent.setup(); +// const setUp = async () => { +// ({ router } = await renderCustomRoutesWithReduxRouter( +// 'imagewizard', +// {}, +// routes +// )); + +// // select aws as upload destination +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-aws')) +// ); + +// await clickNext(); +// await user.click( +// screen.getByRole('radio', { name: /manually enter an account id\./i }) +// ); +// await user.type(screen.getByTestId('aws-account-id'), '012345678901'); +// await clickNext(); + +// await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); +// }; + +// test('clicking Next loads file system configuration', async () => { +// await setUp(); + +// const registerLaterRadio = screen.getByTestId('registration-radio-later'); +// await user.click(registerLaterRadio); + +// await clickNext(); + +// await screen.findByRole('heading', { +// name: 'File system configuration', +// }); +// }); + +// test('clicking Back loads Upload to AWS', async () => { +// await setUp(); + +// await clickBack(); + +// await user.click( +// screen.getByRole('radio', { name: /manually enter an account id\./i }) +// ); +// screen.getByText('AWS account ID'); +// }); + +// test('clicking Cancel loads landing page', async () => { +// await setUp(); + +// await verifyCancelButton(router); +// }); + +// test('activation key dropdown empty state', async () => { +// server.use( +// rest.get(`${RHSM_API}/activation_keys`, (req, res, ctx) => +// res(ctx.status(200), ctx.json({ body: [] })) +// ) +// ); +// await setUp(); +// const activationKeyDropdown = await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); +// await user.click(activationKeyDropdown); +// await screen.findByText('No activation keys found'); +// }); + +// test('should allow registering with rhc', async () => { +// await setUp(); + +// const activationKeyDropdown = await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); +// await user.click(activationKeyDropdown); +// const activationKey = await screen.findByRole('option', { +// name: 'name0', +// }); +// await user.click(activationKey); +// screen.getByDisplayValue('name0'); + +// await clickNext(); +// await clickNext(); +// await clickNext(); +// await clickNext(); +// await clickNext(); +// const review = screen.getByTestId('review-registration'); +// expect(review).toHaveTextContent( +// 'Register with Red Hat Subscription Manager (RHSM)' +// ); +// expect(review).toHaveTextContent('Connect to Red Hat Insights'); +// expect(review).toHaveTextContent( +// 'Use remote host configuration (rhc) utility' +// ); +// screen.getAllByText('012345678901'); +// }); + +// test('should allow registering without rhc', async () => { +// await setUp(); + +// await user.click(screen.getByTestId('registration-additional-options')); +// await user.click(screen.getByTestId('registration-checkbox-rhc')); + +// // going back and forward when rhc isn't selected should keep additional options shown +// await clickBack(); +// await screen.findByTestId('aws-account-id'); +// await clickNext(); +// screen.getByTestId('registration-checkbox-insights'); +// screen.getByTestId('registration-checkbox-rhc'); + +// const activationKeyDropdown = await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); +// await user.click(activationKeyDropdown); +// const activationKey = await screen.findByRole('option', { +// name: 'name0', +// }); +// await user.click(activationKey); +// screen.getByDisplayValue('name0'); + +// await clickNext(); +// await clickNext(); +// await clickNext(); +// await clickNext(); +// await clickNext(); +// const review = screen.getByTestId('review-registration'); +// expect(review).toHaveTextContent( +// 'Register with Red Hat Subscription Manager (RHSM)' +// ); +// expect(review).toHaveTextContent('Connect to Red Hat Insights'); +// screen.getAllByText('012345678901'); +// expect(review).not.toHaveTextContent( +// 'Use remote host configuration (rhc) utility' +// ); +// }); + +// test('should allow registering without insights or rhc', async () => { +// await setUp(); + +// await user.click(screen.getByTestId('registration-additional-options')); +// await user.click(screen.getByTestId('registration-checkbox-insights')); + +// // going back and forward when neither rhc or insights is selected should keep additional options shown +// await clickBack(); +// await screen.findByTestId('aws-account-id'); +// await clickNext(); +// screen.getByTestId('registration-checkbox-insights'); +// screen.getByTestId('registration-checkbox-rhc'); + +// const activationKeyDropdown = await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); +// await user.click(activationKeyDropdown); +// const activationKey = await screen.findByRole('option', { +// name: 'name0', +// }); +// await user.click(activationKey); +// screen.getByDisplayValue('name0'); + +// await clickNext(); +// await clickNext(); +// await clickNext(); +// await clickNext(); +// await clickNext(); +// const review = screen.getByTestId('review-registration'); +// expect(review).toHaveTextContent( +// 'Register with Red Hat Subscription Manager (RHSM)' +// ); +// screen.getAllByText('012345678901'); +// expect(review).not.toHaveTextContent('Connect to Red Hat Insights'); +// expect(review).not.toHaveTextContent( +// 'Use remote host configuration (rhc) utility' +// ); +// }); + +// test('should hide input fields when clicking Register the system later', async () => { +// await setUp(); +// const removeKeyInformation = waitForElementToBeRemoved(() => [ +// screen.getByTestId('subscription-activation-key'), +// ]); + +// // click the later radio button which should remove any input fields +// await user.click(screen.getByTestId('registration-radio-later')); + +// await removeKeyInformation; + +// await clickNext(); +// await clickNext(); +// await clickNext(); +// await clickNext(); +// await clickNext(); +// screen.getByText('Register the system later'); +// }); + +// test('registering with rhc implies registering with insights', async () => { +// await setUp(); +// await user.click(screen.getByTestId('registration-additional-options')); + +// await user.click(screen.getByTestId('registration-checkbox-insights')); +// expect(screen.getByTestId('registration-checkbox-rhc')).not.toBeChecked(); + +// await user.click(screen.getByTestId('registration-checkbox-rhc')); +// expect(screen.getByTestId('registration-checkbox-insights')).toBeChecked(); +// }); +// }); + +// describe('Step File system configuration', () => { +// const user = userEvent.setup(); +// const setUp = async () => { +// ({ router } = await renderCustomRoutesWithReduxRouter( +// 'imagewizard', +// {}, +// routes +// )); + +// // select aws as upload destination +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-aws')) +// ); +// await clickNext(); + +// // aws step +// await switchToAWSManual(); +// await user.type( +// await screen.findByTestId('aws-account-id'), +// '012345678901' +// ); +// await clickNext(); +// // skip registration +// await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); + +// const registerLaterRadio = screen.getByTestId('registration-radio-later'); +// await user.click(registerLaterRadio); +// await clickNext(); +// }; + +// test('Error validation occurs upon clicking next button', async () => { +// await setUp(); + +// const manuallyConfigurePartitions = screen.getByText( +// /manually configure partitions/i +// ); +// await user.click(manuallyConfigurePartitions); + +// const addPartition = await screen.findByTestId('file-system-add-partition'); + +// // Create duplicate partitions +// await user.click(addPartition); +// await user.click(addPartition); + +// expect(await getNextButton()).toBeEnabled(); + +// // Clicking next causes errors to appear +// await clickNext(); + +// const mountPointWarning = screen.getByRole('heading', { +// name: /danger alert: duplicate mount points: all mount points must be unique\. remove the duplicate or choose a new mount point\./i, +// hidden: true, +// }); + +// const mountPointAlerts = screen.getAllByRole('heading', { +// name: /danger alert: duplicate mount point\./i, +// }); + +// const tbody = screen.getByTestId('file-system-configuration-tbody'); +// const rows = within(tbody).getAllByRole('row'); +// expect(rows).toHaveLength(3); + +// // Change mountpoint of final row to /var, resolving errors +// const mountPointOptions = within(rows[2]).getAllByRole('button', { +// name: 'Options menu', +// })[0]; +// await user.click(mountPointOptions); +// const varButton = await within(rows[2]).findByRole('option', { +// name: '/var', +// }); +// await user.click(varButton); + +// await waitFor(() => expect(mountPointWarning).not.toBeInTheDocument()); +// await waitFor(() => expect(mountPointAlerts[0]).not.toBeInTheDocument()); +// await waitFor(() => expect(mountPointAlerts[1]).not.toBeInTheDocument()); +// expect(await getNextButton()).toBeEnabled(); +// }); +// }); + +// describe('Step Details', () => { +// const user = userEvent.setup(); +// const setUp = async () => { +// ({ router } = await renderCustomRoutesWithReduxRouter( +// 'imagewizard', +// {}, +// routes +// )); + +// // select aws as upload destination +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-aws')) +// ); +// await clickNext(); + +// // aws step +// await switchToAWSManual(); +// await user.type( +// await screen.findByTestId('aws-account-id'), +// '012345678901' +// ); +// await clickNext(); +// // skip registration +// await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); + +// const registerLaterRadio = screen.getByTestId('registration-radio-later'); +// await user.click(registerLaterRadio); +// await clickNext(); + +// // skip fsc +// await clickNext(); +// // skip packages +// await clickNext(); +// // skip repositories +// await clickNext(); +// }; + +// test('image name invalid for more than 63 chars', async () => { +// await setUp(); + +// // Enter image name +// const nameInput = screen.getByRole('textbox', { +// name: 'Image Name', +// }); +// // 64 character name +// const invalidName = 'a'.repeat(64); +// await user.type(nameInput, invalidName); +// expect(await getNextButton()).toHaveClass('pf-m-disabled'); +// expect(await getNextButton()).toBeDisabled(); +// await user.clear(nameInput); + +// await user.type(nameInput, 'valid-name'); +// expect(await getNextButton()).not.toHaveClass('pf-m-disabled'); +// expect(await getNextButton()).toBeEnabled(); + +// // Enter description image +// const descriptionInput = screen.getByRole('textbox', { +// name: /description/i, +// }); + +// const invalidDescription = 'a'.repeat(251); +// await user.type(descriptionInput, invalidDescription); + +// expect(await getNextButton()).toHaveClass('pf-m-disabled'); +// expect(await getNextButton()).toBeDisabled(); +// await user.clear(descriptionInput); +// await user.type(descriptionInput, 'valid-description'); + +// expect(await getNextButton()).not.toHaveClass('pf-m-disabled'); +// expect(await getNextButton()).toBeEnabled(); +// }); +// }); + +// describe('Step Review', () => { +// const user = userEvent.setup(); +// const setUp = async () => { +// ({ router } = await renderCustomRoutesWithReduxRouter( +// 'imagewizard', +// {}, +// routes +// )); + +// // select aws as upload destination +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-aws')) +// ); +// await clickNext(); + +// // aws step +// await switchToAWSManual(); +// await user.type( +// await screen.findByTestId('aws-account-id'), +// '012345678901' +// ); +// await clickNext(); + +// await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); + +// // skip registration +// const registerLaterRadio = screen.getByTestId('registration-radio-later'); +// await user.click(registerLaterRadio); + +// await clickNext(); +// // skip fsc +// await clickNext(); +// // skip packages +// await clickNext(); +// // skip repositories +// await clickNext(); +// // skip name +// await clickNext(); +// }; + +// const setUpCentOS = async () => { +// ({ router } = renderCustomRoutesWithReduxRouter('imagewizard', {}, routes)); + +// const releaseMenu = screen.getAllByRole('button', { +// name: /options menu/i, +// })[0]; +// await user.click(releaseMenu); + +// const showOptionsButton = screen.getByRole('button', { +// name: 'Show options for further development of RHEL', +// }); +// await user.click(showOptionsButton); + +// const centos = screen.getByRole('option', { +// name: 'CentOS Stream 8', +// }); +// await user.click(centos); + +// // select aws as upload destination +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-aws')) +// ); +// await clickNext(); + +// // aws step +// await switchToAWSManual(); +// await user.type( +// await screen.findByTestId('aws-account-id'), +// '012345678901' +// ); +// await clickNext(); +// // skip fsc +// await clickNext(); +// // skip packages +// await clickNext(); +// // skip repositories +// await clickNext(); +// // skip name +// await clickNext(); +// }; + +// test('has 3 buttons', async () => { +// await setUp(); + +// screen.getByRole('button', { name: /Create/ }); +// screen.getByRole('button', { name: /Back/ }); +// screen.getByRole('button', { name: /Cancel/ }); +// }); + +// test('clicking Back loads Image name', async () => { +// await setUp(); + +// await clickBack(); + +// screen.getByRole('heading', { +// name: 'Details', +// }); +// }); + +// test('clicking Cancel loads landing page', async () => { +// await setUp(); + +// await verifyCancelButton(router); +// }); + +// test('has Registration expandable section for rhel', async () => { +// await setUp(); + +// const targetExpandable = screen.getByTestId( +// 'target-environments-expandable' +// ); +// const registrationExpandable = screen.getByTestId( +// 'registration-expandable' +// ); +// const contentExpandable = screen.getByTestId('content-expandable'); +// const fscExpandable = screen.getByTestId( +// 'file-system-configuration-expandable' +// ); + +// await user.click(targetExpandable); +// screen.getByText('AWS'); +// await user.click(registrationExpandable); +// screen.getByText('Register the system later'); +// await user.click(contentExpandable); +// screen.getByText('Additional Red Hatand 3rd party packages'); +// await user.click(fscExpandable); +// screen.getByText('Configuration type'); +// }); + +// test('has no Registration expandable for centos', async () => { +// await setUpCentOS(); + +// const targetExpandable = await screen.findByTestId( +// 'target-environments-expandable' +// ); +// const contentExpandable = await screen.findByTestId('content-expandable'); +// const fscExpandable = await screen.findByTestId( +// 'file-system-configuration-expandable' +// ); +// expect( +// screen.queryByTestId('registration-expandable') +// ).not.toBeInTheDocument(); + +// await user.click(targetExpandable); +// screen.getByText('AWS'); +// await user.click(contentExpandable); +// screen.getByText('Additional Red Hatand 3rd party packages'); +// await user.click(fscExpandable); +// screen.getByText('Configuration type'); +// }); +// }); + +// describe('Click through all steps', () => { +// const user = userEvent.setup(); +// const setUp = async () => { +// ({ router } = await renderCustomRoutesWithReduxRouter( +// 'imagewizard', +// {}, +// routes +// )); +// }; + +// test('with valid values', async () => { +// await setUp(); + +// // select image output +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-aws')) +// ); +// const releaseMenu = screen.getAllByRole('button', { +// name: /options menu/i, +// })[0]; +// await user.click(releaseMenu); +// const releaseOption = screen.getByRole('option', { +// name: /Red Hat Enterprise Linux \(RHEL\) 8/, +// }); +// await user.click(releaseOption); + +// await waitFor(() => screen.findByTestId('upload-aws')); +// await user.click(screen.getByTestId('upload-azure')); +// await user.click(screen.getByTestId('upload-google')); +// await user.click(screen.getByTestId('checkbox-vmware')); +// await user.click(screen.getByTestId('checkbox-guest-image')); +// await user.click(screen.getByTestId('checkbox-image-installer')); + +// await clickNext(); +// await user.click( +// screen.getByRole('radio', { name: /manually enter an account id\./i }) +// ); +// await user.type(screen.getByTestId('aws-account-id'), '012345678901'); +// await clickNext(); + +// await user.click(screen.getByTestId('account-sharing')); + +// await user.type(screen.getByTestId('input-google-email'), 'test@test.com'); + +// await user.click(await screen.findByTestId('account-sharing')); +// await clickNext(); + +// await user.click(screen.getByTestId('azure-radio-manual')); +// // Randomly generated GUID +// await user.type( +// screen.getByTestId('azure-tenant-id-manual'), +// 'b8f86d22-4371-46ce-95e7-65c415f3b1e2' +// ); +// await user.type( +// screen.getByTestId('azure-subscription-id-manual'), +// '60631143-a7dc-4d15-988b-ba83f3c99711' +// ); +// await user.type( +// screen.getByTestId('azure-resource-group-manual'), +// 'testResourceGroup' +// ); +// await clickNext(); + +// // registration +// const activationKeyDropdown = await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); +// await user.click(activationKeyDropdown); +// const activationKey = await screen.findByRole('option', { +// name: 'name0', +// }); +// await user.click(activationKey); +// screen.getByDisplayValue('name0'); + +// await clickNext(); + +// // fsc +// const fscToggle = await screen.findByTestId( +// 'file-system-config-radio-manual' +// ); +// await user.click(fscToggle); +// const addPartition = await screen.findByTestId('file-system-add-partition'); +// await user.click(addPartition); +// await user.click(addPartition); + +// const tbody = screen.getByTestId('file-system-configuration-tbody'); +// const rows = within(tbody).getAllByRole('row'); +// await waitFor(() => expect(rows).toHaveLength(3)); +// await clickNext(); + +// // set mountpoint of final row to /var/tmp +// const mountPointMenu = within(rows[2]).getAllByRole('button', { +// name: 'Options menu', +// })[0]; +// await user.click(mountPointMenu); + +// const varButton = await within(rows[2]).findByRole('option', { +// name: '/var', +// }); +// await user.click(varButton); +// expect( +// screen.queryByRole('heading', { +// name: 'Danger alert: Duplicate mount point.', +// }) +// ).not.toBeInTheDocument(); +// await user.type( +// within(rows[2]).getByRole('textbox', { +// name: 'Mount point suffix text input', +// }), +// '/tmp' +// ); + +// // set size of the final row to 100 MiB +// await user.type( +// within(rows[2]).getByRole('textbox', { name: 'Size text input' }), +// '{backspace}100' +// ); +// const unitMenu = within(rows[2]).getAllByRole('button', { +// name: 'Options menu', +// })[1]; +// await user.click(unitMenu); + +// const mibButton = await within(rows[2]).findByRole('option', { +// name: 'MiB', +// }); +// await user.click(mibButton); +// await clickNext(); + +// screen.getByText( +// /Images built with Image Builder include all required packages/i +// ); + +// const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref + +// await waitFor(() => expect(searchbox).toBeEnabled()); + +// await searchForAvailablePackages(searchbox, 'test'); +// await user.click( +// await screen.findByRole('option', { +// name: /test summary for test package/, +// }) +// ); +// await user.click(screen.getByRole('button', { name: /Add selected/ })); +// await clickNext(); + +// // Custom repositories +// await user.click( +// await screen.findByRole('checkbox', { name: /select row 0/i }) +// ); +// await user.click( +// await screen.findByRole('checkbox', { name: /select row 1/i }) +// ); + +// await clickNext(); +// // Custom packages +// await clickNext(); + +// // Enter image name +// const nameInput = screen.getByRole('textbox', { +// name: 'Image Name', +// }); + +// await user.type(nameInput, 'my-image-name'); + +// // Enter description for image +// const descriptionInput = screen.getByRole('textbox', { +// name: /Description/, +// }); +// await user.type( +// descriptionInput, +// 'this is a perfect description for image' +// ); +// await clickNext(); + +// // review +// const targetEnvironmentsExpandable = await screen.findByTestId( +// 'target-environments-expandable' +// ); +// await user.click(targetEnvironmentsExpandable); +// await screen.findAllByText('AWS'); +// await screen.findAllByText('GCP'); +// await screen.findByText('VMware vSphere (.ova)'); +// await screen.findByText('Virtualization - Guest image (.qcow2)'); +// await screen.findByText('Bare metal - Installer (.iso)'); + +// const registrationExpandable = await screen.findByTestId( +// 'registration-expandable' +// ); +// await user.click(registrationExpandable); +// const review = screen.getByTestId('review-registration'); +// expect(review).toHaveTextContent( +// 'Use remote host configuration (rhc) utility' +// ); + +// const imageDetailsExpandable = await screen.findByTestId( +// 'image-details-expandable' +// ); +// await user.click(imageDetailsExpandable); +// await screen.findByText('my-image-name'); +// await screen.findByText('this is a perfect description for image'); + +// await screen.findByText('name0'); +// await screen.findByText('Self-Support'); +// await screen.findByText('Production'); + +// await user.click(screen.getByTestId('repositories-popover-button')); +// const repotbody = await screen.findByTestId( +// 'additional-repositories-table' +// ); +// expect(within(repotbody).getAllByRole('row')).toHaveLength(3); + +// await user.click(screen.getByTestId('file-system-configuration-popover')); +// const revtbody = await screen.findByTestId( +// 'file-system-configuration-tbody-review' +// ); +// expect(within(revtbody).getAllByRole('row')).toHaveLength(3); + +// // mock the backend API +// const payload_repos = [ +// { +// baseurl: 'http://yum.theforeman.org/releases/3.4/el8/x86_64/', +// check_gpg: true, +// check_repo_gpg: false, +// gpgkey: +// '-----BEGIN PGP PUBLIC KEY BLOCK-----\n\nmQINBGN9300BEAC1FLODu0cL6saMMHa7yJY1JZUc+jQUI/HdECQrrsTaPXlcc7nM\nykYMMv6amPqbnhH/R5BW2Ano+OMse+PXtUr0NXU4OcvxbnnXkrVBVUf8mXI9DzLZ\njw8KoD+4/s0BuzO78zAJF5uhuyHMAK0ll9v0r92kK45Fas9iZTfRFcqFAzvgjScf\n5jeBnbRs5U3UTz9mtDy802mk357o1A8BD0qlu3kANDpjLbORGWdAj21A6sMJDYXy\nHS9FBNV54daNcr+weky2L9gaF2yFjeu2rSEHCSfkbWfpSiVUx/bDTj7XS6XDOuJT\nJqvGS8jHqjHAIFBirhCA4cY/jLKxWyMr5N6IbXpPAYgt8/YYz2aOYVvdyB8tZ1u1\nkVsMYSGcvTBexZCn1cDkbO6I+waIlsc0uxGqUGBKF83AVYCQqOkBjF1uNnu9qefE\nkEc9obr4JZsAgnisboU25ss5ZJddKlmFMKSi66g4S5ChLEPFq7MB06PhLFioaD3L\nEXza7XitoW5VBwr0BSVKAHMC0T2xbm70zY06a6gQRlvr9a10lPmv4Tptc7xgQReg\nu1TlFPbrkGJ0d8O6vHQRAd3zdsNaVr4gX0Tg7UYiqT9ZUkP7hOc8PYXQ28hHrHTB\nA63MTq0aiPlJ/ivTuX8M6+Bi25dIV6N6IOUi/NQKIYxgovJCDSdCAAM0fQARAQAB\ntCFMdWNhcyBHYXJmaWVsZCA8bHVjYXNAcmVkaGF0LmNvbT6JAlcEEwEIAEEWIQTO\nQZeiHnXqdjmfUURc6PeuecS2PAUCY33fTQIbAwUJA8JnAAULCQgHAgIiAgYVCgkI\nCwIEFgIDAQIeBwIXgAAKCRBc6PeuecS2PCk3D/9jW7xrBB/2MQFKd5l+mNMFyKwc\nL9M/M5RFI9GaQRo55CwnPb0nnxOJR1V5GzZ/YGii53H2ose65CfBOE2L/F/RvKF0\nH9S9MInixlahzzKtV3TpDoZGk5oZIHEMuPmPS4XaHggolrzExY0ib0mQuBBE/uEV\n/HlyHEunBKPhTkAe+6Q+2dl22SUuVfWr4Uzlp65+DkdN3M37WI1a3Suhnef3rOSM\nV6puUzWRR7qcYs5C2In87AcYPn92P5ur1y/C32r8Ftg3fRWnEzI9QfRG52ojNOLK\nyGQ8ZC9PGe0q7VFcF7ridT/uzRU+NVKldbJg+rvBnszb1MjNuR7rUQHyvGmbsUVQ\nRCsgdovkee3lP4gfZHzk2SSLVSo0+NJRNaM90EmPk14Pgi/yfRSDGBVvLBbEanYI\nv1ZtdIPRyKi+/IaMOu/l7nayM/8RzghdU+0f1FAif5qf9nXuI13P8fqcqfu67gNd\nkh0UUF1XyR5UHHEZQQDqCuKEkZJ/+27jYlsG1ZiLb1odlIWoR44RP6k5OJl0raZb\nyLXbAfpITsXiJJBpCam9P9+XR5VSfgkqp5hIa7J8piN3DoMpoExg4PPQr6PbLAJy\nOUCOnuB7yYVbj0wYuMXTuyrcBHh/UymQnS8AMpQoEkCLWS/A/Hze/pD23LgiBoLY\nXIn5A2EOAf7t2IMSlA==\n=OanT\n-----END PGP PUBLIC KEY BLOCK-----', +// rhsm: false, +// }, +// { +// baseurl: +// 'http://mirror.stream.centos.org/SIGs/8/kmods/x86_64/packages-main/', +// check_gpg: false, +// rhsm: false, +// }, +// ]; + +// const custom_repos = [ +// { +// baseurl: ['http://yum.theforeman.org/releases/3.4/el8/x86_64/'], +// check_gpg: true, +// check_repo_gpg: false, +// gpgkey: [ +// '-----BEGIN PGP PUBLIC KEY BLOCK-----\n\nmQINBGN9300BEAC1FLODu0cL6saMMHa7yJY1JZUc+jQUI/HdECQrrsTaPXlcc7nM\nykYMMv6amPqbnhH/R5BW2Ano+OMse+PXtUr0NXU4OcvxbnnXkrVBVUf8mXI9DzLZ\njw8KoD+4/s0BuzO78zAJF5uhuyHMAK0ll9v0r92kK45Fas9iZTfRFcqFAzvgjScf\n5jeBnbRs5U3UTz9mtDy802mk357o1A8BD0qlu3kANDpjLbORGWdAj21A6sMJDYXy\nHS9FBNV54daNcr+weky2L9gaF2yFjeu2rSEHCSfkbWfpSiVUx/bDTj7XS6XDOuJT\nJqvGS8jHqjHAIFBirhCA4cY/jLKxWyMr5N6IbXpPAYgt8/YYz2aOYVvdyB8tZ1u1\nkVsMYSGcvTBexZCn1cDkbO6I+waIlsc0uxGqUGBKF83AVYCQqOkBjF1uNnu9qefE\nkEc9obr4JZsAgnisboU25ss5ZJddKlmFMKSi66g4S5ChLEPFq7MB06PhLFioaD3L\nEXza7XitoW5VBwr0BSVKAHMC0T2xbm70zY06a6gQRlvr9a10lPmv4Tptc7xgQReg\nu1TlFPbrkGJ0d8O6vHQRAd3zdsNaVr4gX0Tg7UYiqT9ZUkP7hOc8PYXQ28hHrHTB\nA63MTq0aiPlJ/ivTuX8M6+Bi25dIV6N6IOUi/NQKIYxgovJCDSdCAAM0fQARAQAB\ntCFMdWNhcyBHYXJmaWVsZCA8bHVjYXNAcmVkaGF0LmNvbT6JAlcEEwEIAEEWIQTO\nQZeiHnXqdjmfUURc6PeuecS2PAUCY33fTQIbAwUJA8JnAAULCQgHAgIiAgYVCgkI\nCwIEFgIDAQIeBwIXgAAKCRBc6PeuecS2PCk3D/9jW7xrBB/2MQFKd5l+mNMFyKwc\nL9M/M5RFI9GaQRo55CwnPb0nnxOJR1V5GzZ/YGii53H2ose65CfBOE2L/F/RvKF0\nH9S9MInixlahzzKtV3TpDoZGk5oZIHEMuPmPS4XaHggolrzExY0ib0mQuBBE/uEV\n/HlyHEunBKPhTkAe+6Q+2dl22SUuVfWr4Uzlp65+DkdN3M37WI1a3Suhnef3rOSM\nV6puUzWRR7qcYs5C2In87AcYPn92P5ur1y/C32r8Ftg3fRWnEzI9QfRG52ojNOLK\nyGQ8ZC9PGe0q7VFcF7ridT/uzRU+NVKldbJg+rvBnszb1MjNuR7rUQHyvGmbsUVQ\nRCsgdovkee3lP4gfZHzk2SSLVSo0+NJRNaM90EmPk14Pgi/yfRSDGBVvLBbEanYI\nv1ZtdIPRyKi+/IaMOu/l7nayM/8RzghdU+0f1FAif5qf9nXuI13P8fqcqfu67gNd\nkh0UUF1XyR5UHHEZQQDqCuKEkZJ/+27jYlsG1ZiLb1odlIWoR44RP6k5OJl0raZb\nyLXbAfpITsXiJJBpCam9P9+XR5VSfgkqp5hIa7J8piN3DoMpoExg4PPQr6PbLAJy\nOUCOnuB7yYVbj0wYuMXTuyrcBHh/UymQnS8AMpQoEkCLWS/A/Hze/pD23LgiBoLY\nXIn5A2EOAf7t2IMSlA==\n=OanT\n-----END PGP PUBLIC KEY BLOCK-----', +// ], +// id: 'dbad4dfc-1547-45f8-b5af-1d7fec0476c6', +// name: '13lk3', +// }, +// { +// baseurl: [ +// 'http://mirror.stream.centos.org/SIGs/8/kmods/x86_64/packages-main/', +// ], +// check_gpg: false, +// id: '9cf1d45d-aa06-46fe-87ea-121845cc6bbb', +// name: '2lmdtj', +// }, +// ]; + +// const cust = { +// filesystem: [ +// { +// mountpoint: '/', +// min_size: 10737418240, +// }, +// { +// mountpoint: '/home', +// min_size: 1073741824, +// }, +// { +// mountpoint: '/var/tmp', +// min_size: 104857600, +// }, +// ], +// custom_repositories: custom_repos, +// payload_repositories: payload_repos, +// packages: ['test'], +// subscription: { +// 'activation-key': 'name0', +// insights: true, +// rhc: true, +// organization: 5, +// 'server-url': 'subscription.rhsm.redhat.com', +// 'base-url': 'https://cdn.redhat.com/', +// }, +// }; + +// const expectedComposeReqs = { +// aws: { +// distribution: RHEL_8, +// image_name: 'my-image-name', +// image_description: 'this is a perfect description for image', +// image_requests: [ +// { +// architecture: 'x86_64', +// image_type: 'aws', +// upload_request: { +// type: 'aws', +// options: { +// share_with_accounts: ['012345678901'], +// }, +// }, +// }, +// ], +// client_id: 'ui', +// customizations: cust, +// }, +// gcp: { +// distribution: RHEL_8, +// image_name: 'my-image-name', +// image_description: 'this is a perfect description for image', +// image_requests: [ +// { +// architecture: 'x86_64', +// image_type: 'gcp', +// upload_request: { +// type: 'gcp', +// options: { +// share_with_accounts: ['user:test@test.com'], +// }, +// }, +// }, +// ], +// client_id: 'ui', +// customizations: cust, +// }, +// azure: { +// distribution: RHEL_8, +// image_name: 'my-image-name', +// image_description: 'this is a perfect description for image', +// image_requests: [ +// { +// architecture: 'x86_64', +// image_type: 'azure', +// upload_request: { +// type: 'azure', +// options: { +// tenant_id: 'b8f86d22-4371-46ce-95e7-65c415f3b1e2', +// subscription_id: '60631143-a7dc-4d15-988b-ba83f3c99711', +// resource_group: 'testResourceGroup', +// }, +// }, +// }, +// ], +// client_id: 'ui', +// customizations: cust, +// }, +// 'vsphere-ova': { +// distribution: RHEL_8, +// image_name: 'my-image-name', +// image_description: 'this is a perfect description for image', +// image_requests: [ +// { +// architecture: 'x86_64', +// image_type: 'vsphere-ova', +// upload_request: { +// type: 'aws.s3', +// options: {}, +// }, +// }, +// ], +// client_id: 'ui', +// customizations: cust, +// }, +// 'guest-image': { +// distribution: RHEL_8, +// image_name: 'my-image-name', +// image_description: 'this is a perfect description for image', +// image_requests: [ +// { +// architecture: 'x86_64', +// image_type: 'guest-image', +// upload_request: { +// type: 'aws.s3', +// options: {}, +// }, +// }, +// ], +// client_id: 'ui', +// customizations: cust, +// }, +// 'image-installer': { +// distribution: RHEL_8, +// image_name: 'my-image-name', +// image_description: 'this is a perfect description for image', +// image_requests: [ +// { +// architecture: 'x86_64', +// image_type: 'image-installer', +// upload_request: { +// type: 'aws.s3', +// options: {}, +// }, +// }, +// ], +// client_id: 'ui', +// customizations: cust, +// }, +// }; + +// let timesCalled = 0; +// const receivedComposeReqs = {}; + +// server.use( +// rest.post(`${IMAGE_BUILDER_API}/compose`, (req, res, ctx) => { +// timesCalled += 1; +// receivedComposeReqs[req.body.image_requests[0].image_type] = req.body; +// return res( +// ctx.status(201), +// ctx.json({ +// id: 'edbae1c2-62bc-42c1-ae0c-3110ab718f5b', +// }) +// ); +// }) +// ); +// await user.click(screen.getByRole('button', { name: /Create/ })); + +// expect(receivedComposeReqs).toEqual(expectedComposeReqs); +// expect(timesCalled).toEqual(6); + +// // returns back to the landing page +// await waitFor(() => +// expect(router.state.location.pathname).toBe('/insights/image-builder') +// ); + +// // set test timeout of 20 seconds +// }, 20000); +// }); + +// describe('Keyboard accessibility', () => { +// const user = userEvent.setup(); +// const setUp = async () => { +// ({ router } = await renderCustomRoutesWithReduxRouter( +// 'imagewizard', +// {}, +// routes +// )); +// await clickNext(); +// }; + +// const selectAllEnvironments = async () => { +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-aws')) +// ); +// await user.click(screen.getByTestId('upload-google')); +// await user.click(screen.getByTestId('upload-azure')); +// await user.click( +// screen.getByRole('checkbox', { +// name: /virtualization guest image checkbox/i, +// }) +// ); +// }; + +// test('autofocus on each step first input element', async () => { +// await setUp(); + +// // Image output +// await selectAllEnvironments(); +// await clickNext(); + +// // Target environment aws +// expect(screen.getByTestId('aws-radio-source')).toHaveFocus(); +// const awsSourceDropdown = await getSourceDropdown(); +// await user.click(awsSourceDropdown); +// const awsSource = await screen.findByRole('option', { +// name: /my_source/i, +// }); +// await user.click(awsSource); + +// await clickNext(); + +// // Target environment google +// await user.click(await screen.findByTestId('account-sharing')); +// expect(await screen.findByTestId('account-sharing')).toHaveFocus(); +// await user.type( +// await screen.findByTestId('input-google-email'), +// 'test@test.com' +// ); +// await clickNext(); + +// // Target environment azure +// expect(screen.getByTestId('azure-radio-source')).toHaveFocus(); +// const azureSourceDropdown = await getSourceDropdown(); +// await user.click(azureSourceDropdown); +// const azureSource = await screen.findByRole('option', { +// name: /azureSource1/i, +// }); +// await user.click(azureSource); + +// const resourceGroupDropdown = await screen.findByRole('textbox', { +// name: /select resource group/i, +// }); +// await user.click(resourceGroupDropdown); +// await user.click(screen.getByLabelText('Resource group myResourceGroup1')); +// await clickNext(); + +// // Registration +// await screen.findByText( +// 'Automatically register and enable advanced capabilities' +// ); +// const registerRadio = screen.getByTestId('registration-radio-now'); +// expect(registerRadio).toHaveFocus(); +// await screen.findByRole('textbox', { +// name: 'Select activation key', +// }); +// // skip registration +// const registerLaterRadio = screen.getByTestId('registration-radio-later'); +// await user.click(registerLaterRadio); + +// await clickNext(); + +// // File system configuration +// await clickNext(); + +// // Packages +// const view = screen.getByTestId('search-available-pkgs-input'); + +// const availablePackagesInput = within(view).getByRole('textbox', { +// name: /search input/i, +// }); +// await waitFor(() => expect(availablePackagesInput).toBeEnabled()); +// expect(availablePackagesInput).toHaveFocus(); +// await clickNext(); + +// // TODO: what should have focus on Custom Repos step? +// await clickNext(); + +// // Name +// const nameInput = screen.getByRole('textbox', { name: /image name/i }); +// expect(nameInput).toHaveFocus(); +// await clickNext(); +// }); + +// test('pressing Esc closes the wizard', async () => { +// await setUp(); +// // wizard needs to be interacted with for the esc key to work +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-aws')) +// ); +// await user.keyboard('{escape}'); +// expect(router.state.location.pathname).toBe('/insights/image-builder'); +// }); + +// test('pressing Enter does not advance the wizard', async () => { +// await setUp(); +// await waitFor( +// async () => await user.click(await screen.findByTestId('upload-aws')) +// ); +// await user.keyboard('{enter}'); +// screen.getByRole('heading', { +// name: /image output/i, +// }); +// }); + +// test('target environment tiles are keyboard selectable', async () => { +// const testTile = async (tile) => { +// tile.focus(); +// await user.keyboard('{space}'); +// expect(tile).toHaveClass('pf-m-selected'); +// await user.keyboard('{space}'); +// expect(tile).not.toHaveClass('pf-m-selected'); +// }; + +// await setUp(); +// await clickNext(); + +// await waitFor(() => screen.findByTestId('upload-aws')); +// testTile(screen.getByTestId('upload-aws')); +// testTile(screen.getByTestId('upload-google')); +// testTile(screen.getByTestId('upload-azure')); +// }); +// }); diff --git a/src/test/Components/CreateImageWizardV2/steps/ImageOutput/ImageOutput.test.tsx b/src/test/Components/CreateImageWizardV2/steps/ImageOutput/ImageOutput.test.tsx deleted file mode 100644 index 089cb528c..000000000 --- a/src/test/Components/CreateImageWizardV2/steps/ImageOutput/ImageOutput.test.tsx +++ /dev/null @@ -1,262 +0,0 @@ -import React from 'react'; -import '@testing-library/jest-dom'; - -import { screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; - -import CreateImageWizard from '../../../../../Components/CreateImageWizardV2/CreateImageWizard'; -import { AARCH64, RHEL_8, RHEL_9, X86_64 } from '../../../../../constants'; -import { mockArchitecturesByDistro } from '../../../../fixtures/architectures'; -import { server } from '../../../../mocks/server'; -import { renderCustomRoutesWithReduxRouter } from '../../../../testUtils'; - -const routes = [ - { - path: 'insights/image-builder/imagewizard/:composeId?', - element: , - }, -]; -jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ - useChrome: () => ({ - auth: { - getUser: () => { - return { - identity: { - internal: { - org_id: 5, - }, - }, - }; - }, - }, - isBeta: () => true, - isProd: () => true, - getEnvironment: () => 'prod', - }), -})); - -beforeAll(() => { - // scrollTo is not defined in jsdom - window.HTMLElement.prototype.scrollTo = function () {}; -}); - -afterEach(() => { - jest.clearAllMocks(); - server.resetHandlers(); -}); - -describe('Check that the target filtering is in accordance to mock content', () => { - test('rhel9 x86_64', async () => { - await renderCustomRoutesWithReduxRouter('imagewizard', {}, routes); - - // make sure this test is in SYNC with the mocks - let images_types: string[] = []; - mockArchitecturesByDistro(RHEL_9).forEach((elem) => { - if (elem.arch === X86_64) { - images_types = elem.image_types; - } - }); - expect(images_types).toContain('aws'); - expect(images_types).toContain('gcp'); - expect(images_types).toContain('azure'); - expect(images_types).toContain('guest-image'); - expect(images_types).toContain('image-installer'); - expect(images_types).toContain('vsphere'); - expect(images_types).toContain('vsphere-ova'); - expect(images_types).not.toContain('wsl'); - // make sure the UX conforms to the mocks - await waitFor(async () => await screen.findByTestId('upload-aws')); - await screen.findByTestId('upload-google'); - await screen.findByTestId('upload-azure'); - await screen.findByTestId('checkbox-guest-image'); - await screen.findByTestId('checkbox-image-installer'); - await screen.findByText(/vmware vsphere/i); - await screen.findByText(/open virtualization format \(\.ova\)/i); - expect( - screen.queryByText(/wsl - windows subsystem for linux \(\.tar\.gz\)/i) - ).not.toBeInTheDocument(); - }); - - test('rhel8 x86_64', async () => { - const user = userEvent.setup(); - await renderCustomRoutesWithReduxRouter('imagewizard', {}, routes); - - // select rhel8 - const releaseMenu = screen.getAllByRole('button', { - name: /Red Hat Enterprise Linux \(RHEL\) 9/, - })[0]; - await user.click(releaseMenu); - await user.click( - await screen.findByRole('option', { - name: /Red Hat Enterprise Linux \(RHEL\) 8/, - }) - ); - - // make sure this test is in SYNC with the mocks - let images_types: string[] = []; - mockArchitecturesByDistro(RHEL_8).forEach((elem) => { - if (elem.arch === X86_64) { - images_types = elem.image_types; - } - }); - expect(images_types).toContain('aws'); - expect(images_types).toContain('gcp'); - expect(images_types).toContain('azure'); - expect(images_types).toContain('guest-image'); - expect(images_types).toContain('image-installer'); - expect(images_types).toContain('vsphere'); - expect(images_types).toContain('vsphere-ova'); - expect(images_types).toContain('wsl'); - // make sure the UX conforms to the mocks - await waitFor(async () => await screen.findByTestId('upload-aws')); - await screen.findByTestId('upload-google'); - await screen.findByTestId('upload-azure'); - await screen.findByTestId('checkbox-guest-image'); - await screen.findByTestId('checkbox-image-installer'); - await screen.findByText(/vmware vsphere/i); - await screen.findByText(/open virtualization format \(\.ova\)/i); - await screen.findByText(/wsl - windows subsystem for linux \(\.tar\.gz\)/i); - }); - - test('rhel9 aarch64', async () => { - const user = userEvent.setup(); - await renderCustomRoutesWithReduxRouter('imagewizard', {}, routes); - - // select aarch64 - await user.selectOptions( - await screen.findByRole('combobox', { - name: /architecture/i, - }), - 'aarch64' - ); - - // make sure this test is in SYNC with the mocks - let images_types: string[] = []; - mockArchitecturesByDistro(RHEL_9).forEach((elem) => { - if (elem.arch === AARCH64) { - images_types = elem.image_types; - } - }); - expect(images_types).toContain('aws'); - expect(images_types).not.toContain('gcp'); - expect(images_types).not.toContain('azure'); - expect(images_types).toContain('guest-image'); - expect(images_types).toContain('image-installer'); - expect(images_types).not.toContain('vsphere'); - expect(images_types).not.toContain('vsphere-ova'); - expect(images_types).not.toContain('wsl'); - // make sure the UX conforms to the mocks - await waitFor(async () => await screen.findByTestId('upload-aws')); - expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument(); - expect(screen.queryByTestId('upload-azure')).not.toBeInTheDocument(); - await screen.findByTestId('checkbox-guest-image'); - await screen.findByTestId('checkbox-image-installer'); - expect(screen.queryByText(/vmware vsphere/i)).not.toBeInTheDocument(); - expect( - screen.queryByText(/open virtualization format \(\.ova\)/i) - ).not.toBeInTheDocument(); - expect( - screen.queryByText(/wsl - windows subsystem for linux \(\.tar\.gz\)/i) - ).not.toBeInTheDocument(); - }); - - test('rhel8 aarch64', async () => { - const user = userEvent.setup(); - await renderCustomRoutesWithReduxRouter('imagewizard', {}, routes); - - // select rhel8 - const releaseMenu = screen.getAllByRole('button', { - name: /Red Hat Enterprise Linux \(RHEL\) 9/, - })[0]; - await user.click(releaseMenu); - await user.click( - await screen.findByRole('option', { - name: /Red Hat Enterprise Linux \(RHEL\) 8/, - }) - ); - - // select aarch64 - await user.selectOptions( - await screen.findByRole('combobox', { - name: /architecture/i, - }), - 'aarch64' - ); - - // make sure this test is in SYNC with the mocks - let images_types: string[] = []; - mockArchitecturesByDistro(RHEL_8).forEach((elem) => { - if (elem.arch === AARCH64) { - images_types = elem.image_types; - } - }); - expect(images_types).toContain('aws'); - expect(images_types).not.toContain('gcp'); - expect(images_types).not.toContain('azure'); - expect(images_types).toContain('guest-image'); - expect(images_types).toContain('image-installer'); - expect(images_types).not.toContain('vsphere'); - expect(images_types).not.toContain('vsphere-ova'); - expect(images_types).not.toContain('wsl'); - // make sure the UX conforms to the mocks - await waitFor(async () => await screen.findByTestId('upload-aws')); - expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument(); - expect(screen.queryByTestId('upload-azure')).not.toBeInTheDocument(); - await screen.findByTestId('checkbox-guest-image'); - await screen.findByTestId('checkbox-image-installer'); - expect(screen.queryByText(/vmware vsphere/i)).not.toBeInTheDocument(); - expect( - screen.queryByText(/open virtualization format \(\.ova\)/i) - ).not.toBeInTheDocument(); - expect( - screen.queryByText(/wsl - windows subsystem for linux \(\.tar\.gz\)/i) - ).not.toBeInTheDocument(); - }); -}); - -describe('Check step consistency', () => { - test('going back and forth with selected options only keeps the one compatible', async () => { - const user = userEvent.setup(); - await renderCustomRoutesWithReduxRouter('imagewizard', {}, routes); - - // select x86_64 - await user.selectOptions( - await screen.findByRole('combobox', { - name: /architecture/i, - }), - 'x86_64' - ); - await waitFor(async () => await screen.findByTestId('upload-aws')); - // select GCP, it's available for x86_64 - await user.click(await screen.findByTestId('upload-google')); - await waitFor(async () => - expect(await screen.findByRole('button', { name: /Next/ })).toBeEnabled() - ); - // Change to aarch - await user.selectOptions( - await screen.findByRole('combobox', { - name: /architecture/i, - }), - 'aarch64' - ); - // GCP not being compatible with arch, the next button is disabled - await waitFor(async () => - expect(await screen.findByRole('button', { name: /Next/ })).toBeDisabled() - ); - // clicking on AWS the user can go next - await user.click(await screen.findByTestId('upload-aws')); - await waitFor(async () => - expect(await screen.findByRole('button', { name: /Next/ })).toBeEnabled() - ); - // and going back to x86_64 the user should keep the next button visible - await user.selectOptions( - await screen.findByRole('combobox', { - name: /architecture/i, - }), - 'x86_64' - ); - await waitFor(async () => - expect(await screen.findByRole('button', { name: /Next/ })).toBeEnabled() - ); - }); -});