Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test Utils translation #53

Merged
merged 3 commits into from
Mar 7, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 53 additions & 53 deletions content/docs/addons-test-utils.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
id: test-utils
title: Test Utilities
title: Tesztelői segédeszközök
permalink: docs/test-utils.html
layout: docs
category: Reference
---

**Importing**
**Importálás**

```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-mel
```

## Overview {#overview}
## Áttekintés {#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](https://jestjs.io/docs/tutorial-react).
A `ReactTestUtils` egyszerűvé teszi a React komponensek tesztelését az általad választott tesztelői keretrendszerben. A Facebooknál a [Jest](https://facebook.github.io/jest/)-et használjuk a fájdalommentes JavaScript tesztelés érdekében. A Jest weboldalán lévő [React Tutorial](https://jestjs.io/docs/tutorial-react) segítségével megtanulhatod, hogy kezdhetsz neki a tesztelésnek.

> Note:
> Megjegyzés:
>
> We recommend using [React Testing Library](https://testing-library.com/react) which is designed to enable and encourage writing tests that use your components as the end users do.
> Mi a [React Testing Library](https://testing-library.com/react) használatát ajánljuk, ami úgy lett tervezve, hogy olyan komponenstesztek írására bátorítson, amik a végfelhasználó cselekedeit tükrözi.
>
> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
> Alternatívaként, az Airbnb is kiadott egy tesztelői segédeszközt [Enzyme](https://airbnb.io/enzyme/) néven, ami egyszerűbbé teszi a React komponenseid kimenetéhez állításokat írni, azt manipulálni és bejárni.

- [`act()`](#act)
- [`mockComponent()`](#mockcomponent)
Expand All @@ -40,17 +40,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
- [`renderIntoDocument()`](#renderintodocument)
- [`Simulate`](#simulate)

## Reference {#reference}
## Referencia {#reference}

### `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.
Egy komponens állításokhoz való felkészítéshez vedd körül az azt renderelő és frissítéseket végrehajtó kódot egy `act()` hívással. Ez közelebb viszi a tesztek futtatását ahhoz, ahogyan a React működik a böngészőben.

>Note
>Megjegyzés
>
>If you use `react-test-renderer`, it also provides an `act` export that behaves the same way.
> Ha a `react-test-renderer`-t használod, az is szolgáltat egy `act` exportot, ami hasonlóan működik.

For example, let's say we have this `Counter` component:
Például, mondjuk hogy van ez a `Counter` komponensünk:

```js
class Counter extends React.Component {
Expand All @@ -60,10 +60,10 @@ class Counter extends React.Component {
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
document.title = `${this.state.count} alkalommal kattintottál`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
document.title = `${this.state.count} alkalommal kattintottál`;
}
handleClick() {
this.setState(state => ({
Expand All @@ -73,17 +73,17 @@ class Counter extends React.Component {
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<p>{this.state.count} alkalommal kattintottál</p>
<button onClick={this.handleClick}>
Click me
Kattints rám
</button>
</div>
);
}
}
```

Here is how we can test it:
Ezt így tudjuk tesztelni:

```js{3,20-22,29-31}
import React from 'react';
Expand All @@ -103,28 +103,28 @@ afterEach(() => {
container = null;
});

it('can render and update a counter', () => {
// Test first render and componentDidMount
it('tud egy számlálót renderelni, és frissíteni', () => {
// Teszteld az első renderelést és a componentDidMount-ot
act(() => {
ReactDOM.render(<Counter />, 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 alkalommal kattintottál');
expect(document.title).toBe('0 alkalommal kattintottál');

// Test second render and componentDidUpdate
// Teszteld a második renderelést, és a componentDidUpdate-t
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 alkalommal kattintottál');
expect(document.title).toBe('1 alkalommal kattintottál');
});
```

- Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a library like [React Testing Library](https://testing-library.com/react) to reduce the boilerplate code.
- Ne feledd, hogy DOM események kiküldése csak akkor működik, ha a DOM konténer hozzá lett adva a `document`-hez. A sablonkód minimalizálásához használj egy könyvtárat, mint a [React Testing Library](https://testing-library.com/react).

- The [`recipes`](/docs/testing-recipes.html) document contains more details on how `act()` behaves, with examples and usage.
- A [`receptek`](/docs/testing-recipes.html) dokumentum több részletet tartalmaz az `act()` működéséről példákkal, és annak használatáról.

* * *

Expand All @@ -137,11 +137,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 `<div>` (or other tag if `mockTagName` is provided) containing any provided children.
Adj át egy leutánzott (mocked) komponensmodult ennek a metódusnak, hogy azt kiterjeszd hasznos metódusokkal, amik lehetővé teszik ezt úgy használni, mint egy ál-React komponenst. Szokásos renderelés helyett a komponens egy egyszerű `<div>`-vé válik (vagy más címkévé, ha a `mockTagName` meg lett adva), ami minden szolgáltatott gyermeket tartalmaz.

> Note:
> Megjegyzés:
>
> `mockComponent()` is a legacy API. We recommend using [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
> A `mockComponent()` egy elavult API. Helyette a [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) használatát ajánljuk.

* * *

Expand All @@ -151,7 +151,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.
Ha az `element` egy bármilyen React elem, `true` értéket ad vissza.

* * *

Expand All @@ -164,7 +164,7 @@ isElementOfType(
)
```

Returns `true` if `element` is a React element whose type is of a React `componentClass`.
Ha az `element` egy bármilyen React elem, aminek a típusa `componentClass`, akkor `true` értéket ad vissza.

* * *

Expand All @@ -174,7 +174,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 `<div>` or `<span>`).
Ha az `instance` egy DOM komponens (mint például `<div>`, vagy `<span>`), akkor `true` értéket ad vissza.

* * *

Expand All @@ -184,7 +184,7 @@ Returns `true` if `instance` is a DOM component (such as a `<div>` or `<span>`).
isCompositeComponent(instance)
```

Returns `true` if `instance` is a user-defined component, such as a class or a function.
Ha az `instance` egy felhasználó által definiált komponens, mint például egy osztály vagy egy függvény, akkor `true` értéket ad vissza.

* * *

Expand All @@ -197,7 +197,7 @@ isCompositeComponentWithType(
)
```

Returns `true` if `instance` is a component whose type is of a React `componentClass`.
Ha az `instance` egy React komponens, aminek a típusa egy `componentClass`, akkor `true` értéket ad vissza.

* * *

Expand All @@ -210,7 +210,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.
Bejár minden komponenst a `tree`-ben (fán) és összegyűjti az összes komponenst, ahol a `test(component)` `true`. Ez így magában nem túl hasznos, inkább primitívként, más tesztelői segédeszközökben használt.

* * *

Expand All @@ -223,7 +223,7 @@ scryRenderedDOMComponentsWithClass(
)
```

Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`.
Megtalálja minden komponens DOM elemét a renderelt fában, amik DOM komponensek, és osztálynevük megegyezik a `className`-mel.

* * *

Expand All @@ -236,7 +236,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.
Mint a [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), de csak egy eredményre számít, és csak ezt az egy eredményt adja vissza, vagy egy kivételt dob, ha több egyezés is van.

* * *

Expand All @@ -249,7 +249,7 @@ scryRenderedDOMComponentsWithTag(
)
```

Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`.
Megtalálja minden komponens DOM elemét a renderelt fában, amik DOM komponensek, és címkenevük megegyezik a `tagName`-mel.

* * *

Expand All @@ -262,7 +262,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.
Mint a [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag), de csak egy eredményre számít, és csak ezt az egy eredményt adja vissza, vagy egy kivételt dob, ha több egyezés is van.

* * *

Expand All @@ -275,7 +275,7 @@ scryRenderedComponentsWithType(
)
```

Finds all instances of components with type equal to `componentClass`.
Megtalálja az összes komponens példányát, amik típusa megegyezik a `componentClass`-szal.

* * *

Expand All @@ -288,7 +288,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.
Mint a [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), de csak egy eredményre számít, és csak ezt az egy eredményt adja vissza, vagy egy kivételt dob, ha több egyezés is van.

***

Expand All @@ -298,20 +298,20 @@ 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:
Egy React elemet renderel egy leválasztott DOM csomópontba, a dokumentumban. **Ez a függvény megköveteli a DOM jelenlétét.** Ez végülis ekvivalens ezzel:

```js
const domContainer = document.createElement('div');
ReactDOM.render(element, domContainer);
```

> Note:
> Megegyezés:
>
> 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.
> Szükséged lesz a `window`, `window.document` és a `window.document.createElement` globális jelenlétére a `React` beimportálása **előtt**. Máskülönben a React azt fogja hinni, hogy nem fér hozzá a DOM-hoz és olyan metódusok, mint a `setState` nem fognak működni.

* * *

## Other Utilities {#other-utilities}
## Egyéb segédeszközök {#other-utilities}

### `Simulate` {#simulate}

Expand All @@ -322,30 +322,30 @@ Simulate.{eventName}(
)
```

Simulate an event dispatch on a DOM node with optional `eventData` event data.
Egy esemény kiküldését szimulálja egy DOM csompóponton, az opcionális `eventData` eseménnyel kapcsolatos adattal.

`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events).
A `Simulate` rendelkezik egy metódussal [minden eseményhez, amit a React megért](/docs/events.html#supported-events).

**Clicking an element**
**Egy elemre kattintás**

```javascript
// <button ref={(node) => this.button = node}>...</button>
const node = this.button;
ReactTestUtils.Simulate.click(node);
```

**Changing the value of an input field and then pressing ENTER.**
**Beviteli mező értékének megváltoztatása és az ENTER lenyomása.**

```javascript
// <input ref={(node) => this.textInput = node} />
const node = this.textInput;
node.value = 'giraffe';
node.value = 'zsiráf';
ReactTestUtils.Simulate.change(node);
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
```

> Note
> Megjegyzés
>
> 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.
> Minden eseménytulajdonságot szolgáltatnod kell, amit a komponensed használ (pl.: keyCode, which, stb...), mivel a React ezeket nem fogja neked létrehozni.

* * *
2 changes: 1 addition & 1 deletion content/docs/nav.yml
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@
- id: events
title: SyntheticEvent
- id: test-utils
title: Tesztelői segédprogramok
title: Tesztelői segédeszközök
- id: test-renderer
title: Teszt renderelő
- id: javascript-environment-requirements
Expand Down