From 5a8d0151354e36167e4dc0c59b214bb140960c9b Mon Sep 17 00:00:00 2001 From: Bao Dang Date: Fri, 17 Sep 2021 08:08:17 +0700 Subject: [PATCH 1/7] feat: done part 1 --- 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 ea92f3eb9..6a8973cb2 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -10,18 +10,18 @@ category: Reference ```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 với npm ``` -## Overview {#overview} +## Tổng quan {#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` giúp cho việc test các React component dễ dàng trong một framework test mà bạn tùy chọn. Ở Facebook chúng tôi dùng [Jest](https://facebook.github.io/jest/) để test JavaScript mà không tốn nhiều công sức. Giờ hãy tìm hiểu cách bắt đầu với Jest thông qua Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react). -> Note: +> Lưu ý: > -> 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. +> Chúng tôi khuyến nghị dùng [React Testing Library](https://testing-library.com/react) được thiết kế để kích hoạt và hỗ trợ viết các test mà dùng các component của bạn như là những người dùng cuối cùng(có thể hiểu như là người dùng thực tế). > -> For React versions <= 16, the [Enzyme](https://airbnb.io/enzyme/) library makes it easy to assert, manipulate, and traverse your React Components' output. +> Đối với phiên bản React <= 16, thư viện [Enzyme](https://airbnb.io/enzyme/) giúp bạn dễ dàng xác nhận, sử dụng, và kiểm qua output các React Component của bạn. @@ -42,17 +42,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm - [`renderIntoDocument()`](#renderintodocument) - [`Simulate`](#simulate) -## Reference {#reference} +## Chức vụ {#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. +Để chuẩn bị một component cho các assertion(assertion chính là những method dùng để kiểm tra kết quả của đơn vị cần test có đúng với mong đợi không), cho code render cái đó và thực hiện cập nhật bên trong hàm gọi `act()`. Điều này làm cho thử nghiệm của bạn chạy gần giống hơn với cách React chạy trên browser(trình duyệt). ->Note +>Lưu ý > ->If you use `react-test-renderer`, it also provides an `act` export that behaves the same way. +>Nếu bạn dùng `react-test-renderer`, nó cũng cung cấp một `act` hoạt động tương tự. -For example, let's say we have this `Counter` component: +Ví dụ, chúng ta có một `Counter` component: ```js class Counter extends React.Component { @@ -85,7 +85,7 @@ class Counter extends React.Component { } ``` -Here is how we can test it: +Đây là cách mà chúng ta test nó: ```js{3,20-22,29-31} import React from 'react'; @@ -124,9 +124,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. +- Đừng quên rằng việc điều phối các sự kiện DOM chỉ hoạt động khi vùng chứa DOM được thêm vào `document`. Bạn có thể dùng thư viện như [React Testing Library](https://testing-library.com/react) để giảm bớt code có sẵn. -- The [`recipes`](/docs/testing-recipes.html) document contains more details on how `act()` behaves, with examples and usage. +- Document này [`recipes`](/docs/testing-recipes.html) cho biết thông tin chi tiết cách `act()` hoạt động, gồm cả ví dụ lẫn cách sử dụng. * * * @@ -139,11 +139,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. +Sơ qua một module component mocked đến phương pháp để tăng cường nó với các method hữu ích mà cho phép nó được sử dụng như một giả lập component trong React. Thay vì render nó ra như bình thường, component sẽ trở nên đơn giản như `
` (hoặc là một thẻ khác nếu `mockTagName` được đặt) chứa bất kỳ children nào được cung cấp. -> Note: +> Lưu ý: > -> `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()` là một API kế thừa. Chúng tôi khuyên nên dùng [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) thay cho nó. * * * @@ -153,7 +153,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. +Trả về `true` nếu `element` thuộc bất kỳ React element. * * * From aa4fa8e086ec8c2eb271afd4b836d8745e41e8e8 Mon Sep 17 00:00:00 2001 From: Bao Dang Date: Fri, 17 Sep 2021 08:31:52 +0700 Subject: [PATCH 2/7] feat: done raw --- content/docs/addons-test-utils.md | 42 +++++++++++++++---------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 6a8973cb2..99803238f 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -166,7 +166,7 @@ isElementOfType( ) ``` -Returns `true` if `element` is a React element whose type is of a React `componentClass`. +Trả về `true` if `element` là một React element mà có kiểu thuộc React `componentClass`. * * * @@ -176,7 +176,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 ``). +Trả về `true` nếu `instance` là một DOM component (như là `
` hoặc ``). * * * @@ -186,7 +186,7 @@ Returns `true` if `instance` is a DOM component (such as a `
` or ``). isCompositeComponent(instance) ``` -Returns `true` if `instance` is a user-defined component, such as a class or a function. +Trả về `true` nếu `instance` là một component do người dùng xác định, như là class component hoặc function component. * * * @@ -199,7 +199,7 @@ isCompositeComponentWithType( ) ``` -Returns `true` if `instance` is a component whose type is of a React `componentClass`. +Trả về `true` nếu `instance` là một component mà có kiểu thuộc React `componentClass`. * * * @@ -212,7 +212,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. +Duyệt qua tất cả các component trong `tree` và dồn tất cả các component nơi mà `test(component)` là `true`. Điều này tuy không hữu ích cho mình, nhưng nó được sử dụng làm nền tảng cho các hộp test khác. * * * @@ -225,7 +225,7 @@ scryRenderedDOMComponentsWithClass( ) ``` -Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`. +Tìm tất cả các DOM element thuộc các component trong tree rendered mà DOM component có tên class phù hợp `className`. * * * @@ -238,7 +238,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. +Như là [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) nhưng sẽ chỉ có một kết quả, và trả về một kết quả duy nhất, hoặc throw ra exception nếu có bất kỳ kết quả nào khác trùng nhau cạnh một kết quả duy nhất. * * * @@ -251,7 +251,7 @@ scryRenderedDOMComponentsWithTag( ) ``` -Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`. +Tìm tất cả các DOM element trong các component trong rendered tree mà có DOM component có tên của thẻ trùng với `tagName`. * * * @@ -264,7 +264,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. +Như [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) nhưng sẽ chỉ có một kết quả, và trả về một kết quả duy nhất, hoặc throw ra exception nếu có bất kỳ kết quả nào khác trùng nhau cạnh một kết quả duy nhất. * * * @@ -277,7 +277,7 @@ scryRenderedComponentsWithType( ) ``` -Finds all instances of components with type equal to `componentClass`. +Tìm tất cả các trường hợp của các thành phần có kiểu như `componentClass`. * * * @@ -290,7 +290,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. +Tương tự như [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) nhưng sẽ chỉ có một kết quả, và trả về một kết quả duy nhất, hoặc throw ra exception nếu có bất kỳ kết quả nào khác trùng nhau cạnh một kết quả duy nhất. *** @@ -300,20 +300,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: +Render một React element vào trong một node DOM riêng trong một document. **Function này yêu cầu một DOM.** Nó tương tự với: ```js const domContainer = document.createElement('div'); ReactDOM.render(element, domContainer); ``` -> Note: +> Lưu ý: > -> 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. +> Bạn cần có `window`, `window.document` và `window.document.createElement` có sẵn ở toàn cục **trước khi** bạn import `React`. Nếu không, React sẽ nghĩ rằng nó không thể truy cập DOM và các phương thức như `setState` không hoạt động. * * * -## Other Utilities {#other-utilities} +## Các tiện ích khác {#other-utilities} ### `Simulate` {#simulate} @@ -324,11 +324,11 @@ Simulate.{eventName}( ) ``` -Simulate an event dispatch on a DOM node with optional `eventData` event data. +Mô phỏng một sự kiện gửi đi trên một node DOM với tùy chọn `eventData` sự kiện của dữ liệu. -`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events). +`Simulate` có một method cho [tất cả sự kiện mà React hiểu](/docs/events.html#supported-events). -**Clicking an element** +**Bấm vào một element** ```javascript // @@ -336,7 +336,7 @@ const node = this.button; ReactTestUtils.Simulate.click(node); ``` -**Changing the value of an input field and then pressing ENTER.** +**Thay đổi giá trị của trường đầu vào rồi nhấn ENTER.** ```javascript // this.textInput = node} /> @@ -346,8 +346,8 @@ ReactTestUtils.Simulate.change(node); ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); ``` -> Note +> Lưu ý > -> 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. +> Bạn sẽ phải cung cấp bất kỳ sự kiện property mà bạn đang dùng trong component của bạn (v.d. keyCode, which, etc...) và React không tạo ra bất kỳ gì trong nó cho bạn. * * * From 75813ffd2ac94a1052f4652609da0fc4f9e34800 Mon Sep 17 00:00:00 2001 From: Bao Dang Date: Fri, 17 Sep 2021 08:33:34 +0700 Subject: [PATCH 3/7] feat: done --- 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 99803238f..05902fe67 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -328,7 +328,7 @@ Mô phỏng một sự kiện gửi đi trên một node DOM với tùy chọn ` `Simulate` có một method cho [tất cả sự kiện mà React hiểu](/docs/events.html#supported-events). -**Bấm vào một element** +**Click vào một element** ```javascript // @@ -348,6 +348,6 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); > Lưu ý > -> Bạn sẽ phải cung cấp bất kỳ sự kiện property mà bạn đang dùng trong component của bạn (v.d. keyCode, which, etc...) và React không tạo ra bất kỳ gì trong nó cho bạn. +> Bạn sẽ phải cung cấp bất kỳ event property mà bạn đang dùng trong component của bạn (v.d. keyCode, which, etc...) mà React không tạo ra bất kỳ gì trong số đó cho bạn. * * * From 8287cb7e3e537e8c3926f69b7d4496ac5353940b Mon Sep 17 00:00:00 2001 From: Bao Dang Date: Fri, 17 Sep 2021 08:36:45 +0700 Subject: [PATCH 4/7] fix: chore --- 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 05902fe67..eb7f8f77e 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -62,10 +62,10 @@ class Counter extends React.Component { this.handleClick = this.handleClick.bind(this); } componentDidMount() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Bạn click ${this.state.count} lần`; } componentDidUpdate() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Bạn click ${this.state.count} lần`; } handleClick() { this.setState(state => ({ @@ -105,22 +105,22 @@ afterEach(() => { container = null; }); -it('can render and update a counter', () => { +it('có thể render và cập nhật counter', () => { // Test first render and componentDidMount act(() => { ReactDOM.render(, container); }); - const button = container.querySelector('button'); + const button = container.querySelector('nút bấm'); 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('Bạn click 0 lần'); + expect(document.title).toBe('Bạn click 0 lần'); // Test second render and 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('Bạn click 1 lần'); + expect(document.title).toBe('Bạn click 1 lần'); }); ``` From 9347b16dcd3fd5803843aef81d31efd56558bda0 Mon Sep 17 00:00:00 2001 From: Bao Dang Date: Tue, 21 Sep 2021 08:00:48 +0700 Subject: [PATCH 5/7] fix: first part --- content/docs/addons-test-utils.md | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 58ea1a3e3..4f45f79d2 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 với npm ## Tổng quan {#overview} -`ReactTestUtils` giúp cho việc test các React component dễ dàng trong một framework test mà bạn tùy chọn. Ở Facebook chúng tôi dùng [Jest](https://facebook.github.io/jest/) để test JavaScript mà không tốn nhiều công sức. Giờ hãy tìm hiểu cách bắt đầu với Jest thông qua Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react). +`ReactTestUtils` giúp cho việc test các component trong React dễ dàng hơn trong một test framework mà bạn tùy thích. Ở Facebook chúng tôi dùng [Jest](https://facebook.github.io/jest/) để test JavaScript một cách dễ dàng. Giờ bạn có thể tìm hiểu cách bắt đầu với Jest thông qua website này [React Tutorial](https://jestjs.io/docs/tutorial-react). > Lưu ý: > -> Chúng tôi khuyến nghị dùng [React Testing Library](https://testing-library.com/react) được thiết kế để kích hoạt và hỗ trợ viết các test mà dùng các component của bạn như là những người dùng cuối cùng(có thể hiểu như là người dùng thực tế). +> Chúng tôi khuyến nghị dùng [React Testing Library](https://testing-library.com/react) được thiết kế để hỗ trợ viết test mà dùng các component của bạn như là những người dùng cuối cùng(có thể hiểu như là người dùng thực tế). > -> Đối với phiên bản React <= 16, thư viện [Enzyme](https://airbnb.io/enzyme/) giúp bạn dễ dàng xác nhận, sử dụng, và kiểm qua output các React Component của bạn. +> Đối với phiên bản React <= 16, thư viện [Enzyme](https://airbnb.io/enzyme/) giúp bạn dễ dàng assert(là một xác nhận - assert - là một vị từ được kết nối với một điểm trong chương trình, luôn được đánh giá là true tại thời điểm đó trong quá trình thực thi mã), sử dụng, và kiểm qua output các React Component của bạn. @@ -46,11 +46,11 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 với npm ### `act()` {#act} -Để chuẩn bị một component cho các assertion(assertion chính là những method dùng để kiểm tra kết quả của đơn vị cần test có đúng với mong đợi không), cho code render cái đó và thực hiện cập nhật bên trong hàm gọi `act()`. Điều này làm cho thử nghiệm của bạn chạy gần giống hơn với cách React chạy trên browser(trình duyệt). +Để chuẩn bị một component cho các assertion(assertion chính là những method dùng để kiểm tra kết quả của đơn vị cần test có đúng với mong đợi không), để code render component đó và thực hiện cập nhật bên trong hàm `act()`. Điều này giúp cho test của bạn chạy gần giống như với cách React chạy trên browser(trình duyệt) thực tế. >Lưu ý > ->Nếu bạn dùng `react-test-renderer`, nó cũng cung cấp một `act` hoạt động tương tự. +>Nếu bạn dùng `react-test-renderer`, nó cũng cung cấp một `act` chạy tương tự. Ví dụ, chúng ta có một `Counter` component: @@ -75,9 +75,9 @@ class Counter extends React.Component { render() { return (
-

You clicked {this.state.count} times

+

Bạn đã click {this.state.count} lần

); @@ -105,12 +105,12 @@ afterEach(() => { container = null; }); -it('có thể render và cập nhật counter', () => { +it('có thể render và cập nhật một counter', () => { // Test first render and componentDidMount act(() => { ReactDOM.render(, container); }); - const button = container.querySelector('nút bấm'); + const button = container.querySelector('button'); const label = container.querySelector('p'); expect(label.textContent).toBe('Bạn click 0 lần'); expect(document.title).toBe('Bạn click 0 lần'); @@ -124,7 +124,7 @@ it('có thể render và cập nhật counter', () => { }); ``` -- Đừng quên rằng việc điều phối các sự kiện DOM chỉ hoạt động khi vùng chứa DOM được thêm vào `document`. Bạn có thể dùng thư viện như [React Testing Library](https://testing-library.com/react) để giảm bớt code có sẵn. +- Nhớ rằng việc điều phối các sự kiện DOM chỉ hoạt động khi vùng chứa DOM được thêm vào `document`. Bạn có thể dùng thư viện như [React Testing Library](https://testing-library.com/react) để dùng code đã có sẵn (boilerplate code). - Document này [`recipes`](/docs/testing-recipes.html) cho biết thông tin chi tiết cách `act()` hoạt động, gồm cả ví dụ lẫn cách sử dụng. @@ -139,15 +139,11 @@ mockComponent( ) ``` -Sơ qua một module component mocked đến phương pháp để tăng cường nó với các method hữu ích mà cho phép nó được sử dụng như một giả lập component trong React. Thay vì render nó ra như bình thường, component sẽ trở nên đơn giản như `
` (hoặc là một thẻ khác nếu `mockTagName` được đặt) chứa bất kỳ children nào được cung cấp. +Sơ qua một mocked module component, có một phương pháp để kết hợp nó với các method hữu ích mà cho phép nó được sử dụng như một component giả lập trong React. Thay vì render nó ra như bình thường, component chỉ ngắn gọn như một thẻ `
` (hoặc là một thẻ khác nếu `mockTagName` được đặt) chứa bất kỳ children nào trong nó. > Lưu ý: > -<<<<<<< HEAD > `mockComponent()` là một API kế thừa. Chúng tôi khuyên nên dùng [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) thay cho nó. -======= -> `mockComponent()` is a legacy API. We recommend using [`jest.mock()`](https://jestjs.io/docs/tutorial-react-native#mock-native-modules-using-jestmock) instead. ->>>>>>> c09a44bec17617c90e7911c0c28644bef075b7e5 * * * @@ -157,7 +153,7 @@ Sơ qua một module component mocked đến phương pháp để tăng cường isElement(element) ``` -Trả về `true` nếu `element` thuộc bất kỳ React element. +Trả về `true` nếu `element` thuộc bất kỳ element trong React. * * * From 9df7cb7fb646969d2527b03b31d45164a17c1e69 Mon Sep 17 00:00:00 2001 From: Bao Dang Date: Tue, 21 Sep 2021 08:23:32 +0700 Subject: [PATCH 6/7] feat: done raw --- content/docs/addons-test-utils.md | 32 +++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 4f45f79d2..b4ef3b8dd 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -166,7 +166,7 @@ isElementOfType( ) ``` -Trả về `true` if `element` là một React element mà có kiểu thuộc React `componentClass`. +Trả về `true` nếu `element` là một element trong React mà có kiểu thuộc `componentClass` trong React. * * * @@ -176,7 +176,7 @@ Trả về `true` if `element` là một React element mà có kiểu thuộc Re isDOMComponent(instance) ``` -Trả về `true` nếu `instance` là một DOM component (như là `
` hoặc ``). +Trả về `true` nếu `instance` là một component trong DOM (ví dụ như là `
` hoặc ``). * * * @@ -186,7 +186,7 @@ Trả về `true` nếu `instance` là một DOM component (như là `
` ho isCompositeComponent(instance) ``` -Trả về `true` nếu `instance` là một component do người dùng xác định, như là class component hoặc function component. +Trả về `true` nếu `instance` là một component do người dùng tự định nghĩa, như là class component hoặc function component. * * * @@ -199,7 +199,7 @@ isCompositeComponentWithType( ) ``` -Trả về `true` nếu `instance` là một component mà có kiểu thuộc React `componentClass`. +Trả về `true` nếu `instance` là một component mà có kiểu thuộc `componentClass` trong React. * * * @@ -212,7 +212,7 @@ findAllInRenderedTree( ) ``` -Duyệt qua tất cả các component trong `tree` và dồn tất cả các component nơi mà `test(component)` là `true`. Điều này tuy không hữu ích cho mình, nhưng nó được sử dụng làm nền tảng cho các hộp test khác. +Duyệt tất cả các component trong `tree` và gom lại tất cả các component mà `test(component)` trả về `true`. Điều này tuy không có ích lắm, nhưng được sử dụng làm nền tảng cho các test-util khác. * * * @@ -225,7 +225,7 @@ scryRenderedDOMComponentsWithClass( ) ``` -Tìm tất cả các DOM element thuộc các component trong tree rendered mà DOM component có tên class phù hợp `className`. +Tìm tất cả các element trong DOM thuộc các component trong tree đã render mà component DOM có tên của class giống với `className`. * * * @@ -238,7 +238,7 @@ findRenderedDOMComponentWithClass( ) ``` -Như là [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) nhưng sẽ chỉ có một kết quả, và trả về một kết quả duy nhất, hoặc throw ra exception nếu có bất kỳ kết quả nào khác trùng nhau cạnh một kết quả duy nhất. +Giống với [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) nhưng sẽ chỉ có một và trả về một kết quả duy nhất, hoặc throw ra exception nếu có bất kỳ các kết quả trùng nhau. * * * @@ -251,7 +251,7 @@ scryRenderedDOMComponentsWithTag( ) ``` -Tìm tất cả các DOM element trong các component trong rendered tree mà có DOM component có tên của thẻ trùng với `tagName`. +Tìm tất cả các element trong DOM thuộc các component trong tree đã render mà component DOM có tên của thẻ giống với `tagName`. * * * @@ -264,7 +264,7 @@ findRenderedDOMComponentWithTag( ) ``` -Như [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) nhưng sẽ chỉ có một kết quả, và trả về một kết quả duy nhất, hoặc throw ra exception nếu có bất kỳ kết quả nào khác trùng nhau cạnh một kết quả duy nhất. +Giống [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) nhưng sẽ chỉ có một và trả về một kết quả duy nhất, hoặc throw ra exception nếu có bất kỳ các kết quả trùng nhau. * * * @@ -277,7 +277,7 @@ scryRenderedComponentsWithType( ) ``` -Tìm tất cả các trường hợp của các thành phần có kiểu như `componentClass`. +Tìm tất cả các instance của các component có kiểu giống với `componentClass`. * * * @@ -290,7 +290,7 @@ findRenderedComponentWithType( ) ``` -Tương tự như [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) nhưng sẽ chỉ có một kết quả, và trả về một kết quả duy nhất, hoặc throw ra exception nếu có bất kỳ kết quả nào khác trùng nhau cạnh một kết quả duy nhất. +Giống với [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) nhưng sẽ chỉ có một và trả về một kết quả duy nhất, hoặc throw ra exception nếu có bất kỳ các kết quả trùng nhau. *** @@ -300,7 +300,7 @@ Tương tự như [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswi renderIntoDocument(element) ``` -Render một React element vào trong một node DOM riêng trong một document. **Function này yêu cầu một DOM.** Nó tương tự với: +Render một element của React vào một node riêng của DOM trong một document. **Function này yêu cầu DOM.** Nó tương tự với: ```js const domContainer = document.createElement('div'); @@ -324,9 +324,9 @@ Simulate.{eventName}( ) ``` -Mô phỏng một sự kiện gửi đi trên một node DOM với tùy chọn `eventData` sự kiện của dữ liệu. +Giả lập một sự kiện được gửi trên một node DOM với tùy chọn dữ liệu của sự kiện `eventData`. -`Simulate` có một method cho [tất cả sự kiện mà React hiểu](/docs/events.html#supported-events). +`Simulate` có một method cho [tất cả sự kiện mà React hỗ trợ](/docs/events.html#supported-events). **Click vào một element** @@ -336,7 +336,7 @@ const node = this.button; ReactTestUtils.Simulate.click(node); ``` -**Thay đổi giá trị của trường đầu vào rồi nhấn ENTER.** +**Thay đổi giá trị của trường đầu vào rồi ENTER.** ```javascript // this.textInput = node} /> @@ -348,6 +348,6 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); > Lưu ý > -> Bạn sẽ phải cung cấp bất kỳ event property mà bạn đang dùng trong component của bạn (v.d. keyCode, which, etc...) mà React không tạo ra bất kỳ gì trong số đó cho bạn. +> Bạn sẽ phải cung cấp tất cả event property mà bạn đang dùng trong component của bạn (v.d. keyCode, which, etc...) mà React sẽ không tạo ra bất kỳ những gì trong đó cho bạn. * * * From d48f9373cc70a7c557eb955bf6764c56497cc3ea Mon Sep 17 00:00:00 2001 From: Bao Dang Date: Tue, 21 Sep 2021 08:30:35 +0700 Subject: [PATCH 7/7] fix: chore --- 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 b4ef3b8dd..e9a74c302 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 với npm ## Tổng quan {#overview} -`ReactTestUtils` giúp cho việc test các component trong React dễ dàng hơn trong một test framework mà bạn tùy thích. Ở Facebook chúng tôi dùng [Jest](https://facebook.github.io/jest/) để test JavaScript một cách dễ dàng. Giờ bạn có thể tìm hiểu cách bắt đầu với Jest thông qua website này [React Tutorial](https://jestjs.io/docs/tutorial-react). +`ReactTestUtils` giúp cho việc test các component trong React dễ dàng hơn trong một test framework mà bạn muốn. Ở Facebook chúng tôi dùng [Jest](https://facebook.github.io/jest/) để test JavaScript một cách dễ dàng. Giờ bạn có thể tìm hiểu cách bắt đầu với Jest thông qua website này [React Tutorial](https://jestjs.io/docs/tutorial-react). > Lưu ý: > -> Chúng tôi khuyến nghị dùng [React Testing Library](https://testing-library.com/react) được thiết kế để hỗ trợ viết test mà dùng các component của bạn như là những người dùng cuối cùng(có thể hiểu như là người dùng thực tế). +> Chúng tôi khuyên dùng [React Testing Library](https://testing-library.com/react) được thiết kế để hỗ trợ viết test mà dùng các component của bạn như là những người dùng cuối cùng(có thể hiểu như là người dùng thực tế). > -> Đối với phiên bản React <= 16, thư viện [Enzyme](https://airbnb.io/enzyme/) giúp bạn dễ dàng assert(là một xác nhận - assert - là một vị từ được kết nối với một điểm trong chương trình, luôn được đánh giá là true tại thời điểm đó trong quá trình thực thi mã), sử dụng, và kiểm qua output các React Component của bạn. +> Đối với phiên bản React <= 16, thư viện [Enzyme](https://airbnb.io/enzyme/) giúp bạn dễ dàng assert(là một xác nhận - assert - là một vị từ được kết nối với một điểm trong chương trình, luôn được đánh giá là true tại thời điểm đó trong quá trình thực thi mã), sử dụng và kiểm tra output của các React Component. @@ -46,7 +46,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 với npm ### `act()` {#act} -Để chuẩn bị một component cho các assertion(assertion chính là những method dùng để kiểm tra kết quả của đơn vị cần test có đúng với mong đợi không), để code render component đó và thực hiện cập nhật bên trong hàm `act()`. Điều này giúp cho test của bạn chạy gần giống như với cách React chạy trên browser(trình duyệt) thực tế. +Để chuẩn bị một component cho các assertion(assertion chính là những method dùng để kiểm tra kết quả của đơn vị cần test có đúng với mong đợi không), render component đó và thực hiện cập nhật bên trong hàm `act()`. Điều này giúp cho test của bạn chạy gần giống như với cách React chạy trên browser thực tế. >Lưu ý > @@ -348,6 +348,6 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); > Lưu ý > -> Bạn sẽ phải cung cấp tất cả event property mà bạn đang dùng trong component của bạn (v.d. keyCode, which, etc...) mà React sẽ không tạo ra bất kỳ những gì trong đó cho bạn. +> React sẽ không tạo ra mà bạn phải cung cấp tất cả event property đang dùng trong component của bạn (v.d. keyCode, which, etc...). * * *