diff --git a/src/react/ui-elements/Clipboard.tsx b/src/react/ui-elements/Clipboard.tsx
index 581717253..8019c2873 100644
--- a/src/react/ui-elements/Clipboard.tsx
+++ b/src/react/ui-elements/Clipboard.tsx
@@ -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);
diff --git a/src/react/ui-elements/Veeam/VeeamSummary.test.tsx b/src/react/ui-elements/Veeam/VeeamSummary.test.tsx
index ff794ced4..84cbba196 100644
--- a/src/react/ui-elements/Veeam/VeeamSummary.test.tsx
+++ b/src/react/ui-elements/Veeam/VeeamSummary.test.tsx
@@ -15,6 +15,7 @@ import {
BUCKET_SECTION_TITLE,
CERTIFICATE_SECTION_TITLE,
CREDENTIALS_SECTION_TITLE,
+ DEFAULT_REGION,
VEEAM_SUMMARY_TITLE,
VeeamSummary,
} from './VeeamSummary';
@@ -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 (
@@ -64,7 +69,9 @@ const VeeamSummaryWrapper = ({ children }: { children: React.ReactNode }) => {
);
};
-const user = userEvent.setup();
+
+jest.setTimeout(10000);
+
describe('VeeamSummary', () => {
const selectors = {
title: () => screen.getByText(VEEAM_SUMMARY_TITLE),
@@ -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 (
+
+ );
+ };
+
+ it('should render VeeamSummary', async () => {
+ //S
render(
,
- {
- 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 () => {
@@ -117,7 +163,6 @@ describe('VeeamSummary', () => {
groups: ['user', 'PlatformAdmin'],
},
}));
-
render(
{
},
]}
/>,
- {
- wrapper: VeeamSummaryWrapper,
- },
+ { wrapper: VeeamSummaryWrapper },
);
-
expect(selectors.certificateSection()).toBeInTheDocument();
expect(selectors.certificateButton()).toBeInTheDocument();
});
@@ -140,7 +182,6 @@ describe('VeeamSummary', () => {
mockUseGetS3ServicePoint.mockImplementation(() => ({
s3ServicePoint: mockServicePoint,
}));
-
render(
{
},
]}
/>,
- {
- wrapper: VeeamSummaryWrapper,
- },
+ { wrapper: VeeamSummaryWrapper },
);
-
expect(screen.getByText(mockServicePoint)).toBeInTheDocument();
});
});
diff --git a/src/react/ui-elements/Veeam/VeeamSummary.tsx b/src/react/ui-elements/Veeam/VeeamSummary.tsx
index 678c77425..b9f25dedd 100644
--- a/src/react/ui-elements/Veeam/VeeamSummary.tsx
+++ b/src/react/ui-elements/Veeam/VeeamSummary.tsx
@@ -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';
@@ -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;
@@ -139,6 +138,7 @@ export const VeeamSummary = ({
placement: 'right',
}}
size="inline"
+ aria-label="copy all"
/>
@@ -148,7 +148,11 @@ export const VeeamSummary = ({
required
content={
- {s3ServicePoint}
+ {s3ServicePoint}{' '}
+
}
/>
@@ -158,7 +162,11 @@ export const VeeamSummary = ({
label="Region"
content={
- {DEFAULT_REGION}
+ {DEFAULT_REGION}{' '}
+
}
/>
@@ -177,7 +185,7 @@ export const VeeamSummary = ({
content={
{accessKey}
-
+
}
/>
@@ -188,7 +196,10 @@ export const VeeamSummary = ({
content={
-
+
}
/>
@@ -202,7 +213,10 @@ export const VeeamSummary = ({
content={
{bucketName}
-
+
}
/>