Add tests switching between fields in AmazonUploadComponent

This commit is contained in:
Aleksandar Todorov 2020-11-12 12:44:24 +02:00 committed by Alexander Todorov
parent ea459a7cb8
commit 44fecec797
3 changed files with 113 additions and 0 deletions

View file

@ -44,6 +44,7 @@
"@redhat-cloud-services/frontend-components-config": "1.0.0",
"@testing-library/react": "^11.0.4",
"@testing-library/jest-dom": "^5.10.1",
"@testing-library/user-event": "^12.2.2",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^26.1.0",

View file

@ -58,17 +58,20 @@ const AmazonUploadComponent = (props) => {
validated={ (props.errors['amazon-access-id'] && 'error') || 'default' }>
<TextInput value={ props.upload.options.access_key_id || '' }
type="text" aria-label="amazon access key ID" id="amazon-access-id"
data-testid="aws-access-key" isRequired
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { access_key_id: value })) } />
</FormGroup>
<FormGroup isRequired label="Secret access key" fieldId="amazon-access-secret"
helperTextInvalid={ (props.errors['amazon-access-secret'] && props.errors['amazon-access-secret'].value) || '' }
validated={ (props.errors['amazon-access-secret'] && 'error') || 'default' }>
<TextInput value={ props.upload.options.secret_access_key || '' }
data-testid="aws-secret-access-key" isRequired
type="password" aria-label="amazon secret access key" id="amazon-access-secret"
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { secret_access_key: value })) } />
</FormGroup>
<FormGroup isRequired label="Service" fieldId="amazon-service">
<FormSelect value={ props.upload.options.service } aria-label="Select amazon service" id="amazon-service"
data-testid="aws-service-select"
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { service: value })) }>
{ serviceOptions.map(option => <FormSelectOption key={ option.value } value={ option.value } label={ option.label } />) }
</FormSelect>
@ -77,6 +80,7 @@ const AmazonUploadComponent = (props) => {
helperTextInvalid={ (props.errors['amazon-region'] && props.errors['amazon-region'].value) || '' }
validated={ (props.errors['amazon-region'] && 'error') || 'default' }>
<TextInput value={ props.upload.options.region } type="text" aria-label="amazon region" id="amazon-region"
data-testid="aws-region" isRequired
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { region: value })) } />
</FormGroup>
{ props.upload.options.service === 's3' &&
@ -84,6 +88,7 @@ const AmazonUploadComponent = (props) => {
helperTextInvalid={ (props.errors['amazon-bucket'] && props.errors['amazon-bucket'].value) || '' }
validated={ (props.errors['amazon-bucket'] && 'error') || 'default' }>
<TextInput value={ props.upload.options.bucket || '' } type="text" aria-label="amazon bucket" id="amazon-bucket"
data-testid="aws-bucket" isRequired
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { bucket: value })) } />
</FormGroup> }
</>
@ -106,6 +111,7 @@ const UploadComponent = (props) => {
<Form isHorizontal>
<FormGroup isRequired label="Destination" fieldId="upload-destination">
<FormSelect value={ props.upload.type || '' } id="upload-destination"
data-testid="upload-destination" isRequired
onChange={ value => props.setUpload({ type: value, options: null }) } aria-label="Select upload destination">
{ uploadTypes.map(type => <FormSelectOption key={ type.value } value={ type.value } label={ type.label } />) }
</FormSelect>

View file

@ -2,6 +2,7 @@ import '@testing-library/jest-dom';
import React from 'react';
import { screen, getByText, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderWithReduxRouter } from '../../testUtils';
import CreateImageWizard from '../../../SmartComponents/CreateImageWizard/CreateImageWizard';
@ -77,6 +78,13 @@ describe('Step Release', () => {
const [ , , cancel ] = verifyButtons();
verifyCancelButton(cancel);
});
test('allows chosing a release', () => {
const release = screen.getByTestId('release-select');
expect(release).toBeEnabled();
userEvent.selectOptions(release, [ 'rhel-8' ]);
});
});
describe('Step Target environment', () => {
@ -109,6 +117,66 @@ describe('Step Target environment', () => {
const [ , , cancel ] = verifyButtons();
verifyCancelButton(cancel);
});
test('choosing S3 shows region and bucket fields', () => {
// change the select to enable the bucket field
userEvent.selectOptions(screen.getByTestId('aws-service-select'), [ 's3' ]);
const destination = screen.getByTestId('upload-destination');
expect(destination).toBeEnabled();
expect(destination).toBeRequired();
const accessKeyId = screen.getByTestId('aws-access-key');
expect(accessKeyId).toHaveValue('');
expect(accessKeyId).toBeEnabled();
expect(accessKeyId).toBeRequired();
const secretAccessKey = screen.getByTestId('aws-secret-access-key');
expect(secretAccessKey).toHaveValue('');
expect(secretAccessKey).toBeEnabled();
expect(secretAccessKey).toBeRequired();
const region = screen.getByTestId('aws-region');
expect(region).toHaveValue('eu-west-2');
expect(region).toBeEnabled();
expect(region).toBeRequired();
const bucket = screen.getByTestId('aws-bucket');
expect(bucket).toHaveValue('');
expect(bucket).toBeEnabled();
expect(bucket).toBeRequired();
});
test('choosing EC2 shows region field', async () => {
// change the select to enable the bucket field
userEvent.selectOptions(screen.getByTestId('aws-service-select'), [ 's3' ]);
const destination = screen.getByTestId('upload-destination');
expect(destination).toBeEnabled();
expect(destination).toBeRequired();
const accessKeyId = screen.getByTestId('aws-access-key');
expect(accessKeyId).toHaveValue('');
expect(accessKeyId).toBeEnabled();
expect(accessKeyId).toBeRequired();
const secretAccessKey = screen.getByTestId('aws-secret-access-key');
expect(secretAccessKey).toHaveValue('');
expect(secretAccessKey).toBeEnabled();
expect(secretAccessKey).toBeRequired();
const region = screen.getByTestId('aws-region');
expect(region).toHaveValue('eu-west-2');
expect(region).toBeEnabled();
expect(region).toBeRequired();
// change the select to hide the bucket field
userEvent.selectOptions(screen.getByTestId('aws-service-select'), [ 'ec2' ]);
waitForElementToBeRemoved(screen.queryByTestId('aws-bucket')).then(() =>
expect(screen.queryByTestId('aws-bucket')).not.toBeInTheDocument()
);
});
});
describe('Step Registration', () => {
@ -213,3 +281,41 @@ describe('Step Review', () => {
verifyCancelButton(cancel);
});
});
describe('Click through all steps', () => {
beforeEach(() => {
renderWithReduxRouter(<CreateImageWizard />);
});
test('with valid values', async () => {
const next = screen.getByRole('button', { name: /Next/ });
// select release
userEvent.selectOptions(screen.getByTestId('release-select'), [ 'rhel-8' ]);
next.click();
// select upload target
await screen.findByTestId('upload-destination');
userEvent.selectOptions(screen.getByTestId('upload-destination'), [ 'aws' ]);
userEvent.type(screen.getByTestId('aws-access-key'), 'key');
userEvent.type(screen.getByTestId('aws-secret-access-key'), 'secret');
userEvent.selectOptions(screen.getByTestId('aws-service-select'), [ 's3' ]);
userEvent.type(screen.getByTestId('aws-region'), 'us-east-1');
userEvent.type(screen.getByTestId('aws-bucket'), 'imagebuilder');
next.click();
// registration
await screen.findByTestId('subscription-activation');
screen
.getByLabelText('Embed an activation key and register systems on first boot')
.click();
userEvent.type(screen.getByTestId('subscription-activation'), '1234567890');
next.click();
await screen.
findByText('Review the information and click Create image to create the image using the following criteria.');
await screen.findByText('rhel-8');
await screen.findByText('aws');
await screen.findByText('Register the system on first boot');
});
});