Add Search example

README.md

@@ -4,6 +4,8 @@
 
 ### Minesweeper presentation
 
+### Purpose of the course
+
 ### Github repository overview
 
 [Creating a new repository](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/creating-a-new-repository)
@@ -12,7 +14,8 @@
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/1)
 
-### Code-style tools Eslint and Prettier
+### Code-style and Eslint 
+### Prettier
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/2)
 
@@ -71,12 +74,17 @@
 
 [Jest and TDD](https://medium.com/@suvodeep4119/javascript-tdd-using-jest-9b535c6be7be)
 
-### Basic game functionality
+### Field generator part1, part2, part3, part4 (Basic game functionality)
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/7)
 
 [Pull request2](https://github.com/nickovchinnikov/minesweeper/pull/8)
 
+### VSCode debug configuration
+### Debug basic game logic
+
+[config for vscode](https://gist.github.com/nickovchinnikov/ace62c117e6b6ff87f0fbfe96bb04164)
+
 ## Section 5: Storybook and Components Library
 
 ### Library Emotion for css-in-js
@@ -87,6 +95,8 @@
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/11/files)
 
+### Styled components API
+
 ### Storybook intro
 
 [Strybook docs](https://storybook.js.org/)
@@ -107,11 +117,13 @@
 
 ## Section 6: React Hooks intro
 
+### useState
+
 ### Dynamic components with useState Hook
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/15)
 
-### React-testing-library
+### Testing-library for ReactJS components
 
 [Jest-dom](https://github.com/testing-library/jest-dom)
 
@@ -141,13 +153,15 @@
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/38)
 
-## Section 7: Code quality and CI/CD
+## Section 7: Code quality, app deploy and CI/CD
 
 ### Test coverage report
 ### Test quality tool Stryker-Mutator
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/19)
 
+### Snapshot testing
+
 ### Githooks and Husky
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/20)
@@ -176,14 +190,21 @@
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/27/files)
 
 ### useState and player field generator
-### Test player field generator
+
+### Testing library user-event
+
+[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/39/files)
+
 ### Generate game field and open cell handler
+### Test player field generator
 ### Debug session and useMemo
 ### Click to the cell test cases
 ### Reset game by TDD
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/28/files)
 
+## Section 9: Game Hook
+
 ### Create game over behavior by TDD
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/29)
@@ -204,10 +225,12 @@
 
 ### Solved puzzle detector
 ### Create win game state handler
-### Add test cases for the useGame hook win state
+### Add test cases for win state
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/33/files)
 
+## Section 10: useEffect and useCallback
+
 ### Game timer and useEffect
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/34/files)

examples/TestingTibraryUserEvents/Search.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Search, SearchInput } from './Search';
+
+describe('Search test cases', () => {
+  it('renders Search component', async () => {
+    render(<Search />);
+
+    expect(screen.queryByText(/Searches for JavaScript/)).toBeNull();
+
+    await userEvent.type(screen.getByRole('textbox'), 'JavaScript');
+
+    expect(screen.getByText(/Searches for JavaScript/)).toBeInTheDocument();
+  });
+  it('calls the onChange callback handler with fireEvent', () => {
+    const onChange = jest.fn();
+
+    render(<SearchInput onChange={onChange} />);
+
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: 'JavaScript' },
+    });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+  it('calls the onChange callback handler with userEvent', async () => {
+    const onChange = jest.fn();
+
+    render(<SearchInput onChange={onChange} />);
+
+    await userEvent.type(screen.getByRole('textbox'), 'JavaScript');
+
+    expect(onChange).toHaveBeenCalledTimes(10);
+  });
+});

examples/TestingTibraryUserEvents/Search.tsx

@@ -0,0 +1,31 @@
+import React, { useState, FC, ChangeEventHandler } from 'react';
+
+export const Search: FC = () => {
+  const [search, setSearch] = useState<string>('');
+
+  const onChange: ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    setSearch(target.value);
+  };
+
+  return (
+    <div>
+      <SearchInput search={search} onChange={onChange} />
+      <p>Searches for {search ? search : '...'}</p>
+    </div>
+  );
+};
+
+interface SearchInputProps {
+  search?: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+}
+
+export const SearchInput: FC<SearchInputProps> = ({
+  search = '',
+  onChange,
+}) => (
+  <div>
+    <label htmlFor="search">Search: </label>
+    <input id="search" type="text" value={search} onChange={onChange} />
+  </div>
+);