Skip to content

Commit

Permalink
Merge pull request #37 from Poseid10ur/onurkapcik/test-utilities
Browse files Browse the repository at this point in the history
Translation API Reference > test utilities
  • Loading branch information
alioguzhan committed Mar 13, 2019
2 parents 29ccfaf + 7364860 commit e8abb14
Showing 1 changed file with 52 additions and 52 deletions.
104 changes: 52 additions & 52 deletions content/docs/addons-test-utils.md
@@ -1,27 +1,27 @@
---
id: test-utils
title: Test Utilities
title: Test Araçları
permalink: docs/test-utils.html
layout: docs
category: Reference
---

**Importing**
**Ekleme**

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

## Overview {#overview}
## Genel Bakış {#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).
`ReactTestUtils`, React bileşenlerini seçtiğiniz test çerçevesinde test etmeyi kolaylaştırır. Facebook, JavaScript testi için Jest‘i kullanmaktadır.

> Note:
> Not:
>
> 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.
> Bileşenlerinizi son kullanıcı kullanır gibi kullanan testler yazmanız ve etkinleştirmeniz için tasarlanmış [`react-testing-library`](https://git.io/react-testing-library) kullanmanızı öneririz.
>
> 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.
> Alternatif olarak Airbnb [Enzyme](http://airbnb.io/enzyme/) adında bir test aracı yayınladı. Bu araç, React bileşenlerinizin çıktısını test etmenizi, üzerinde gezinmenizi ve değiştirmenizi kolaylaştırmaktadır.
- [`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}
## Başvuru Dokümanı {#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.
Bileşen testlerini hazırlamak için kodunuzu paket haline getirin ve `act()`'i kullanarak bileşeniniz içerisinde güncelleme yapabilirsiniz. `act()`, React'ın tarayıcıda çalışma biçimine çok yakın bir şekilde çalışmasını sağlamaktadır.

>Note
>Not
>
>If you use `react-test-renderer`, it also provides an `act` export that behaves the same way.
>Eğer `react-test-renderer`'ı kullanırsanız, bu size `act` çıktısının aynı şekilde davranmasını sağlar.
For example, let's say we have this `Counter` component:
Örneğin aşağıdaki gibi bir `Counter` bileşenimizin olduğunu düşünün:

```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} kez tıkladınız`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
document.title = `${this.state.count} kez tıkladınız`;
}
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} kez tıkladınız</p>
<button onClick={this.handleClick}>
Click me
Beni tıkla
</button>
</div>
);
}
}
```

Here is how we can test it:
Bu bileşeni aşağıdaki gibi test edebiliriz:

```js{3,20-22,29-31}
import React from 'react';
Expand All @@ -103,26 +103,26 @@ afterEach(() => {
container = null;
});
it('can render and update a counter', () => {
// Test first render and componentDidMount
it('sayacı render edebilir ve güncelleyebilir', () => {
// render ve componentDidMount'u test eder
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 kez tıkladınız');
expect(document.title).toBe('0 kez tıkladınız');
// Test second render and componentDidUpdate
// render and componentDidUpdate'u test eder
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 kez tıkladınız');
expect(document.title).toBe('1 kez tıkladınız');
});
```

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.
Unutmayınız ki, `document`'a DOM container'ı eklenmediği sürece, dispatchEvent() çalışmayacaktır. Bu tarz angarya kodlarla uğraşmamak için, [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) gibi bir kütüphaneyi kullanabilirsiniz.

* * *

Expand All @@ -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 `<div>` (or other tag if `mockTagName` is provided) containing any provided children.
Mock (sahte ya da taklit) bir React bileşeni olarak kullanılabilmesine izin veren yöntemleri ekleyebilmek için bu metoda mock edilmiş bir bileşen modülü gönderin. Her zamanki gibi render etmesi yerine, bileşen belirtilen herhangi bir alt elemanı içeren basit bir `<div>` olacaktır. (Veya `mockTagName` belirtilmişse, belirtilen eleman olacaktır)

> Note:
> Not:
>
> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/shallow-renderer.html) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
> `mockComponent()` eski bir API'dır. [shallow rendering](/docs/shallow-renderer.html)'i veya [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock)'u kullanmanızı tavsiye ederiz.
* * *

Expand All @@ -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.
Eğer `element` herhangi bir React elemanı ise `true` döner.

* * *

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

Returns `true` if `element` is a React element whose type is of a React `componentClass`.
Eğer `element`, React'ın `componentClass` tipinde olan bir React elemanı ise `true` döner.

* * *

Expand All @@ -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 `<div>` or `<span>`).
Eğer `instance`, `div` veya `span` gibi bir DOM bileşeni ise `true` döner

* * *

Expand All @@ -182,7 +182,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.
Eğer `instance`, kullanıcı tanımlı sınıf veya fonksiyon gibi bileşeni ise `true` döner.

* * *

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

Returns `true` if `instance` is a component whose type is of a React `componentClass`.
Eğer `instance`, React'ın `componentClass` tipinde olan bir React elemanı ise `true` döner.

* * *

Expand All @@ -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` içindeki tüm bileşenleri dolaşır ve `test(component)`'ın `true` olduğu tüm bileşenleri toplar. Tek başına pek kullanışlı değil, ancak diğer test araçları için basit olarak kullanılmaktadır.

* * *

Expand All @@ -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`.
Render edilen ağaçta, belirtilen `className` ile eşleşen bütün DOM elemanlarını bulur.

* * *

Expand All @@ -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)'a benzerdir, ancak sadece bir sonuç olmasını bekler ve geriye sonucu döndürür. (Birden fazla eşleşme varsa exception fırlatır).

* * *

Expand All @@ -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`.
Render edilen ağaçta, belirtilen `tagName` ile eşleşen bütün DOM elemanlarını bulur.

* * *

Expand All @@ -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)'a benzerdir, ancak sadece bir sonuç olmasını bekler ve geriye sonucu döndürür. (Birden fazla eşleşme varsa exception fırlatır).

* * *

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

Finds all instances of components with type equal to `componentClass`.
Belirtilen `componentClass`'a eşit olan bütün bileşenleri bulur.

* * *

Expand All @@ -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)'a benzerdir, ancak sadece bir sonuç olmasını bekler ve geriye sonucu döndürür. (Birden fazla eşleşme varsa exception fırlatır).

***

Expand All @@ -296,20 +296,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:
Bir React öğesini dökümandan ayrılmış bir DOM elemanı olarak render edin. **Bu fonksiyonun DOM'a ihtiyacı vardır.** Şuna eşdeğerdir:

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

> Note:
> Not:
>
> 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.
> `React`'a eklemeden **önce** global olarak hazır olan `window`, `window.document` ve `window.document.createElement`'e ihtiyacınız olacaktır. Aksi takdirde React DOM'a erişemediğini düşünecektir ve böylece `setState` gibi metodlar çalışmayacaktır.
* * *

## Other Utilities {#other-utilities}
## Diğer Araçlar {#other-utilities}

### `Simulate` {#simulate}

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

Simulate an event dispatch on a DOM node with optional `eventData` event data.
İsteğe bağlı olan `eventData` olay verileri ile bir DOM elemanı üzerinde olay gönderimini simüle edebilirsiniz.

`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events).
`Simulate`, [React'in anlayabildiği her olay](/docs/events.html#support-events) için bir metoda sahiptir.

**Clicking an element**
**Elemana tıklama**

```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.**
**Input alanındaki değeri değiştirme ve ENTER'a basma**

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

> Note
> Not
>
> 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.
> React'ın sağlayamadığı ama bileşeninizde kullandığınız herhangi bir olay özelliğini (örneğin, keyCode, which, vb...) sizin sağlamanız gerekmektedir.
* * *

0 comments on commit e8abb14

Please sign in to comment.