This commit is contained in:
Munyaneza Armel 2022-10-21 20:48:38 +00:00
parent 6a5eb0d414
commit 67cc3ff0db
4 changed files with 50 additions and 55 deletions

5
.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,5 @@
{
"recommendations": [
"esbenp.prettier-vscode"
]
}

View file

@ -14,7 +14,7 @@ const HiddenText: FunctionComponent<ComponentProps> = (
const [copiedToClipboard, setCopyToClipboard] = useState<boolean>(false);
if (!showText) {
return (
<p
<p
role="paragraph"
className="pointer underline"
onClick={() => {
@ -26,11 +26,11 @@ const HiddenText: FunctionComponent<ComponentProps> = (
);
}
return (
<div >
<div>
<div className="flex">
<div
<div
style={{
marginRight: '5px',
marginRight: '5px',
}}
>
{props.text}
@ -50,9 +50,9 @@ const HiddenText: FunctionComponent<ComponentProps> = (
data-testid={props.dataTestId}
className="pointer underline"
onClick={async () => {
await navigator.clipboard.writeText(props.text);
await navigator.clipboard.writeText(props.text);
setCopyToClipboard(true);
}}
}}
>
{' '}
{copiedToClipboard

View file

@ -139,15 +139,13 @@ export interface ComponentProps {
thick?: ThickProp;
onClick?: (() => void) | undefined;
style?: CSSProperties | undefined;
}
const Icon: FunctionComponent<ComponentProps> = ({
size = SizeProp.Regular,
icon,
className,
color,
thick =ThickProp.Normal,
thick = ThickProp.Normal,
onClick,
style,
}: ComponentProps): ReactElement => {

View file

@ -7,75 +7,67 @@ describe('tests for HiddenText component', () => {
it('it should click paragraph and show text in document', async () => {
act(() => {
render(<HiddenText text="text" />);
});
const paragraph: HTMLElement = screen.getByRole('paragraph');
});
const paragraph: HTMLElement = screen.getByRole('paragraph');
await act(async () => {
fireEvent.click(paragraph);
});
fireEvent.click(paragraph);
});
expect(screen.getByText('text')).toBeInTheDocument();
});
});
it('it should call function after clicking paragraph', async () => {
const setShowText: () => true = jest.fn();
const setShowText: () => true = jest.fn();
act(() => {
render(<HiddenText text="text" />);
});
const paragraph:HTMLElement = screen.getByRole('paragraph');
});
const paragraph: HTMLElement = screen.getByRole('paragraph');
await act(async () => {
fireEvent.click(paragraph);
});
fireEvent.click(paragraph);
});
expect(setShowText).toBeCalled;
});
it('it should click paragraph and copy to clipboard', async () => {
act(() => {
});
it('it should click paragraph and copy to clipboard', async () => {
act(() => {
render(
<HiddenText
text='text'
isCopyable={true}
dataTestId="test-id"
/>
);
});
const paragraph :HTMLElement = screen.getByRole('paragraph');
<HiddenText
text="text"
isCopyable={true}
dataTestId="test-id"
/>
);
});
const paragraph: HTMLElement = screen.getByRole('paragraph');
await act(async () => {
fireEvent.click(paragraph);
});
expect(screen.getByTestId('test-id')).toHaveTextContent(
'Copy to Clipboard'
)
});
it('it should call function after clicking paragraph', async () => {
const setCopyToClipboard: (() => false) = jest.fn();
);
});
it('it should call function after clicking paragraph', async () => {
const setCopyToClipboard: () => false = jest.fn();
act(() => {
render(<HiddenText text='text' isCopyable={true}/>);
});
const paragraph : HTMLElement = screen.getByRole('paragraph');
render(<HiddenText text="text" isCopyable={true} />);
});
const paragraph: HTMLElement = screen.getByRole('paragraph');
await act(async () => {
fireEvent.click(paragraph);
fireEvent.click(paragraph);
});
expect(setCopyToClipboard).toBeCalled;
});
});
test('it should show icon in the document', () => {
render(
<HiddenText text="text" />
);
render(<HiddenText text="text" />);
expect(Icon).toBeInTheDocument;
});
test('it should show paragraph in the document and its content ', () => {
render(
<HiddenText dataTestId="test-id" text="text" />
);
render(<HiddenText dataTestId="test-id" text="text" />);
const testId: HTMLElement = screen.getByRole('paragraph');
expect(testId).toBeInTheDocument;
expect(testId).toHaveTextContent('Click here to reveal');
});
test('it should have a paragraph and its role attribute', () => {
render(<HiddenText text="text"/>);
const testId = screen.getByRole('paragraph');
expect(testId).toHaveAttribute('role','paragraph');
});
});
test('it should have a paragraph and its role attribute', () => {
render(<HiddenText text="text" />);
const testId = screen.getByRole('paragraph');
expect(testId).toHaveAttribute('role', 'paragraph');
});
});