[DONE] Translating testing overview

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 `<div>`, React Native `<View>`) 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.

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.

content/docs/testing.md

@@ -1,40 +1,39 @@
 ---
 id: testing
-title: Testing Overview
+title: نظرة عامة على الاختبارات
 permalink: docs/testing.html
 redirect_from:
   - "community/testing.html"
 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}
+### المقايضات {#tradeoffs}
 
+عند إختيار أدوات الاختبار ، يجدر التفكير في بعض المقايضات:
+* **سرعة التكرار مقابل البيئة الواقعية:** تقدم بعض الأدوات حلقة ردود فعل سريعة للغاية بين إجراء التغيير ورؤية النتيجة، ولكنها لا تُحاكي سلوك المتصفح بدقة. بعض الأدوات الأخرى تستخدم بيئة متصفح واقعية، لكن ذلك يقلل سرعة التكرار وتكون غير مستقرة على خادم التكامل المستمر.
 
-When choosing testing tools, it is worth considering a few tradeoffs:
+* **كمية عمليات التقليد:** مع المكوّنات ، يمكن أن يكون الفرق بين اختبار "الوحدة (unit)" و "التكامل (integration)" غير واضح. مثلا إذا كنت تختبر إستمارة ، فهل يجب على الاختبار ان يشمل أيضًا اختبار الأزرار الموجودة بداخلها؟ أم هل يجب أن يكون لمكوّن الزر مجموعة اختبارات خاصة به؟ هل يجب أن تؤدي إعادة هيكلة الزر إلى تعطيل اختبار الإستمارة ؟
 
-* **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.

src/pages/404.js

@@ -26,7 +26,8 @@ const PageNotFound = ({location}: Props) => (
           <div css={sharedStyles.markdown}>
             <p>لم نتمكن من العثور على ما كنت تبحث عنه.</p>
             <p>
-              يرجى الاتصال بمالك الموقع الذي ربطك بعنوان الـ URL الأصلي وإخباره بأن رابطه لا يعمل.
+              يرجى الاتصال بمالك الموقع الذي ربطك بعنوان الـ URL الأصلي وإخباره
+              بأن رابطه لا يعمل.
             </p>
           </div>
         </div>

src/pages/acknowledgements.html.js

@@ -47,24 +47,35 @@ const Acknowlegements = ({data, location}) => (
             <p>:بالإضافة إلى ذلك ، نحن ممتنون لـ</p>
             <ul>
               <li>
-                <a href="https://github.com/jeffbski">Jeff Barczewski</a> : للسماح لنا باستخدام <a href="https://www.npmjs.com/package/react">react</a> كإسم في مدير الحزم npm.
+                <a href="https://github.com/jeffbski">Jeff Barczewski</a> :
+                للسماح لنا باستخدام{' '}
+                <a href="https://www.npmjs.com/package/react">react</a> كإسم في
+                مدير الحزم npm.
               </li>
               <li>
-                <a href="https://christopheraue.net/">Christopher Aue</a> : للسماح لنا باستخدام <a href="https://reactjs.com/">reactjs.com</a> كإسم مجال (domaine) و <a href="https://twitter.com/reactjs">@reactjs</a> كإسم مستخدم على منصة Twitter.
+                <a href="https://christopheraue.net/">Christopher Aue</a> :
+                للسماح لنا باستخدام{' '}
+                <a href="https://reactjs.com/">reactjs.com</a> كإسم مجال
+                (domaine) و <a href="https://twitter.com/reactjs">@reactjs</a>{' '}
+                كإسم مستخدم على منصة Twitter.
               </li>
               <li>
-                <a href="https://github.com/ProjectMoon">ProjectMoon</a> : للسماح لنا باستخدام <a href="https://www.npmjs.com/package/flux">flux</a> كإسم حزمة على منصة npm.
+                <a href="https://github.com/ProjectMoon">ProjectMoon</a> :
+                للسماح لنا باستخدام{' '}
+                <a href="https://www.npmjs.com/package/flux">flux</a> كإسم حزمة
+                على منصة npm.
               </li>
               <li>
-                Shane Anderson : للسماح لنا باستخدام منظمة <a href="https://github.com/react">react</a> على منصة Github.
+                Shane Anderson : للسماح لنا باستخدام منظمة{' '}
+                <a href="https://github.com/react">react</a> على منصة Github.
               </li>
               <li>
-                <a href="https://github.com/voronianski">Dmitri Voronianski</a> : {' '}
-                  للسماح لنا باستخدام نظام الألوان {' '}
-                  <a href="https://labs.voronianski.com/oceanic-next-color-scheme/">
-                    Oceanic Next
-                  </a> {' '}
-                  على هذا الموقع.
+                <a href="https://github.com/voronianski">Dmitri Voronianski</a>{' '}
+                : للسماح لنا باستخدام نظام الألوان{' '}
+                <a href="https://labs.voronianski.com/oceanic-next-color-scheme/">
+                  Oceanic Next
+                </a>{' '}
+                على هذا الموقع.
               </li>
             </ul>
           </div>

src/pages/jsx-compiler.html.js

@@ -23,12 +23,10 @@ const JsxCompiler = ({location}: Props) => (
           <Header>خدمة مترجم JSX</Header>
           <div css={sharedStyles.markdown}>
             <p>
-              <strong>
-              تمت إزالة الأداة JSXTransformer حيث تم إهمال .
-              </strong>
+              <strong>تمت إزالة الأداة JSXTransformer حيث تم إهمال .</strong>
             </p>
             <p>
-              نوصي باستخدام أداة أخرى مثل {' '}
+              نوصي باستخدام أداة أخرى مثل{' '}
               <a href="https://babeljs.io/repl/">Babel REPL</a>.
             </p>
           </div>

src/pages/languages.js

@@ -54,9 +54,7 @@ const Languages = ({location}: Props) => (
           />
 
           <div css={sharedStyles.markdown}>
-            <p>
-            مستندات React متاحة باللغات التالية:
-            </p>
+            <p>مستندات React متاحة باللغات التالية:</p>
 
             <LanguagesGrid languages={complete} />
 

src/pages/versions.js

@@ -32,18 +32,18 @@ const Versions = ({location}: Props) => (
           />
           <div css={sharedStyles.markdown}>
             <p>
-              يمكنك ان تجد تاريخ الإصدارات الكامل لـ React {' '}
+              يمكنك ان تجد تاريخ الإصدارات الكامل لـ React{' '}
               <a
                 href="https://github.com/facebook/react/releases"
                 target="_blank"
                 rel="noopener">
-                 عبر منصة Github
+                عبر منصة Github
               </a>
               .<br />
               يمكن أيضًا العثور على الوثائق الخاصة بالإصدارات الحديثة أدناه.
             </p>
             <p>
-              راجع الأسئلة الشائعة الخاصة بنا للحصول على معلومات حول {' '}
+              راجع الأسئلة الشائعة الخاصة بنا للحصول على معلومات حول{' '}
               <a href="/docs/faq-versioning.html">
                 سياسة الإصدار والالتزام بالاستقرار
               </a>