Skip to content

Commit

Permalink
Merge pull request #41 from nickovchinnikov/nick/useEffect
Browse files Browse the repository at this point in the history
Nick/useState
  • Loading branch information
nickovchinnikov committed Sep 23, 2021
2 parents b0893db + aee978e commit ab697e8
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 11 deletions.
24 changes: 13 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Minesweeper

## Section 1: Introduction
## Section: Introduction

### Minesweeper presentation

Expand All @@ -19,7 +19,7 @@

[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/2)

## Section 2: Typescript recap
## Section: Typescript recap

### Typescript basic
### Parametric typing with generics
Expand All @@ -35,7 +35,7 @@

[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/4)

## Section 3: React intro
## Section: React intro

### Create React App

Expand Down Expand Up @@ -64,7 +64,7 @@

[React intro examples pull request](https://github.com/nickovchinnikov/minesweeper/pull/10/files)

## Section 4: Jest, TDD and basic game logic
## Section: Jest, TDD and basic game logic

### Jest testing framework (TDD vs TLD)

Expand All @@ -85,7 +85,7 @@

[config for vscode](https://gist.github.com/nickovchinnikov/ace62c117e6b6ff87f0fbfe96bb04164)

## Section 5: Storybook and Components Library
## Section: Storybook and Components Library

### Library Emotion for css-in-js

Expand Down Expand Up @@ -115,10 +115,12 @@

[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/14)

## Section 6: React Hooks intro
## Section: React Hooks intro

### useState

[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/41)

### Dynamic components with useState Hook

[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/15)
Expand Down Expand Up @@ -153,7 +155,7 @@

[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/38)

## Section 7: Code quality, app deploy and CI/CD
## Section: Code quality, app deploy and CI/CD

### Test coverage report
### Test quality tool Stryker-Mutator
Expand All @@ -175,7 +177,7 @@

[Pull request3](https://github.com/nickovchinnikov/minesweeper/pull/23)

## Section 8: React hooks and react testing library
## Section: React hooks and react testing library

### Static game

Expand Down Expand Up @@ -203,7 +205,7 @@

[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/28/files)

## Section 9: Game Hook
## Section: Game Hook

### Create game over behavior by TDD

Expand All @@ -217,7 +219,7 @@

[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/31/files)

## Section 9: Game behavior and useEffect
## Section: Game behavior and useEffect

### Set flag action

Expand All @@ -229,7 +231,7 @@

[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/33/files)

## Section 10: useEffect and useCallback
## Section: useEffect and useCallback

### Game timer and useEffect

Expand Down
28 changes: 28 additions & 0 deletions examples/useStateAndUseEffect/ClickCounter.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';

import { ClickCounter } from './ClickCounter';

describe('Test ClickCounter', () => {
it('should inc/dec counter when buttons inc/dec clicked', () => {
render(<ClickCounter />);

const counter = screen.getByRole('heading');
const increaseBtn = screen.getByRole('button', { name: 'Increase' });
const decreaseBtn = screen.getByRole('button', { name: 'Decrease' });

expect(counter.textContent).toBe('Counter: 0');

fireEvent.click(increaseBtn);
expect(counter.textContent).toBe('Counter: 1');

fireEvent.click(increaseBtn);
expect(counter.textContent).toBe('Counter: 2');

fireEvent.click(decreaseBtn);
expect(counter.textContent).toBe('Counter: 1');

fireEvent.click(decreaseBtn);
expect(counter.textContent).toBe('Counter: 0');
});
});
17 changes: 17 additions & 0 deletions examples/useStateAndUseEffect/ClickCounter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React, { FC, useState } from 'react';

interface Props {
defaultCount?: number;
}

export const ClickCounter: FC<Props> = ({ defaultCount = 0 }) => {
const [count, setCount] = useState(defaultCount);

return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count - 1)}>Decrease</button>
</div>
);
};

0 comments on commit ab697e8

Please sign in to comment.