-
Notifications
You must be signed in to change notification settings - Fork 137
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
28,811 additions
and
16,094 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,25 @@ | ||
| import { FC } from 'react'; | ||
| import { Switch, Route, Link } from 'react-router-dom'; | ||
| import { FC } from "react"; | ||
| import { Routes, Route, Link } from "react-router-dom"; | ||
|
|
||
| import { About } from './pages/About'; | ||
| import { Home } from './pages/Home'; | ||
| import { About } from "./pages/About"; | ||
| import { Home } from "./pages/Home"; | ||
|
|
||
| export const Application: FC = () => { | ||
| return ( | ||
| <div> | ||
| <nav> | ||
| <Link data-testid="link-home" to="/">Home</Link> | ||
| <Link to="/about">About</Link> | ||
| </nav> | ||
| <Switch> | ||
| <Route path="/about"> | ||
| <About /> | ||
| </Route> | ||
| <Route path="/"> | ||
| <Home /> | ||
| </Route> | ||
| </Switch> | ||
| </div> | ||
| ); | ||
| } | ||
| const home = <Home />; | ||
| const about = <About />; | ||
|
|
||
| return ( | ||
| <div> | ||
| <nav> | ||
| <Link data-testid="link-home" to="/"> | ||
| Home | ||
| </Link> | ||
| <Link to="/about">About</Link> | ||
| </nav> | ||
| <Routes> | ||
| <Route path="/about" element={about} /> | ||
| <Route path="/" element={home} /> | ||
| </Routes> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,25 @@ | ||
| import { FC, useCallback } from 'react'; | ||
| import { useDispatch, useSelector } from 'react-redux'; | ||
| import { ApplicationState, setDone } from '../store'; | ||
| import { FC, useCallback } from "react"; | ||
| import { useDispatch, useSelector } from "react-redux"; | ||
| import { ApplicationState, setDone } from "../store"; | ||
|
|
||
| export const TodoItem: FC<{ index: number }> = props => { | ||
| const { index } = props; | ||
| export const TodoItem: FC<{ index: number }> = (props) => { | ||
| const { index } = props; | ||
|
|
||
| const dispatch = useDispatch(); | ||
| const text = useSelector((state: ApplicationState) => state.items[index]); | ||
| const done = useSelector((state: ApplicationState) => state.done[index]); | ||
| const dispatch = useDispatch(); | ||
| const text = useSelector((state: ApplicationState) => state.items[index]); | ||
| const done = useSelector((state: ApplicationState) => | ||
| Boolean(state.done[index]) | ||
| ); | ||
|
|
||
| const onChange = useCallback(() => dispatch(setDone(index, !done)), [index, done, dispatch]); | ||
| const onChange = useCallback( | ||
| () => dispatch(setDone(index, !done)), | ||
| [index, done, dispatch] | ||
| ); | ||
|
|
||
| return ( | ||
| <div data-testid="list-item" className={done ? "done" : ""}> | ||
| <input type="checkbox" checked={done} onChange={onChange} /> | ||
| {text} | ||
| </div> | ||
| ); | ||
| } | ||
| return ( | ||
| <div data-testid="list-item" className={done ? "done" : ""}> | ||
| <input type="checkbox" checked={done} onChange={onChange} /> | ||
| {text} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,38 @@ | ||
| import { FC, useCallback } from 'react'; | ||
| import { useDispatch, useSelector } from 'react-redux'; | ||
| import { ApplicationState, addItem, setText } from '../store'; | ||
| import { TodoItem } from './TodoItem'; | ||
| import { ChangeEvent, FC, useCallback } from "react"; | ||
| import { useDispatch, useSelector } from "react-redux"; | ||
| import { ApplicationState, addItem, setText } from "../store"; | ||
| import { TodoItem } from "./TodoItem"; | ||
|
|
||
| export const TodoList: FC = () => { | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const items = useSelector((state: ApplicationState) => state.items); | ||
| const text = useSelector((state: ApplicationState) => state.text); | ||
|
|
||
| const onChange = useCallback(({ target }) => { | ||
| dispatch(setText(target.value)); | ||
| }, [dispatch]); | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const onClick = useCallback(() => { | ||
| dispatch(addItem(text)); | ||
| }, [dispatch, text]); | ||
| const items = useSelector((state: ApplicationState) => state.items); | ||
| const text = useSelector((state: ApplicationState) => state.text); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div> | ||
| <input data-testid="input-add" value={text} onChange={onChange} /> | ||
| <button data-testid="button-add" onClick={onClick}>Добавить</button> | ||
| </div> | ||
| <div data-testid="list" className="list"> | ||
| {items.map((text, i) => <TodoItem key={i} index={i} />)} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| const onChange = useCallback( | ||
| ({ target }: ChangeEvent<HTMLInputElement>) => { | ||
| dispatch(setText(target.value)); | ||
| }, | ||
| [dispatch] | ||
| ); | ||
|
|
||
| const onClick = useCallback(() => { | ||
| dispatch(addItem(text)); | ||
| }, [dispatch, text]); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div> | ||
| <input data-testid="input-add" value={text} onChange={onChange} /> | ||
| <button data-testid="button-add" onClick={onClick}> | ||
| Добавить | ||
| </button> | ||
| </div> | ||
| <div data-testid="list" className="list"> | ||
| {items.map((text, i) => ( | ||
| <TodoItem key={i} index={i} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,46 @@ | ||
| import { it, expect } from '@jest/globals'; | ||
| import { render, within } from '@testing-library/react'; | ||
| import { BrowserRouter } from 'react-router-dom'; | ||
| import { Router } from 'react-router'; | ||
| import { createMemoryHistory } from 'history'; | ||
| import { it, expect } from "@jest/globals"; | ||
| import { render } from "@testing-library/react"; | ||
| import events from "@testing-library/user-event"; | ||
|
|
||
| import { Provider } from 'react-redux'; | ||
| import { BrowserRouter } from "react-router-dom"; | ||
| import { MemoryRouter } from "react-router"; | ||
| import { Provider } from "react-redux"; | ||
|
|
||
| import { initStore } from './store'; | ||
| import { Application } from './Application'; | ||
| import events from '@testing-library/user-event'; | ||
| import { initStore } from "./store"; | ||
| import { Application } from "./Application"; | ||
|
|
||
| it('по адресу /about должна открываться страница "о проекте"', () => { | ||
| const history = createMemoryHistory({ | ||
| initialEntries: ['/about'], | ||
| initialIndex: 0 | ||
| }); | ||
|
|
||
| const store = initStore(); | ||
| const application = ( | ||
| <Router history={history} > | ||
| <Provider store={store} > | ||
| <Application /> | ||
| </Provider> | ||
| </Router> | ||
| ); | ||
|
|
||
| const { getByTestId } = render(application); | ||
|
|
||
| expect(getByTestId('page-title').textContent).toEqual('About'); | ||
| const store = initStore(); | ||
| const application = ( | ||
| <MemoryRouter initialEntries={["/about"]} initialIndex={0}> | ||
| <Provider store={store}> | ||
| <Application /> | ||
| </Provider> | ||
| </MemoryRouter> | ||
| ); | ||
|
|
||
| const { getByTestId } = render(application); | ||
|
|
||
| expect(getByTestId("page-title").textContent).toEqual("About"); | ||
| }); | ||
|
|
||
| it("если добавить элемент, он появляется в списке", async () => { | ||
| const store = initStore(); | ||
| const application = ( | ||
| <BrowserRouter> | ||
| <Provider store={store}> | ||
| <Application /> | ||
| </Provider> | ||
| </BrowserRouter> | ||
| ); | ||
|
|
||
| it('если добавить элемент, он появляется в списке', () => { | ||
| const store = initStore(); | ||
| const application = ( | ||
| <BrowserRouter> | ||
| <Provider store={store} > | ||
| <Application /> | ||
| </Provider> | ||
| </BrowserRouter> | ||
| ); | ||
| const { getByTestId, getAllByTestId } = render(application); | ||
|
|
||
| const { getByTestId } = render(application); | ||
| events.type(getByTestId('input-add'), 'Сделать домашку'); | ||
| events.click(getByTestId('button-add')) | ||
| await events.type(getByTestId("input-add"), "Сделать домашку"); | ||
|
|
||
| const list = getByTestId('list'); | ||
| const items = within(list).getAllByTestId('list-item'); | ||
| await events.click(getByTestId("button-add")); | ||
|
|
||
| expect(items.map(el => el.textContent)).toContain('Сделать домашку'); | ||
| // screen.logTestingPlaygroundURL(); | ||
| const items = getAllByTestId("list-item"); | ||
|
|
||
| expect(items.map((el) => el.textContent)).toContain("Сделать домашку"); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.