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

Addons test utils hosseinamd #156

Merged
merged 5 commits into from
Jul 6, 2020
Merged
Changes from 3 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
80 changes: 40 additions & 40 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: ابزارهای تست
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
```

## 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](https://jestjs.io/docs/tutorial-react).
`ReactTestUtils` عملیات تست کامپوننت‌های ری‌اکت را در فریموورک موردنظرتان ساده می‌کند. ما در فیسبوک از [Jest](https://facebook.github.io/jest/) برای تست کردن جاوااسکریپتی بدون دردسر استفاده می‌کنیم. برای اینکه یاد بگیرید از کجا شروع کنید از [React Tutorial](https://jestjs.io/docs/tutorial-react) سایت Jest استفاده نمایید.

> Note:
> نکته:
>
> 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.
> ما استفاده از [React Testing Library](https://testing-library.com/react) را که برای فعالسازی و تشویق شما برای نوشتن تست‌هایی که کامپونت‌هایتان را به عنوان یک کاربر آزمایش می‌کنند طراحی شده است را پیشنهاد می‌کنیم.
hosseinAMD marked this conversation as resolved.
Show resolved Hide resolved
>
> 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.
> به عنوان جایگزین، Airbnb یک ابزار تست به نام [Enzyme](https://airbnb.io/enzyme/) منتشر کرده‌است که بررسی، دستکاری و ارزیابی خروجی کامپوننت‌های ری‌اکت شما را ساده می‌کند.

- [`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}
## مراجع {#reference}
hosseinAMD marked this conversation as resolved.
Show resolved Hide resolved

### `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()` قرار دهید. اینکار باعث می‌شود تست شما به روش کارکرد ری‌اکت در مرورگر نزدیک‌تر شود.
hosseinAMD marked this conversation as resolved.
Show resolved Hide resolved

>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 Counter extends React.Component {
Expand Down Expand Up @@ -83,7 +83,7 @@ class Counter extends React.Component {
}
```

Here is how we can test it:
به این شکل آن را تست می‌کنیم:

```js{3,20-22,29-31}
import React from 'react';
Expand Down Expand Up @@ -122,9 +122,9 @@ it('can render and update a counter', () => {
});
```

- 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.
- فراموش نکنید که عملیات رویدادهای DOM تنها زمانی که DOM container به `document` اضافه شده‌باشد کار می‌کند. شما می‌توانید از یک کتابخانه مانند [React Testing Library](https://testing-library.com/react) برای کاهش کدهای boilerplate استفاده کنید.
hosseinAMD marked this conversation as resolved.
Show resolved Hide resolved

- The [`recipes`](/docs/testing-recipes.html) document contains more details on how `act()` behaves, with examples and usage.
- سند [`recipes`](/docs/testing-recipes.html) شامل اطلاعات بیشتری در مورد چگونگی رفتار `act()`، با مثال‌ها و کاربردها می‌باشد.
hosseinAMD marked this conversation as resolved.
Show resolved Hide resolved

* * *

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.
یک ماژول کامپوننت Mock به این متد پاس دهید تا آن را به متدهای سودمندی که به آن اجازه می‌دهند که به عنوان یک کامپوننت ساختگی ری‌اکت استفاده شود تقویت کنید. به جای اینکه مثل همیشه رندر شود، کامپوننت یک `<div>` ساده (یا تگ دیگری اگر `mockTagName` فراهم شده باشد) شامل هر فرزند فراهم شده‌ای می‌شود.
hosseinAMD marked this conversation as resolved.
Show resolved Hide resolved

> Note:
> نکته:
>
> `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.
> `mockComponent()` یک API قدیمی است. ما استفاده از [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) را به عنوان جایگزین پیشنهاد می‌کنیم.

* * *

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.
اگر `element` هر المنت ری‌اکتی باشد `true` برمی‌گرداند.

* * *

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

Returns `true` if `element` is a React element whose type is of a React `componentClass`.
اگر `element` یک المنت ری‌اکت که از نوع `componentClass` ری‌اکت است باشد، `true` بازمی‌گرداند.

* * *

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>`).
اگر `instance` یک کامپوننت DOM باشد (مانند یک `<div>` یا `<span>`) مقدار `true` برمی‌گرداند.

* * *

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.
اگر `instance` یک کامپوننت تعریف شده توسط کاربر مانند یک کلاس یا یک تابع باشد، مقدار `true` را برمی‌گرداند.

* * *

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

Returns `true` if `instance` is a component whose type is of a React `componentClass`.
اگر `instance` یک کامپوننت از نوع `componentClass` ری‌اکت باشد مقدار `true` را برمی‌گرداند.

* * *

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.
از تمامی کامپوننت ها در `tree` عبور می‌کند و تمام کامپوننت‌هایی که `test(component)` آن‌ها مقدار `true` دارد را ذخیره می‌کند. به تنهایی کاربردی ندارد، اما به عنوان یک قدم اولیه برای دیگر ابزارهای تست استفاده می‌شود.

* * *

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`.
تمامی المنت‌های DOM در کامپوننت‌های درخت رندر شده را که کامپوننت‌هایی هستند که نام کلاسشان با `className` برابر است را پیدا می‌کند.

* * *

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.
شبیه [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) است اما انتظار دارد که تنها یک نتیجه وجود داشته باشد، یا اگر هر تعدادی به غیر از یک نتیجه پیدا کند یک خطا می‌اندازد.

* * *

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`.
تمامی المنت‌های DOM در کامپوننت‌های درخت رندر شده را که کامپوننت‌هایی هستند که نام تگشان با `tagName` برابر است را پیدا می‌کند.

* * *

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.
شبیه [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) است اما انتظار دارد که تنها یک نتیجه وجود داشته باشد، یا اگر هر تعدادی به غیر از یک نتیجه پیدا کند یک خطا می‌اندازد.

* * *

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

Finds all instances of components with type equal to `componentClass`.
تمامی instance های کامپوننت‌ها با نوع `componentClass` را پیدا می‌کند.

* * *

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.
مانند [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) است اما انتظار دارد که تنها یک نتیجه وجود داشته باشد، یا اگر هر تعدادی به غیر از یک نتیجه پیدا کند یک خطا می‌اندازد.
hosseinAMD marked this conversation as resolved.
Show resolved Hide resolved

***

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:
یک المنت ری‌اکت را در یک نود DOM جدا شده در سند رندر می‌کند. **این تابع یک DOM نیاز دارد.** به طور موثر برابر است با:
hosseinAMD marked this conversation as resolved.
Show resolved Hide resolved

```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` را ایمپورت کنید و با دسترسی عمومی نیاز خواهید داشت. در غیر اینصورت ری‌اکت فکر می‌کند که نمی‌تواند به DOM دسترسی پیدا کند و متدهایی مانند `setState` کار نخواهند کرد.

* * *

## Other Utilities {#other-utilities}
## دیگر ابزارها {#other-utilities}

### `Simulate` {#simulate}

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

Simulate an event dispatch on a DOM node with optional `eventData` event data.
رخداد یک رویداد روی یک نود DOM را با داده رویداد اختیاری `eventData` شبیه‌سازی می‌کند.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
رخداد یک رویداد روی یک نود DOM را با داده رویداد اختیاری `eventData` شبیه‌سازی می‌کند.
توضیع یک رویداد روی یک نود DOM با `eventData` داده اختیاری برای رویداد شبیه‌سازی می‌کند.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some typo in your suggestion. So i will commit correct edit.,

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

hosseinAMD marked this conversation as resolved.
Show resolved Hide resolved

`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
// <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.**
**تغییر مقدار یک فیلد ورودی و سپس فشردن ENTER.**

```javascript
// <input ref={(node) => this.textInput = node} />
Expand All @@ -344,8 +344,8 @@ 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, etc...) را فراهم کنید چرا که ری‌اکت هیچ یک از ان‌ها را برای شما ایجاد نمی‌کند.

* * *