VueJS + TS پروجيڪٽ SonarQube سان انضمام

اسان فعال طور تي اسان جي ڪم ۾ پليٽ فارم استعمال ڪندا آهيون سونارو ڪيوب ڪوڊ جي معيار کي اعلي سطح تي برقرار رکڻ لاء. جڏهن هڪ منصوبا ضم ڪرڻ ۾ لکيل آهي VueJs + ٽائپ اسڪرپٽ، مسئلا پيدا ٿيا. تنهن ڪري، مان توهان کي وڌيڪ تفصيل سان ٻڌائڻ چاهيان ٿو ته اسان انهن کي ڪيئن حل ڪيو.

VueJS + TS پروجيڪٽ SonarQube سان انضمام

هن آرٽيڪل ۾ اسين ڳالهائينداسين، جيئن مون مٿي لکيو آهي، سونار ڪوب پليٽ فارم بابت. هڪ ننڍڙو نظريو - اهو عام طور تي ڇا آهي، انهن لاء جيڪي ان بابت پهريون ڀيرو ٻڌي رهيا آهن:

سونارو ڪيوب (اڳوڻي سونار) مسلسل معائنو ۽ ڪوڊ جي معيار جي ماپ لاءِ هڪ کليل ذريعو پليٽ فارم آهي.
MISRA C، MISRA C++، MITER/CWE ۽ CERT Secure Coding Standards پروگرامنگ معيارن جي ضابطن جي مطابق ڪوڊ تجزيو ۽ غلطي جي نشاندهي کي سپورٽ ڪري ٿو. اهو پڻ OWASP Top 10 ۽ CWE/SANS Top 25 پروگرامنگ غلطين جي فهرستن مان غلطين کي سڃاڻي سگھي ٿو.
ان حقيقت جي باوجود ته پليٽ فارم مختلف تيار ٿيل اوزارن کي استعمال ڪري ٿو، سونار ڪوب نتيجن کي هڪ واحد ڊيش بورڊ تائين گھٽائي ٿو، رن جي تاريخ کي برقرار رکندي ۽ اهڙي طرح توهان کي اجازت ڏئي ٿو ته ترقي دوران سافٽ ويئر جي معيار ۾ تبديلين جو عام رجحان.

وڌيڪ تفصيل تي ڳولهي سگهجن ٿا سرڪاري ويب سائيٽ

پروگرامنگ ٻولين جي وڏي تعداد جي حمايت ڪئي وئي آهي. مٿي ڏنل لنڪ مان معلومات جي لحاظ کان، اهي 25 کان وڌيڪ ٻوليون آهن. ھڪڙي مخصوص ٻولي کي سپورٽ ڪرڻ لاء، توھان کي مناسب پلگ ان انسٽال ڪرڻ گھرجي. ڪميونٽي ورزن ۾ ڪم ڪرڻ لاءِ پلگ ان شامل آھي Javascript (بشمول typeсript)، جيتوڻيڪ وڪي چوي ٿو سامهون. پٺيان 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 پروجيڪٽ SonarQube سان انضمام
ان ۾ اڃا تائين ڪو به منصوبو نه آهي ۽ اهو منصفانه آهي. اسان هن صورتحال کي درست ڪنداسين. مون لاءِ سرڪاري مثال پروجيڪٽ ورتو VueJS+TS+Jest. اچو ته ان کي پاڻ ڏانهن ڇڪيون:

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

پهرين اسان کي ڪلائنٽ انسٽال ڪرڻ جي ضرورت آهي سونارو ڪيوبجنهن کي سڏيو ويندو آهي سونار اسڪينرلاء نيٺ اتي هڪ چادر آهي:

yarn add sonarqube-scanner

۽ فوري طور تي حڪم شامل ڪريو لکتون ان سان ڪم ڪرڻ لاء.

package.json:

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

اڳيون، ڪم ڪرڻ لاء اسڪينر لاء، توهان کي هڪ خاص فائل ۾ پروجيڪٽ سيٽنگون سيٽ ڪرڻ جي ضرورت آهي. اچو ته بنيادي ڳالهين سان شروع ڪريون.

sonar-project.properties:

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 - پتو سونارهڪ؛
  • sonar.projectKey - سرور تي منفرد پروجيڪٽ جي سڃاڻپ ڪندڙ سونارهڪ؛
  • sonar.project نالو - ان جو نالو، اهو ڪنهن به وقت تبديل ٿي سگهي ٿو، ڇاڪاڻ ته پروجيڪٽ جي سڃاڻپ ڪئي وئي آهي پروجيڪٽ ڪي;
  • سونار.ذريعو - ذريعن سان فولڊر، عام طور تي هي src، پر ڪجهه به ٿي سگهي ٿو. هي فولڊر روٽ فولڊر جي نسبت سان سيٽ ڪيو ويو آهي، جيڪو فولڊر آهي جنهن مان اسڪينر شروع ڪيو ويو آهي؛
  • سونار ٽيسٽ - ھڪڙو پيٽرولر جيڪو اڳئين ھڪڙي سان ملندو آھي. هي فولڊر آهي جتي ٽيسٽ واقع آهن. هن پروجيڪٽ ۾، ڪو به اهڙو فولڊر نه آهي، ۽ ٽيسٽ فولڊر ۾ آزمائشي جزو جي اڳيان واقع آهي.امتحان'، تنهنڪري اسان ان کي هاڻي لاء نظر انداز ڪنداسين ۽ ايندڙ پيٽرولر استعمال ڪنداسين؛
  • sonar.test.inclusion - ماسڪ استعمال ڪندي ٽيسٽن لاءِ رستو، اتي ٿي سگھي ٿو ڪيترائي عنصر درج ٿيل آھن ڪاما سان جدا ٿيل؛
  • sonar.source Encoding - ماخذ فائلن لاءِ انڪوڊنگ.

اسڪينر جي پھرين لانچ لاءِ، سڀ ڪجھ تيار آھي، سواءِ بنيادي اڳئين عمل جي: ٽيسٽ انجڻ کي پاڻ لانچ ڪرڻ، ته جيئن اھو ڪوريج بابت معلومات پيدا ڪري سگھي، جنھن کي اسڪينر بعد ۾ استعمال ڪندو.

پر هن کي ڪرڻ لاء، توهان کي هن معلومات کي پيدا ڪرڻ لاء ٽيسٽ انجڻ کي ترتيب ڏيڻ جي ضرورت آهي. هن منصوبي ۾، ٽيسٽ انجڻ آهي نه آهي. ۽ ان جي سيٽنگون فائل جي لاڳاپيل حصي ۾ آهن package.json.

اچو ته اهي سيٽنگون شامل ڪيون:

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

اهو آهي، اسان پاڻ کي ڪوريج جي حساب جي ضرورت لاء پرچم مقرر ڪيو ۽ ذريعو (استثنات سان گڏ) جنهن جي بنياد تي اهو ٺهيل هوندو.

هاڻي اچو ته ٽيسٽ کي هلون:

yarn test

اسان هيٺيان ڏسنداسين:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

ان جو سبب اهو آهي ته جزو ۾ ڪو به ڪوڊ ناهي. اچو ته هن کي درست ڪريون.

HelloWorld.vue:

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

اهو ڪوريج جي حساب سان ڪافي ٿيندو.

ٽيسٽ کي ٻيهر شروع ڪرڻ کان پوء، اسان هن کي يقيني بڻائينداسين:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

اسڪرين تي اسان کي ڪوريج بابت معلومات ڏسڻ گهرجي، ۽ پروجيڪٽ فولڊر ۾ هڪ فولڊر ٺاهي ويندي ڪوريج ٽيسٽ ڪوريج جي معلومات سان گڏ هڪ آفاقي فارميٽ ۾ LCOV (LTP GCOV توسيع).

Gcov ڪوڊ ڪوريج کي جانچڻ لاءِ آزاد طور تي ورهايل يوٽيلٽي آهي. Gcov هڪ پروگرام ۾ هر بيان لاءِ عمل درآمد جو صحيح تعداد ٺاهي ٿو ۽ توهان کي سورس ڪوڊ ۾ تشريح شامل ڪرڻ جي اجازت ڏئي ٿو. Gcov هڪ معياري افاديت جي طور تي اچي ٿو GCC پيڪيج جي حصي طور.
Lcov - گرافڪ انٽرفيس gcov لاءِ. اهو gcov فائلن کي گڏ ڪري ٿو ڪيترن ئي سورس فائلن لاءِ ۽ ٺاهي ٿو HTML صفحن جو هڪ سيٽ ڪوڊ ۽ ڪوريج جي معلومات سان. نيويگيشن کي آسان بڻائڻ لاءِ صفحا پڻ ٺاهيا ويا آهن. Lcov اسٽرنگ، افعال، ۽ شاخن جي ڪوريج کي سپورٽ ڪري ٿو.

ٽيسٽ مڪمل ٿيڻ کان پوء، ڪوريج معلومات واقع ٿيندي coverage/lcov.info.
اسان کي چوڻ جي ضرورت آهي سونار”مان ڪٿان آڻيان؟ تنهن ڪري، اچو ته هيٺيون لائينون ان جي ترتيب واري فائل ۾ شامل ڪريو. پر اتي ھڪڙو نقطو آھي: پروجيڪٽ گھڻ لساني ٿي سگھي ٿو، اھو آھي، فولڊر ۾ src ڪيترن ئي پروگرامنگ ٻولين لاءِ سورس ڪوڊ آهن ۽ هڪ يا ٻئي سان وابستگي، ۽ بدلي ۾، هڪ يا ٻئي پلگ ان جو استعمال ان جي واڌ سان طئي ڪيو ويندو آهي. ۽ ڪوريج جي معلومات مختلف جڳهن تي مختلف پروگرامنگ ٻولين لاءِ محفوظ ٿي سگهي ٿي، تنهنڪري هر ٻوليءَ کي ان سيٽنگ لاءِ پنهنجو سيڪشن آهي. اسان جو منصوبو استعمال ڪري ٿو ٽائيپ اسڪرپٽ، تنهنڪري اسان کي صرف ان لاءِ سيٽنگون سيڪشن جي ضرورت آهي:

sonar-project.properties:

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

اسڪينر جي پهرين لانچ لاءِ هر شي تيار آهي. مون کي نوٽ ڪرڻ چاهيو ٿا ته پروجيڪٽ آهي سونار'e خودڪار طور تي ٺاهي وئي آهي پهريون ڀيرو توهان هڪ ڏنل پروجيڪٽ لاء اسڪينر هلائيندا آهيو. ايندڙ وقتن ۾، معلومات گڏ ڪئي ويندي ته جيئن وقت سان گڏ پروجيڪٽ جي پيٽرولن ۾ تبديلين جي متحرڪ ڏسڻ لاء.

تنهن ڪري، اچو ته اڳ ۾ ٺاهيل حڪم استعمال ڪريو package.json:

yarn run sonar 

نوٽ: توھان پڻ استعمال ڪري سگھو ٿا پيرا ميٽر -X وڌيڪ تفصيلي لاگنگ لاءِ.

جيڪڏهن اسڪينر پهريون ڀيرو شروع ڪيو ويو، پوء اسڪينر جي بائنري پاڻ کي پهرين ڊائون لوڊ ڪيو ويندو. ان کان پوء اهو شروع ٿئي ٿو ۽ سرور کي اسڪين ڪرڻ شروع ڪري ٿو سونارهڪ انسٽال ٿيل پلگ ان لاءِ، انهي سان گڏ ڪيل ٻولي جي مدد ڪئي وئي. ان جي آپريشن لاءِ مختلف ٻيا پيرا ميٽر پڻ لوڊ ڪيا ويا آهن: معيار جا پروفائل، فعال ضابطا، ميٽرڪ مخزن، سرور جا ضابطا.

VueJS + TS پروجيڪٽ SonarQube سان انضمام

VueJS + TS پروجيڪٽ SonarQube سان انضمام

نوٽ: اسان هن مضمون جي فريم ورڪ ۾ تفصيل سان انهن تي نه رهنداسين، پر توهان هميشه سرڪاري ذريعن سان رابطو ڪري سگهو ٿا.

اڳيون، فولڊر جو تجزيو شروع ٿئي ٿو src سڀني لاءِ ماخذ فائلن جي دستيابي لاءِ (جيڪڏهن هڪ مخصوص هڪ واضح طور تي بيان نه ڪيو ويو آهي) سپورٽ ٿيل ٻولي، انهن جي ايندڙ انڊيڪسنگ سان.

VueJS + TS پروجيڪٽ SonarQube سان انضمام

اڳيون مختلف ٻيا تجزيا اچن ٿا، جن تي اسان هن مضمون ۾ ڌيان نه ٿا ڏيون (مثال طور، لينٽنگ، ڪوڊ جي نقل جي ڳولا، وغيره).

اسڪينر جي ڪم جي بلڪل آخر ۾، سڀ گڏ ڪيل معلومات گڏ ڪئي وئي آهي، محفوظ ڪيل ۽ سرور ڏانهن موڪلي وئي آهي.

ان کان پوء، اسان اڳ ۾ ئي ڏسي سگهون ٿا ته ڇا ٿيو ويب انٽرفيس ۾:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

جيئن اسان ڏسي سگهون ٿا، ڪجهه ڪم ڪيو، ۽ ڪجهه قسم جي ڪوريج پڻ ڏيکاري ٿو، پر اهو اسان سان ملندو ناهي نه آهي- رپورٽ.

اچو ته ان جو اندازو لڳايو. اچو ته پروجيڪٽ کي وڌيڪ تفصيل سان ڏسو، ڪوريج جي قيمت تي ڪلڪ ڪريو، ۽ تفصيلي فائل رپورٽ ۾ "گرڻ" ذريعي:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

هتي اسان ڏسون ٿا، مکيه، جانچيل فائل کان علاوه هيلو ورلڊ.ويو، اتي پڻ ھڪڙو فائل آھي main.ts، جيڪو ڪوريج جي پوري تصوير کي خراب ڪري ٿو. پر ڪيئن اسان ان کي ڪوريج جي حساب کان خارج ڪيو. ها، سڀ ڪجهه صحيح آهي، پر اهو سطح تي هو نه آهي، پر اسڪينر ان کي ترتيب ڏنو، تنهنڪري اهو ان جي حسابن ۾ ختم ٿي ويو.

اچو ته هن کي درست ڪريون:

sonar-project.properties:

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

مان هڪ وضاحت ڪرڻ چاهيان ٿو: اضافي فولڊر جيڪي هن پيراميٽر ۾ بيان ڪيا ويا آهن، سڀ فولڊر پڻ شامل ڪيا ويا آهن پيرا ميٽر ۾ درج ٿيل sonar.test.inclusion.

اسڪينر کي لانچ ڪرڻ کان پوء، اسان کي صحيح معلومات ڏسون ٿا:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

VueJS + TS پروجيڪٽ SonarQube سان انضمام

اچو ته ايندڙ نقطي تي نظر رکون- معيار جي پروفائيل. مون مٿي جي حمايت بابت ڳالهايو سونارهڪ ئي وقت ۾ ڪيتريون ئي ٻوليون. اهو ئي آهي جيڪو اسان ڏسي رهيا آهيون. پر اسان ڄاڻون ٿا ته اسان جي منصوبي ۾ لکيل آهي TS، پوءِ ڇو اسڪينر کي غير ضروري استعمال ۽ چيڪن سان ڇڪيو. اسان تجزيي لاءِ ٻولي سيٽ ڪنداسين ترتيب ڏيڻ واري فائل ۾ هڪ وڌيڪ پيٽرولر شامل ڪندي سونارهڪ:

sonar-project.properties:

...
sonar.language=ts
...

اچو ته اسڪينر کي ٻيهر هلون ۽ نتيجو ڏسو:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

ڪوريج بلڪل ختم ٿي چڪي هئي.

جيڪڏهن اسان اسڪينر لاگ تي نظر رکون ٿا، اسان هيٺ ڏنل لائن ڏسي سگهون ٿا:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

اهو آهي، اسان جي پروجيڪٽ فائلن کي ترتيب نه ڏني وئي هئي.

صورتحال هن ريت آهي: سرڪاري طور تي حمايت ڪئي وئي VueJs پلگ ان ۾ آهي سونار جي ايسجو ذميوار آهي Javascript.

VueJS + TS پروجيڪٽ SonarQube سان انضمام

پر هي سپورٽ پلگ ان ۾ ناهي سونارٽس لاء TS، جنهن بابت بگ ٽريڪر ۾ هڪ سرڪاري ٽڪيٽ کوليو ويو سونارهڪ:

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

هتي SonarQube ڊولپرز جي نمائندن مان ڪجهه جواب آهن، هن حقيقت جي تصديق ڪن ٿا.

VueJS + TS پروجيڪٽ SonarQube سان انضمام

VueJS + TS پروجيڪٽ SonarQube سان انضمام

پر سڀ ڪجهه اسان لاءِ ڪم ڪيو، توهان اعتراض ڪيو. ها اهو آهي، اچو ته ٿورو ڪوشش ڪريون "هيڪ".
جيڪڏهن ڪو سهارو آهي .ويو- فائلون سونار”اڙي، پوءِ اچو ته هن کي ٻڌائڻ جي ڪوشش ڪريون ته انهن کي سمجهي ٽائيپ اسڪرپٽ.

اچو ته ھڪڙو پيٽرولر شامل ڪريو:

sonar-project.properties:

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

اچو ته اسڪينر شروع ڪريون:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

۽، voila، سڀڪنھن شيء کي واپس عام آهي، ۽ صرف هڪ پروفائيل سان ٽائيپ اسڪرپٽ. اھو آھي، اسان مدد ۾ مسئلو حل ڪرڻ ۾ مدد ڪئي VueJs+TS لاء سونارو ڪيوب.

اچو ته اڳتي وڌڻ جي ڪوشش ڪريون ۽ ڪوريج جي معلومات کي ٿورو بهتر ڪريو.

اسان هن وقت تائين ڇا ڪيو آهي:

  • منصوبي ۾ شامل ڪيو ويو سونار- اسڪينر؛
  • سيٽ اپ ڪريو نه آهي ڪوريج جي معلومات پيدا ڪرڻ؛
  • ترتيب ڏنل سونار- اسڪينر؛
  • حمايت جو مسئلو حل ڪيو .ويوفائلون + ٽائيپ اسڪرپٽ.

ٽيسٽ ڪوريج کان علاوه، ڪوڊ جي معيار لاءِ ٻيا به دلچسپ مفيد معيار آهن، مثال طور، ڪوڊ جي نقل ۽ لائنن جو تعداد (ڪوڊ جي پيچيدگي سان لاڳاپيل ڪوئفينٽس جي حساب ۾ شامل) منصوبي جي.

سان ڪم ڪرڻ لاء پلگ ان جي موجوده عمل ۾ TS (سونارٽس) ڪم نه ڪندو CPD (ڪاپي پيسٽ ڊيڪٽر) ۽ ڪوڊ جون لائينون ڳڻڻ .ويو- فائلون.

ڪوڊ جي نقل جي مصنوعي صورتحال پيدا ڪرڻ لاء، صرف جزو فائل کي مختلف نالي سان نقل ڪريو ۽ ان کي ڪوڊ ۾ شامل ڪريو main.ts هڪ ڊمي فنڪشن ۽ ان کي مختلف نالي سان نقل ڪريو. نقل جي جانچ ڪرڻ لاءِ جيئن اندر .ويو، ۽ ۾ .ts - فائلون.

main.ts:

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

هن کي ڪرڻ لاء، توهان کي عارضي طور تي ترتيب ڏيڻ واري لائن کي تبصرو ڪرڻ جي ضرورت آهي:

sonar-project.properties:

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

اچو ته جانچ سان گڏ اسڪينر کي ٻيهر شروع ڪريون:

yarn test && yarn run sonar

يقينا، اسان جي ڪوريج گر ٿي ويندي، پر هاڻي اسان کي ان ۾ دلچسپي نه آهي.

ڪوڊ جي لڪير کي نقل ڪرڻ جي لحاظ کان، اسان ڏسنداسين:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

چيڪ ڪرڻ لاء اسين استعمال ڪنداسين سي ڊي ڊي-استعمال- jscpd:

npx jscpd src

VueJS + TS پروجيڪٽ SonarQube سان انضمام

ڪوڊ جي لائنن لاء:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

شايد اهو مستقبل جي پلگ ان ورزن ۾ حل ڪيو ويندو سونار جي ايس (TS). مان نوٽ ڪرڻ چاهيان ٿو ته اهي آهستي آهستي انهن ٻن پلگ ان کي هڪ ۾ ملائڻ شروع ڪري رهيا آهن سونار جي ايس، جيڪو مان سمجهان ٿو صحيح آهي.

هاڻي مون کي ڪوريج معلومات کي بهتر ڪرڻ جي اختيار تي غور ڪرڻ چاهيو ٿا.

هينئر تائين اسان ڏسي سگهون ٿا ٽيسٽ ڪوريج في سيڪڙو شرطن ۾ پوري پروجيڪٽ لاءِ، ۽ خاص طور تي فائلن لاءِ. پر ان جي مقدار جي باري ۾ معلومات سان هن اشاري کي وڌائڻ ممڪن آهي يونٽپروجيڪٽ لاء ٽيسٽ، گڏو گڏ فائلن جي حوالي سان.

اتي هڪ لائبريري آهي جيڪا ڪري سگهي ٿي نه آهي- رپورٽ کي فارميٽ ۾ تبديل ڪريو سونارهڪ:
عام ٽيسٽ ڊيٽا - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

اچو ته هن لائبريري کي اسان جي پروجيڪٽ ۾ انسٽال ڪريون:

yarn add jest-sonar-reporter

۽ ان کي ترتيب ۾ شامل ڪريو نه آهي:

package.json:

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

هاڻي اچو ته ٽيسٽ کي هلون:

yarn test

جنهن کان پوءِ پروجيڪٽ جي روٽ ۾ هڪ فائل ٺاهي ويندي test-report.xml.

اچو ته ان کي ترتيب ۾ استعمال ڪريو سونارهڪ:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

۽ اسڪينر کي ٻيهر شروع ڪريو:

yarn run sonar

اچو ته ڏسو ته انٽرفيس ۾ ڇا تبديلي آئي آهي سونارهڪ:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

۽ ڪجھ به تبديل نه ڪيو آهي. حقيقت اها آهي ته سونار جيسٽ رپورٽ ۾ بيان ڪيل فائلن کي فائل نه سمجهي يونٽ- ٽيسٽ. هن صورتحال کي درست ڪرڻ لاء، اسان استعمال ڪريون ٿا تشڪيل پيٽرولر سونار سونار ٽيسٽ، جنهن ۾ اسان واضح طور تي فولڊر کي ٽيسٽ سان ظاهر ڪنداسين (اسان وٽ صرف هڪ آهي):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

اچو ته اسڪينر کي ٻيهر شروع ڪريون:

yarn run sonar

اچو ته ڏسو ته انٽرفيس ۾ ڇا تبديلي آئي آهي:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

هاڻي اسان جو تعداد ڏٺو آهي اسان جي يونٽ-tests ۽، اندر ڪلڪ ڪري ناڪام ٿيڻ تي، اسان پروجيڪٽ فائلن ۾ هن نمبر جي ورڇ ڏسي سگهون ٿا:

VueJS + TS پروجيڪٽ SonarQube سان انضمام

ٿڪل

تنهن ڪري، اسان مسلسل تجزيو لاء هڪ اوزار ڏٺو سونارو ڪيوب. اسان ڪاميابيءَ سان ان ۾ شامل ڪيل هڪ پروجيڪٽ ۾ لکيل آهي VueJs+TS. ڪجھ مطابقت واري مسئلن کي حل ڪيو. اسان امتحان جي ڪوريج اشاري جي معلوماتي مواد کي وڌايو. هن آرٽيڪل ۾ اسان صرف هڪ ڪوڊ جي معيار جي معيار جي جانچ ڪئي (شايد مکيه مان هڪ)، پر سونارو ڪيوب ٻين معيار جي معيار کي سپورٽ ڪري ٿو، بشمول حفاظت جي جاچ. پر اهي سڀئي خاصيتون مڪمل طور تي دستياب نه آهن ڪميونٽي- ورجن. هڪ دلچسپ ۽ مفيد خاصيتن مان هڪ آهي انضمام سونارو ڪيوب مختلف ڪوڊ ريپوزٽري مئنيجمينٽ سسٽم سان، جهڙوڪ GitLab ۽ BitBucket. کي روڪڻ لاءِ ضم ڪرڻ (ضم ڪرڻ) جي درخواستهڪ مخزن جي مکيه شاخ ڏانهن جڏهن ڪوريج خراب ٿي وئي آهي. پر هي هڪ مڪمل طور تي مختلف مضمون لاء هڪ ڪهاڻي آهي.

پي مضمون ۾ بيان ڪيل هر شي ڪوڊ جي صورت ۾ موجود آهي منهنجو ڪانٽو.

صرف رجسٽرڊ استعمال ڪندڙ سروي ۾ حصو وٺي سگهن ٿا. سائن ان ڪريو، توهان جي مهرباني.

ڇا توهان استعمال ڪريو ٿا SonarQube پليٽ فارم:

  • 26,3٪ها 5

  • 15,8٪نمبر 3

  • 15,8٪مون هن پليٽ فارم بابت ٻڌو آهي ۽ استعمال ڪرڻ چاهيان ٿو3

  • 10,5٪مون هن پليٽ فارم جي باري ۾ ٻڌو آهي ۽ استعمال ڪرڻ نٿو چاهيان 2

  • 0,0٪مان هڪ مختلف پليٽ فارم 0 استعمال ڪري رهيو آهيان

  • 31,6٪پهريون ڀيرو مون هن جي باري ۾ ٻڌو آهي 6

19 صارفين ووٽ ڪيو. 3 استعمال ڪندڙن کي روڪيو ويو.

جو ذريعو: www.habr.com

تبصرو شامل ڪريو