Skip to content

Commit

Permalink
Add Test for Veeam CopyButton
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChengYanJin
ChengYanJin committed Mar 4, 2024
1 parent 1906e6e commit 958f489
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 25 deletions.
1 change: 1 addition & 0 deletions src/react/ui-elements/Clipboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const Container = styled.span`
cursor: pointer;
`;

// Todo: Should replace it with the CopyButton form core-ui
export const Clipboard = ({ text }: { text: string }) => {
const { copy, copyStatus } = useClipboard();
const isClipboard = Boolean(navigator?.clipboard);
Expand Down
74 changes: 56 additions & 18 deletions src/react/ui-elements/Veeam/VeeamSummary.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
BUCKET_SECTION_TITLE,
CERTIFICATE_SECTION_TITLE,
CREDENTIALS_SECTION_TITLE,
DEFAULT_REGION,
VEEAM_SUMMARY_TITLE,
VeeamSummary,
} from './VeeamSummary';
Expand Down Expand Up @@ -52,6 +53,10 @@ const config = {
basePath: '',
features: ['Veeam'],
};
const SERVICE_POINT = 'service point';
const ACCESS_KEY = 'access-key';
const SECRET_KEY = 'secret-access-key';
const VEEAM_BUCKET_NAME = 'veeam-bucket-name';

const VeeamSummaryWrapper = ({ children }: { children: React.ReactNode }) => {
return (
Expand All @@ -64,7 +69,9 @@ const VeeamSummaryWrapper = ({ children }: { children: React.ReactNode }) => {
</QueryClientProvider>
);
};
const user = userEvent.setup();

jest.setTimeout(10000);

describe('VeeamSummary', () => {
const selectors = {
title: () => screen.getByText(VEEAM_SUMMARY_TITLE),
Expand All @@ -73,37 +80,76 @@ describe('VeeamSummary', () => {
bucketSection: () => screen.getByText(BUCKET_SECTION_TITLE),
certificateSection: () => screen.getByText(CERTIFICATE_SECTION_TITLE),
certificateButton: () => screen.getByRole('button', { name: /Download/i }),
copyServicePointButton: () =>
screen.getByRole('button', { name: /copy service point/i }),
copySecretKeyButton: () =>
screen.getByRole('button', { name: /copy secret access key/i }),
copyAccessKeyButton: () =>
screen.getByRole('button', { name: /copy access key/i }),
copyBucketNameButton: () =>
screen.getByRole('button', { name: /copy bucket name/i }),
copyRegionButton: () =>
screen.getByRole('button', { name: /copy region/i }),
copyAllButton: () => screen.getByRole('button', { name: /copy all/i }),
};

beforeEach(() => {
mockUseAuth.mockImplementation(() => mockAuthUserData);
mockUseGetS3ServicePoint.mockImplementation(() => ({
s3ServicePoint: '',
s3ServicePoint: SERVICE_POINT,
}));
});
afterEach(() => {
jest.clearAllMocks();
});

it('should render VeeamSummary', () => {
const WrappedVeeamSummary = ({ children }: { children: React.ReactNode }) => {
return (
<VeeamSummary
accessKey={ACCESS_KEY}
secretKey={SECRET_KEY}
bucketName={VEEAM_BUCKET_NAME}
enableImmutableBackup={true}
/>
);
};

it('should render VeeamSummary', async () => {
//S
render(
<Stepper
steps={[
{
label: 'Summary',
Component: VeeamSummary,
Component: WrappedVeeamSummary,
},
]}
/>,
{
wrapper: VeeamSummaryWrapper,
},
{ wrapper: VeeamSummaryWrapper },
);

const user = userEvent.setup();
//E+V
expect(selectors.title()).toBeInTheDocument();
expect(selectors.accountSection()).toBeInTheDocument();
expect(selectors.credentialsSection()).toBeInTheDocument();
expect(selectors.bucketSection()).toBeInTheDocument();
// Verify the copy buttons
await user.click(selectors.copyServicePointButton());
await expect(navigator.clipboard.readText()).resolves.toBe(SERVICE_POINT);
await user.click(selectors.copyAccessKeyButton());
await expect(navigator.clipboard.readText()).resolves.toBe(ACCESS_KEY);
await user.click(selectors.copySecretKeyButton());
await expect(navigator.clipboard.readText()).resolves.toBe(SECRET_KEY);
await user.click(selectors.copyBucketNameButton());
await expect(navigator.clipboard.readText()).resolves.toBe(
VEEAM_BUCKET_NAME,
);
await user.click(selectors.copyRegionButton());
await expect(navigator.clipboard.readText()).resolves.toBe(DEFAULT_REGION);
await user.click(selectors.copyAllButton());
await expect(navigator.clipboard.readText()).resolves.toBe(
`Service point\t${SERVICE_POINT}\nRegion\t${DEFAULT_REGION}\nAccess key ID\t${ACCESS_KEY}\nSecret Access key\t${SECRET_KEY}\nBucket name\t${VEEAM_BUCKET_NAME}`,
);
});

it('should render the VeeamSumamry with certificate download button', async () => {
Expand All @@ -117,7 +163,6 @@ describe('VeeamSummary', () => {
groups: ['user', 'PlatformAdmin'],
},
}));

render(
<Stepper
steps={[
Expand All @@ -127,11 +172,8 @@ describe('VeeamSummary', () => {
},
]}
/>,
{
wrapper: VeeamSummaryWrapper,
},
{ wrapper: VeeamSummaryWrapper },
);

expect(selectors.certificateSection()).toBeInTheDocument();
expect(selectors.certificateButton()).toBeInTheDocument();
});
Expand All @@ -140,7 +182,6 @@ describe('VeeamSummary', () => {
mockUseGetS3ServicePoint.mockImplementation(() => ({
s3ServicePoint: mockServicePoint,
}));

render(
<Stepper
steps={[
Expand All @@ -150,11 +191,8 @@ describe('VeeamSummary', () => {
},
]}
/>,
{
wrapper: VeeamSummaryWrapper,
},
{ wrapper: VeeamSummaryWrapper },
);

expect(screen.getByText(mockServicePoint)).toBeInTheDocument();
});
});
28 changes: 21 additions & 7 deletions src/react/ui-elements/Veeam/VeeamSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { CertificateDownloadButton } from '../../next-architecture/ui/CertificateDownloadButton';
import { useAuthGroups } from '../../utils/hooks';
import { Clipboard } from '../Clipboard';
import { HideCredential } from '../Hide';
import { VEEAM_DEFAULT_ACCOUNT_NAME } from './VeeamConstants';
import { useGetS3ServicePoint } from './useGetS3ServicePoint';
Expand All @@ -32,7 +31,7 @@ export const CERTIFICATE_SECTION_TITLE = '1. Certificates';
export const ACCOUNT_SECTION_TITLE =
'2. Information for the Veeam configuration';

const DEFAULT_REGION = 'us-east-1';
export const DEFAULT_REGION = 'us-east-1';

const WrapperWithWidth = styled(Wrap)`
width: 20rem;
Expand Down Expand Up @@ -139,6 +138,7 @@ export const VeeamSummary = ({
placement: 'right',
}}
size="inline"
aria-label="copy all"
/>
</Wrap>
<Separator />
Expand All @@ -148,7 +148,11 @@ export const VeeamSummary = ({
required
content={
<WrapperWithWidth>
<Text>{s3ServicePoint}</Text> <Clipboard text={s3ServicePoint} />
<Text>{s3ServicePoint}</Text>{' '}
<CopyButton
textToCopy={s3ServicePoint}
aria-label="copy service point"
/>
</WrapperWithWidth>
}
/>
Expand All @@ -158,7 +162,11 @@ export const VeeamSummary = ({
label="Region"
content={
<WrapperWithWidth>
<Text>{DEFAULT_REGION}</Text> <Clipboard text={DEFAULT_REGION} />
<Text>{DEFAULT_REGION}</Text>{' '}
<CopyButton
textToCopy={DEFAULT_REGION}
aria-label="copy region"
/>
</WrapperWithWidth>
}
/>
Expand All @@ -177,7 +185,7 @@ export const VeeamSummary = ({
content={
<WrapperWithWidth>
<Text>{accessKey}</Text>
<Clipboard text={accessKey} />
<CopyButton textToCopy={accessKey} aria-label="copy access key" />
</WrapperWithWidth>
}
/>
Expand All @@ -188,7 +196,10 @@ export const VeeamSummary = ({
content={
<WrapperWithWidth>
<HideCredential credentials={secretKey} />
<Clipboard text={secretKey} />
<CopyButton
textToCopy={secretKey}
aria-label="copy secret access key"
/>
</WrapperWithWidth>
}
/>
Expand All @@ -202,7 +213,10 @@ export const VeeamSummary = ({
content={
<WrapperWithWidth>
<Text>{bucketName}</Text>
<Clipboard text={bucketName} />
<CopyButton
textToCopy={bucketName}
aria-label="copy bucket name"
/>
</WrapperWithWidth>
}
/>
Expand Down

0 comments on commit 958f489

Please sign in to comment.