في عملنا ، نستخدم المنصة بنشاط سونار كيوب للحفاظ على جودة الكود على مستوى عالٍ. عند دمج أحد المشاريع المكتوبة VueJs + نسخة مطبوعة، هناك مشاكل. لذلك ، أود أن أخبركم المزيد عن كيفية تمكننا من حلها.

ستركز هذه المقالة ، كما كتبت أعلاه ، على منصة SonarQube. نظرية صغيرة - ما هي بشكل عام لمن سمع عنها لأول مرة:

سونار كيوب (سابق السونار) عبارة عن منصة مفتوحة المصدر للفحص المستمر وقياس جودة الكود.
يدعم تحليل الكود واكتشاف الأخطاء وفقًا لقواعد MISRA C و MISRA C ++ و MITER / CWE و CERT Secure Coding Standards. كما أنه يعرف كيفية التعرف على الأخطاء من قوائم OWASP Top 10 و CWE / SANS Top 25 لأخطاء البرمجة.
على الرغم من حقيقة أن النظام الأساسي يستخدم العديد من الأدوات الجاهزة ، إلا أن SonarQube يقلل من النتائج إلى لوحة معلومات واحدة (لوحة معلومات باللغة الإنجليزية) ، مع الاحتفاظ بتاريخ عمليات التشغيل وبالتالي يتيح لك رؤية الاتجاه العام في جودة البرامج أثناء التطوير.

يمكن العثور على مزيد من التفاصيل في الموقع الرسمي

يتم دعم عدد كبير من لغات البرمجة. بناءً على المعلومات الواردة من الرابط أعلاه ، فهذه أكثر من 25 لغة. لدعم لغة معينة ، يجب عليك تثبيت البرنامج المساعد المناسب. يتضمن إصدار المجتمع مكونًا إضافيًا للعمل معه Javascript (بما في ذلك الكتابة المطبوعة) ، على الرغم من أن الويكي تنص على خلاف ذلك. خلف Javascript يستجيب البرنامج المساعد سونار جي إس، للنسخة المطبوعة سونارات على التوالي.

يتم استخدام العميل الرسمي لإرسال معلومات التغطية سوناركوب الماسح الضوئي، والتي ، باستخدام الإعدادات من التكوين-ملف ، يرسل هذه البيانات إلى الخادم سونار كيوب لمزيد من التوحيد والتجميع.

إلى Javascript غير المجمع npm. لذا ، لنبدأ التنفيذ خطوة بخطوة سونار كيوب в رأي- مشروع باستخدام نسخة مطبوعة على الآلة الكاتبة.

لنشر الخادم سونار كيوب لنستخدم عامل ميناء-يؤلف.

سونار:

version: '1'
    services:
        simplesample-sonar:
            image: sonarqube:lts
            ports:
                - 9001:9000
                - 9092:9092
            network_mode: bridge

تشغيل:

docker-compose -f sonar.yml up

بعد ذلك سونار كيوب سيكون متاحًا في - http://localhost:9001 .

حتى الآن ، لا توجد مشاريع فيه ، وهذا أمر عادل. سوف نصحح هذا الوضع. كأساس ، أخذت المثال الرسمي لمشروع VueJS + TS + Jest. دعونا نميلها نحونا:

git clone https://github.com/vuejs/vue-test-utils-typescript-example.git

نحتاج أولاً إلى تثبيت العميل سونار كيوبوهو ما يسمى ماسح السونارإلى الآلية الوقائية الوطنية يوجد غلاف:

yarn add sonarqube-scanner

وعلى الفور أضف الأمر إلى مخطوطات للعمل معه.

الحزمة.json:

{
 … 
   scripts: {
      ...
      "sonar": "sonar-scanner"
      ...
   },
 …
}

بعد ذلك ، لكي يعمل الماسح الضوئي ، تحتاج إلى ضبط إعدادات المشروع في ملف خاص. هيا لنبدأ مع الأساسيات.

مشروع السونار:

sonar.host.url=http://localhost:9001

sonar.projectKey=test-project-vuejs-ts
sonar.projectName=Test Application (VueJS+TS)

sonar.sources=src
# sonar.tests=
sonar.test.inclusions=src/**/*tests*/**
sonar.sourceEncoding=UTF-8

• sonar.host.url - عنوان السونار'أ؛
• مفتاح مشروع سونار - معرف مشروع فريد على الخادم السونار'أ؛
• اسم المشروع - اسمها يمكن تغييره في أي وقت حيث يتم تحديد المشروع بواسطة مفتاح المشروع;
• مصادر السونار - مجلد المصدر ، عادة SRC، ولكن يمكن أن يكون أي شيء. هذا المجلد متعلق بالمجلد الجذر ، وهو المجلد الذي يتم تشغيل الماسح منه ؛
• اختبارات السونار - معلمة مقترنة بالمعلمة السابقة. هذا هو المجلد الذي توجد فيه الاختبارات. في هذا المشروع ، لا يوجد مثل هذا المجلد ، ويقع الاختبار بجوار المكون قيد الاختبار في المجلد "تجربه بالعربي'، لذلك سنتجاهلها الآن ونستخدم المعامل التالي ؛
• اشتمال اختبار السونار - مسار الاختبارات باستخدام القناع ، قد يكون هناك عدة عناصر مفصولة بفواصل ؛
• ترميز السونار - ترميز ملفات المصدر.

بالنسبة للإطلاق الأول للماسح الضوئي ، كل شيء جاهز ، باستثناء الإجراء الرئيسي السابق: تشغيل محرك الاختبار نفسه ، من أجل إنشاء معلومات حول التغطية ، والتي سيستخدمها الماسح الضوئي لاحقًا.

ولكن لهذا تحتاج إلى تكوين محرك الاختبار لتوليد هذه المعلومات. في هذا المشروع ، يكون محرك الاختبار دعابة. وإعداداته موجودة في القسم المقابل من الملف package.json.

دعنا نضيف هذه الإعدادات:

"collectCoverage": true,
"collectCoverageFrom": [
      "src/**/*",
      "!src/main.ts",
      "!src/App.vue",
      "!src/**/*.d.*",
      "!src/**/*__tests__*"
],

أي أننا نضع العلم نفسه للحاجة إلى حساب التغطية والمصدر (جنبًا إلى جنب مع الاستثناءات) ، والتي سيتم تشكيلها على أساسها.

الآن دعنا نجري الاختبار:

yarn test

سوف نرى ما يلي:

والسبب هو عدم وجود رمز في المكون نفسه ، على هذا النحو. دعونا نصلح هذا.

HelloWorld.vue:

...
methods: {
    calc(n) {
      return n + 1;
    }
  },
mounted() {
  this.msg1 = this.msg + this.calc(1);
},
...

سيكون هذا كافيًا لحساب التغطية.

بعد إعادة تشغيل الاختبار ، تأكد مما يلي:

على الشاشة ، يجب أن نرى معلومات التغطية ، وسيتم إنشاء مجلد في مجلد المشروع تغطية مع معلومات تغطية الاختبار بتنسيق عالمي LCOV (امتداد LTP GCOV).

جكوف هي أداة مساعدة موزعة مجانًا لأبحاث تغطية الكود. يُنشئ Gcov العدد الدقيق لعمليات الإعدام لكل عبارة في البرنامج ويسمح لك بإضافة تعليقات توضيحية إلى الكود المصدري. يتم توفير Gcov كأداة قياسية في حزمة دول مجلس التعاون الخليجي.
لكوف - واجهة المستخدم الرسومية لـ gcov. يقوم بتجميع ملفات gcov للعديد من الملفات المصدر وإنشاء مجموعة من صفحات HTML مع التعليمات البرمجية ومعلومات التغطية. يتم أيضًا إنشاء الصفحات لتسهيل التنقل. يدعم Lcov الخط والوظيفة وتغطية الفرع.

بعد اكتمال الاختبارات ، ستكون معلومات التغطية موجودة التغطية / lcov.info.
نحتاج أن نقول السونارمن أين تحصل عليه. لذلك دعونا نضيف الأسطر التالية إلى ملف التكوين الخاص به. ولكن هناك نقطة واحدة: يمكن أن تكون المشاريع متعددة اللغات ، أي في مجلد SRC هناك مصادر للعديد من لغات البرمجة وتنتمي إلى واحدة أو أخرى ، وبالتالي ، يتم تحديد استخدام مكون إضافي معين من خلال امتداده. ويمكن تخزين معلومات التغطية في أماكن مختلفة للغات البرمجة المختلفة ، لذلك لكل PL قسم خاص به لتكوين ذلك. يستخدم مشروعنا نسخة مطبوعة على الآلة الكاتبة، لذلك نحتاج إلى قسم إعدادات لذلك:

مشروع السونار:

sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.info

كل شيء جاهز لإطلاق الماسح لأول مرة. أود أن أشير إلى أن المشروع السوناريتم إنشاء 'e تلقائيًا في المرة الأولى التي تقوم فيها بتشغيل الماسح الضوئي لمشروع معين. في الأوقات اللاحقة ، سيتم تجميع المعلومات بالفعل من أجل رؤية ديناميكيات التغييرات في معلمات المشروع بمرور الوقت.

لذلك ، دعنا نستخدم الأمر الذي تم إنشاؤه مسبقًا في package.json:

yarn run sonar 

ملاحظة: يمكنك أيضًا استخدام الخيار -X لمزيد من التسجيل المفصل.

إذا تم تشغيل الماسح الضوئي لأول مرة ، فسيتم تنزيل ثنائي الماسح الضوئي نفسه أولاً. بعد ذلك يبدأ ويبدأ في فحص الخادم السونار'a للمكونات الإضافية المثبتة ، وبالتالي حساب PLs المدعومة. يقوم أيضًا بتحميل خيارات مختلفة أخرى حتى يعمل: ملفات تعريف الجودة ، والقواعد النشطة ، ومستودع المقاييس ، وقواعد الخادم.

ملاحظة: لن نتناولها بالتفصيل في إطار هذه المقالة ، ولكن يمكنك دائمًا الرجوع إلى المصادر الرسمية.

بعد ذلك ، يبدأ تحليل المجلد SRC لتوافر ملفات المصدر للجميع (ما لم يتم تحديد ملف محدد صراحة) PLs المدعومة ، مع فهرستها اللاحقة.

ثم هناك العديد من التحليلات الأخرى التي لا نركز عليها في هذه المقالة (على سبيل المثال ، مثل الفحص ، واكتشاف تكرار الكود ، وما إلى ذلك).

في نهاية الماسح الضوئي ، يتم تجميع جميع المعلومات التي تم جمعها وحفظها وإرسالها إلى الخادم.

بعد ذلك ، يمكننا بالفعل رؤية ما حدث في واجهة الويب:

كما ترون ، حدث شيء ما ، وحتى يظهر نوعًا من التغطية ، لكنه لا يتوافق مع تغطيتنا دعابة-تقرير.

دعونا نفهم ذلك. دعنا نلقي نظرة على المشروع بمزيد من التفصيل ، انقر على قيمة التغطية ، و "نندرج" في التقرير المفصل عن الملفات:

هنا نرى بالإضافة إلى الملف الرئيسي الذي تم التحقيق فيه HelloWorld.vue، الملف موجود أيضًا main.tsمما يفسد الصورة الكاملة للتغطية. لكن كيف ذلك ، استبعدناها من حساب التغطية. نعم ، كل شيء صحيح ، لكنه كان على المستوى دعابة، لكن الماسح قام بفهرسته ، فدخل في حساباته.

دعنا نصلح هذا:

مشروع السونار:

...
sonar.exclusions=src/main.ts
...

أود تقديم توضيح: بالإضافة إلى تلك المجلدات المحددة في هذه المعلمة ، تتم أيضًا إضافة جميع المجلدات المدرجة في المعلمة. اشتمال اختبار السونار.

بعد بدء تشغيل الماسح ، نرى المعلومات الصحيحة:

دعونا نلقي نظرة على المرحلة التالية - ملامح الجودة. لقد تحدثت عن الدعم السونارعدة أح.م في نفس الوقت. هذا هو بالضبط ما نراه. لكننا نعلم أن مشروعنا مكتوب TS، فلماذا توتر الماسح الضوئي بمعالجات وفحوصات غير ضرورية. سنقوم بتعيين اللغة للتحليل عن طريق إضافة معلمة أخرى إلى ملف التكوين السونار'أ:

مشروع السونار:

...
sonar.language=ts
...

قم بتشغيل الماسح الضوئي مرة أخرى وشاهد النتيجة:

الغطاء ذهب تماما.

إذا نظرنا إلى سجل الماسح ، يمكننا رؤية السطر التالي:

وهذا يعني أن ملفات مشروعنا ببساطة لم تتم فهرستها.

الوضع على النحو التالي: الدعم الرسمي VueJs موجود في البرنامج المساعد سونار جي إسمن المسؤول عن Javascript.

لكن هذا الدعم ليس في البرنامج المساعد سونارات إلى TSحول التي فتحت تذكرة رسمية في تعقب الأخطاء السونار'أ:

1. https://jira.sonarsource.com/browse/MMF-1441
2. https://github.com/SonarSource/SonarJS/issues/1281

فيما يلي بعض الإجابات من أحد الممثلين من مطوري SonarQube ، لتأكيد هذه الحقيقة.

لكن كل شيء سار بالنسبة لنا ، أنت تعترض. نعم هو كذلك ، دعونا نحاول قليلاً "اختراق".
إذا كان هناك دعم .vue-الملفات السونار"أوه ، إذن دعنا نحاول أن نقول له أن يعاملهم مثل نسخة مطبوعة على الآلة الكاتبة.

دعنا نضيف معلمة:

مشروع السونار:

...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...

لنبدأ الماسح الضوئي:

وفويلا ، عاد كل شيء إلى طبيعته ، مع ملف تعريف واحد فقط نسخة مطبوعة على الآلة الكاتبة. وهذا يعني أننا نجحنا في حل المشكلة في الدعم VueJs + TS إلى سونار كيوب.

دعنا نحاول الذهاب إلى أبعد من ذلك وتحسين معلومات التغطية قليلاً.

ماذا فعلنا حتى الآن:

• أضيفت إلى المشروع السونار-الماسح الضوئي؛
• يثبت دعابة لتوليد معلومات التغطية ؛
• تم تكوينه السونار-الماسح الضوئي؛
• حل مشكلة الدعم .vue-ملفات + نسخة مطبوعة على الآلة الكاتبة.

بالإضافة إلى تغطية الاختبار ، هناك معايير أخرى مفيدة لجودة الكود ، مثل تكرار الكود وعدد الأسطر (المتضمنة في حساب المعاملات المتعلقة بتعقيد الكود) للمشروع.

في التنفيذ الحالي للمكون الإضافي للعمل مع TS (سونارات) لن يعمل CPD (كاشف النسخ واللصق) وإحصاء أسطر الكود .vue-الملفات.

لإنشاء موقف اصطناعي لنسخ الكود ، ما عليك سوى نسخ ملف المكون باسم مختلف ، وإضافة أيضًا إلى الكود main.ts دالة وهمية ونسخها باسم مختلف. للتحقق من الازدواجية كما في .vue، وفي نهاية الخبر -الملفات.

الرئيسية:

...
function name(params:string): void {
  console.log(params);
}
...

للقيام بذلك ، قم بالتعليق مؤقتًا على سطر التكوين:

مشروع السونار:

...
sonar.exclusions=src/main.ts
...

أعد تشغيل الماسح مع الاختبار:

yarn test && yarn run sonar

بالطبع ، ستنخفض تغطيتنا ، لكننا الآن غير مهتمين.

في سياق تكرار سطور التعليمات البرمجية ، سنرى:

للتحقق ، نستخدم CPD-جدوى - jscpd:

npx jscpd src

لأسطر الكود:

ربما سيتم إصلاح هذا في الإصدارات المستقبلية من المكونات الإضافية. SonarJS (TS). أريد أن أشير إلى أنهم بدأوا تدريجيًا في دمج هذين المكونين الإضافيين في واحد سونار جي إسالذي أعتقد أنه صحيح.

الآن أود النظر في خيار تحسين معلومات التغطية.

حتى الآن ، يمكننا أن نرى تغطية الاختبار من حيث النسبة المئوية ، للمشروع بأكمله ، وللملفات على وجه الخصوص. لكن من الممكن توسيع هذا المؤشر بمعلومات عن الرقم وحدة- اختبارات على المشروع ، وكذلك في سياق الملفات.

توجد مكتبة يمكنها ذلك دعابة-تقرير للتحويل إلى تنسيق ل السونار'أ:
بيانات الاختبار العامة - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

قم بتثبيت هذه المكتبة في مشروعك:

yarn add jest-sonar-reporter

وأضفه إلى التكوين دعابة:

الحزمة.json:

…
"testResultsProcessor": "jest-sonar-reporter"
…

الآن دعنا نجري الاختبار:

yarn test

بعد ذلك ، سيتم إنشاء ملف في جذر المشروع تقرير الاختبار. xml.

قم بتمكينه في ملف config السونار'أ:

مشروع السونار:

…
sonar.testExecutionReportPaths=test-report.xml
…

وأعد تشغيل الماسح الضوئي:

yarn run sonar

دعونا نرى ما الذي تغير في الواجهة السونار'أ:

ولم يتغير شيء. الحقيقة هي أن Sonar لا يعتبر الملفات الموصوفة في تقرير Jest كملفات وحدة- الاختبارات. لإصلاح هذا الموقف ، نستخدم معلمة التكوين السونار اختبارات السونار، حيث نحدد صراحة المجلدات مع الاختبارات (لا يزال لدينا واحد):

مشروع السونار:

…
sonar.tests=src/components/__tests__
…

أعد تشغيل الماسح الضوئي:

yarn run sonar

دعونا نرى ما الذي تغير في الواجهة:

الآن لقد رأينا عدد وحدة-الاختبارات وبعد أن فشلت بالضغط على الداخل يمكننا أن نرى توزع هذا الرقم بين ملفات المشروع:

اختتام

لذلك ، فقد نظرنا في أداة للتحليل المستمر سونار كيوب. نجحنا في دمج مشروع مكتوب فيه VueJs + TS. تم إصلاح بعض مشكلات التوافق. زيادة محتوى المعلومات لمؤشر تغطية الاختبار. في هذه المقالة ، نظرنا في معيار واحد فقط من معايير جودة الكود (ربما يكون أحد المعايير الرئيسية) ، ولكن سونار كيوب يدعم معايير الجودة الأخرى ، بما في ذلك اختبار السلامة. ولكن ليست كل هذه الميزات متوفرة بالكامل في مجتمعالنسخ. تعتبر عمليات الدمج واحدة من الميزات الشيقة والمفيدة. سونار كيوب مع أنظمة إدارة مستودعات الكود المختلفة مثل GitLab و BitBucket. كى تمنع طلب سحب (دمج) دمج'وإلى الفرع الرئيسي للمستودع عندما تنخفض التغطية. لكن هذه قصة مختلفة تمامًا.

PS: كل ما هو موصوف في المقالة في شكل كود متاح في شوكة بلدي.

يمكن للمستخدمين المسجلين فقط المشاركة في الاستطلاع. تسجيل الدخول، من فضلك.

هل تستخدم منصة SonarQube:

• 26,3%نعم 5

• 15,8%رقم 3

• 15,8%سمعت عن هذه المنصة وتريد استخدامها 3

• 10,5%سمعت عن هذا النظام الأساسي ولا تريد استخدامه 2

• 0,0%أنا أستخدم منصة مختلفة 0

• 31,6%أول مرة أسمع عنها

صوت 19 مستخدمًا. امتنع 3 مستخدما عن التصويت.

المصدر: www.habr.com