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} - + } />