From 9c519f50c35b8a6083709152cd348662e87c3a79 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Sun, 10 Feb 2019 20:42:38 +0800 Subject: [PATCH 01/28] Add Overview translation --- content/docs/addons-test-utils.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index bbbf5755c..f66e2f0e3 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -1,27 +1,27 @@ --- id: test-utils -title: Test Utilities +title: Утилиты для тестирования permalink: docs/test-utils.html layout: docs category: Reference --- -**Importing** +**Импортирование** ```javascript import ReactTestUtils from 'react-dom/test-utils'; // ES6 -var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm +var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm ``` -## Overview {#overview} +## Беглый обзор {#overview} -`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). +`ReactTestUtils` позволяет легко тестировать Реакт компоненты в любом тестовом фреймворке на ваш выбор. В Фейсбуке мы используем [Джест](https://facebook.github.io/jest/) для безболезненного тестирования Джаваскрипта. Если хотите обучится Джесту это можно сделать на сайте Джеста на странице [Руководство по Реакту](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). -> Note: +> На заметку: > -> We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do. +> Мы рекомендуем использовать [`react-testing-library`](https://git.io/react-testing-library) которая разработана для того чтобы включать и поощерять написание тестов которые использует ваши компоненты так же как будут делать конечные пользователи. > -> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output. +> В качестве альтернативы, Эйр-би-энд-би выпустили утилиту для тестирования называющейся [Энзайм](http://airbnb.io/enzyme/), которая легко позволяет утверждать, манипулировать, и просматривать выходные данные Реакт компонентов. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) From ce66eacdd600e2b6f787293121c5c3098749fa8c Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 20:55:39 +0800 Subject: [PATCH 02/28] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD?= =?UTF-8?q?=D0=BD=D1=83=D1=8E=20=20'act()'=20=D1=81=D0=B5=D0=BA=D1=86?= =?UTF-8?q?=D0=B8=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 34 +++++++++++++++---------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index f66e2f0e3..82504f505 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -44,13 +44,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm ### `act()` {#act} -To prepare a component for assertions, wrap the code rendering it and performing updates inside an `act()` call. This makes your test run closer to how React works in the browser. +Готовя компонент для тестирования, оберните код для рендера и выполняйте обновления внутри функции `act()`. Это сделает ваш код Реакта наиболее достоверным к тому как он работает в браузере. ->Note +>На заметку > ->If you use `react-test-renderer`, it also provides an `act` export that behaves the same way. +>Если вы используете `react-test-renderer`, этот модуль предоставляет экспортировать `act` функцию который будет вести также. -For example, let's say we have this `Counter` component: +Допустим у нас есть `Counter` компонент: ```js class App extends React.Component { @@ -60,10 +60,10 @@ class App extends React.Component { this.handleClick = this.handleClick.bind(this); } componentDidMount() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Ты нажал на кнопку ${this.state.count} раз`; } componentDidUpdate() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Ты нажал на кнопку ${this.state.count} раз`; } handleClick() { this.setState(state => ({ @@ -73,9 +73,9 @@ class App extends React.Component { render() { return (
-

You clicked {this.state.count} times

+

Ты нажал на кнопку {this.state.count} раз

); @@ -83,7 +83,7 @@ class App extends React.Component { } ``` -Here is how we can test it: +Теперь посмотрим как мы напишем тест для этого примера: ```js{3,20-22,29-31} import React from 'react'; @@ -103,26 +103,26 @@ afterEach(() => { container = null; }); -it('can render and update a counter', () => { - // Test first render and componentDidMount +it('рендер и обновление счетчика', () => { + // Тестируем первый рендер и метод componentDidMount act(() => { ReactDOM.render(, container); }); const button = container.querySelector('button'); const label = container.querySelector('p'); - expect(label.textContent).toBe('You clicked 0 times'); - expect(document.title).toBe('You clicked 0 times'); + expect(label.textContent).toBe('Ты нажал на кнопку 0 раз'); + expect(document.title).toBe('Ты нажал на кнопку 0 раз'); - // Test second render and componentDidUpdate + // Тестируем второй рендер и метод componentDidUpdate act(() => { button.dispatchEvent(new MouseEvent('click', {bubbles: true})); }); - expect(label.textContent).toBe('You clicked 1 times'); - expect(document.title).toBe('You clicked 1 times'); + expect(label.textContent).toBe('Ты нажал на кнопку 1 раз'); + expect(document.title).toBe('Ты нажал на кнопку 1 раз'); }); ``` -Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a helper like [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) to reduce the boilerplate code. +Не забываейте что отправка DOM-событий работает только когда DOM-контейнер добавлен в `document`. Можно использовать хелпер [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) чтобы разбавить шаблонный код. * * * From 5f2da30014db15a28fae1c76bad6574788de1bed Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 21:49:32 +0800 Subject: [PATCH 03/28] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=BE=D0=B4=20=D0=94?= =?UTF-8?q?=D1=80=D1=83=D0=B3=D0=B8=D1=85=20=D1=83=D1=82=D0=B8=D0=BB=D0=B8?= =?UTF-8?q?=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 82504f505..a0b5a8355 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -40,7 +40,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm - [`renderIntoDocument()`](#renderintodocument) - [`Simulate`](#simulate) -## Reference {#reference} +## Справка {#reference} ### `act()` {#act} @@ -122,7 +122,7 @@ it('рендер и обновление счетчика', () => { }); ``` -Не забываейте что отправка DOM-событий работает только когда DOM-контейнер добавлен в `document`. Можно использовать хелпер [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) чтобы разбавить шаблонный код. +Не забывайте что отправка DOM-событий работает только когда DOM-контейнер добавлен в `document`. Можно использовать хелпер [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) чтобы разбавить шаблонный код. * * * @@ -309,7 +309,7 @@ ReactDOM.render(element, domContainer); * * * -## Other Utilities {#other-utilities} +## Другие утилиты {#other-utilities} ### `Simulate` {#simulate} @@ -320,11 +320,11 @@ Simulate.{eventName}( ) ``` -Simulate an event dispatch on a DOM node with optional `eventData` event data. +Симулировать отправку события на DOM-ноде с допольнительным объектом `eventData`. -`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events). +`Simulate` имеет методы для [каждого события который Реакт может понимать](/docs/events.html#supported-events). -**Clicking an element** +**Кликать на элемент** ```javascript // @@ -332,18 +332,18 @@ const node = this.button; ReactTestUtils.Simulate.click(node); ``` -**Changing the value of an input field and then pressing ENTER.** +**Меняет значение в поле ввода и затем симулирует нажатие кнопки ENTER.** ```javascript // this.textInput = node} /> const node = this.textInput; -node.value = 'giraffe'; +node.value = 'жираф'; ReactTestUtils.Simulate.change(node); ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); ``` -> Note +> На заметку > -> You will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you. +> Вам нужно будет предоставить соответсвующие свойства события, которое вы используете в своем компоненте (например, keyCode, which и так далее), поскольку React не создает ничего из этого. * * * From e2af105f71419551d8c95f7e630463e413eebe67 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 21:55:41 +0800 Subject: [PATCH 04/28] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=BE=D0=B4=20renderInt?= =?UTF-8?q?oDocument?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index a0b5a8355..c616cc52f 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -296,16 +296,16 @@ Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) bu renderIntoDocument(element) ``` -Render a React element into a detached DOM node in the document. **This function requires a DOM.** It is effectively equivalent to: +Рендер Реакт элемента в отдельно взятом DOM-ноде в документе. **Этой функции нужен DOM.** Это фактически эквивалентно: ```js const domContainer = document.createElement('div'); ReactDOM.render(element, domContainer); ``` -> Note: +> На заметку: > -> You will need to have `window`, `window.document` and `window.document.createElement` globally available **before** you import `React`. Otherwise React will think it can't access the DOM and methods like `setState` won't work. +> Вам нужно будет иметь глобально доступные переменные `window`, `window.document` и `window.document.createElement` **перед** тем как вы импортируете `React`. В противном случае React будет думать что не может иметь доступ DOM и такие методы как `setState` не будут работать. * * * From 7facc720e66c710519bcc5ef872bc7f9d46e5c26 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 21:57:21 +0800 Subject: [PATCH 05/28] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=BE=D0=B4=20findRende?= =?UTF-8?q?redComponentWithType?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index c616cc52f..986740901 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -286,7 +286,7 @@ findRenderedComponentWithType( ) ``` -Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one. +Работает так же как [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) но ожидает, что будет один результат, и возвращает этот один результат, или выдает исключение, если есть любое другое число совпадений, кроме одного.. *** From 1cf0615023ecc6ae0cc79094f738b247bc290fb4 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 22:00:34 +0800 Subject: [PATCH 06/28] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B2=D0=B5?= =?UTF-8?q?=D0=BB=20scryRenderedComponentsWithType?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 986740901..ff16d9fb7 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -273,7 +273,7 @@ scryRenderedComponentsWithType( ) ``` -Finds all instances of components with type equal to `componentClass`. +Находит все объекты компонента с указаным типа класса `componentClass`. * * * From 83cc90d1125b093a7da0232cc0980fe4318f4b4d Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 22:03:13 +0800 Subject: [PATCH 07/28] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B2=D0=B5?= =?UTF-8?q?=D0=BB=20findRenderedDOMComponentWithClass?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index ff16d9fb7..70ef6a9c3 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -247,7 +247,7 @@ scryRenderedDOMComponentsWithTag( ) ``` -Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`. +Находит все DOM-элементы компонентов в дереве рендера, которые являются DOM-компонентами с соответствием имени тега `tagName`. * * * @@ -260,7 +260,7 @@ findRenderedDOMComponentWithTag( ) ``` -Like [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one. +Также как [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) но ожидает, что будет один результат, и возвращает этот один результат, или выдает исключение, если есть любое другое число совпадений, кроме одного. * * * From 0dbb446d323e783634639a0f2ecb2813138c9b18 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 22:17:21 +0800 Subject: [PATCH 08/28] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B2=D0=B5?= =?UTF-8?q?=D0=BB=20scryRenderedDOMComponentsWithClass?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 70ef6a9c3..bb5f79e1a 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -221,7 +221,7 @@ scryRenderedDOMComponentsWithClass( ) ``` -Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`. +Находит все DOM-элементы компонентов в отображаемом дереве, которые являются DOM-компонентами с сопоставлением имен классов `className`. * * * @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -Like [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one. +Подобно [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) но ожидает, что будет один результат, и возвращает этот один результат, или выдает исключение, если есть любое другое число совпадений, кроме одного. * * * From 50187fa57c2947ca6881b1b553e2fc4ce9ee3094 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 22:22:32 +0800 Subject: [PATCH 09/28] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B2=D0=B5?= =?UTF-8?q?=D0=BB=20findAllInRenderedTree?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index bb5f79e1a..dc2977472 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -208,7 +208,7 @@ findAllInRenderedTree( ) ``` -Traverse all components in `tree` and accumulate all components where `test(component)` is `true`. This is not that useful on its own, but it's used as a primitive for other test utils. +Проходит по всем компонентам в `tree` и собирает все компоненты где условие `test(component)` является `true`. Сам по себе он не так полезен, но используется как примитив для других тестовых утилит. * * * From c98bfe262de06a7e1246e2b85177fa51d62001ef Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 22:24:19 +0800 Subject: [PATCH 10/28] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B2=D0=B5?= =?UTF-8?q?=D0=BB=20isCompositeComponentWithType?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index dc2977472..aa167d2a5 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -195,7 +195,7 @@ isCompositeComponentWithType( ) ``` -Returns `true` if `instance` is a component whose type is of a React `componentClass`. +Возвращает `true` если `instance` является компонентом, тип которого React `componentClass`. * * * From b5e1aa3f9be21535df6e07a4ab95afa7f0b73e0f Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 22:27:21 +0800 Subject: [PATCH 11/28] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B2=D0=B5?= =?UTF-8?q?=D0=BB=20isElement,=20=20isElementOfType=20=D0=B8=20isDOMCompon?= =?UTF-8?q?ent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index aa167d2a5..865d26aa9 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -149,7 +149,7 @@ Pass a mocked component module to this method to augment it with useful methods isElement(element) ``` -Returns `true` if `element` is any React element. +Возвращает `true` если `element` любой React-элемент. * * * @@ -162,7 +162,7 @@ isElementOfType( ) ``` -Returns `true` if `element` is a React element whose type is of a React `componentClass`. +Возвращает `true` если `element` является элементом React, тип которого имеет тип React `componentClass`. * * * @@ -172,7 +172,7 @@ Returns `true` if `element` is a React element whose type is of a React `compone isDOMComponent(instance) ``` -Returns `true` if `instance` is a DOM component (such as a `
` or ``). +Возвращает `true` если `instance` является DOM-компонентом (например как `
` или ``). * * * From 244ca33008b52c16dad125d1f0925e1c34412d31 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 22:32:28 +0800 Subject: [PATCH 12/28] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20mockComponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 865d26aa9..34e44c138 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -135,11 +135,11 @@ mockComponent( ) ``` -Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `
` (or other tag if `mockTagName` is provided) containing any provided children. +Передаёт фиктивный модуль компонента этому методу, чтобы дополнить его полезными методами, которые позволяют использовать его в качестве фиктивного компонента React. Вместо того чтобы рендерить как обычно, компонент становится простым `
` (или другим тегом `mockTagName` если указан) содержащий любые предоставленные дочерние элементы. -> Note: +> На заметку: > -> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/test-utils.html#shallow-rendering) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead. +> `mockComponent()` уже устаревший API. Мы рекомендуем использовать [поверхностный рендеринг](/docs/test-utils.html#shallow-rendering) или [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) взамен. * * * From b2859a1b243497a30e85932fe483cc9fb99561e1 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Tue, 12 Feb 2019 22:38:31 +0800 Subject: [PATCH 13/28] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BA=D1=82=20=D0=BD=D0=B0=20React?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 34e44c138..6d10369b1 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -15,13 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm ## Беглый обзор {#overview} -`ReactTestUtils` позволяет легко тестировать Реакт компоненты в любом тестовом фреймворке на ваш выбор. В Фейсбуке мы используем [Джест](https://facebook.github.io/jest/) для безболезненного тестирования Джаваскрипта. Если хотите обучится Джесту это можно сделать на сайте Джеста на странице [Руководство по Реакту](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). +`ReactTestUtils` позволяет легко тестировать React компоненты в любом тестовом фреймворке на ваш выбор. В Фейсбуке мы используем [Джест](https://facebook.github.io/jest/) для безболезненного тестирования Джаваскрипта. Если хотите обучится Джесту это можно сделать на сайте Джеста на странице [Руководство по React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). > На заметку: > > Мы рекомендуем использовать [`react-testing-library`](https://git.io/react-testing-library) которая разработана для того чтобы включать и поощерять написание тестов которые использует ваши компоненты так же как будут делать конечные пользователи. > -> В качестве альтернативы, Эйр-би-энд-би выпустили утилиту для тестирования называющейся [Энзайм](http://airbnb.io/enzyme/), которая легко позволяет утверждать, манипулировать, и просматривать выходные данные Реакт компонентов. +> В качестве альтернативы, Эйр-би-энд-би выпустили утилиту для тестирования называющейся [Энзайм](http://airbnb.io/enzyme/), которая легко позволяет утверждать, манипулировать, и просматривать выходные данные React компонентов. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) @@ -44,7 +44,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm ### `act()` {#act} -Готовя компонент для тестирования, оберните код для рендера и выполняйте обновления внутри функции `act()`. Это сделает ваш код Реакта наиболее достоверным к тому как он работает в браузере. +Готовя компонент для тестирования, оберните код для рендера и выполняйте обновления внутри функции `act()`. Это сделает React код наиболее достоверным к тому как он работает в браузере. >На заметку > @@ -296,7 +296,7 @@ findRenderedComponentWithType( renderIntoDocument(element) ``` -Рендер Реакт элемента в отдельно взятом DOM-ноде в документе. **Этой функции нужен DOM.** Это фактически эквивалентно: +Рендер React элемента в отдельно взятом DOM-ноде в документе. **Этой функции нужен DOM.** Это фактически эквивалентно: ```js const domContainer = document.createElement('div'); @@ -322,7 +322,7 @@ Simulate.{eventName}( Симулировать отправку события на DOM-ноде с допольнительным объектом `eventData`. -`Simulate` имеет методы для [каждого события который Реакт может понимать](/docs/events.html#supported-events). +`Simulate` имеет методы для [каждого события который React может понимать](/docs/events.html#supported-events). **Кликать на элемент** From b87f39720359962579aaeb8364c5dbf569911d54 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 13 Feb 2019 13:52:42 +0800 Subject: [PATCH 14/28] =?UTF-8?q?=D0=9F=D1=80=D0=BE=D0=BF=D1=83=D1=89?= =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=B7=D0=B0=D0=BF=D1=8F=D1=82=D0=B0=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: shonoru --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 6d10369b1..b32daf14e 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -50,7 +50,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm > >Если вы используете `react-test-renderer`, этот модуль предоставляет экспортировать `act` функцию который будет вести также. -Допустим у нас есть `Counter` компонент: +Допустим, у нас есть `Counter` компонент: ```js class App extends React.Component { From df4f8d4d62b604d3a69fca7713d5ecb882729400 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 13 Feb 2019 21:25:29 +0800 Subject: [PATCH 15/28] =?UTF-8?q?=D0=A3=D0=BF=D1=80=D0=BE=D1=89=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BF=D1=80=D0=B5=D0=B4=D0=BB=D0=BE=D0=B6?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: shonoru --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index b32daf14e..6b96be8bb 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -83,7 +83,7 @@ class App extends React.Component { } ``` -Теперь посмотрим как мы напишем тест для этого примера: +Теперь напишем тест для этого примера: ```js{3,20-22,29-31} import React from 'react'; From 35e1f1696f3c03268765176a78370cf5b74d4758 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 13 Feb 2019 21:26:32 +0800 Subject: [PATCH 16/28] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: shonoru --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 6b96be8bb..17b82b3b6 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -122,7 +122,7 @@ it('рендер и обновление счетчика', () => { }); ``` -Не забывайте что отправка DOM-событий работает только когда DOM-контейнер добавлен в `document`. Можно использовать хелпер [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) чтобы разбавить шаблонный код. +Не забывайте что отправка DOM-событий работает только когда DOM-контейнер добавлен в `document`. Можно использовать вспомогательную библиотеку [`react-testing-library`](https://github.com/kentcdodds/react-testing-library), чтобы уменьшить количество шаблонного кода. * * * From cb3c4985eb9ae896893ef47b0d6e1f2ceb904d04 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Wed, 13 Feb 2019 21:28:53 +0800 Subject: [PATCH 17/28] =?UTF-8?q?=D0=9F=D0=BE=D0=BC=D0=B5=D0=BD=D1=8F?= =?UTF-8?q?=D0=BB=20=D0=BF=D0=BE=D1=80=D1=8F=D0=B4=D0=BE=D0=BA=20=D1=81?= =?UTF-8?q?=D0=BB=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 17b82b3b6..37ce449ff 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -50,7 +50,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm > >Если вы используете `react-test-renderer`, этот модуль предоставляет экспортировать `act` функцию который будет вести также. -Допустим, у нас есть `Counter` компонент: +Допустим, у нас есть компонент `Counter`: ```js class App extends React.Component { From 3a040529cdd0e67f834ebb65d3a62d4fa356ffb0 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Wed, 13 Feb 2019 21:35:57 +0800 Subject: [PATCH 18/28] =?UTF-8?q?=D0=9E=D1=81=D1=82=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D0=BC=20=D0=B0=D0=BD=D0=B3=D0=BB=D0=B8=D0=B9=D1=81?= =?UTF-8?q?=D0=BA=D0=B8=D0=B5=20=D1=81=D0=BB=D0=BE=D0=B2=D0=B0=20=D0=BA?= =?UTF-8?q?=D0=B0=D0=BA=20=D0=B5=D1=81=D1=82=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 37ce449ff..6909d11d5 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -15,13 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm ## Беглый обзор {#overview} -`ReactTestUtils` позволяет легко тестировать React компоненты в любом тестовом фреймворке на ваш выбор. В Фейсбуке мы используем [Джест](https://facebook.github.io/jest/) для безболезненного тестирования Джаваскрипта. Если хотите обучится Джесту это можно сделать на сайте Джеста на странице [Руководство по React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). +`ReactTestUtils` позволяет легко тестировать React компоненты в любом тестовом фреймворке на ваш выбор. В Facebook мы используем [Jest](https://facebook.github.io/jest/) для безболезненного тестирования JavaScript. Если хотите обучится Jest это можно сделать на его сайте на странице [Руководство по React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). > На заметку: > > Мы рекомендуем использовать [`react-testing-library`](https://git.io/react-testing-library) которая разработана для того чтобы включать и поощерять написание тестов которые использует ваши компоненты так же как будут делать конечные пользователи. > -> В качестве альтернативы, Эйр-би-энд-би выпустили утилиту для тестирования называющейся [Энзайм](http://airbnb.io/enzyme/), которая легко позволяет утверждать, манипулировать, и просматривать выходные данные React компонентов. +> В качестве альтернативы, Airbnb выпустили утилиту для тестирования называющейся [Enzyme](http://airbnb.io/enzyme/), которая легко позволяет утверждать, манипулировать, и просматривать выходные данные React компонентов. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) From 9c0f11489ebc13f97737d724538e1eb0ed6c94f2 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Wed, 13 Feb 2019 21:41:47 +0800 Subject: [PATCH 19/28] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=BF=D0=BE=D1=82=D0=B5=D1=80=D1=8F=D0=B2=D1=88=D0=B5=D0=B3?= =?UTF-8?q?=D0=BE=20=D1=81=D0=BC=D1=8B=D1=81=D0=BB=20=D0=BF=D1=80=D0=B5?= =?UTF-8?q?=D0=B4=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 6909d11d5..ffcb40ac0 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -44,7 +44,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm ### `act()` {#act} -Готовя компонент для тестирования, оберните код для рендера и выполняйте обновления внутри функции `act()`. Это сделает React код наиболее достоверным к тому как он работает в браузере. +Чтобы подготовить компонент для тестирования, оберните код с рендерингом и выполнением обновлений внутри функции `act()`. Это сделает код теста для компонентов React более близким к тому как он рендерится в браузере. >На заметку > From 4cb8177c2efb7abe35eaa0642cc37c8fcd389307 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 18:28:49 +0800 Subject: [PATCH 20/28] =?UTF-8?q?=D0=97=D0=B0=D0=BC=D0=B5=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=BD=D0=B0=20=D1=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: shonoru --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index ffcb40ac0..c9fdf90a4 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -344,6 +344,6 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); > На заметку > -> Вам нужно будет предоставить соответсвующие свойства события, которое вы используете в своем компоненте (например, keyCode, which и так далее), поскольку React не создает ничего из этого. +> Вам нужно будет предоставить все свойства события, которое вы используете в своем компоненте (например, keyCode, which и так далее), поскольку React не создаёт ничего из этого. * * * From 841d3534008500c8e64167855391b21ba54bbc16 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Sun, 24 Feb 2019 21:33:36 +0800 Subject: [PATCH 21/28] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D1=84=D0=B8=D0=B4=D0=B1=D0=B5?= =?UTF-8?q?=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 40 +++++++++++++++---------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index c9fdf90a4..07014bf6e 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -1,6 +1,6 @@ --- id: test-utils -title: Утилиты для тестирования +title: ReactTestUtils permalink: docs/test-utils.html layout: docs category: Reference @@ -13,15 +13,15 @@ import ReactTestUtils from 'react-dom/test-utils'; // ES6 var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm ``` -## Беглый обзор {#overview} +## Обзор {#overview} -`ReactTestUtils` позволяет легко тестировать React компоненты в любом тестовом фреймворке на ваш выбор. В Facebook мы используем [Jest](https://facebook.github.io/jest/) для безболезненного тестирования JavaScript. Если хотите обучится Jest это можно сделать на его сайте на странице [Руководство по React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). +`ReactTestUtils` позволяет легко тестировать React-компоненты в любом тестовом фреймворке на ваш выбор. В Facebook мы используем [Jest](https://facebook.github.io/jest/) для безболезненного тестирования JavaScript. Если хотите обучится Jest, это можно сделать на соответствующей странице [Руководство по React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). -> На заметку: +> Примечание: > > Мы рекомендуем использовать [`react-testing-library`](https://git.io/react-testing-library) которая разработана для того чтобы включать и поощерять написание тестов которые использует ваши компоненты так же как будут делать конечные пользователи. > -> В качестве альтернативы, Airbnb выпустили утилиту для тестирования называющейся [Enzyme](http://airbnb.io/enzyme/), которая легко позволяет утверждать, манипулировать, и просматривать выходные данные React компонентов. +> В качестве альтернативы, Airbnb выпустил утилиту тестирования [Enzyme](http://airbnb.io/enzyme/), которая легко позволяет утверждать, манипулировать, и просматривать выходные данные React компонентов. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) @@ -40,15 +40,15 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm - [`renderIntoDocument()`](#renderintodocument) - [`Simulate`](#simulate) -## Справка {#reference} +## Справочник {#reference} ### `act()` {#act} -Чтобы подготовить компонент для тестирования, оберните код с рендерингом и выполнением обновлений внутри функции `act()`. Это сделает код теста для компонентов React более близким к тому как он рендерится в браузере. +Чтобы подготовить компонент для тестирования, оберните код с рендерингом и выполнением обновлений внутри функции `act()`. Это сделает код теста для компонентов React более близким к тому, как он рендерится в браузере. ->На заметку +>Примечание: > ->Если вы используете `react-test-renderer`, этот модуль предоставляет экспортировать `act` функцию который будет вести также. +>Если вы используете пакет `react-test-renderer`, то он также предоставляет функцию `act`, которая ведет себя также. Допустим, у нас есть компонент `Counter`: @@ -122,7 +122,7 @@ it('рендер и обновление счетчика', () => { }); ``` -Не забывайте что отправка DOM-событий работает только когда DOM-контейнер добавлен в `document`. Можно использовать вспомогательную библиотеку [`react-testing-library`](https://github.com/kentcdodds/react-testing-library), чтобы уменьшить количество шаблонного кода. +Не забывайте что отправка DOM-событий работает только, когда DOM-контейнер добавлен в `document`. Можно использовать вспомогательную библиотеку [`react-testing-library`](https://github.com/kentcdodds/react-testing-library), чтобы уменьшить количество шаблонного кода. * * * @@ -137,9 +137,9 @@ mockComponent( Передаёт фиктивный модуль компонента этому методу, чтобы дополнить его полезными методами, которые позволяют использовать его в качестве фиктивного компонента React. Вместо того чтобы рендерить как обычно, компонент становится простым `
` (или другим тегом `mockTagName` если указан) содержащий любые предоставленные дочерние элементы. -> На заметку: +> Примечание: > -> `mockComponent()` уже устаревший API. Мы рекомендуем использовать [поверхностный рендеринг](/docs/test-utils.html#shallow-rendering) или [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) взамен. +> API-метод `mockComponent()` объявлен устаревшим. Поэтому вместо него рекомендуется использоваться [поверхностный рендеринг](/docs/shallow-renderer.html) или [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock). * * * @@ -149,7 +149,7 @@ mockComponent( isElement(element) ``` -Возвращает `true` если `element` любой React-элемент. +Возвращает `true`, если `element` любой React-элемент. * * * @@ -162,7 +162,7 @@ isElementOfType( ) ``` -Возвращает `true` если `element` является элементом React, тип которого имеет тип React `componentClass`. +Возвращает `true`, если `element` является элементом React, тип которого имеет тип React `componentClass`. * * * @@ -172,7 +172,7 @@ isElementOfType( isDOMComponent(instance) ``` -Возвращает `true` если `instance` является DOM-компонентом (например как `
` или ``). +Возвращает `true`, если `instance` является DOM-компонентом (таким как `
` или ``). * * * @@ -303,9 +303,9 @@ const domContainer = document.createElement('div'); ReactDOM.render(element, domContainer); ``` -> На заметку: +> Примечание: > -> Вам нужно будет иметь глобально доступные переменные `window`, `window.document` и `window.document.createElement` **перед** тем как вы импортируете `React`. В противном случае React будет думать что не может иметь доступ DOM и такие методы как `setState` не будут работать. +> `window`, `window.document` и `window.document.createElement` должны быть доступными **перед** тем как вы импортируете `React`. В противном случае React будет думать что не может получить доступ к DOM, и такие методы как `setState` не будут работать. * * * @@ -320,9 +320,9 @@ Simulate.{eventName}( ) ``` -Симулировать отправку события на DOM-ноде с допольнительным объектом `eventData`. +Симулировать отправку события сработавшего на DOM-узле с дополнительным объектом `eventData`. -`Simulate` имеет методы для [каждого события который React может понимать](/docs/events.html#supported-events). +`Simulate` имеет метод для [каждого события, которое React может понимать](/docs/events.html#supported-events). **Кликать на элемент** @@ -342,7 +342,7 @@ ReactTestUtils.Simulate.change(node); ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); ``` -> На заметку +> Примечание: > > Вам нужно будет предоставить все свойства события, которое вы используете в своем компоненте (например, keyCode, which и так далее), поскольку React не создаёт ничего из этого. From 0e05113f23a94181b53d71c0766b77143332af16 Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Sun, 24 Feb 2019 21:36:37 +0800 Subject: [PATCH 22/28] =?UTF-8?q?=D0=92=D1=8B=D0=B1=D1=80=D0=B0=D0=BB=20?= =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B2=D1=8B=D0=B9=20=D0=B2=D0=B0=D1=80=D0=B8?= =?UTF-8?q?=D0=B0=D0=BD=D1=82=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 07014bf6e..7f20b59ac 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -19,7 +19,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm > Примечание: > -> Мы рекомендуем использовать [`react-testing-library`](https://git.io/react-testing-library) которая разработана для того чтобы включать и поощерять написание тестов которые использует ваши компоненты так же как будут делать конечные пользователи. +> Мы рекомендуем использовать библиотеку [`react-testing-library`](https://git.io/react-testing-library), которая сильно облегчает написание тестов, имитирующих поведение пользователей вашего приложения в браузере, и побуждает к хорошим практикам в тестировании. > > В качестве альтернативы, Airbnb выпустил утилиту тестирования [Enzyme](http://airbnb.io/enzyme/), которая легко позволяет утверждать, манипулировать, и просматривать выходные данные React компонентов. From e3b6c487e024dbef00e8b7a72abb1e2803ea4b4c Mon Sep 17 00:00:00 2001 From: Andrey Bodoev Date: Sun, 24 Feb 2019 21:45:37 +0800 Subject: [PATCH 23/28] =?UTF-8?q?=D0=97=D0=B0=D0=BF=D1=8F=D1=82=D1=8B?= =?UTF-8?q?=D0=B5,=20=D1=91=20=D0=B8=20=D0=BE=D1=81=D1=82=D0=B0=D0=BB?= =?UTF-8?q?=D1=8C=D0=BD=D1=8B=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/addons-test-utils.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 7f20b59ac..26d51855c 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -195,7 +195,7 @@ isCompositeComponentWithType( ) ``` -Возвращает `true` если `instance` является компонентом, тип которого React `componentClass`. +Возвращает, `true` если `instance` является компонентом, который имеет тип React `componentClass`. * * * @@ -208,7 +208,7 @@ findAllInRenderedTree( ) ``` -Проходит по всем компонентам в `tree` и собирает все компоненты где условие `test(component)` является `true`. Сам по себе он не так полезен, но используется как примитив для других тестовых утилит. +Проходит по всем компонентам в `tree` и собирает все компоненты, для которых `test(component)` возвращает `true`. Сам по себе он не так полезен, но используется как примитив для других тестовых утилит. * * * @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -Подобно [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) но ожидает, что будет один результат, и возвращает этот один результат, или выдает исключение, если есть любое другое число совпадений, кроме одного. +Работает как [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), но ожидает, что будет один результат, и возвращает этот один результат, или выдает исключение, если есть любое другое число совпадений, кроме одного. * * * @@ -247,7 +247,7 @@ scryRenderedDOMComponentsWithTag( ) ``` -Находит все DOM-элементы компонентов в дереве рендера, которые являются DOM-компонентами с соответствием имени тега `tagName`. +Ищет все DOM-элементы компонентов в отображенном дереве, которые являются DOM-компонентами, и имя которых соответствует `tagName`. * * * @@ -260,7 +260,7 @@ findRenderedDOMComponentWithTag( ) ``` -Также как [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) но ожидает, что будет один результат, и возвращает этот один результат, или выдает исключение, если есть любое другое число совпадений, кроме одного. +Также как [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) но ожидает, что будет один результат, и возвращает этот один результат, или выдаёт исключение, если есть любое другое число совпадений, кроме одного. * * * @@ -273,7 +273,7 @@ scryRenderedComponentsWithType( ) ``` -Находит все объекты компонента с указаным типа класса `componentClass`. +Находит все экземпляры компонента, тип которых равен `componentClass`. * * * @@ -286,7 +286,7 @@ findRenderedComponentWithType( ) ``` -Работает так же как [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) но ожидает, что будет один результат, и возвращает этот один результат, или выдает исключение, если есть любое другое число совпадений, кроме одного.. +Работает так же как [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) но ожидает, что будет один результат, и возвращает этот один результат, или выдаёт исключение, если есть любое другое число совпадений, кроме одного. *** @@ -296,7 +296,7 @@ findRenderedComponentWithType( renderIntoDocument(element) ``` -Рендер React элемента в отдельно взятом DOM-ноде в документе. **Этой функции нужен DOM.** Это фактически эквивалентно: +Отображает React элемент в отдельно взятом DOM-узле документа. **Этой функции нужен DOM.** Это фактически эквивалентно: ```js const domContainer = document.createElement('div'); From 0e2785ceb6ef0d01b9e3d76f25df9d4ba7a3203f Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Mon, 25 Feb 2019 23:09:14 +0800 Subject: [PATCH 24/28] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BD=D0=BE?= =?UTF-8?q?=D1=81=20=D0=B7=D0=B0=D0=BF=D1=8F=D1=82=D0=BE=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: shonoru --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 26d51855c..05cee0f07 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -195,7 +195,7 @@ isCompositeComponentWithType( ) ``` -Возвращает, `true` если `instance` является компонентом, который имеет тип React `componentClass`. +Возвращает `true`, если `instance` является компонентом, который имеет тип React `componentClass`. * * * From 368f2cbdee2f3673f84a04d995f687d3f537cdb6 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 28 Feb 2019 06:02:13 +0300 Subject: [PATCH 25/28] addons-test-utils: improvements --- content/docs/addons-test-utils.md | 36 +++++++++++++++---------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 05cee0f07..0cc389853 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -15,13 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm ## Обзор {#overview} -`ReactTestUtils` позволяет легко тестировать React-компоненты в любом тестовом фреймворке на ваш выбор. В Facebook мы используем [Jest](https://facebook.github.io/jest/) для безболезненного тестирования JavaScript. Если хотите обучится Jest, это можно сделать на соответствующей странице [Руководство по React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). +`ReactTestUtils` позволяет легко тестировать React-компоненты в любом тестовом фреймворке на ваш выбор. В Facebook мы используем [Jest](https://facebook.github.io/jest/) для гладкого тестирования JavaScript-кода. Если хотите обучится Jest, ознакомьтесь с [руководством по React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). > Примечание: > -> Мы рекомендуем использовать библиотеку [`react-testing-library`](https://git.io/react-testing-library), которая сильно облегчает написание тестов, имитирующих поведение пользователей вашего приложения в браузере, и побуждает к хорошим практикам в тестировании. +> Мы рекомендуем использовать библиотеку [`react-testing-library`](https://git.io/react-testing-library), которая значительно облегчает написание тестов, имитируя поведение пользователей вашего приложения в браузере, и просто побуждает к хорошим практикам в тестировании. > -> В качестве альтернативы, Airbnb выпустил утилиту тестирования [Enzyme](http://airbnb.io/enzyme/), которая легко позволяет утверждать, манипулировать, и просматривать выходные данные React компонентов. +> В качестве альтернативы, Airbnb выпустил утилиту тестирования [Enzyme](http://airbnb.io/enzyme/), которая легко позволяет делать проверки, управлять, а также просматривать выходные данные React-компонентов. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) @@ -48,7 +48,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm >Примечание: > ->Если вы используете пакет `react-test-renderer`, то он также предоставляет функцию `act`, которая ведет себя также. +>Если вы используете пакет `react-test-renderer`, то он также предоставляет функцию `act`, которая работает аналогичным образом. Допустим, у нас есть компонент `Counter`: @@ -60,10 +60,10 @@ class App extends React.Component { this.handleClick = this.handleClick.bind(this); } componentDidMount() { - document.title = `Ты нажал на кнопку ${this.state.count} раз`; + document.title = `Вы нажали на кнопку ${this.state.count} раз`; } componentDidUpdate() { - document.title = `Ты нажал на кнопку ${this.state.count} раз`; + document.title = `Вы нажали на кнопку ${this.state.count} раз`; } handleClick() { this.setState(state => ({ @@ -73,7 +73,7 @@ class App extends React.Component { render() { return (
-

Ты нажал на кнопку {this.state.count} раз

+

Вы нажали на кнопку {this.state.count} раз

@@ -110,15 +110,15 @@ it('рендер и обновление счетчика', () => { }); const button = container.querySelector('button'); const label = container.querySelector('p'); - expect(label.textContent).toBe('Ты нажал на кнопку 0 раз'); - expect(document.title).toBe('Ты нажал на кнопку 0 раз'); + expect(label.textContent).toBe('Вы нажали на кнопку 0 раз'); + expect(document.title).toBe('Вы нажали на кнопку 0 раз'); // Тестируем второй рендер и метод componentDidUpdate act(() => { button.dispatchEvent(new MouseEvent('click', {bubbles: true})); }); - expect(label.textContent).toBe('Ты нажал на кнопку 1 раз'); - expect(document.title).toBe('Ты нажал на кнопку 1 раз'); + expect(label.textContent).toBe('Вы нажали на кнопку 1 раз'); + expect(document.title).toBe('Вы нажали на кнопку 1 раз'); }); ``` @@ -135,7 +135,7 @@ mockComponent( ) ``` -Передаёт фиктивный модуль компонента этому методу, чтобы дополнить его полезными методами, которые позволяют использовать его в качестве фиктивного компонента React. Вместо того чтобы рендерить как обычно, компонент становится простым `
` (или другим тегом `mockTagName` если указан) содержащий любые предоставленные дочерние элементы. +Передаёт фиктивный модуль компонента этому методу, чтобы дополнить его полезными методами, которые позволяют использовать его в качестве фиктивного компонента React. Вместо того чтобы рендерить как обычно, компонент становится простым элементом `
` (или другим тегом `mockTagName`, если указан), содержащий любые предоставленные дочерние элементы. > Примечание: > @@ -182,7 +182,7 @@ isDOMComponent(instance) isCompositeComponent(instance) ``` -Returns `true` if `instance` is a user-defined component, such as a class or a function. +Возвращает `true`, если `instance` является пользовательским компонентом, определённым как класс или функция. * * * @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -Работает как [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), но ожидает, что будет один результат, и возвращает этот один результат, или выдает исключение, если есть любое другое число совпадений, кроме одного. +Работает как [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), но ожидает, что будет один результат, и возвращает этот один результат, или выдаёт исключение, если есть любое другое число совпадений, кроме одного. * * * @@ -286,7 +286,7 @@ findRenderedComponentWithType( ) ``` -Работает так же как [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) но ожидает, что будет один результат, и возвращает этот один результат, или выдаёт исключение, если есть любое другое число совпадений, кроме одного. +Работает так же как [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), но ожидает, что будет один результат, и возвращает этот один результат, или выдаёт исключение, если есть любое другое число совпадений, кроме одного. *** @@ -324,7 +324,7 @@ Simulate.{eventName}( `Simulate` имеет метод для [каждого события, которое React может понимать](/docs/events.html#supported-events). -**Кликать на элемент** +**Кликнуть на элемент** ```javascript // @@ -332,7 +332,7 @@ const node = this.button; ReactTestUtils.Simulate.click(node); ``` -**Меняет значение в поле ввода и затем симулирует нажатие кнопки ENTER.** +**Изменить значение в поле ввода, а затем эмулировать нажатие кнопки ENTER.** ```javascript // this.textInput = node} /> @@ -344,6 +344,6 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); > Примечание: > -> Вам нужно будет предоставить все свойства события, которое вы используете в своем компоненте (например, keyCode, which и так далее), поскольку React не создаёт ничего из этого. +> Вам нужно будет предоставить все свойства события, которое вы используете в своём компоненте (например, keyCode, which и т.д.), поскольку React не создаёт ничего из этого. * * * From 8d6d7d2e4f0c5f3521017edadb6235979f887f5c Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 28 Feb 2019 10:55:13 -0800 Subject: [PATCH 26/28] Update addons-test-utils.md --- content/docs/addons-test-utils.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index a280c090a..6e30ce786 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -122,7 +122,7 @@ it('рендер и обновление счетчика', () => { }); ``` -Не забывайте что отправка DOM-событий работает только, когда DOM-контейнер добавлен в `document`. Можно использовать вспомогательную библиотеку [`react-testing-library`](https://github.com/kentcdodds/react-testing-library), чтобы уменьшить количество шаблонного кода. +Не забывайте, что отправка DOM-событий работает только если DOM-контейнер добавлен в `document`. Можно использовать вспомогательную библиотеку [`react-testing-library`](https://github.com/kentcdodds/react-testing-library), чтобы уменьшить количество шаблонного кода. * * * @@ -135,7 +135,7 @@ mockComponent( ) ``` -Передаёт фиктивный модуль компонента этому методу, чтобы дополнить его полезными методами, которые позволяют использовать его в качестве фиктивного компонента React. Вместо того чтобы рендерить как обычно, компонент становится простым элементом `
` (или другим тегом `mockTagName`, если указан), содержащий любые предоставленные дочерние элементы. +Передайте фиктивный модуль компонента этому методу, чтобы дополнить его полезными методами, которые позволяют использовать его в качестве фиктивного компонента React. Вместо того чтобы рендерить как обычно, компонент становится простым элементом `
` (или другим тегом `mockTagName`, если указан), содержащий любые предоставленные дочерние элементы. > Примечание: > From a9d5c8c6186dad687dbf81a33c56cecd6ad2f740 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 28 Feb 2019 11:03:02 -0800 Subject: [PATCH 27/28] Update addons-test-utils.md --- content/docs/addons-test-utils.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 6e30ce786..a76aeb4b0 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -208,7 +208,7 @@ findAllInRenderedTree( ) ``` -Проходит по всем компонентам в `tree` и собирает все компоненты, для которых `test(component)` возвращает `true`. Сам по себе он не так полезен, но используется как примитив для других тестовых утилит. +Находит все компоненты в дереве `tree`, для которых `test(component)` возвращает `true`. Сам по себе он не так полезен, но используется как примитив для других тестовых утилит. * * * @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -Работает как [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), но ожидает, что будет один результат, и возвращает этот один результат, или выдаёт исключение, если есть любое другое число совпадений, кроме одного. +Работает как [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), но ожидает, что найдётся ровно один результат, который и будет возвращён. Если ничего не будет найдено или найдётся больше одного результата, генерирует исключение. * * * @@ -260,7 +260,7 @@ findRenderedDOMComponentWithTag( ) ``` -Также как [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) но ожидает, что будет один результат, и возвращает этот один результат, или выдаёт исключение, если есть любое другое число совпадений, кроме одного. +Также как [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) но ожидает, что найдётся ровно один результат, который и будет возвращён. Если ничего не будет найдено или найдётся больше одного результата, генерирует исключение. * * * @@ -286,7 +286,7 @@ findRenderedComponentWithType( ) ``` -Работает так же как [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), но ожидает, что будет один результат, и возвращает этот один результат, или выдаёт исключение, если есть любое другое число совпадений, кроме одного. +Работает так же как [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), но ожидает, что найдётся ровно один результат, который и будет возвращён. Если ничего не будет найдено или найдётся больше одного результата, генерирует исключение. *** From 1d0f63030d6a076cf69f1103296a704fcb8c4db2 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 28 Feb 2019 11:05:16 -0800 Subject: [PATCH 28/28] Update addons-test-utils.md --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index a76aeb4b0..a54fb3b8c 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -305,7 +305,7 @@ ReactDOM.render(element, domContainer); > Примечание: > -> `window`, `window.document` и `window.document.createElement` должны быть доступными **перед** тем как вы импортируете `React`. В противном случае React будет думать что не может получить доступ к DOM, и такие методы как `setState` не будут работать. +> `window`, `window.document` и `window.document.createElement` должны быть доступными **перед** тем как вы импортируете `React`. В противном случае React будет думать что не может получить доступ к DOM и такие методы как `setState` не будут работать. * * *