Testing-with-NPM.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <!DOCTYPE html>
  2. <html lang="ar">
  3. <head>
  4. <meta charset="utf-8">
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body class="rtl">
  10. <h1>الاختبار مع NPM</h1>
  11. <p class="desc">
  12. يوضح هذه المقال كيفية الحصول على three.js في بيئة [link:https://nodejs.org/en/ node.js] حتى تتمكن من تنفيذ الاختبارات الآلية. يمكن إجراء الاختبارات على سطر الأوامر ، أو بواسطة أدوات CI الآلية مثل [link:https://travis-ci.org/ Travis].
  13. </p>
  14. <h2>النسخة القصيرة</h2>
  15. <p>
  16. إذا كنت مرتاحًا مع node و npm ،
  17. <code>
  18. $ npm install three --save-dev
  19. </code>
  20. و من ثم قم بإضافة
  21. <code>
  22. const THREE = require('three');
  23. </code>
  24. للاختبار الخاص بك.
  25. </p>
  26. <h2>إنشاء مشروع قابلة للاختبار من الصفر</h2>
  27. <p>
  28. إذا لم تكن معتادًا على هذه الأدوات ، فإليك دليلًا سريعًا (بالنسبة لنظام التشغيل Linux ، ستكون عملية التثبيت مختلفة قليلاً باستخدام windows ، لكن أوامر NPM متطابقة).
  29. </p>
  30. <h3>الإعدادات الأساسية</h3>
  31. <div>
  32. <ol>
  33. <li>
  34. قم بتثبيت [link:https://www.npmjs.org/ npm] و nodejs. عادةً ما يبدو أقصر طريق كالأتي
  35. <code>
  36. $ sudo apt-get install -y npm nodejs-legacy
  37. # fix any problems with SSL in the default registry URL
  38. $ npm config set registry http://registry.npmjs.org/
  39. </code>
  40. </li>
  41. <li>
  42. أنشئ دليل مشروع جديد
  43. <code>
  44. $ mkdir test-example; cd test-example
  45. </code>
  46. </li>
  47. <li>
  48. اطلب من npm إنشاء ملف مشروع جديد لك:
  49. <code>
  50. $ npm init
  51. </code>
  52. واقبل جميع الإعدادات الافتراضية عن طريق الضغط على Enter في جميع المطالبات ، سيؤدي هذا إلى إنشاء package.json.
  53. </li><br />
  54. <li>
  55. جرب وابدأ اختبار الميزة بـ
  56. <code>
  57. $ npm test
  58. </code>
  59. هذا سيفشل ، وهو أمر متوقع. إذا نظرت في package.json ، فإن تعريف البرنامج النصي للاختبار هو
  60. <code>
  61. "test": "echo \"Error: no test specified\" && exit 1"
  62. </code>
  63. </li>
  64. </ol>
  65. </div>
  66. <h2>إضافة mocha</h2>
  67. <div>
  68. سنقوم بإستخدام [link:https://mochajs.org/ mocha].
  69. <ol>
  70. <li>
  71. تثبيت mocha من خلال
  72. <code>
  73. $ npm install mocha --save-dev
  74. </code>
  75. لاحظ أنه تم إنشاء node_modules/ وتظهر تبعياتك هناك. لاحظ أيضًا أنه تم تحديث package.json: تمت إضافة خاصية devDependencies وتحديثها باستخدام --save-dev.
  76. </li><br />
  77. <li>
  78. قم بتحرير package.json لاستخدام mocha للاختبار. عندما يتم استدعاء الاختبار ، نريد فقط تشغيل المخاوي وتحديد مراسل مطول. بشكل افتراضي ، سيؤدي هذا إلى تشغيل أي شيء في test (لا يمكن تشغيل الدليل test في npm ERR! ، قم بإنشائه عبر اختبار mkdir)
  79. <code>
  80. "test": "mocha --reporter list"
  81. </code>
  82. </li>
  83. <li>
  84. أعد الاختبار باستخدام
  85. <code>
  86. $ npm test
  87. </code>
  88. يجب أن ينجح هذا الآن ، حيث يتم الإبلاغ عن 0 تمرير (1 جزء من الثانية) أو ما شابه.
  89. </li>
  90. </ol>
  91. </div>
  92. <h2>أضف three.js</h2>
  93. <div>
  94. <ol>
  95. <li>
  96. دعنا نسحب تبعية three.js لدينا مع
  97. <code>
  98. $ npm install three --save-dev
  99. </code>
  100. <ul>
  101. <li>
  102. إذا كنت بحاجة إلى إصدار مختلف ، فاستخدم
  103. <code>
  104. $ npm show three versions
  105. </code>
  106. لمعرفة ما هو متاح. لإخبار npm بالقيمة الصحيحة ، استخدم
  107. <code>
  108. $ npm install [email protected] --save
  109. </code>
  110. (0.84.0 في هذا المثال). - حفظ يجعل هذا تبعية لهذا المشروع ، بدلاً من dev تبعية. انظر المستندات هنا [link:https://www.npmjs.org/doc/json.html here] لمزيد من المعلومات.
  111. </li>
  112. </ul>
  113. </li>
  114. <li>
  115. سيبحث Mocha عن الاختبارات في test/ ، لذلك دعونا
  116. <code>
  117. $ mkdir test
  118. </code>
  119. </li>
  120. <li>
  121. أخيرًا ، نحتاج بالفعل إلى اختبار JS للتشغيل. دعنا نضيف اختبارًا بسيطًا للتحقق من أن الكائن three.js متاح ويعمل. أنشئ test/verify-three.js تحتوي على:
  122. <code>
  123. const THREE = require('three');
  124. const assert = require("assert");
  125. describe('The THREE object', function() {
  126. it('should have a defined BasicShadowMap constant', function() {
  127. assert.notEqual('undefined', THREE.BasicShadowMap);
  128. }),
  129. it('should be able to construct a Vector3 with default of x=0', function() {
  130. const vec3 = new THREE.Vector3();
  131. assert.equal(0, vec3.x);
  132. })
  133. })
  134. </code>
  135. </li>
  136. <li>
  137. أخيرًا ، دعنا نختبر مرة أخرى باستخدام $ npm اختبار. يجب أن يؤدي هذا إلى إجراء الاختبارات أعلاه وأن ينجح ، ويظهر شيئًا مثل:
  138. <code>
  139. The THREE object should have a defined BasicShadowMap constant: 0ms
  140. The THREE object should be able to construct a Vector3 with default of x=0: 0ms
  141. 2 passing (8ms)
  142. </code>
  143. </li>
  144. </ol>
  145. </div>
  146. <h2>أضف الرمز الخاص بك</h2>
  147. <div>
  148. <p>عليك القيام بثلاثة أشياء:</p>
  149. <ol>
  150. <li>
  151. اكتب اختبارًا للسلوك المتوقع لشفرتك ، وضعه تحت test/.
  152. هنا مثال من مشروع حقيقي
  153. [link:https://github.com/air/encounter/blob/master/test/Physics-test.js Here].
  154. </li>
  155. <li>
  156. قم بتصدير الكود الوظيفي الخاص بك بطريقة يمكن للعقدة js رؤيتها ، لاستخدامها مع طلب.
  157. شاهده هنا [link:https://github.com/air/encounter/blob/master/js/Physics.js here].
  158. </li>
  159. <li>
  160. اطلب الكود الخاص بك في ملف الاختبار ، بنفس الطريقة التي فعلنا بها require('three') في المثال أعلاه.
  161. </li>
  162. </ol>
  163. <p>
  164. سيختلف البندان 2 و 3 بناءً على كيفية إدارتك للرمز. في مثال Physics.js الموضح أعلاه ، يكون جزء التصدير في النهاية. نقوم بتعيين كائن إلى module.exports:
  165. </p>
  166. <code>
  167. //=============================================================================
  168. // make available in nodejs
  169. //=============================================================================
  170. if (typeof exports !== 'undefined')
  171. {
  172. module.exports = Physics;
  173. }
  174. </code>
  175. </div>
  176. <h2>التعامل مع التبعيات (dependencies)</h2>
  177. <div>
  178. <p>
  179. إذا كنت تستخدم بالفعل شيئًا ذكيًا مثل request.js أو browserify فتخط هذا الجزء.
  180. </p>
  181. <p>
  182. عادةً ما يتم تشغيل مشروع three.js في المتصفح. يتم تحميل الوحدة النمطية عن طريق المتصفح الذي يقوم بتنفيذ مجموعة من علامات البرنامج النصي. فبالنسبة لملفاتك الفردية فلا داعي للقلق بشأن التبعيات. ومع ذلك ، في سياق nodejs ، لا يوجد index.html يربط كل شيء معًا ، لذلك يجب أن تكون واضحًا.
  183. </p>
  184. <p>
  185. إذا كنت تقوم بتصدير وحدة تعتمد على ملفات أخرى ، فسيتعين عليك إخبار العقدة بتحميلها.
  186. إليك طريقة واحدة:
  187. </p>
  188. <ol>
  189. <li>
  190. في بداية الوحدة النمطية الخاصة بك ، تحقق لمعرفة ما إذا كنت في بيئة nodejs.
  191. </li>
  192. <li>
  193. إذا كان هذا هو الحال، فيتوجب عليك أن تعلن عن التبعيات الخاصة بك.
  194. </li>
  195. <li>
  196. إذا لم يكن الأمر كذلك ، فمن المحتمل أنك في متصفح لذلك لا تحتاج إلى القيام بأي شيء آخر.
  197. </li>
  198. </ol>
  199. مثال لإستعمال Physics.js:
  200. <code>
  201. //=============================================================================
  202. // setup for server-side testing
  203. //=============================================================================
  204. if (typeof require === 'function') // test for nodejs environment
  205. {
  206. const THREE = require('three');
  207. const MY3 = require('./MY3.js');
  208. }
  209. </code>
  210. </div>
  211. </body>
  212. </html>