github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

fix lint

Browse Source
This commit is contained in:
Simon Larsen
2022-10-25 20:42:33 +01:00
parent 32c7e03cca
commit 6a308eb020
13 changed files with 143 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CommonUI/jest.config.json
View File

@@ -14,7 +14,7 @@
"testEnvironment": "jsdom",
"collectCoverage": true,
"coverageReporters": ["text", "html"],
"testRegex": ".src/Tests/(.*).test.(tsx||ts)",
"testRegex": "./src/Tests/(.*).test.(tsx||ts)",
"collectCoverageFrom": ["./**/*.(tsx||ts)"],
"coverageThreshold": {
"global": {

1
CommonUI/src/Components/Alerts/Alert.tsx
View File

@@ -59,6 +59,7 @@ const Alert: FunctionComponent<ComponentProps> = (
>
{props.onClose && (
<button
role={'alert-close-button'}
type="button"
className="close"
onClick={() => {

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

@@ -26,7 +26,10 @@ const Badge: FunctionComponent<ComponentProps> = (
if (props.badgeCount) {
return (
<span className={`mt-1 badge ${className} float-end`}>
<span
role={'badge'}
className={`mt-1 badge ${className} float-end`}
>
{props.badgeCount}
</span>
);

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

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

12
CommonUI/src/Components/Loader/Loader.tsx
View File

@@ -20,11 +20,19 @@ const Loader: FunctionComponent<ComponentProps> = ({
loaderType = LoaderType.Bar,
}: ComponentProps) => {
if (loaderType === LoaderType.Bar) {
return <BarLoader height={4} width={size} color={color.toString()} />;
return (
<div role="bar-loader">
<BarLoader height={4} width={size} color={color.toString()} />
</div>
);
}
if (loaderType === LoaderType.Beats) {
return <BeatLoader size={size} color={color.toString()} />;
return (
<div role="beat-loader">
<BeatLoader size={size} color={color.toString()} />
</div>
);
}
return <></>;

47
CommonUI/src/Tests/Components/Alert.test.tsx
View File

@@ -2,7 +2,6 @@ import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Alert, { AlertType } from '../../Components/Alerts/Alert';
import Icon from '../../Components/Icon/Icon';
describe('alert tests', () => {
test('it should render all props passed', () => {
@@ -17,42 +16,58 @@ describe('alert tests', () => {
onClose={handleClose}
/>
);
expect(Icon).toBeInTheDocument()
const icon: HTMLElement = screen.getByRole('icon');
expect(icon).toBeInTheDocument();
const alert: HTMLElement = screen.getByRole('alert');
expect(alert).toBeInTheDocument();
alert.click();
const alertCloseButton: HTMLElement =
screen.getByRole('alert-close-button');
expect(alertCloseButton).toBeInTheDocument();
alertCloseButton.click();
expect(handleClick).toBeCalled();
expect(handleClose).toBeCalled();
});
test('it should show icon when alert type is equal to success', () => {
render(<Alert dataTestId="test-id" type={AlertType.SUCCESS} />);
expect(Icon).toBeInTheDocument()
const icon: HTMLElement = screen.getByRole('icon');
expect(icon).toBeInTheDocument();
const testId: HTMLElement = screen.getByTestId('test-id');
expect(testId).toHaveClass('alert-success');
});
test('it should show icon when alert type is equal to info', () => {
render(<Alert dataTestId="test-id" type={AlertType.INFO} />);
expect(Icon).toBeInTheDocument()
const icon: HTMLElement = screen.getByRole('icon');
expect(icon).toBeInTheDocument();
const testId: HTMLElement = screen.getByTestId('test-id');
expect(testId).toHaveClass('alert-info');
});
test('it should show icon when alert type is equal to warning', () => {
render(<Alert dataTestId="test-id" type={AlertType.WARNING} />);
expect(Icon).toBeInTheDocument()
const icon: HTMLElement = screen.getByRole('icon');
expect(icon).toBeInTheDocument();
const testId: HTMLElement = screen.getByTestId('test-id');
expect(testId).toHaveClass('alert-warning');
});
test('it should show icon when alert type is equal to danger', () => {
render(<Alert dataTestId="test-id" type={AlertType.DANGER} />);
expect(Icon).toBeInTheDocument()
const icon: HTMLElement = screen.getByRole('icon');
expect(icon).toBeInTheDocument();
const testId: HTMLElement = screen.getByTestId('test-id');
expect(testId).toHaveClass('alert-danger');
});
test('it should have a title content displayed in document', () => {
render(<Alert title="title" />);
expect(screen.getByText('title')).toBeInTheDocument()
expect(screen.getByText('title')).toBeInTheDocument();
expect(screen.getByText('title')).toHaveTextContent('title');
});
test('it should have a strong text content displayed in document ', () => {
render(<Alert strongTitle="strong" />);
expect(screen.getByText('strong')).toBeInTheDocument()
expect(screen.getByText('strong')).toBeInTheDocument();
expect(screen.getByText('strong')).toHaveTextContent('strong');
});
test('it should handle onClick event', () => {
@@ -64,13 +79,23 @@ describe('alert tests', () => {
test('it should handle onClose event', () => {
const handleClose: undefined | (() => void) = jest.fn();
render(<Alert title="title" onClose={handleClose} />);
fireEvent.click(screen.getByText('title'));
const alertCloseButton: HTMLElement =
screen.getByRole('alert-close-button');
expect(alertCloseButton).toBeInTheDocument();
alertCloseButton.click();
expect(handleClose).toBeCalled();
});
test('it should display button onClose event', () => {
const handleClose: undefined | (() => void) = jest.fn();
render(<Alert onClose={handleClose} />);
fireEvent.click(screen.getByRole('button'));
expect(screen.getByRole('button')).toBeVisible();
const alert: HTMLElement = screen.getByRole('alert');
expect(alert).toBeInTheDocument();
const alertCloseButton: HTMLElement =
screen.getByRole('alert-close-button');
expect(alertCloseButton).toBeInTheDocument();
});
});

14
CommonUI/src/Tests/Components/Badge.test.tsx
View File

@@ -2,16 +2,17 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Badge, { BadgeType } from '../../Components/Badge/Badge';
import Icon from '../../Components/Icon/Icon';
describe('Badge', () => {
test('it should render all props', () => {
render(<Badge badgeCount={2} badgeType={BadgeType.SUCCESS} />);
expect(Icon).toBeInTheDocument()
const badge: HTMLElement = screen.getByRole('badge');
expect(badge).toBeInTheDocument();
});
test('it should show icon when badgetype is equal to success', () => {
test('it should show badge when badgetype is equal to success', () => {
render(<Badge badgeCount={1} badgeType={BadgeType.SUCCESS} />);
expect(Icon).toBeInTheDocument()
const badge: HTMLElement = screen.getByRole('badge');
expect(badge).toBeInTheDocument();
const testId: HTMLElement = screen.getByText(1);
expect(testId).toHaveClass('bg-success');
});
@@ -50,4 +51,9 @@ describe('Badge', () => {
const testId: HTMLElement = screen.getByText(2);
expect(testId).toHaveTextContent('2');
});
test('should not show a badge when the count is 0', () => {
render(<Badge badgeCount={0} badgeType={BadgeType.WARNING} />);
expect(screen.queryByRole('badge')).toBeFalsy();
});
});

5
CommonUI/src/Tests/Components/BasicForm.test.tsx
View File

@@ -10,7 +10,6 @@ import Fields from '../../Components/Forms/Types/Fields';
import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
import '@testing-library/jest-dom/extend-expect';
describe('BasicForm test', () => {
const fields: Fields<FormValues<any>> = [
{
@@ -57,8 +56,8 @@ describe('BasicForm test', () => {
const forgotPasswordText: HTMLElement = screen.getByTestId(
'login-forgot-password'
);
expect(inputEmail).toBeInTheDocument()
expect(inputPassword).toBeInTheDocument()
expect(inputEmail).toBeInTheDocument();
expect(inputPassword).toBeInTheDocument();
expect(footer).toHaveTextContent('Footer');
expect(forgotPasswordText).toHaveTextContent('Forgot password?');
});

18
CommonUI/src/Tests/Components/Button.test.tsx
View File

@@ -4,10 +4,10 @@ import '@testing-library/jest-dom/extend-expect';
import Button, {
ButtonSize,
ButtonStyleType,
} from '../Components/Button/Button';
import ButtonType from '../Components/Button/ButtonTypes';
import ShortcutKey from '../Components/ShortcutKey/ShortcutKey';
import Icon from '../Components/Icon/Icon';
} from '../../Components/Button/Button';
import ButtonType from '../../Components/Button/ButtonTypes';
import ShortcutKey from '../../Components/ShortcutKey/ShortcutKey';
import { IconProp } from '../../Components/Icon/Icon';
describe('Button', () => {
test('it should render correctly with title and icon', () => {
@@ -18,17 +18,19 @@ describe('Button', () => {
disabled={true}
type={ButtonType.Button}
showIconOnRight={true}
icon={IconProp.Add}
/>
);
const title: HTMLElement = screen.getByText('sample title');
const testId: HTMLElement = screen.getByTestId('test-id');
expect(title).toBeInTheDocument()
expect(testId).toBeInTheDocument()
expect(title).toBeInTheDocument();
expect(testId).toBeInTheDocument();
expect(testId).toHaveAttribute('type', 'button');
expect(testId).toHaveAttribute('disabled');
expect(testId).toHaveClass('btn');
expect(Icon).toBeInTheDocument()
const icon: HTMLElement = screen.getByRole('icon');
expect(icon).toBeInTheDocument();
});
test('it should have shortcutKey Setting', () => {
@@ -181,7 +183,7 @@ describe('Button', () => {
render(<Button dataTestId="test-id" disabled={false} />);
const testId: HTMLElement = screen.getByTestId('test-id');
expect(testId).not.toBeDisabled;
expect(testId).not.toBeDisabled();
});
test('it should handle onClick event', () => {

115
CommonUI/src/Tests/Components/HiddenText.test.tsx
View File

@@ -1,73 +1,66 @@
import React from 'react';
import { render, screen, fireEvent, act } from '@testing-library/react';
import { fireEvent, render, screen, waitFor } 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" />);
test('it should click hidden-text and reveal text in document', async () => {
render(<HiddenText text="Special" />);
const hiddenText: HTMLElement = screen.getByRole('hidden-text');
fireEvent.click(hiddenText);
await waitFor(() => {
expect(screen.getByRole('revealed-text')).toBeInTheDocument();
});
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'
expect(screen.queryByRole('hidden-text')).toBeFalsy();
expect(screen.queryByRole('revealed-text')).toHaveTextContent(
'Special'
);
});
it('it should call function after clicking paragraph', async () => {
const setCopyToClipboard: () => false = jest.fn();
act(() => {
render(<HiddenText text="text" isCopyable={true} />);
test('it should not show copy to clipboard if isCopyable is false', async () => {
render(<HiddenText text="text" isCopyable={false} />);
const hiddenText: HTMLElement = screen.getByRole('hidden-text');
fireEvent.click(hiddenText);
await waitFor(() => {
expect(screen.getByRole('revealed-text')).toBeInTheDocument();
});
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');
expect(screen.queryByRole('hidden-text')).toBeFalsy();
expect(screen.queryByRole('copy-to-clipboard')).toBeFalsy();
});
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');
test('it should click hidden-text and reveal icon', async () => {
render(<HiddenText text="text" isCopyable={true} />);
const hiddenText: HTMLElement = screen.getByRole('hidden-text');
fireEvent.click(hiddenText);
await waitFor(() => {
expect(screen.getByRole('revealed-text')).toBeInTheDocument();
});
expect(screen.queryByRole('icon')).toBeTruthy();
});
test('it should click hidden-text and copy to clipboard', async () => {
render(<HiddenText text="text" isCopyable={true} />);
const hiddenText: HTMLElement = screen.getByRole('hidden-text');
fireEvent.click(hiddenText);
await waitFor(() => {
expect(screen.getByRole('revealed-text')).toBeInTheDocument();
});
expect(screen.getByRole('copy-to-clipboard')).toHaveTextContent(
'Copy to Clipboard'
);
const copy: HTMLElement = screen.getByRole('copy-to-clipboard');
fireEvent.click(copy);
await waitFor(() => {
expect(screen.getByRole('copy-to-clipboard')).toHaveTextContent(
'Copied to Clipboard'
);
});
});
});

10
CommonUI/src/Tests/Components/Loader.test.tsx
View File

@@ -1,8 +1,6 @@
import React from 'react';
import { render } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import BarLoader from 'react-spinners/BarLoader';
import BeatLoader from 'react-spinners/BeatLoader';
import Loader, { LoaderType } from '../../Components/Loader/Loader';
import Color from 'Common/Types/Color';
@@ -15,7 +13,8 @@ describe('Loader tests', () => {
loaderType={LoaderType.Bar}
/>
);
expect(BarLoader).toBeInTheDocument();
const barLoader: HTMLElement = screen.getByRole('bar-loader');
expect(barLoader).toBeInTheDocument();
});
test('it should render if beats loader show up', () => {
render(
@@ -25,6 +24,7 @@ describe('Loader tests', () => {
loaderType={LoaderType.Beats}
/>
);
expect(BeatLoader).toBeInTheDocument()
const beatLoader: HTMLElement = screen.getByRole('beat-loader');
expect(beatLoader).toBeInTheDocument();
});
});

2
CommonUI/src/Tests/Components/Pill.test.tsx
View File

@@ -2,7 +2,7 @@ import * as React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Pill, { PillSize } from '../Components/Pill/Pill';
import Pill, { PillSize } from '../../Components/Pill/Pill';
import Color from 'Common/Types/Color';
describe('<Pill />', () => {

4
CommonUI/src/Tests/Components/Toast.test.tsx
View File

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
import userEvent from '@testing-library/user-event';
import Toast, { ToastType } from '../Components/Toast/Toast';
import Toast, { ToastType } from '../../Components/Toast/Toast';
import OneUptimeDate from 'Common/Types/Date';
describe('Test for Toast.tsx', () => {
@@ -128,6 +128,6 @@ describe('Test for Toast.tsx', () => {
screen.getByTestId('toast-button');
await user.click(loginButton);
expect(screen.queryByTestId('toast-main')).toBeFalsy;
expect(screen.queryByTestId('toast-main')).toBeFalsy();
});
});