witine/lookingglass
1
0
Fork 0
forked from mirrors/thatmattlove-hyperglass
Code Issues Pull requests Releases Activity

update & fix tests

Browse source
This commit is contained in:
thatmattlove 2023-04-13 21:43:20 -04:00
parent a15fe52061
commit b94eb3006a
3 changed files with 26 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
hyperglass/ui/hooks/use-boolean-value.test.tsx
View file

@ -1,35 +1,20 @@
import { useState } from 'react';
import { render } from '@testing-library/react';
import { renderHook } from '@testing-library/react';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import { useBooleanValue } from './use-boolean-value';
const VALUE_IF_TRUE = 'Is True';
const VALUE_IF_FALSE = 'Is False';
const TestComponent = (): JSX.Element => {
const [state, setState] = useState<boolean>(false);
const value = useBooleanValue(state, VALUE_IF_TRUE, VALUE_IF_FALSE);
return (
<div>
<span>{value}</span>
<button type="button" onClick={() => setState(p => !p)}>
Toggle
</button>
</div>
);
};
describe('useBooleanValue Hook', () => {
it('text should reflect boolean state', () => {
const { queryByText, getByRole } = render(<TestComponent />);
expect(queryByText(VALUE_IF_FALSE)).toBeInTheDocument();
userEvent.click(getByRole('button'));
expect(queryByText(VALUE_IF_FALSE)).not.toBeInTheDocument();
expect(queryByText(VALUE_IF_TRUE)).toBeInTheDocument();
const { result, rerender } = renderHook(
({ initial }) => useBooleanValue(initial, VALUE_IF_TRUE, VALUE_IF_FALSE),
{ initialProps: { initial: false } },
);
expect(result.current).toBe(VALUE_IF_FALSE);
rerender({ initial: true });
expect(result.current).toBe(VALUE_IF_TRUE);
rerender({ initial: false });
expect(result.current).toBe(VALUE_IF_FALSE);
});
});

26
hyperglass/ui/hooks/use-greeting.test.tsx
View file

@ -42,7 +42,7 @@ const TestComponent = (): JSX.Element => {
};
describe('useGreeting Hook', () => {
it('should open and close when toggled', () => {
it('should open and close when toggled', async () => {
const { container } = render(<TestComponent />);
const open = container.querySelector('#open');
const close = container.querySelector('#close');
@ -50,16 +50,16 @@ describe('useGreeting Hook', () => {
if (open !== null && close !== null && isOpen !== null) {
expect(isOpen).toHaveTextContent(FALSE);
userEvent.click(open);
await userEvent.click(open);
expect(isOpen).toHaveTextContent(TRUE);
userEvent.click(close);
await userEvent.click(close);
expect(isOpen).toHaveTextContent(FALSE);
} else {
throw new Error('Test render error');
}
});
it('should properly update acknowledgement state', () => {
it('should properly update acknowledgement state', async () => {
const { container } = render(<TestComponent />);
const open = container.querySelector('#open');
const close = container.querySelector('#close');
@ -82,31 +82,31 @@ describe('useGreeting Hook', () => {
ackFalseNotRequired !== null &&
ackTrueNotRequired !== null
) {
userEvent.click(open);
await userEvent.click(open);
expect(isOpen).toHaveTextContent(TRUE);
expect(isAck).toHaveTextContent(FALSE);
expect(greetingReady).toHaveTextContent(FALSE);
userEvent.click(open);
userEvent.click(ackFalseRequired);
await userEvent.click(open);
await userEvent.click(ackFalseRequired);
expect(isOpen).toHaveTextContent(FALSE);
expect(isAck).toHaveTextContent(FALSE);
expect(greetingReady).toHaveTextContent(FALSE);
userEvent.click(open);
userEvent.click(ackTrueRequired);
await userEvent.click(open);
await userEvent.click(ackTrueRequired);
expect(isOpen).toHaveTextContent(FALSE);
expect(isAck).toHaveTextContent(TRUE);
expect(greetingReady).toHaveTextContent(TRUE);
userEvent.click(open);
userEvent.click(ackFalseNotRequired);
await userEvent.click(open);
await userEvent.click(ackFalseNotRequired);
expect(isOpen).toHaveTextContent(FALSE);
expect(isAck).toHaveTextContent(FALSE);
expect(greetingReady).toHaveTextContent(TRUE);
userEvent.click(open);
userEvent.click(ackTrueNotRequired);
await userEvent.click(open);
await userEvent.click(ackTrueNotRequired);
expect(isOpen).toHaveTextContent(FALSE);
expect(isAck).toHaveTextContent(TRUE);
expect(greetingReady).toHaveTextContent(TRUE);

6
hyperglass/ui/hooks/use-opposing-color.test.tsx
View file

@ -23,7 +23,7 @@ const TestComponent = (): JSX.Element => {
};
describe('useOpposingColor Hook', () => {
it('should change foreground color', () => {
it('should change foreground color', async () => {
const { getByRole, container } = render(
<ChakraProvider theme={extendTheme({ initialColorMode: 'light', useSystemColorMode: false })}>
<TestComponent />
@ -35,12 +35,12 @@ describe('useOpposingColor Hook', () => {
expect(test1).toHaveStyle('color: black;');
expect(test2).toHaveStyle('color: black;');
userEvent.click(getByRole('button'));
await userEvent.click(getByRole('button'));
expect(test1).toHaveStyle('color: white;');
expect(test2).toHaveStyle('color: white;');
userEvent.click(getByRole('button'));
await userEvent.click(getByRole('button'));
expect(test1).toHaveStyle('color: black;');
expect(test2).toHaveStyle('color: black;');