debian-image-builder-frontend/src/test/Components/CreateImageWizard/CreateImageWizard.test.js
Simon Steinbeiss 9020392969 V1 Wizard: Add search parameter for arch selection
Add an optional search parameter to the wizard like so:

/insights/image-builder/imagewizard?arch=aarch64

This results in the wizard being opened and 'aarch64' being pre-selected as the architecture.
The Insights assistant chat bot and our websites (access.redhat.com and
developers.redhat.com) will make use of this feature.

Relates to HMS-3684
2024-03-15 09:08:57 +01:00

1715 lines
51 KiB
JavaScript

import React from 'react';
import '@testing-library/jest-dom';
import {
screen,
waitFor,
waitForElementToBeRemoved,
within,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { rest } from 'msw';
import CreateImageWizard from '../../../Components/CreateImageWizard/CreateImageWizard';
import ShareImageModal from '../../../Components/ShareImageModal/ShareImageModal';
import {
IMAGE_BUILDER_API,
PROVISIONING_API,
RHEL_8,
RHSM_API,
} from '../../../constants.js';
import { server } from '../../mocks/server.js';
import {
clickBack,
clickNext,
getNextButton,
renderCustomRoutesWithReduxRouter,
verifyCancelButton,
} from '../../testUtils';
const routes = [
{
path: 'insights/image-builder/*',
element: <div />,
},
{
path: 'insights/image-builder/imagewizard/:composeId?',
element: <CreateImageWizard />,
},
{
path: 'insights/image-builder/share /:composeId',
element: <ShareImageModal />,
},
];
let router = undefined;
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 = await screen.findByRole('radio', {
name: /manually enter an account id\./i,
});
await user.click(manualRadio);
return manualRadio;
};
const getSourceDropdown = async () => {
const sourceDropdown = await screen.findByRole('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', async () => {
renderCustomRoutesWithReduxRouter('imagewizard', {}, routes);
// check heading
await screen.findByRole('heading', { name: /Images/ });
await screen.findByRole('button', { name: 'Image output' });
await screen.findByRole('button', { name: 'Register' });
await screen.findByRole('button', { name: 'File system configuration' });
await screen.findByRole('button', { name: 'Content' });
await screen.findByRole('button', { name: 'Additional Red Hat packages' });
await screen.findByRole('button', { name: 'Custom repositories' });
await screen.findByRole('button', { name: 'Details' });
await screen.findByRole('button', { name: 'Review' });
});
});
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' });
};
test('clicking Next loads Upload to AWS', async () => {
await setUp();
await clickNext();
await switchToAWSManual();
await screen.findByText('AWS account ID');
});
test('clicking Cancel loads landing page', async () => {
await setUp();
await clickNext();
await verifyCancelButton(router);
});
test('target environment is required', async () => {
await setUp();
const destination = await screen.findByTestId('target-select');
const required = await within(destination).findByText('*');
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 = await screen.findByTestId('upload-aws');
// this has already been clicked once in the setup function
await user.click(awsTile); // deselect
const googleTile = await screen.findByTestId('upload-google');
await user.click(googleTile); // select
await user.click(googleTile); // deselect
const azureTile = await screen.findByTestId('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 = await screen.findByRole('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 = await screen.findByRole('button', {
name: 'Show options for further development of RHEL',
});
await user.click(showOptionsButton);
const centOSButton = await screen.findByRole('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',
});
await screen.findByText(
'Automatically register and enable advanced capabilities'
);
});
test('clicking Back loads Release', async () => {
await setUp();
await clickBack();
await screen.findByTestId('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(
await screen.findByRole('radio', {
name: /manually enter an account id\./i,
})
);
expect(nextButton).toHaveClass('pf-m-disabled');
const awsAccId = await screen.findByTestId('aws-account-id');
expect(awsAccId).toHaveValue('');
expect(awsAccId).toBeEnabled();
await user.type(awsAccId, '012345678901');
expect(nextButton).not.toHaveClass('pf-m-disabled');
await user.click(
await screen.findByRole('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 = await screen.findByLabelText('Register later');
await user.click(registerLaterRadio);
// click through to review step
await clickNext();
await clickNext();
await clickNext();
await clickNext();
await clickNext();
await user.click(await screen.findByRole('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',
});
await screen.findByText(
'Automatically register and enable advanced capabilities'
);
});
test('clicking Back loads Release', async () => {
await setUp();
await clickBack();
await screen.findByTestId('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 screen.findByTestId('account-sharing');
await user.click(await screen.findByTestId('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(await screen.findByTestId('account-sharing'));
await user.type(await screen.findByTestId('input-google-email'), 'a');
expect(await getNextButton()).toHaveClass('pf-m-disabled');
expect(await getNextButton()).toBeDisabled();
await user.type(
await screen.findByTestId('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(
await screen.findByRole('radio', {
name: /manually enter an account id\./i,
})
);
await user.type(
await screen.findByTestId('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 = await screen.findByTestId(
'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(
await screen.findByRole('radio', {
name: /manually enter an account id\./i,
})
);
await screen.findByText('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);
await screen.findByDisplayValue('name0');
await clickNext();
await clickNext();
await clickNext();
await clickNext();
await clickNext();
const review = await screen.findByTestId('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(
await screen.findByTestId('registration-additional-options')
);
await user.click(await screen.findByTestId('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();
await screen.findByTestId('registration-checkbox-insights');
await screen.findByTestId('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);
await screen.findByDisplayValue('name0');
await clickNext();
await clickNext();
await clickNext();
await clickNext();
await clickNext();
const review = await screen.findByTestId('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(
await screen.findByTestId('registration-additional-options')
);
await user.click(
await screen.findByTestId('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();
await screen.findByTestId('registration-checkbox-insights');
await screen.findByTestId('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);
await screen.findByDisplayValue('name0');
await clickNext();
await clickNext();
await clickNext();
await clickNext();
await clickNext();
const review = await screen.findByTestId('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(await screen.findByTestId('registration-radio-later'));
await removeKeyInformation;
await clickNext();
await clickNext();
await clickNext();
await clickNext();
await clickNext();
await screen.findByText('Register the system later');
});
test('registering with rhc implies registering with insights', async () => {
await setUp();
await user.click(
await screen.findByTestId('registration-additional-options')
);
await user.click(
await screen.findByTestId('registration-checkbox-insights')
);
expect(
await screen.findByTestId('registration-checkbox-rhc')
).not.toBeChecked();
await user.click(await screen.findByTestId('registration-checkbox-rhc'));
expect(
await screen.findByTestId('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 = await screen.findByTestId(
'registration-radio-later'
);
await user.click(registerLaterRadio);
await clickNext();
};
test('Error validation occurs upon clicking next button', async () => {
await setUp();
const manuallyConfigurePartitions = await screen.findByText(
/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 = await screen.findByRole('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 = await screen.findByTestId('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 = await screen.findByTestId(
'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 = await screen.findByRole('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 = await screen.findByRole('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();
}, 20000);
});
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 = await screen.findByTestId(
'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 = await screen.findByRole('button', {
name: 'Show options for further development of RHEL',
});
await user.click(showOptionsButton);
const centos = await screen.findByRole('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();
await screen.findByRole('button', { name: /Create/ });
await screen.findByRole('button', { name: /Back/ });
await screen.findByRole('button', { name: /Cancel/ });
});
test('clicking Back loads Image name', async () => {
await setUp();
await clickBack();
await screen.findByRole('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 = await screen.findByTestId(
'target-environments-expandable'
);
const registrationExpandable = await screen.findByTestId(
'registration-expandable'
);
const contentExpandable = await screen.findByTestId('content-expandable');
const fscExpandable = await screen.findByTestId(
'file-system-configuration-expandable'
);
await user.click(targetExpandable);
await screen.findByText('AWS');
await user.click(registrationExpandable);
await screen.findByText('Register the system later');
await user.click(contentExpandable);
await screen.findByText('Additional Red Hatand 3rd party packages');
await user.click(fscExpandable);
await screen.findByText('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);
await screen.findByText('AWS');
await user.click(contentExpandable);
await screen.findByText('Additional Red Hatand 3rd party packages');
await user.click(fscExpandable);
await screen.findByText('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 = await screen.findByRole('option', {
name: /Red Hat Enterprise Linux \(RHEL\) 8/,
});
await user.click(releaseOption);
await waitFor(() => screen.findByTestId('upload-aws'));
await user.click(await screen.findByTestId('upload-azure'));
await user.click(await screen.findByTestId('upload-google'));
await user.click(await screen.findByTestId('checkbox-vmware'));
await user.click(await screen.findByTestId('checkbox-guest-image'));
await user.click(await screen.findByTestId('checkbox-image-installer'));
await clickNext();
await user.click(
await screen.findByRole('radio', {
name: /manually enter an account id\./i,
})
);
await user.type(
await screen.findByTestId('aws-account-id'),
'012345678901'
);
await clickNext();
await user.click(await screen.findByTestId('account-sharing'));
await user.type(
await screen.findByTestId('input-google-email'),
'test@test.com'
);
await user.click(await screen.findByTestId('account-sharing'));
await clickNext();
await user.click(await screen.findByTestId('azure-radio-manual'));
// Randomly generated GUID
await user.type(
await screen.findByTestId('azure-tenant-id-manual'),
'b8f86d22-4371-46ce-95e7-65c415f3b1e2'
);
await user.type(
await screen.findByTestId('azure-subscription-id-manual'),
'60631143-a7dc-4d15-988b-ba83f3c99711'
);
await user.type(
await screen.findByTestId('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);
await screen.findByDisplayValue('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 = await screen.findByTestId('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(
await within(rows[2]).findByRole('textbox', {
name: 'Mount point suffix text input',
}),
'/tmp'
);
// set size of the final row to 100 MiB
await user.type(
await within(rows[2]).findByRole('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();
await screen.findByText(
/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-sources summary for test package/,
})
);
await user.click(
await screen.findByRole('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 = await screen.findByRole('textbox', {
name: 'Image Name',
});
await user.type(nameInput, 'my-image-name');
// Enter description for image
const descriptionInput = await screen.findByRole('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 = await screen.findByTestId('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(await screen.findByTestId('repositories-popover-button'));
const repotbody = await screen.findByTestId(
'additional-repositories-table'
);
expect(within(repotbody).getAllByRole('row')).toHaveLength(3);
await user.click(
await screen.findByTestId('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,
module_hotfixes: true,
},
];
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',
module_hotfixes: true,
},
];
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-sources'],
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(await screen.findByRole('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(await screen.findByTestId('upload-google'));
await user.click(await screen.findByTestId('upload-azure'));
await user.click(
await screen.findByRole('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(await screen.findByTestId('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(await screen.findByTestId('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(
await screen.findByLabelText('Resource group myResourceGroup1')
);
await clickNext();
// Registration
await screen.findByText(
'Automatically register and enable advanced capabilities'
);
const registerRadio = await screen.findByTestId('registration-radio-now');
expect(registerRadio).toHaveFocus();
await screen.findByRole('textbox', {
name: 'Select activation key',
});
// skip registration
const registerLaterRadio = await screen.findByTestId(
'registration-radio-later'
);
await user.click(registerLaterRadio);
await clickNext();
// File system configuration
await clickNext();
// Packages
const view = await screen.findByTestId('search-available-pkgs-input');
const availablePackagesInput = await within(view).findByRole('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 = await screen.findByRole('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}');
await screen.findByRole('heading', {
name: /image output/i,
});
});
test('target environment tiles are keyboard selectable', async () => {
const testTile = async (tile) => {
tile.focus();
await user.keyboard('{space}');
await waitFor(() => expect(tile).toHaveClass('pf-m-selected'));
await user.keyboard('{space}');
await waitFor(() => expect(tile).not.toHaveClass('pf-m-selected'));
};
await setUp();
await clickNext();
await waitFor(() => screen.findByTestId('upload-aws'));
testTile(await screen.findByTestId('upload-aws'));
testTile(await screen.findByTestId('upload-google'));
testTile(await screen.findByTestId('upload-azure'));
});
});
describe('set release using query parameter', () => {
test('rhel 9 by default (no query parameter)', async () => {
({ router } = await renderCustomRoutesWithReduxRouter(
'imagewizard',
{},
routes
));
await screen.findByText('Red Hat Enterprise Linux (RHEL) 9');
});
test('rhel 9 by default (invalid query parameter)', async () => {
({ router } = await renderCustomRoutesWithReduxRouter(
'imagewizard?release=rhel9000',
{},
routes
));
await screen.findByText('Red Hat Enterprise Linux (RHEL) 9');
});
test('rhel 8 (query parameter provided)', async () => {
({ router } = await renderCustomRoutesWithReduxRouter(
'imagewizard?release=rhel8',
{},
routes
));
await screen.findByText('Red Hat Enterprise Linux (RHEL) 8');
});
});
describe('set architecture using query parameter', () => {
test('x86_64 by default (no query parameter)', async () => {
({ router } = await renderCustomRoutesWithReduxRouter(
'imagewizard',
{},
routes
));
await screen.findByText('x86_64');
});
test('x86_64 by default (invalid query parameter)', async () => {
({ router } = await renderCustomRoutesWithReduxRouter(
'imagewizard?arch=arm',
{},
routes
));
await screen.findByText('x86_64');
});
test('aarch64 (query parameter provided)', async () => {
({ router } = await renderCustomRoutesWithReduxRouter(
'imagewizard?arch=aarch64',
{},
routes
));
await screen.findByText('aarch64');
});
});