Muna amfani da dandamali sosai a cikin aikinmu sautiQube don kula da ingancin lambar a babban matakin. Lokacin haɗa ɗayan ayyukan da aka rubuta a ciki VueJs+Tpescript, matsaloli sun taso. Don haka, zan so in yi muku dalla-dalla yadda muka yi nasarar magance su.
A cikin wannan labarin za mu yi magana, kamar yadda na rubuta a sama, game da dandalin SonarQube. Ƙananan ka'idar - abin da yake gaba ɗaya, ga waɗanda suka ji game da shi a karon farko:
sautiQube (tsohon Sauti) dandamali ne na buɗe tushen don ci gaba da dubawa da ƙimar ingancin lambar.
Yana goyan bayan binciken lambobi da gano kuskure bisa ga ka'idodin MISRA C, MISRA C++, MITER/CWE da CERT Amintattun Ka'idojin Coding. Hakanan yana iya gane kurakurai daga jerin kurakuran shirye-shirye na OWASP Top 10 da CWE/SANS Top 25.
Duk da cewa dandamali yana amfani da kayan aikin da aka yi daban-daban, SonarQube yana rage sakamakon zuwa dashboard guda ɗaya, yana adana tarihin gudana kuma ta haka yana ba ku damar ganin yanayin gabaɗayan canje-canje a ingancin software yayin haɓakawa.
Ana iya samun ƙarin cikakkun bayanai a
Yawancin harsunan shirye-shirye suna tallafawa. Yin la'akari da bayanin daga mahaɗin da ke sama, waɗannan sun fi harsuna 25. Don tallafawa takamaiman harshe, dole ne ka shigar da plugin ɗin da ya dace. Sigar al'umma ta haɗa da plugin don aiki da ita Javascript (ciki har da nau'ikan ript), kodayake wiki ya ce akasin haka. Bayan Javascript plugin amsoshi SonarJS, don Rubutun Rubutun SonarTS daidai da.
Ana amfani da abokin ciniki na hukuma don aika bayanin ɗaukar hoto sonarqube-scanner, wanda, ta amfani da saitunan daga saiti-file, aika wannan bayanan zuwa uwar garken sautiQube don ƙarin ƙarfafawa da tarawa.
domin Javascript ne . Don haka, bari mu fara aiwatarwa mataki-mataki sautiQube в Vue- yin amfani da aikin Nau'in cuta.
Don tura sabar sautiQube mu yi amfani Docker-rubuta.
sonar.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridgeKaddamar:
docker-compose -f sonar.yml upBayan haka sautiQube za a samu a: .
Babu ayyuka a ciki har yanzu kuma hakan yayi daidai. Zamu gyara wannan lamarin. Na ɗauki aikin misali na hukuma don VueJS+TS+Jest. Mu karkata zuwa ga kanmu:
git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitDa farko muna buƙatar shigar da abokin ciniki sautiQube, wanda ake kira sonar-scannerdon npm akwai abin rufe:
yarn add sonarqube-scannerKuma nan da nan ƙara umarnin zuwa rubutun yin aiki da shi.
kunshin.json:
{
…
scripts: {
...
"sonar": "sonar-scanner"
...
},
…
}Na gaba, don na'urar daukar hotan takardu ta yi aiki, kuna buƙatar saita saitunan aikin a cikin fayil na musamman. Bari mu fara da tushe.
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 - adireshin Sauti'A;
- sonar.projectKey – mai gano aikin musamman akan sabar Sauti'A;
- sonar.Project Sunan - sunansa, ana iya canza shi a kowane lokaci, tunda an gano aikin ta hanyar Makullin aikin;
- sonar.sources – babban fayil tare da kafofin, yawanci wannan Src, amma zai iya zama wani abu. An saita wannan babban fayil dangane da tushen babban fayil, wanda shine babban fayil ɗin da aka ƙaddamar da na'urar daukar hotan takardu;
- sonar. gwaje-gwaje – siga da ke tafiya tare da na baya. Wannan shine babban fayil inda gwaje-gwajen suke. A cikin wannan aikin, babu irin wannan babban fayil, kuma gwajin yana kusa da bangaren da ake gwadawa a cikin babban fayil 'gwajin', don haka za mu yi watsi da shi a yanzu kuma mu yi amfani da siga na gaba;
- sonar.gwaji.haɗa - hanya don gwaje-gwaje ta amfani da abin rufe fuska, ana iya samun abubuwa da yawa da aka jera ta hanyar waƙafi;
- sonar.sourceEncoding – rikodi don fayilolin tushen.
Don ƙaddamar da na'urar daukar hotan takardu, komai yana shirye, sai dai babban aikin da ya gabata: ƙaddamar da injin gwajin da kansa, don samar da bayanai game da ɗaukar hoto, wanda na'urar daukar hotan takardu za ta yi amfani da ita daga baya.
Amma don yin wannan, kuna buƙatar saita injin gwajin don samar da wannan bayanin. A cikin wannan aikin, injin gwajin shine karimcin. Kuma saitunan sa suna cikin sashin da ya dace na fayil ɗin fakamari.json.
Bari mu ƙara waɗannan saitunan:
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],Wato, mun kafa tutar kanta don buƙatar ƙididdige ɗaukar hoto da kuma tushen (tare da keɓancewa) a kan abin da za a kafa shi.
Yanzu bari mu gudanar da gwajin:
yarn testZa mu ga abubuwa masu zuwa:
Dalili kuwa shine babu code a cikin bangaren da kansa. Mu gyara wannan.
HelloWorld.vue:
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...Wannan zai isa don ƙididdige ɗaukar hoto.
Bayan sake kunna gwajin, za mu tabbatar da wannan:
A kan allon ya kamata mu ga bayani game da ɗaukar hoto, kuma za a ƙirƙiri babban fayil a cikin babban fayil ɗin aikin ɗaukar hoto tare da bayanin ɗaukar hoto na gwaji a tsarin duniya LCOV (LTP GCOV tsawo).
Gcov kayan aiki ne da aka rarraba cikin 'yanci don nazarin ɗaukar hoto. Gcov yana haifar da ainihin adadin kisa ga kowace sanarwa a cikin shirin kuma yana ba ku damar ƙara bayanai zuwa lambar tushe. Gcov ya zo azaman madaidaicin mai amfani azaman ɓangaren fakitin GCC.
Lkov - dubawar hoto don gcov. Yana tattara fayilolin gcov don fayilolin tushe da yawa kuma yana samar da saitin shafukan HTML tare da lamba da bayanin ɗaukar hoto. Hakanan ana samar da shafuka don sauƙaƙe kewayawa. Lcov yana goyan bayan ɗaukar hoto, ayyuka, da rassa.
Bayan an gama gwaje-gwajen, za a sami bayanan ɗaukar hoto a ciki ɗaukar hoto/lcov.info.
Muna bukatar mu ce Sauti'A ina zan samu? Don haka, bari mu ƙara waɗannan layukan zuwa fayil ɗin sanyi. Amma akwai batu ɗaya: ayyuka na iya zama da harsuna da yawa, wato, a cikin babban fayil Src akwai lambobin tushe don harsunan shirye-shirye da yawa da alaƙa da ɗaya ko wani, kuma bi da bi, an ƙayyade amfani da ɗaya ko wani plugin ta hanyar haɓakawa. Kuma ana iya adana bayanan sirri a wurare daban-daban don harsunan shirye-shirye daban-daban, don haka kowane harshe yana da nasa sashin don saita wannan. Aikin mu yana amfani Nau'in cuta, don haka muna buƙatar sashin saitunan kawai don shi:
sonar-project.Properties:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.infoAn shirya komai don ƙaddamar da na'urar daukar hotan takardu ta farko. Ina so in lura cewa aikin shine Sauti'e ana ƙirƙira ta atomatik a farkon lokacin da kuka kunna na'urar daukar hotan takardu don wani aikin da aka bayar. A lokuta masu zuwa, za a tara bayanai don ganin sauye-sauyen canje-canje a cikin sigogin aikin a kan lokaci.
Don haka, bari mu yi amfani da umarnin da aka ƙirƙira a baya a ciki fakamari.json:
yarn run sonar Note: Hakanan zaka iya amfani da siga -X don ƙarin cikakkun bayanai.
Idan an ƙaddamar da na'urar daukar hotan takardu a karon farko, to, za a fara saukar da binary na na'urar daukar hotan takardu. Bayan haka yana farawa kuma ya fara bincika uwar garken Sauti'a don shigar da plugins, ta haka ne ana ƙididdige harshe mai goyan baya. Hakanan ana loda wasu sigogi daban-daban don aikin sa: bayanan martaba masu inganci, dokoki masu aiki, ma'ajin awo, dokokin uwar garken.
Note: Ba za mu zauna a kansu dalla-dalla ba a cikin tsarin wannan labarin, amma koyaushe kuna iya tuntuɓar tushen hukuma.
Na gaba, ana fara nazarin babban fayil ɗin Src don samun tushen fayilolin tushe ga kowa (idan ba a fayyace takamaiman ɗaya ba) yare masu goyan baya, tare da bayanansu na gaba.
Bayan haka kuma wasu nazarce-nazarce dabam-dabam za su zo, waɗanda ba mu mai da hankali a kansu ba a cikin wannan labarin (misali, kamar linting, gano kwafin code, da sauransu).
A ƙarshen aikin na'urar daukar hotan takardu, ana tattara duk bayanan da aka tattara, an adana su kuma an aika zuwa uwar garken.
Bayan wannan, mun riga mun ga abin da ya faru a cikin haɗin yanar gizon:
Kamar yadda muke iya gani, wani abu ya yi aiki, har ma yana nuna wasu nau'in ɗaukar hoto, amma bai dace da namu ba karimcin- rahoto.
Bari mu gane shi. Bari mu dubi aikin daki-daki, danna kan ƙimar ɗaukar hoto, kuma “faɗi cikin” cikin cikakken rahoton fayil:
Anan muna gani, ban da babban, fayil ɗin da aka bincika HelloWorld.vue, akwai kuma fayil babban.ts, wanda ya ɓata dukan hoton ɗaukar hoto. Amma ta yaya muka cire shi daga lissafin ɗaukar hoto. Ee, komai daidai ne, amma yana kan matakin karimcin, amma na'urar daukar hotan takardu ta nuna shi, don haka ya ƙare a cikin lissafinsa.
Mu gyara wannan:
sonar-project.Properties:
...
sonar.exclusions=src/main.ts
...Ina so in yi bayani: ban da manyan fayilolin da aka kayyade a cikin wannan ma'auni, duk manyan fayilolin da aka jera a cikin ma'auni kuma ana ƙara su. sonar.gwaji.haɗa.
Bayan ƙaddamar da na'urar daukar hotan takardu, muna ganin bayanan da suka dace:
Mu duba batu na gaba - Bayanan inganci. Na yi magana a sama game da tallafi Sauti'om da yawa harsuna a lokaci guda. Wannan shi ne ainihin abin da muke gani. Amma mun san cewa an rubuta aikin mu a ciki TS, don haka me yasa zazzage na'urar daukar hotan takardu tare da magudi da bincike mara amfani. Za mu saita harshe don bincike ta ƙara ƙarin siga guda ɗaya zuwa fayil ɗin daidaitawa Sauti'A:
sonar-project.Properties:
...
sonar.language=ts
...Bari mu sake kunna na'urar daukar hoto mu ga sakamakon:
Labarin ya tafi gaba daya.
Idan muka kalli log ɗin na'urar daukar hoto, za mu iya ganin layi mai zuwa:
Wato, fayilolin aikin mu kawai ba a yi lissafinsu ba.
Halin shine kamar haka: an goyi bayan hukuma VueJs yana cikin plugin SonarJSwanda ke da alhakin Javascript.
Amma wannan tallafin baya cikin plugin ɗin SonarTS to TS, game da wanda aka buɗe tikitin hukuma a cikin ma'aunin bug tracker Sauti'A:
Anan akwai wasu amsoshi daga ɗaya daga cikin wakilai daga masu haɓaka SonarQube, suna tabbatar da wannan gaskiyar.
Amma duk abin ya yi aiki a gare mu, kun ƙi. E haka ne, bari mu gwada shi kadan "haka".
Idan akwai tallafi .vue- fayiloli Sauti'Oh, to bari mu yi kokarin gaya masa ya dauke su a matsayin Nau'in cuta.
Bari mu ƙara ma'auni:
sonar-project.Properties:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...Bari mu kaddamar da na'urar daukar hotan takardu:
Kuma, voila, komai ya koma al'ada, kuma tare da bayanin martaba ɗaya kawai don Nau'in cuta. Wato mun sami nasarar magance matsalar a cikin tallafi VueJs+TS to sautiQube.
Bari mu yi ƙoƙari mu ci gaba da inganta bayanan ɗaukar hoto kaɗan.
Abin da muka yi ya zuwa yanzu:
- kara da aikin Sauti- na'urar daukar hotan takardu;
- kafa karimcin don samar da bayanan rufewa;
- saita Sauti- na'urar daukar hotan takardu;
- ya warware matsalar tallafi .vue- fayiloli + Nau'in cuta.
Baya ga gwajin ɗaukar hoto, akwai wasu ma'auni masu amfani masu ban sha'awa don ingancin lambar, alal misali, kwafin lambar da adadin layukan (wanda ke da alaƙa da ƙididdige ƙididdiga masu alaƙa da haɓakar lambar) na aikin.
A halin yanzu aiwatar da plugin don aiki tare da TS (SonarTS) ba zai yi aiki ba CPD (Kwafi Manna Gano) da kuma kirga layin code .vue- fayiloli.
Don ƙirƙirar yanayi na roba na kwafin lambar, kawai kwafi fayil ɗin bangaren tare da wani suna daban sannan kuma ƙara shi zuwa lambar. babban.ts aiki mai ban mamaki da kwafi shi da wani suna daban. Don duba kwafi kamar a ciki .vue, da kuma cikin .ts - fayiloli.
main.ts:
...
function name(params:string): void {
console.log(params);
}
...Don yin wannan, kuna buƙatar yin sharhi na ɗan lokaci don fitar da layin daidaitawa:
sonar-project.Properties:
...
sonar.exclusions=src/main.ts
...Bari mu sake kunna na'urar daukar hotan takardu tare da gwaji:
yarn test && yarn run sonarTabbas, labarinmu zai faɗi, amma yanzu ba mu da sha'awar hakan.
Dangane da kwafin layin code, za mu ga:
Don duba za mu yi amfani Farashin CPD- amfani - jscpd:
npx jscpd src
Don layin code:
Wataƙila za a warware wannan a cikin sigogin plugin ɗin nan gaba SonarJS (TS). Ina so in lura cewa a hankali suna fara haɗa waɗannan plugins guda biyu zuwa ɗaya SonarJS, wanda ina ganin daidai ne.
Yanzu ina so in yi la'akari da zaɓi na inganta bayanin ɗaukar hoto.
Ya zuwa yanzu za mu iya ganin gwajin ɗaukar hoto a cikin sharuddan kashi don dukan aikin, kuma don fayiloli musamman. Amma yana yiwuwa a fadada wannan nuna alama tare da bayani game da yawa naúrar- gwaje-gwaje don aikin, da kuma a cikin mahallin fayiloli.
Akwai ɗakin karatu wanda zai iya karimcin-Mayar da rahoton zuwa tsari don Sauti'A:
Generic gwajin bayanai - .
Bari mu shigar da wannan ɗakin karatu a cikin aikinmu:
yarn add jest-sonar-reporterKuma ƙara shi zuwa ga daidaitawa karimcin:
kunshin.json:
…
"testResultsProcessor": "jest-sonar-reporter"
…Yanzu bari mu gudanar da gwajin:
yarn testBayan haka za a ƙirƙiri fayil a tushen aikin gwajin-rahoton.xml.
Bari mu yi amfani da shi a cikin tsari Sauti'A:
sonar-project.Properties:
…
sonar.testExecutionReportPaths=test-report.xml
…Kuma sake kunna na'urar daukar hotan takardu:
yarn run sonarBari mu ga abin da ya canza a cikin dubawa Sauti'A:
Kuma babu abin da ya canza. Gaskiyar ita ce, Sonar baya la'akari da fayilolin da aka kwatanta a cikin rahoton Jest a matsayin fayiloli naúrar- gwaje-gwaje. Domin gyara wannan yanayin, muna amfani da ma'aunin daidaitawa Sauti sonar. gwaje-gwaje, wanda a ciki za mu nuna a sarari manyan fayiloli tare da gwaje-gwaje (muna da ɗaya kawai a yanzu):
sonar-project.Properties:
…
sonar.tests=src/components/__tests__
…Bari mu sake kunna na'urar daukar hotan takardu:
yarn run sonarBari mu ga abin da ya canza a cikin dubawa:
Yanzu mun ga adadin mu naúrar- gwaje-gwaje kuma, bayan kasa ta danna ciki, zamu iya ganin rarraba wannan lamba a cikin fayilolin aikin:
ƙarshe
Don haka, mun kalli kayan aiki don ci gaba da bincike sautiQube. Mun yi nasarar shigar da aikin da aka rubuta a ciki VueJs+TS. Kafaffen wasu batutuwan dacewa. Mun ƙara abun ciki na bayanin ma'aunin ɗaukar hoto. A cikin wannan labarin mun bincika ɗaya daga cikin ma'aunin ingancin lambar (wataƙila ɗaya daga cikin manyan), amma sautiQube yana goyan bayan wasu ƙa'idodi masu inganci, gami da gwajin aminci. Amma ba duk waɗannan fasalulluka ke samuwa a ciki ba jama'a-versions. Ɗaya daga cikin abubuwan ban sha'awa da amfani shine haɗin kai sautiQube tare da tsarin sarrafa ma'ajiyar lamba daban-daban, kamar GitLab da BitBucket. Don hanawa buƙatar haɗaka (haɗin) nema'a zuwa babban reshe na ma'adanar lokacin da aka lalatar da ɗaukar hoto. Amma wannan labari ne don labarin mabambanta.
PS: Duk abin da aka bayyana a cikin labarin a cikin nau'i na lamba yana samuwa a ciki .
Masu amfani da rajista kawai za su iya shiga cikin binciken. don Allah.
Kuna amfani da dandalin SonarQube:
-
26,3%Da 5
-
15,8%No3
-
15,8%Na ji labarin wannan dandali kuma ina so in yi amfani da shi3
-
10,5%Na ji labarin wannan dandali kuma bana son amfani2
-
0,0%Ina amfani da wani dandamali0
-
31,6%Na fara jin labarinta6
19 masu amfani sun kada kuri'a. Masu amfani 3 sun kaurace.
source: www.habr.com