mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-21 22:59:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #285 from munyanezaarmel/tests-hidden-text

Browse Source 
tests for CommonUI/src/Components/HiddenText/HiddenText.tsx
This commit is contained in:
Simon Larsen 2022-10-25 19:20:05 +01:00 committed by GitHub
commit 6d9a628938
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 148 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

66
CommonUI/package-lock.json generated
View File

@ -62,6 +62,7 @@
"@faker-js/faker": "^7.3.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^28.1.4",
"@types/node": "^17.0.45",
@ -10345,6 +10346,36 @@
"react-dom": "^18.0.0"
}
},
"node_modules/@testing-library/react-hooks": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz",
"integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5",
"react-error-boundary": "^3.1.0"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"@types/react": "^16.9.0 || ^17.0.0",
"react": "^16.9.0 || ^17.0.0",
"react-dom": "^16.9.0 || ^17.0.0",
"react-test-renderer": "^16.9.0 || ^17.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"react-dom": {
"optional": true
},
"react-test-renderer": {
"optional": true
}
}
},
"node_modules/@testing-library/user-event": {
"version": "14.4.3",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.4.3.tgz",
@ -17828,6 +17859,22 @@
"react": ">= 16.8 || 18.0.0"
}
},
"node_modules/react-error-boundary": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
"integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5"
},
"engines": {
"node": ">=10",
"npm": ">=6"
},
"peerDependencies": {
"react": ">=16.13.1"
}
},
"node_modules/react-fast-compare": {
"version": "2.0.4",
"license": "MIT"
@ -20714,6 +20761,16 @@
"@types/react-dom": "^18.0.0"
}
},
"@testing-library/react-hooks": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz",
"integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"react-error-boundary": "^3.1.0"
}
},
"@testing-library/user-event": {
"version": "14.4.3",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.4.3.tgz",
@ -33447,6 +33504,15 @@
"prop-types": "^15.8.1"
}
},
"react-error-boundary": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
"integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5"
}
},
"react-fast-compare": {
"version": "2.0.4"
},

1
CommonUI/package.json
View File

@ -64,6 +64,7 @@
"@faker-js/faker": "^7.3.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^28.1.4",
"@types/node": "^17.0.45",

5
CommonUI/src/Components/HiddenText/HiddenText.tsx
View File

@ -4,6 +4,7 @@ import Icon, { IconProp } from '../Icon/Icon';
export interface ComponentProps {
text: string;
isCopyable?: boolean;
dataTestId?: string;
}
const HiddenText: FunctionComponent<ComponentProps> = (
@ -11,10 +12,10 @@ const HiddenText: FunctionComponent<ComponentProps> = (
): ReactElement => {
const [showText, setShowText] = useState<boolean>(false);
const [copiedToClipboard, setCopyToClipboard] = useState<boolean>(false);
if (!showText) {
return (
<p
role="paragraph"
className="pointer underline"
onClick={() => {
setShowText(true);
@ -24,7 +25,6 @@ const HiddenText: FunctionComponent<ComponentProps> = (
</p>
);
}
return (
<div>
<div className="flex">
@ -47,6 +47,7 @@ const HiddenText: FunctionComponent<ComponentProps> = (
{props.isCopyable && (
<div>
<span
data-testid={props.dataTestId}
className="pointer underline"
onClick={async () => {
await navigator.clipboard.writeText(props.text);

1
CommonUI/src/Components/Icon/Icon.tsx
View File

@ -148,7 +148,6 @@ export interface ComponentProps {
onClick?: (() => void) | undefined;
style?: CSSProperties | undefined;
}
const Icon: FunctionComponent<ComponentProps> = ({
size = SizeProp.Regular,
icon,

73
CommonUI/src/Tests/HiddenText.test.tsx Normal file
View File

@ -0,0 +1,73 @@
import React from 'react';
import { render, screen, fireEvent, act } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import HiddenText from '../Components/HiddenText/HiddenText';
import Icon from '../Components/Icon/Icon';
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');
await act(async () => {
fireEvent.click(paragraph);
});
expect(screen.getByText('text')).toBeInTheDocument();
});
it('it should call function after clicking paragraph', async () => {
const setShowText: () => true = jest.fn();
act(() => {
render(<HiddenText text="text" />);
});
const paragraph: HTMLElement = screen.getByRole('paragraph');
await act(async () => {
fireEvent.click(paragraph);
});
expect(setShowText).toBeCalled;
});
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');
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();
act(() => {
render(<HiddenText text="text" isCopyable={true} />);
});
const paragraph: HTMLElement = screen.getByRole('paragraph');
await act(async () => {
fireEvent.click(paragraph);
});
expect(setCopyToClipboard).toBeCalled;
});
test('it should show icon in the document', () => {
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" />);
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: HTMLElement = screen.getByRole('paragraph');
expect(testId).toHaveAttribute('role', 'paragraph');
});
});