From 8d28bf1057bc610f7ba0fec88297e36b8572d3e0 Mon Sep 17 00:00:00 2001 From: Mohannad Salah Date: Sun, 27 Oct 2019 22:18:58 +0200 Subject: [PATCH 1/6] Started translating testing.md --- content/docs/testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/testing.md b/content/docs/testing.md index 5bccd1fc4..ff2b112f5 100644 --- a/content/docs/testing.md +++ b/content/docs/testing.md @@ -1,6 +1,6 @@ --- id: testing -title: Testing Overview +title: نظرة عامة على الإختبارات permalink: docs/testing.html redirect_from: - "community/testing.html" From 2d0854a47fe7322bec172bf89c97575263eb218d Mon Sep 17 00:00:00 2001 From: Mohannad Salah Date: Mon, 28 Oct 2019 02:52:32 +0200 Subject: [PATCH 2/6] Initial translation --- content/docs/testing.md | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/content/docs/testing.md b/content/docs/testing.md index ff2b112f5..bff6675b5 100644 --- a/content/docs/testing.md +++ b/content/docs/testing.md @@ -7,34 +7,33 @@ redirect_from: next: testing-recipes.html --- -You can test React components similar to testing other JavaScript code. +بإمكانك إختبار مكوّنات React بطريقة مشابهة لإختبارك اي كود جافاسكريبت اخر. -There are a few ways to test React components. Broadly, they divide into two categories: +هناك عدة طرق لإختبار مكوّنات React. بشكل عام ، يتم تقسيمهم إلى فئتين: -* **Rendering component trees** in a simplified test environment and asserting on their output. -* **Running a complete app** in a realistic browser environment (also known as “end-to-end” tests). +* **تصيير أشجار المكوّنات** في بيئة إختبار مبسطة والتأكيد على مخرجاتها. +* **تشغيل تطبيق كامل** في بيئة متصفح واقعية (تُعرف أيضًا باسم إختبارات end-to-end). -This documentation section focuses on testing strategies for the first case. While full end-to-end tests can be very useful to prevent regressions to important workflows, such tests are not concerned with React components in particular, and are out of scope of this section. +يركز قسم المستندات هذا على إستراتيجيات الإختبار للحالة الأولى. على الرغم من أن الإختبارات الكاملة من النوع (end-to-end) قد تكون مفيدة جدًا لمنع الانحدارات إلى مهام سير العمل الهامة ،هذه الإختبارات لا تتعلق بمكوّنات React على وجه الخصوص ، وهي خارج نطاق هذا القسم. -### Tradeoffs {#tradeoffs} +### المقايضات (Trade-offs) {#tradeoffs} +عند اختيار أدوات الإختبار ، يجدر التفكير في بعض المقايضات: +* **سرعة التكرار مقابل البيئة الواقعية:** تقدم بعض الأدوات حلقة ردود فعل سريعة للغاية بين إجراء التغيير ورؤية النتيجة, ولكنها لا تحاكي سلوك المتصفح بدقة. بعض الادوات الاخرى تستخدم بيئة متصفح واقعية, لكن ذلك يقلل سرعة التكرار وتكون غير مستقرة على خادم التكامل المستمر. -When choosing testing tools, it is worth considering a few tradeoffs: +* **كمية عمليات المحاكاة (mocking):** مع المكوّنات ، يمكن أن يكون الفرق بين اختبار "الوحدة (unit)" و "التكامل (integration)" غير واضح. مثلا إذا كنت تختبر استمارة ، فهل يجب على الإختبار ان يشمل أيضًا اختبار الأزرار الموجودة بداخلها؟ أم هل يجب أن يكون لمكوّن الزر مجموعة إختبارات خاصة به؟ هل يجب أن تؤدي إعادة هيكلة الزر "refactoring" إلى تعطيل اختبار الإستمارة ؟ -* **Iteration speed vs Realistic environment:** Some tools offer a very quick feedback loop between making a change and seeing the result, but don't model the browser behavior precisely. Other tools might use a real browser environment, but reduce the iteration speed and are flakier on a continuous integration server. -* **How much to mock:** With components, the distinction between a "unit" and "integration" test can be blurry. If you're testing a form, should its test also test the buttons inside of it? Or should a button component have its own test suite? Should refactoring a button ever break the form test? +قد تعمل الإجابات المختلفة لفرق عمل ومنتجات مختلفة. -Different answers may work for different teams and products. +### الادوات الموصّى بها{#tools} -### Recommended Tools {#tools} +**[Jest](https://facebook.github.io/jest/)** هو مشغل اختبارات جافاسكريبت يتيح لك الوصول الى ال DOM بواسطة [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). على الرغم من أن jsdom عبارة عن مجرد صورة تقريبية عن كيفية عمل المتصفح, لكنها غالبا جيدة لإختبار مكّونات React. يوفر Jest سرعة تكرار رائعة مقترنة بميزات قوية مثل محاكاة [المكتبات](/docs/testing-environments.html#mocking-modules) و [المؤقتات](/docs/testing-environments.html#mocking-timers) بحيث يمكنك التحكم بشكل أكبر في كيفية تنفيذ الكود. -**[Jest](https://facebook.github.io/jest/)** is a JavaScript test runner that lets you access the DOM via [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking [modules](/docs/testing-environments.html#mocking-modules) and [timers](/docs/testing-environments.html#mocking-timers) so you can have more control over how the code executes. +**[مكتبة إختبارات React](https://testing-library.com/react)** هي مجموعة من الأدوات والحزم المساعدة التي تتيح لك اختبار مكونات React دون الاعتماد على تفاصيل تنفيذها. هذا النهج يجعل عملية إعادة الهيكلة سهلة جدا كما يدفعك نحو إتباع أفضل الممارسات لاتاحة سهولة الوصول. على الرغم من انها لا تقدم طريقة لتصيير مكوّن بصورة سطحية بدون أبناءه, مشغل اختبارات مثل Jest يتيح لك ذلك عبر [المحاكاة](/docs/testing-recipes.html#mocking-modules). -**[React Testing Library](https://testing-library.com/react)** is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn't provide a way to "shallowly" render a component without its children, a test runner like Jest lets you do this by [mocking](/docs/testing-recipes.html#mocking-modules). +### تعلم أكثر {#learn-more} -### Learn More {#learn-more} +ينقسم هذا القسم إلى صفحتين: -This section is divided in two pages: - -- [Recipes](/docs/testing-recipes.html): Common patterns when writing tests for React components. -- [Environments](/docs/testing-environments.html): What to consider when setting up a testing environment for React components. +- [طرق إجراء الإختبارات](/docs/testing-recipes.html): الأنماط الشائعة عند كتابة اختبارات مكونات React. +- [بيئة و محيط الإختبارات](/docs/testing-environments.html): ما يجب مراعاته عند إعداد بيئة اختبار لمكونات React. From bac2c0e69c0269f218f4f037d57fcb9dae19cb02 Mon Sep 17 00:00:00 2001 From: Mohannad Salah Date: Tue, 29 Oct 2019 00:15:27 +0200 Subject: [PATCH 3/6] improved translation of testing.md --- content/docs/testing.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/testing.md b/content/docs/testing.md index bff6675b5..45a767cd6 100644 --- a/content/docs/testing.md +++ b/content/docs/testing.md @@ -7,33 +7,33 @@ redirect_from: next: testing-recipes.html --- -بإمكانك إختبار مكوّنات React بطريقة مشابهة لإختبارك اي كود جافاسكريبت اخر. +بإمكانك إختبار مكوّنات React بطريقة مشابهة لإختبارك اي كود جافاسكريبت آخر. هناك عدة طرق لإختبار مكوّنات React. بشكل عام ، يتم تقسيمهم إلى فئتين: * **تصيير أشجار المكوّنات** في بيئة إختبار مبسطة والتأكيد على مخرجاتها. * **تشغيل تطبيق كامل** في بيئة متصفح واقعية (تُعرف أيضًا باسم إختبارات end-to-end). -يركز قسم المستندات هذا على إستراتيجيات الإختبار للحالة الأولى. على الرغم من أن الإختبارات الكاملة من النوع (end-to-end) قد تكون مفيدة جدًا لمنع الانحدارات إلى مهام سير العمل الهامة ،هذه الإختبارات لا تتعلق بمكوّنات React على وجه الخصوص ، وهي خارج نطاق هذا القسم. +يُركز قسم المستندات هذا على إستراتيجيات الإختبار للحالة الأولى. على الرغم من أن الإختبارات الكاملة من النوع (end-to-end) يمكن أن تكون مفيدة جدًا لمنع الإنحدارات إلى مهام سير العمل الهامة ،مثل هذه الإختبارات لا تتعلق بمكوّنات React على وجه الخصوص ، وهي خارج نطاق هذا القسم. -### المقايضات (Trade-offs) {#tradeoffs} +### المقايضات {#tradeoffs} -عند اختيار أدوات الإختبار ، يجدر التفكير في بعض المقايضات: -* **سرعة التكرار مقابل البيئة الواقعية:** تقدم بعض الأدوات حلقة ردود فعل سريعة للغاية بين إجراء التغيير ورؤية النتيجة, ولكنها لا تحاكي سلوك المتصفح بدقة. بعض الادوات الاخرى تستخدم بيئة متصفح واقعية, لكن ذلك يقلل سرعة التكرار وتكون غير مستقرة على خادم التكامل المستمر. +عند إختيار أدوات الإختبار ، يجدر التفكير في بعض المقايضات: +* **سرعة التكرار مقابل البيئة الواقعية:** تقدم بعض الأدوات حلقة ردود فعل سريعة للغاية بين إجراء التغيير ورؤية النتيجة, ولكنها لا تُحاكي سلوك المتصفح بدقة. بعض الأدوات الأخرى تستخدم بيئة متصفح واقعية, لكن ذلك يقلل سرعة التكرار وتكون غير مستقرة على خادم التكامل المستمر. -* **كمية عمليات المحاكاة (mocking):** مع المكوّنات ، يمكن أن يكون الفرق بين اختبار "الوحدة (unit)" و "التكامل (integration)" غير واضح. مثلا إذا كنت تختبر استمارة ، فهل يجب على الإختبار ان يشمل أيضًا اختبار الأزرار الموجودة بداخلها؟ أم هل يجب أن يكون لمكوّن الزر مجموعة إختبارات خاصة به؟ هل يجب أن تؤدي إعادة هيكلة الزر "refactoring" إلى تعطيل اختبار الإستمارة ؟ +* **كمية عمليات التقليد:** مع المكوّنات ، يمكن أن يكون الفرق بين إختبار "الوحدة (unit)" و "التكامل (integration)" غير واضح. مثلا إذا كنت تختبر إستمارة ، فهل يجب على الإختبار ان يشمل أيضًا إختبار الأزرار الموجودة بداخلها؟ أم هل يجب أن يكون لمكوّن الزر مجموعة إختبارات خاصة به؟ هل يجب أن تؤدي إعادة هيكلة الزر إلى تعطيل إختبار الإستمارة ؟ -قد تعمل الإجابات المختلفة لفرق عمل ومنتجات مختلفة. +تختلف الإجابات بإختلاف فرق العمل والمنتجات. -### الادوات الموصّى بها{#tools} +### الأدوات المُوصى بها{#tools} -**[Jest](https://facebook.github.io/jest/)** هو مشغل اختبارات جافاسكريبت يتيح لك الوصول الى ال DOM بواسطة [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). على الرغم من أن jsdom عبارة عن مجرد صورة تقريبية عن كيفية عمل المتصفح, لكنها غالبا جيدة لإختبار مكّونات React. يوفر Jest سرعة تكرار رائعة مقترنة بميزات قوية مثل محاكاة [المكتبات](/docs/testing-environments.html#mocking-modules) و [المؤقتات](/docs/testing-environments.html#mocking-timers) بحيث يمكنك التحكم بشكل أكبر في كيفية تنفيذ الكود. +**[Jest](https://facebook.github.io/jest/)** هو مشغل إختبارات جافاسكريبت يتيح لك الوصول الى ال DOM بواسطة [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). على الرغم من أن jsdom عبارة عن مجرد صورة تقريبية عن كيفية عمل المتصفح, لكنها غالباً جيدة لإختبار مكوّنات React. يوفر Jest سرعة تكرار رائعة مقترنة بميزات قوية مثل تقليد [المكتبات](/docs/testing-environments.html#mocking-modules) و [المؤقتات](/docs/testing-environments.html#mocking-timers) بحيث يمكنك التحكم بشكل أكبر في كيفية تنفيذ الكود. -**[مكتبة إختبارات React](https://testing-library.com/react)** هي مجموعة من الأدوات والحزم المساعدة التي تتيح لك اختبار مكونات React دون الاعتماد على تفاصيل تنفيذها. هذا النهج يجعل عملية إعادة الهيكلة سهلة جدا كما يدفعك نحو إتباع أفضل الممارسات لاتاحة سهولة الوصول. على الرغم من انها لا تقدم طريقة لتصيير مكوّن بصورة سطحية بدون أبناءه, مشغل اختبارات مثل Jest يتيح لك ذلك عبر [المحاكاة](/docs/testing-recipes.html#mocking-modules). +**[مكتبة إختبارات React](https://testing-library.com/react)** هي مجموعة من الأدوات والحزم المساعدة التي تتيح لك إختبار مكوّنات React دون الإعتماد على تفاصيل تنفيذها. هذا النهج يجعل عملية إعادة الهيكلة سهلة جدا كما يدفعك نحو إتباع أفضل الممارسات لإتاحة سهولة الوصول. على الرغم من انها لا تُقدم طريقة لتصيير مكوّن بصورة سطحية بدون العناصر الأبناء, يتيح لك مشغل اختبارات مثل Jest ذلك عبر [التقليد](/docs/testing-recipes.html#mocking-modules). ### تعلم أكثر {#learn-more} ينقسم هذا القسم إلى صفحتين: -- [طرق إجراء الإختبارات](/docs/testing-recipes.html): الأنماط الشائعة عند كتابة اختبارات مكونات React. -- [بيئة و محيط الإختبارات](/docs/testing-environments.html): ما يجب مراعاته عند إعداد بيئة اختبار لمكونات React. +- [طرق إجراء الإختبارات](/docs/testing-recipes.html): الأنماط الشائعة عند كتابة إختبارات مكوّنات React. +- [بيئة و محيط الإختبارات](/docs/testing-environments.html): ما يجب مُراعاته عند إعداد بيئة إختبار لمكوّنات React. From 8a1888f144b3044e21ac6806699f7762a1945d29 Mon Sep 17 00:00:00 2001 From: Mohannad Salah Date: Tue, 29 Oct 2019 00:15:51 +0200 Subject: [PATCH 4/6] Ran yarn check-all --- content/blog/2019-08-15-new-react-devtools.md | 12 +++---- content/docs/reference-profiler.md | 4 +-- src/pages/404.js | 3 +- src/pages/acknowledgements.html.js | 31 +++++++++++++------ src/pages/jsx-compiler.html.js | 6 ++-- src/pages/languages.js | 4 +-- src/pages/versions.js | 6 ++-- 7 files changed, 37 insertions(+), 29 deletions(-) diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md index 8e52dfae3..b9f4b2eee 100644 --- a/content/blog/2019-08-15-new-react-devtools.md +++ b/content/blog/2019-08-15-new-react-devtools.md @@ -4,7 +4,7 @@ author: [bvaughn] --- We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge! -## What's changed? +## What's changed? {#whats-changed} A lot has changed in version 4! At a high level, this new version should offer significant performance gains and an improved navigation experience. @@ -14,7 +14,7 @@ It also offers full support for React Hooks, including inspecting nested objects [Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details. -## Which versions of React are supported? +## Which versions of React are supported? {#which-versions-of-react-are-supported} **`react-dom`** @@ -26,7 +26,7 @@ It also offers full support for React Hooks, including inspecting nested objects * `0`-`0.61`: Not supported * `0.62`: Will be supported (when 0.62 is released) -## How do I get the new DevTools? +## How do I get the new DevTools? {#how-do-i-get-the-new-devtools} React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/). If you have already installed the extension, it should update automatically within the next couple of hours. @@ -37,14 +37,14 @@ If you use the standalone shell (e.g. in React Native or Safari), you can instal npm install -g react-devtools@^4 ``` -## Where did all of the DOM elements go? +## Where did all of the DOM elements go? {#where-did-all-of-the-dom-elements-go} The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies. Host nodes (e.g. HTML `
`, React Native ``) are *hidden by default*, but this filter can be disabled: ![DevTools component filters](../images/blog/devtools-component-filters.gif) -## How do I get the old version back? +## How do I get the old version back? {#how-do-i-get-the-old-version-back} If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM: @@ -70,7 +70,7 @@ yarn build:extension # Follow the on-screen instructions to complete installation ``` -## Thank you! +## Thank you! {#thank-you} We'd like to thank everyone who tested the early release of DevTools version 4. Your feedback helped improve this initial release significantly. diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 58a9e41c9..cb64fef1a 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -16,7 +16,7 @@ Its purpose is to help identify parts of an application that are slow and may be > To opt into production profiling, React provides a special production build with profiling enabled. > Read more about how to use this build at [fb.me/react-profiling](https://fb.me/react-profiling) -## Usage +## Usage {#usage} A `Profiler` can be added anywhere in a React tree to measure the cost of rendering that part of the tree. It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update. @@ -70,7 +70,7 @@ render( > > Although `Profiler` is a light-weight component, it should be used only when necessary; each use adds some CPU and memory overhead to an application. -## `onRender` Callback +## `onRender` Callback {#onrender-callback} The `Profiler` requires an `onRender` function as a prop. React calls this function any time a component within the profiled tree "commits" an update. diff --git a/src/pages/404.js b/src/pages/404.js index 57b1fb386..27185ea5f 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -26,7 +26,8 @@ const PageNotFound = ({location}: Props) => (

لم نتمكن من العثور على ما كنت تبحث عنه.

- يرجى الاتصال بمالك الموقع الذي ربطك بعنوان الـ URL الأصلي وإخباره بأن رابطه لا يعمل. + يرجى الاتصال بمالك الموقع الذي ربطك بعنوان الـ URL الأصلي وإخباره + بأن رابطه لا يعمل.

diff --git a/src/pages/acknowledgements.html.js b/src/pages/acknowledgements.html.js index fdb93858d..ad5d11aa7 100644 --- a/src/pages/acknowledgements.html.js +++ b/src/pages/acknowledgements.html.js @@ -47,24 +47,35 @@ const Acknowlegements = ({data, location}) => (

:بالإضافة إلى ذلك ، نحن ممتنون لـ

  • - Jeff Barczewski : للسماح لنا باستخدام react كإسم في مدير الحزم npm. + Jeff Barczewski : + للسماح لنا باستخدام{' '} + react كإسم في + مدير الحزم npm.
  • - Christopher Aue : للسماح لنا باستخدام reactjs.com كإسم مجال (domaine) و @reactjs كإسم مستخدم على منصة Twitter. + Christopher Aue : + للسماح لنا باستخدام{' '} + reactjs.com كإسم مجال + (domaine) و @reactjs{' '} + كإسم مستخدم على منصة Twitter.
  • - ProjectMoon : للسماح لنا باستخدام flux كإسم حزمة على منصة npm. + ProjectMoon : + للسماح لنا باستخدام{' '} + flux كإسم حزمة + على منصة npm.
  • - Shane Anderson : للسماح لنا باستخدام منظمة react على منصة Github. + Shane Anderson : للسماح لنا باستخدام منظمة{' '} + react على منصة Github.
  • - Dmitri Voronianski : {' '} - للسماح لنا باستخدام نظام الألوان {' '} - - Oceanic Next - {' '} - على هذا الموقع. + Dmitri Voronianski{' '} + : للسماح لنا باستخدام نظام الألوان{' '} + + Oceanic Next + {' '} + على هذا الموقع.
diff --git a/src/pages/jsx-compiler.html.js b/src/pages/jsx-compiler.html.js index 3da94eb50..67c850d48 100644 --- a/src/pages/jsx-compiler.html.js +++ b/src/pages/jsx-compiler.html.js @@ -23,12 +23,10 @@ const JsxCompiler = ({location}: Props) => (
خدمة مترجم JSX

- - تمت إزالة الأداة JSXTransformer حيث تم إهمال . - + تمت إزالة الأداة JSXTransformer حيث تم إهمال .

- نوصي باستخدام أداة أخرى مثل {' '} + نوصي باستخدام أداة أخرى مثل{' '} Babel REPL.

diff --git a/src/pages/languages.js b/src/pages/languages.js index b37f683a8..8f9b09fc4 100644 --- a/src/pages/languages.js +++ b/src/pages/languages.js @@ -54,9 +54,7 @@ const Languages = ({location}: Props) => ( />
-

- مستندات React متاحة باللغات التالية: -

+

مستندات React متاحة باللغات التالية:

diff --git a/src/pages/versions.js b/src/pages/versions.js index 473853526..d17d41715 100644 --- a/src/pages/versions.js +++ b/src/pages/versions.js @@ -32,18 +32,18 @@ const Versions = ({location}: Props) => ( />

- يمكنك ان تجد تاريخ الإصدارات الكامل لـ React {' '} + يمكنك ان تجد تاريخ الإصدارات الكامل لـ React{' '} - عبر منصة Github + عبر منصة Github .
يمكن أيضًا العثور على الوثائق الخاصة بالإصدارات الحديثة أدناه.

- راجع الأسئلة الشائعة الخاصة بنا للحصول على معلومات حول {' '} + راجع الأسئلة الشائعة الخاصة بنا للحصول على معلومات حول{' '} سياسة الإصدار والالتزام بالاستقرار From 52f3b801378778b294e33df5d3dbfa96678453c5 Mon Sep 17 00:00:00 2001 From: Mohannad Salah Date: Thu, 31 Oct 2019 23:10:52 +0200 Subject: [PATCH 5/6] Corrected commas --- content/docs/testing.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/testing.md b/content/docs/testing.md index 45a767cd6..684b12871 100644 --- a/content/docs/testing.md +++ b/content/docs/testing.md @@ -9,7 +9,7 @@ next: testing-recipes.html بإمكانك إختبار مكوّنات React بطريقة مشابهة لإختبارك اي كود جافاسكريبت آخر. -هناك عدة طرق لإختبار مكوّنات React. بشكل عام ، يتم تقسيمهم إلى فئتين: +هناك عدة طرق لاختبار مكوّنات React. بشكل عام ، يتم تقسيمهم إلى فئتين: * **تصيير أشجار المكوّنات** في بيئة إختبار مبسطة والتأكيد على مخرجاتها. * **تشغيل تطبيق كامل** في بيئة متصفح واقعية (تُعرف أيضًا باسم إختبارات end-to-end). @@ -19,7 +19,7 @@ next: testing-recipes.html ### المقايضات {#tradeoffs} عند إختيار أدوات الإختبار ، يجدر التفكير في بعض المقايضات: -* **سرعة التكرار مقابل البيئة الواقعية:** تقدم بعض الأدوات حلقة ردود فعل سريعة للغاية بين إجراء التغيير ورؤية النتيجة, ولكنها لا تُحاكي سلوك المتصفح بدقة. بعض الأدوات الأخرى تستخدم بيئة متصفح واقعية, لكن ذلك يقلل سرعة التكرار وتكون غير مستقرة على خادم التكامل المستمر. +* **سرعة التكرار مقابل البيئة الواقعية:** تقدم بعض الأدوات حلقة ردود فعل سريعة للغاية بين إجراء التغيير ورؤية النتيجة، ولكنها لا تُحاكي سلوك المتصفح بدقة. بعض الأدوات الأخرى تستخدم بيئة متصفح واقعية، لكن ذلك يقلل سرعة التكرار وتكون غير مستقرة على خادم التكامل المستمر. * **كمية عمليات التقليد:** مع المكوّنات ، يمكن أن يكون الفرق بين إختبار "الوحدة (unit)" و "التكامل (integration)" غير واضح. مثلا إذا كنت تختبر إستمارة ، فهل يجب على الإختبار ان يشمل أيضًا إختبار الأزرار الموجودة بداخلها؟ أم هل يجب أن يكون لمكوّن الزر مجموعة إختبارات خاصة به؟ هل يجب أن تؤدي إعادة هيكلة الزر إلى تعطيل إختبار الإستمارة ؟ @@ -27,9 +27,9 @@ next: testing-recipes.html ### الأدوات المُوصى بها{#tools} -**[Jest](https://facebook.github.io/jest/)** هو مشغل إختبارات جافاسكريبت يتيح لك الوصول الى ال DOM بواسطة [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). على الرغم من أن jsdom عبارة عن مجرد صورة تقريبية عن كيفية عمل المتصفح, لكنها غالباً جيدة لإختبار مكوّنات React. يوفر Jest سرعة تكرار رائعة مقترنة بميزات قوية مثل تقليد [المكتبات](/docs/testing-environments.html#mocking-modules) و [المؤقتات](/docs/testing-environments.html#mocking-timers) بحيث يمكنك التحكم بشكل أكبر في كيفية تنفيذ الكود. +**[Jest](https://facebook.github.io/jest/)** هو مشغل إختبارات جافاسكريبت يتيح لك الوصول الى ال DOM بواسطة [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). على الرغم من أن jsdom عبارة عن مجرد صورة تقريبية عن كيفية عمل المتصفح، لكنها غالباً جيدة لإختبار مكوّنات React. يوفر Jest سرعة تكرار رائعة مقترنة بميزات قوية مثل تقليد [المكتبات](/docs/testing-environments.html#mocking-modules) و [المؤقتات](/docs/testing-environments.html#mocking-timers) بحيث يمكنك التحكم بشكل أكبر في كيفية تنفيذ الكود. -**[مكتبة إختبارات React](https://testing-library.com/react)** هي مجموعة من الأدوات والحزم المساعدة التي تتيح لك إختبار مكوّنات React دون الإعتماد على تفاصيل تنفيذها. هذا النهج يجعل عملية إعادة الهيكلة سهلة جدا كما يدفعك نحو إتباع أفضل الممارسات لإتاحة سهولة الوصول. على الرغم من انها لا تُقدم طريقة لتصيير مكوّن بصورة سطحية بدون العناصر الأبناء, يتيح لك مشغل اختبارات مثل Jest ذلك عبر [التقليد](/docs/testing-recipes.html#mocking-modules). +**[مكتبة إختبارات React](https://testing-library.com/react)** هي مجموعة من الأدوات والحزم المساعدة التي تتيح لك إختبار مكوّنات React دون الإعتماد على تفاصيل تنفيذها. هذا النهج يجعل عملية إعادة الهيكلة سهلة جدا كما يدفعك نحو إتباع أفضل الممارسات لإتاحة سهولة الوصول. على الرغم من انها لا تُقدم طريقة لتصيير مكوّن بصورة سطحية بدون العناصر الأبناء، يتيح لك مشغل اختبارات مثل Jest ذلك عبر [التقليد](/docs/testing-recipes.html#mocking-modules). ### تعلم أكثر {#learn-more} From 8d87dc2d6fcdcca627f2a4c125e7742ae50e9abd Mon Sep 17 00:00:00 2001 From: Mohannad Salah Date: Thu, 31 Oct 2019 23:22:39 +0200 Subject: [PATCH 6/6] Removed 'hamzas' from test/tests translation --- content/docs/testing.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/testing.md b/content/docs/testing.md index 684b12871..e319d6766 100644 --- a/content/docs/testing.md +++ b/content/docs/testing.md @@ -1,39 +1,39 @@ --- id: testing -title: نظرة عامة على الإختبارات +title: نظرة عامة على الاختبارات permalink: docs/testing.html redirect_from: - "community/testing.html" next: testing-recipes.html --- -بإمكانك إختبار مكوّنات React بطريقة مشابهة لإختبارك اي كود جافاسكريبت آخر. +بإمكانك اختبار مكوّنات React بطريقة مشابهة لاختبارك اي كود جافاسكريبت آخر. هناك عدة طرق لاختبار مكوّنات React. بشكل عام ، يتم تقسيمهم إلى فئتين: -* **تصيير أشجار المكوّنات** في بيئة إختبار مبسطة والتأكيد على مخرجاتها. -* **تشغيل تطبيق كامل** في بيئة متصفح واقعية (تُعرف أيضًا باسم إختبارات end-to-end). +* **تصيير أشجار المكوّنات** في بيئة اختبار مبسطة والتأكيد على مخرجاتها. +* **تشغيل تطبيق كامل** في بيئة متصفح واقعية (تُعرف أيضًا باسم اختبارات end-to-end). -يُركز قسم المستندات هذا على إستراتيجيات الإختبار للحالة الأولى. على الرغم من أن الإختبارات الكاملة من النوع (end-to-end) يمكن أن تكون مفيدة جدًا لمنع الإنحدارات إلى مهام سير العمل الهامة ،مثل هذه الإختبارات لا تتعلق بمكوّنات React على وجه الخصوص ، وهي خارج نطاق هذا القسم. +يُركز قسم المستندات هذا على إستراتيجيات الاختبار للحالة الأولى. على الرغم من أن الاختبارات الكاملة من النوع (end-to-end) يمكن أن تكون مفيدة جدًا لمنع الإنحدارات إلى مهام سير العمل الهامة ،مثل هذه الاختبارات لا تتعلق بمكوّنات React على وجه الخصوص ، وهي خارج نطاق هذا القسم. ### المقايضات {#tradeoffs} -عند إختيار أدوات الإختبار ، يجدر التفكير في بعض المقايضات: +عند إختيار أدوات الاختبار ، يجدر التفكير في بعض المقايضات: * **سرعة التكرار مقابل البيئة الواقعية:** تقدم بعض الأدوات حلقة ردود فعل سريعة للغاية بين إجراء التغيير ورؤية النتيجة، ولكنها لا تُحاكي سلوك المتصفح بدقة. بعض الأدوات الأخرى تستخدم بيئة متصفح واقعية، لكن ذلك يقلل سرعة التكرار وتكون غير مستقرة على خادم التكامل المستمر. -* **كمية عمليات التقليد:** مع المكوّنات ، يمكن أن يكون الفرق بين إختبار "الوحدة (unit)" و "التكامل (integration)" غير واضح. مثلا إذا كنت تختبر إستمارة ، فهل يجب على الإختبار ان يشمل أيضًا إختبار الأزرار الموجودة بداخلها؟ أم هل يجب أن يكون لمكوّن الزر مجموعة إختبارات خاصة به؟ هل يجب أن تؤدي إعادة هيكلة الزر إلى تعطيل إختبار الإستمارة ؟ +* **كمية عمليات التقليد:** مع المكوّنات ، يمكن أن يكون الفرق بين اختبار "الوحدة (unit)" و "التكامل (integration)" غير واضح. مثلا إذا كنت تختبر إستمارة ، فهل يجب على الاختبار ان يشمل أيضًا اختبار الأزرار الموجودة بداخلها؟ أم هل يجب أن يكون لمكوّن الزر مجموعة اختبارات خاصة به؟ هل يجب أن تؤدي إعادة هيكلة الزر إلى تعطيل اختبار الإستمارة ؟ تختلف الإجابات بإختلاف فرق العمل والمنتجات. ### الأدوات المُوصى بها{#tools} -**[Jest](https://facebook.github.io/jest/)** هو مشغل إختبارات جافاسكريبت يتيح لك الوصول الى ال DOM بواسطة [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). على الرغم من أن jsdom عبارة عن مجرد صورة تقريبية عن كيفية عمل المتصفح، لكنها غالباً جيدة لإختبار مكوّنات React. يوفر Jest سرعة تكرار رائعة مقترنة بميزات قوية مثل تقليد [المكتبات](/docs/testing-environments.html#mocking-modules) و [المؤقتات](/docs/testing-environments.html#mocking-timers) بحيث يمكنك التحكم بشكل أكبر في كيفية تنفيذ الكود. +**[Jest](https://facebook.github.io/jest/)** هو مشغل اختبارات جافاسكريبت يتيح لك الوصول الى ال DOM بواسطة [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). على الرغم من أن jsdom عبارة عن مجرد صورة تقريبية عن كيفية عمل المتصفح، لكنها غالباً جيدة لاختبار مكوّنات React. يوفر Jest سرعة تكرار رائعة مقترنة بميزات قوية مثل تقليد [المكتبات](/docs/testing-environments.html#mocking-modules) و [المؤقتات](/docs/testing-environments.html#mocking-timers) بحيث يمكنك التحكم بشكل أكبر في كيفية تنفيذ الكود. -**[مكتبة إختبارات React](https://testing-library.com/react)** هي مجموعة من الأدوات والحزم المساعدة التي تتيح لك إختبار مكوّنات React دون الإعتماد على تفاصيل تنفيذها. هذا النهج يجعل عملية إعادة الهيكلة سهلة جدا كما يدفعك نحو إتباع أفضل الممارسات لإتاحة سهولة الوصول. على الرغم من انها لا تُقدم طريقة لتصيير مكوّن بصورة سطحية بدون العناصر الأبناء، يتيح لك مشغل اختبارات مثل Jest ذلك عبر [التقليد](/docs/testing-recipes.html#mocking-modules). +**[مكتبة اختبارات React](https://testing-library.com/react)** هي مجموعة من الأدوات والحزم المساعدة التي تتيح لك اختبار مكوّنات React دون الإعتماد على تفاصيل تنفيذها. هذا النهج يجعل عملية إعادة الهيكلة سهلة جدا كما يدفعك نحو إتباع أفضل الممارسات لإتاحة سهولة الوصول. على الرغم من انها لا تُقدم طريقة لتصيير مكوّن بصورة سطحية بدون العناصر الأبناء، يتيح لك مشغل اختبارات مثل Jest ذلك عبر [التقليد](/docs/testing-recipes.html#mocking-modules). ### تعلم أكثر {#learn-more} ينقسم هذا القسم إلى صفحتين: -- [طرق إجراء الإختبارات](/docs/testing-recipes.html): الأنماط الشائعة عند كتابة إختبارات مكوّنات React. -- [بيئة و محيط الإختبارات](/docs/testing-environments.html): ما يجب مُراعاته عند إعداد بيئة إختبار لمكوّنات React. +- [طرق إجراء الاختبارات](/docs/testing-recipes.html): الأنماط الشائعة عند كتابة اختبارات مكوّنات React. +- [بيئة و محيط الاختبارات](/docs/testing-environments.html): ما يجب مُراعاته عند إعداد بيئة اختبار لمكوّنات React.