feat: cover all dump component in the tests

README.md

@@ -39,6 +39,10 @@ All design styles are written from scratch. This application does not use any UI
 - 🧪 **Testing:** jest, react-testing-library
 - 💎 **Others:** desktop-first approach, atomic design, progressive web app, docker and dev container
 
+## Tests
+
+The project contains component tests for all dump (atom/molecule/organism) components. To run the tests, type and run: `yarn test` in the root directory.
+
 ## How to run
 
 1. Install [Node.js](https://nodejs.org/en/download/).

coverage/clover.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1698833304643" clover="3.2.0">
- <project timestamp="1698833304643" name="All files">
+<coverage generated="1698885820504" clover="3.2.0">
+ <project timestamp="1698885820504" name="All files">
  <metrics statements="120" coveredstatements="0" conditionals="329" coveredconditionals="0" methods="54" coveredmethods="0" elements="503" coveredelements="0" complexity="0" loc="120" ncloc="120" packages="1" files="3" classes="3"/>
  <file name="block-navigation.js" path="/Users/wojciechmarek/Desktop/todo-list/coverage/lcov-report/block-navigation.js">
  <metrics statements="30" coveredstatements="0" conditionals="19" coveredconditionals="0" methods="6" coveredmethods="0"/>

coverage/lcov-report/block-navigation.js.html

@@ -331,7 +331,7 @@ <h1><a href="index.html">All files</a> block-navigation.js</h1>
  <div class='footer quiet pad2 space-top1 center small'>
  Code coverage generated by
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
- at 2023-11-01T10:08:24.587Z
+ at 2023-11-02T00:43:40.391Z
  </div>
  <script src="prettify.js"></script>
  <script>

coverage/lcov-report/index.html

@@ -131,7 +131,7 @@ <h1>All files</h1>
  <div class='footer quiet pad2 space-top1 center small'>
  Code coverage generated by
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
- at 2023-11-01T10:08:24.587Z
+ at 2023-11-02T00:43:40.391Z
  </div>
  <script src="prettify.js"></script>
  <script>

coverage/lcov-report/prettify.js.html

@@ -76,7 +76,7 @@ <h1><a href="index.html">All files</a> prettify.js</h1>
  <div class='footer quiet pad2 space-top1 center small'>
  Code coverage generated by
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
- at 2023-11-01T10:08:24.587Z
+ at 2023-11-02T00:43:40.391Z
  </div>
  <script src="prettify.js"></script>
  <script>

coverage/lcov-report/sorter.js.html

@@ -658,7 +658,7 @@ <h1><a href="index.html">All files</a> sorter.js</h1>
  <div class='footer quiet pad2 space-top1 center small'>
  Code coverage generated by
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
- at 2023-11-01T10:08:24.587Z
+ at 2023-11-02T00:43:40.391Z
  </div>
  <script src="prettify.js"></script>
  <script>

package.json

@@ -12,6 +12,7 @@
  "preview": "vite preview",
  "prepare": "husky install",
  "test": "jest --env=jsdom",
+ "test-watch": "jest --env=jsdom --watch",
  "prettier": "prettier --write ."
  },
  "dependencies": {
@@ -38,6 +39,7 @@
  "@storybook/react": "^7.0.21",
  "@storybook/react-vite": "^7.0.21",
  "@storybook/testing-library": "^0.2.2",
+ "@testing-library/dom": "^9.3.3",
  "@testing-library/jest-dom": "^6.1.4",
  "@testing-library/react": "^14.0.0",
  "@testing-library/user-event": "^14.5.1",

src/components/atoms/Button/button.test.tsx

@@ -1,6 +1,7 @@
 import { configure, render } from '@testing-library/react';
 import { ButtonProps } from './button.interface';
 import { Button } from './button';
+import '@testing-library/jest-dom';
 
 describe('Button', () => {
  let buttonProps: ButtonProps;
@@ -19,18 +20,35 @@ describe('Button', () => {
  expect(baseElement).toBeTruthy();
  });
 
+ describe('when the button is rendered', () => {
+ it('should have the correct text', () => {
+ const { getByRole } = render(<Button {...buttonProps} />);
+ const button = getByRole('button', { name: /button/i });
+ expect(button).toHaveTextContent('Button');
+ });
+ });
+
  describe('when the button is clicked', () => {
  it('should call the onClick function', () => {
  const { getByRole } = render(<Button {...buttonProps} />);
  const button = getByRole('button', { name: /button/i });
  button.click();
  expect(buttonProps.onClick).toHaveBeenCalled();
  });
+ });
 
+ describe('when the button is disabled', () => {
  it('should not call the onClick function', () => {
- const { getByRole } = render(<Button {...buttonProps} />);
+ const { getByRole } = render(<Button {...buttonProps} disabled />);
  const button = getByRole('button', { name: /button/i });
+ button.click();
  expect(buttonProps.onClick).not.toHaveBeenCalled();
  });
+
+ it('should have the disabled attribute', () => {
+ const { getByRole } = render(<Button {...buttonProps} disabled />);
+ const button = getByRole('button', { name: /button/i });
+ expect(button).toBeDisabled();
+ });
  });
 });

src/components/atoms/Divider/divider.test.tsx

@@ -1,7 +1,9 @@
+import { render } from '@testing-library/react';
+import { Divider } from './divider';
+
 describe('Divider', () => {
  it('should render', () => {
- expect(true).toBeTruthy();
+ const { baseElement } = render(<Divider />);
+ expect(baseElement).toBeTruthy();
  });
-
- describe('when the button is clicked', () => {});
 });

src/components/atoms/Icon/icon.test.tsx

@@ -1,7 +1,20 @@
+import { configure, render } from '@testing-library/react';
+import { Icon } from './icon';
+import { IconProps } from './icon.interface';
+
 describe('Icon', () => {
- it('should render', () => {
- expect(true).toBeTruthy();
+ let iconProps: IconProps;
+
+ beforeEach(() => {
+ configure({ throwSuggestions: true });
+
+ iconProps = {
+ icon: 'icon',
+ };
  });
 
- describe('when the button is clicked', () => {});
+ it('should render', () => {
+ const { baseElement } = render(<Icon {...iconProps} />);
+ expect(baseElement).toBeTruthy();
+ });
 });

src/components/atoms/Input/Input.test.tsx

@@ -1,7 +1,63 @@
+import { configure, render } from '@testing-library/react';
+import { Input } from './input';
+import { InputProps } from './input.interface';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+
 describe('Input', () => {
+ let inputProps: InputProps;
+
+ beforeEach(() => {
+ configure({ throwSuggestions: true });
+
+ inputProps = {
+ value: 'hello world',
+ placeholder: 'placeholder test',
+ handleInputChange: jest.fn(),
+ };
+ });
+
  it('should render', () => {
- expect(true).toBeTruthy();
+ const { baseElement } = render(<Input {...inputProps} />);
+ expect(baseElement).toBeTruthy();
  });
 
- describe('when the button is clicked', () => {});
+ describe('when the input is rendered', () => {
+ it('should have the correct value', () => {
+ const { getByRole } = render(<Input {...inputProps} />);
+ const input = getByRole('textbox');
+ expect(input).toHaveValue('hello world');
+ });
+
+ it('should have the correct placeholder', () => {
+ const { getByRole } = render(<Input {...inputProps} />);
+ const input = getByRole('textbox');
+ expect(input).toHaveAttribute('placeholder', 'placeholder test');
+ });
+ });
+
+ describe('when the text to the input is entered', () => {
+ it('should call the handleInputChange function when the input changes', async () => {
+ const { getByRole } = render(<Input {...inputProps} />);
+ const input = getByRole('textbox');
+ await userEvent.type(input, 'qwerty', { delay: 1 });
+ expect(inputProps.handleInputChange).toHaveBeenCalled();
+ });
+
+ it('should call the handleInputChange function 3 times for 3 characters', async () => {
+ const { getByRole } = render(<Input {...inputProps} />);
+ const input = getByRole('textbox');
+ await userEvent.type(input, 'abc', { delay: 1 });
+ expect(inputProps.handleInputChange).toHaveBeenCalledTimes(3);
+ });
+
+ it('should call the handleInputChange function with correct phrase', async () => {
+ const { getByRole } = render(<Input {...inputProps} />);
+ const input = getByRole('textbox');
+ await userEvent.type(input, '123', { delay: 1 });
+ expect(inputProps.handleInputChange).toHaveBeenCalledWith(
+ 'hello world123'
+ );
+ });
+ });
 });

src/components/atoms/Text/text.spec.tsx

@@ -1,7 +1,29 @@
+import { configure, render } from '@testing-library/react';
+import { Text } from './text';
+import { TextProps } from './text.interface';
+import '@testing-library/jest-dom';
+
 describe('Text', () => {
+ let textProps: TextProps;
+
+ beforeEach(() => {
+ configure({ throwSuggestions: true });
+
+ textProps = {
+ text: 'hello world',
+ };
+ });
+
  it('should render', () => {
- expect(true).toBeTruthy();
+ const { baseElement } = render(<Text {...textProps} />);
+ expect(baseElement).toBeTruthy();
  });
 
- describe('when the button is clicked', () => {});
+ describe('when the text is rendered', () => {
+ it('should have the correct value', () => {
+ const { getByText } = render(<Text {...textProps} />);
+ const text = getByText('hello world');
+ expect(text).toBeInTheDocument();
+ });
+ });
 });

src/components/atoms/TextArea/text-area.test.tsx

@@ -1,7 +1,66 @@
+import { TextAreaProps } from './text-area.interface';
+import '@testing-library/jest-dom';
+import { configure, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TextArea } from './text-area';
+
 describe('TextArea', () => {
+ let textAreaProps: TextAreaProps;
+
+ beforeEach(() => {
+ configure({ throwSuggestions: true });
+
+ textAreaProps = {
+ value: 'hello textarea',
+ placeholder: 'placeholder test for textarea',
+ handleTextAreaChange: jest.fn(),
+ };
+ });
+
  it('should render', () => {
- expect(true).toBeTruthy();
+ const { baseElement } = render(<TextArea {...textAreaProps} />);
+ expect(baseElement).toBeTruthy();
  });
 
- describe('when the button is clicked', () => {});
+ describe('when the text area is rendered', () => {
+ it('should have the correct value', () => {
+ const { getByRole } = render(<TextArea {...textAreaProps} />);
+ const textarea = getByRole('textbox');
+ expect(textarea).toHaveValue('hello textarea');
+ });
+
+ it('should have the correct placeholder', () => {
+ const { getByRole } = render(<TextArea {...textAreaProps} />);
+ const textarea = getByRole('textbox');
+ expect(textarea).toHaveAttribute(
+ 'placeholder',
+ 'placeholder test for textarea'
+ );
+ });
+ });
+
+ describe('when the text to the text area is entered', () => {
+ it('should call the handleTextAreaChange function when the input changes', async () => {
+ const { getByRole } = render(<TextArea {...textAreaProps} />);
+ const textarea = getByRole('textbox');
+ await userEvent.type(textarea, 'qwerty', { delay: 1 });
+ expect(textAreaProps.handleTextAreaChange).toHaveBeenCalled();
+ });
+
+ it('should call the handleTextAreaChange function 3 times for 3 characters', async () => {
+ const { getByRole } = render(<TextArea {...textAreaProps} />);
+ const textarea = getByRole('textbox');
+ await userEvent.type(textarea, 'abc', { delay: 1 });
+ expect(textAreaProps.handleTextAreaChange).toHaveBeenCalledTimes(3);
+ });
+
+ it('should call the handleTextAreaChange function with correct phrase', async () => {
+ const { getByRole } = render(<TextArea {...textAreaProps} />);
+ const textarea = getByRole('textbox');
+ await userEvent.type(textarea, '1', { delay: 1 });
+ expect(textAreaProps.handleTextAreaChange).toHaveBeenCalledWith(
+ 'hello textarea1'
+ );
+ });
+ });
 });

src/components/atoms/Title/Title.test.tsx

@@ -1,7 +1,29 @@
+import { configure, render } from '@testing-library/react';
+import { Title } from './title';
+import { TitleProps } from './title.interface';
+import '@testing-library/jest-dom';
+
 describe('Title', () => {
+ let titleProps: TitleProps;
+
+ beforeEach(() => {
+ configure({ throwSuggestions: true });
+
+ titleProps = {
+ title: 'hello title world',
+ };
+ });
+
  it('should render', () => {
- expect(true).toBeTruthy();
+ const { baseElement } = render(<Title {...titleProps} />);
+ expect(baseElement).toBeTruthy();
  });
 
- describe('when the button is clicked', () => {});
+ describe('when the title is rendered', () => {
+ it('should have the correct value', () => {
+ const { getByRole } = render(<Title {...titleProps} />);
+ const title = getByRole('heading', { name: /hello title world/i });
+ expect(title).toBeInTheDocument();
+ });
+ });
 });

yarn.lock

@@ -3079,7 +3079,7 @@
  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
  integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
 
-"@testing-library/dom@^9.0.0":
+"@testing-library/dom@^9.0.0", "@testing-library/dom@^9.3.3":
  version "9.3.3"
  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.3.tgz#108c23a5b0ef51121c26ae92eb3179416b0434f5"
  integrity sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==