Në punën tonë, ne përdorim aktivisht platformën SonarQube për të mbajtur cilësinë e kodit në një nivel të lartë. Gjatë integrimit të një prej projekteve, të shkruar në VueJs+Typescript, shfaqën probleme. Prandaj do të doja të flisja më shumë për mënyrën se si arritëm t'i zgjidhim ato.
Në këtë artikull do të flasim, siç e përmenda më lart, për platformën SonarQube. Pak teori - çfarë është kjo në të vërtetë për ata që e dëgjojnë për herë të parë:
SonarQube (ish Sonar) - është një platformë me kod të hapur për analizën e vazhdueshme (angl. continuous inspection) dhe matjen e cilësisë së kodit.
Përkrah analizën e kodit dhe gjetjen e gabimeve në përputhje me rregullat e standardeve të programimit MISRA C, MISRA C++, MITRE/CWE dhe CERT Secure Coding Standards. Gjithashtu, di të njohë gabimet nga listat OWASP Top-10 dhe CWE/SANS Top-25 të gabimeve të programimit.
Megjithëse platforma përdor mjete të ndryshme të gatshme, SonarQube i sjell rezultatet në një panel informativ të përbashkët (angl. dashboard), duke mbajtur një histori të ekzekutimeve dhe duke lejuar kështu që të shohim tendencën e përgjithshme të ndryshimit të cilësisë së softuerit gjatë zhvillimit.
Më shumë mund të mësoni në
PĂ«rkrah njĂ« numĂ«r tĂ« madh gjuhĂ«sh programimi. Duke parĂ« informacionin nga lidhja mĂ« lart - janĂ« mĂ« shumĂ« se 25 gjuhĂ«. PĂ«r mbĂ«shtetje tĂ« njĂ« gjuhe specifike, Ă«shtĂ« e nevojshme tĂ« instalohet plug-in-i pĂ«rkatĂ«s. NĂ« versionin community pĂ«rfshihet plug-in-i pĂ«r tĂ« punuar me Javascript (pĂ«rfshirĂ« typesŃript), megjithĂ«se nĂ« wiki Ă«shtĂ« shkruar ndryshe. PĂ«r Javascript kupton plug-in SonarJS, pĂ«r Typescript SonarTS pĂ«rkatĂ«sisht.
Për dërgimin e informacionit mbi mbulimin përdoret klienti zyrtar sonarqube-scanner, i cili, duke përdorur cilësimet nga config-file, dërgon këto të dhëna në server SonarQube për konsolidim dhe agregim të mëtejshëm.
Për Javascript ka . Pra, le të fillojmë implementimin hap pas hapi SonarQube në Vue-projekti që përdor Typescript.
Për të vendosur serverin SonarQube do të përdorim docker-compose.
sonar.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridgeNisja:
docker-compose -f sonar.yml upPas kësaj SonarQube do të jetë e qasshme në adresën - .
Aktualisht nuk ka projekte brenda tij dhe kjo është e vërtetë. Do ta rregullojmë këtë situatë. Si bazë kam marrë projektin zyrtar të shembujve për VueJS+TS+Jest. Do ta klonojmë atë tek ne:
git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitSë pari, na nevojitet të instalojmë klientin SonarQube, i cili quhet sonar-scanner, për npm ka një mbështetje:
yarn add sonarqube-scannerDhe menjëherë do të shtojmë një komandë në scripts për ta përdorur atë.
package.json:
{
âŠ
scripts: {
...
"sonar": "sonar-scanner"
...
},
âŠ
}Pastaj, për punën e skanerit, është e nevojshme të caktojmë cilësimet e projektit në një skedar të veçantë. Le të fillojmë me baziket.
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 â adresa Sonarâs;
- sonar.projectKey â identifikuesi unik i projektit nĂ« server Sonarâs;
- sonar.projectName â emri i tij, mund tĂ« ndryshohet nĂ« çdo moment, pasi identifikimi i projektit bĂ«het pĂ«rmes projectKey;
- sonar.sources â dosja me burime, zakonisht Ă«shtĂ« src, por mund tĂ« jetĂ« çfarĂ«do. Kjo dosje caktohet nĂ« lidhje me dosjen rrĂ«njĂ«sore, qĂ« Ă«shtĂ« dosja nga e cila Ă«shtĂ« ekzekutuar skaneri;
- sonar.tests â parametrat qĂ« shkon nĂ« çift me tĂ« kaluarin. Kjo Ă«shtĂ« dosja ku ndodhen testet. NĂ« kĂ«tĂ« projekt, nuk ka njĂ« dosje tĂ« tillĂ«, dhe testi ndodhet afĂ«r komponentit qĂ« po testojmĂ« nĂ« dosjen âtestâ, prandaj pĂ«r momentin do ta injorojmĂ« atĂ« dhe do tĂ« pĂ«rdorim parametrin e ardhshĂ«m;
- sonar.test.inclusions â rruga pĂ«r testet duke pĂ«rdorur maskĂ«n, mund tĂ« ketĂ« disa elemente tĂ« listuara me njĂ« presje;
- sonar.sourceEncoding â kodimi pĂ«r skedarĂ«t burimor.
Për nisin e parë të skanerit, gjithçka është gati, veç për veprimin kryesor paraprak: aktivizimi i vetë motorit të testimit, për të formuar informacionin për mbulimin, të cilin skaneri do ta përdorë më vonë.
Por për këtë është e nevojshme të konfigurohet motori i testimit për të formuar këtë informacion. Në këtë projekt motori i testimit është Jest. Dhe cilësimet e tij ndodhen në seksionin përkatës të skedarit package.json.
Le të shtojmë këto cilësime:
"collectCoverage": true,
"collectCoverageFrom": [
"src/**",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/__tests__*"
],Pra, ne caktojmë vetë flamurin e nevojës për llogaritjen e mbulimit dhe burimin (duke përfshirë përjashtimet), mbi të cilat do të formohet ajo.
Tani le të aktivizojmë testin:
yarn testDo të shohim të siguiente:
Arsyeja është se në vetë komponentin, nuk ka asnjë kod. Le ta rregullojmë këtë.
HelloWorld.vue:
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...Kjo do të jetë e mjaftueshme për llogaritjen e mbulimit.
Pas rinisjes së testit, ne do ta konfirmojmë këtë:
Në ekran duhet të shohim informacionin mbi mbulimin, dhe në dosjen e projektit do të krijohet një dosje coverage me informacionin mbi mbulimin nga testet në formatin universale LCOV (LTP GCOV extension).
Gcov â njĂ« mjet i shpĂ«rndarĂ« lirshĂ«m pĂ«r shqyrtimin e mbulimit tĂ« kodit. Gcov gjeneron numrin e saktĂ« tĂ« ekzekutimeve pĂ«r çdo operator nĂ« program dhe lejon shtimin e annotimeve nĂ« kodin burimor. Gcov vjen si njĂ« mjet standard nĂ« paketĂ«n GCC.
Lcov â ndĂ«rfaqe grafike pĂ«r gcov. Ai mbledh skedarĂ«t gcov pĂ«r disa skedarĂ« burimorĂ« dhe krijon njĂ« paketĂ« faqesh HTML me kodin dhe informacionin mbi mbulimin. Gjithashtu krijohen faqe pĂ«r lehtĂ«simin e navigimit. Lcov mbĂ«shtet mbulimin e linjave, funksioneve, dhe degĂ«ve.
Pas ekzekutimit të testeve, informacioni mbi mbulimin do të jetë në coverage/lcov.info.
Na nevojitet të tregojmë Sonarku ta marrim. Prandaj do të shtojmë këto rreshta në skedarin e tij të konfigurimit. Por ka një çështje: projektet mund të jenë shumëgjuhësore, do të thotë se në dosjen src janë burimet për disa gjuhë programimi dhe përzgjedhja e njërit apo tjetrit, dhe për rrjedhojë përdorimi i një plugin-i të caktuar, përcaktohet nga zgjerimi i tij. Dhe informacioni mbi mbulimin mund të ruhet në vende të ndryshme për gjuhë të ndryshme programimi, prandaj për çdo gjuhë programimi ka një seksion të vetin për konfigurimin e kësaj. Projekti ynë përdor Typescript, prandaj na nevojitet një seksion konfigurimi saktësisht për të:
sonar-project.properties:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.infoE gjithë gjëja është gati për ekzekutimin e parë të skanerit. Dua të theksoj se projekti në Sonardo të krijohet automatikisht gjatë ekzekutimit të parë të skanerit për këtë projekt. Në herët e tjera, informacioni do të akumulohet për të parë dinamikën e ndryshimeve të parametrave të projektit në kohë.
Pra, le të përdorim komandën e krijuar më parë në package.json:
yarn run sonar Shënim: mund të përdorni gjithashtu parametrin -X për regjistrim më të detajuar.
Nëse skaneri ekzekutohet për herë të parë, fillimisht do të shkarkojë binarin e skanerit vetë. Pas kësaj, ai startohet dhe fillon të skanojë serverin Sonarpër plugins të instaluar, duke llogaritur kështu gjuhët e mbështetura të programimit. Gjithashtu shkarkohen parametra të ndryshëm për funksionimin e tij: profile cilësie, rregulla aktive, depo metrikash, rregulla serveri.
Shënim: në të cilat nuk do të ndalemi në këtë artikull, por gjithmonë mund të referoheni në burimet zyrtare.
Pastaj fillon analiza e dosjes src për të parë nëse ka skedarë burimorë për të gjitha (nëse nuk është caktuar ndonjë specifik) gjuhët e mbështetura të programimit, me indekson e mëpasshëm.
Pas kësaj, ka analiza të tjera të ndryshme, mbi të cilat nuk do të përqendrohemi në këtë artikull (për shembull, si: linting, përcaktimi i kopjave të kodit etj.).
Në fund të punës së skanerit ndodhin agregimi i të gjitha informacionit të mbledhur, arkivimi dhe dërgimi i tij në server.
Pas kësaj mund të shohim se çfarë kemi arritur në ndërfaqen web:
Siç shohim, ka diçka prej atij që kemi arritur, dhe madje tregon ndonjë mbulim, por ai nuk përputhet me tonin tonë Jest-raportin.
Le të zbërthejmë. Të shohim projektin më në detaje, të klikojmë mbi vlerën e mbulimit, dhe "të zbresim" në raportin e detajuar për skedarët:
Këtu shohim përveç skedarit primar, të hulumtuar HelloWorld.vue, ka edhe skedarin main.ts, i cili prish të gjithë pamjen e mbulimit. Por si ndodhi kështu, ne e përjashtuam atë nga llogaritja e mbulimit. Po, është e saktë, por kjo ishte në nivelin Jest, por skaneri e indeksoi atë, prandaj hyri në llogaritjet e tij.
Le të rregullojmë këtë:
sonar-project.properties:
...
sonar.exclusions=src/main.ts
...Dua të sqaroj: përveç dosjeve që janë caktuar në këtë parametr, gjithashtu shtohen të gjitha dosjet e përmendura në parametrin sonar.test.inclusions.
Pas ekzekutimit të skanerit shohim tashmë informacionin e saktë:
Le tĂ« shqyrtojmĂ« momentin tjetĂ«r â profile cilĂ«sie. ThashĂ« mĂ« sipĂ«r pĂ«r mbĂ«shtetjen nga SonarpĂ«r disa gjuhĂ« programimi njĂ«kohĂ«sisht. KĂ«tu pikĂ«risht e shohim. Por ne e dimĂ« se projekti ynĂ« Ă«shtĂ« shkruar nĂ« TS, prandaj pse ta ngarkojmĂ« skanerin me manipulime dhe verifikime tĂ« panevojshme. GjuhĂ«n pĂ«r analizĂ« do ta caktuarim pĂ«rmes shtimit tĂ« njĂ« parametri tjetĂ«r nĂ« skedarin e konfigurimit SonartĂ« tij:
sonar-project.properties:
...
sonar.language=ts
...Sërish do të nisë skaneri dhe të shohim rezultatin:
Mbulimi ka humbur krejtësisht.
Nëse shohim logun e skanerit, mund të shohim rreshtin e mëposhtëm:
Që do të thotë se skedarët e projektit tonë thjesht nuk ishin indeksuar.
Situata është si vijon: mbështetje zyrtare VueJs exist në pluginin SonarJS, i cili përgjigjet për Javascript.
Por kjo mbështetje nuk ekziston në pluginin SonarTS për TS, për të cilën është hapur një biletë zyrtare në traçerën e gabimeve Sonartë tij:
Ja disa përgjigje nga një nga përfaqësuesit nga ana e zhvilluesve të SonarQube, që e konfirmon këtë fakt.
Por ne kemi punuar mirĂ«, mund tĂ« kundĂ«rshtoni. Po, Ă«shtĂ« e vĂ«rtetĂ«, le tĂ« provojmĂ« disi âtĂ« hack-ojmĂ«â.
Nëse ka mbështetje për .vue-skedarët Sonaratëherë le të provojmë të themi se ai t'i marrë ata si Typescript.
Shtojmë parametrin:
sonar-project.properties:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...Le të nisim skanerin:
Dhe, ja, gjithçka u kthye në normë, me një profil vetëm për Typescript. Pra, problemi me mbështetje u zgjidh VueJs+TS për SonarQube.
Të provojmë të shkojmë më tej dhe të përmirësojmë informacionin për mbulimin.
ĂfarĂ« kemi bĂ«rĂ« deri tani:
- e kemi shtuar në projekt Sonar-skanerin;
- e kemi konfiguruar Jest për të formuar informacionin për mbulimin;
- e kemi konfiguruar Sonar-skanerin;
- zgjidhur problemin për mbështetje .vue-fileve + Typescript.
Përveç mbulimit me testime, ka edhe kritere të tjera të dobishme të cilësisë së kodit, për shembull, kopjimin e kodit dhe numrin e rreshtave (pjesëmarrës në llogaritjen e koeficientëve të lidhur me kompleksitetin e kodit) të projektit.
Në implementimin aktual të plugin-it për punën me TS (SonarTS) nuk do të punojë CPD (Copy Paste Detector) dhe llogaritjen e numrit të rreshtave të kodit .vue-fileve.
Për të krijuar një situatë sintetike për kopjimin e kodit, thjesht do të kopjojmë skedarin e komponentit me një emër tjetër, si gjithashtu do të shtojmë në kod main.ts një funksion të zbrazët dhe ta kopjojmë atë me një emër tjetër. Për të kontrolluar kopjimin ashtu si në .vue, si dhe në .ts -skedarët.
main.ts:
...
function name(params:string): void {
console.log(params);
}
...Për këtë është e nevojshme të komentoni përkohësisht rreshtin e konfigurimit:
sonar-project.properties:
...
sonar.exclusions=src/main.ts
...Le të rikthejmë skanerin së bashku me testimin:
yarn test && yarn run sonarSigurisht, mbulimi do të bjerë, por tani kjo nuk na intereson.
Në kontekstin e kopjimit të rreshtave të kodit do të shohim:
PĂ«r kontrollimin do tĂ« pĂ«rdorim CPD-utilitarin â jscpd:
npx jscpd src
PĂ«r rreshtat e kodit:
Mundësisht, kjo do të zgjidhet në versionet e ardhshme të plugin-ëve SonarJS(TS). Dua të theksoj se ata gradualisht po bashkojnë këta dy pluginë në një SonarJS, gjë që mendonjë është e drejtë.
Tani do të doja të shqyrtoja mundësinë e përmirësimit të informacionit për mbulimin.
Derisa ne shohim mbulimin e testimeve në përqindje, për të gjithë projektin, dhe për skedarët në veçanti. Por ka mundësi të zgjeromë këtë tregues me informacionin për numrin unit-testeve për projektin, si dhe në kontekstin e skedarëve.
Ka një bibliotekë që di Jest-raportin ta konvertojë në format për Sonartë tij:
data testuese tĂ« pĂ«rgjithshme â .
Do ta instalojmë këtë bibliotekë në projektin tonë:
yarn add jest-sonar-reporterDhe do ta shtojmë atë në konfigurim Jest:
package.json:
âŠ
"testResultsProcessor": "jest-sonar-reporter"
âŠTani le tĂ« ekzekutojmĂ« testin:
yarn testPashet në rrënjën e projektit do të krijohet një skedar test-report.xml.
Do ta përdorim atë në konfigurim Sonartë tij:
sonar-project.properties:
âŠ
sonar.testExecutionReportPaths=test-report.xml
âŠDhe le tĂ« rikthejmĂ« skanerin:
yarn run sonarLe të shohim çfarë ka ndodhur në ndërfaqe Sonartë tij:
Dhe nuk ka ndryshuar asgjë. Problemi është që Sonar nuk e shqyrton skedarët e përshkruar në raportin Jest si skedarë unit-testesh. Për të rregulluar këtë situatë do të aktivizojmë parametrin e konfigurimit Sonar sonar.tests, ku do të tregojmë qartë dosjet me testet (e kemi vetëm një për momentin):
sonar-project.properties:
âŠ
sonar.tests=src/components/__tests__
âŠLe tĂ« rikthejmĂ« skanerin:
yarn run sonarLe të shohim çfarë ka ndryshuar në ndërfaqe:
Tani ne pamë numrin e unit-testeve tona dhe, duke klikuar brenda, mund të shohim shpërndarjen e këtij numri në skedarët e projektit:
PĂ«rfundimi
Pra, shqyrtuam mjetin për analizën e vazhdueshme SonarQube. E integrojmë me sukses projektin, të shkruar në VueJs+TS. Zgjidhëm disa probleme të kompatibilitetit. Rritëm informativitetin e treguesit për mbulim me testime. Në këtë artikull ne shqyrtuam vetëm një nga kriteret e cilësisë së kodit (ndoshta, njeri nga kryesorët), por SonarQube mbështet dhe kritere të tjera cilësie, duke përfshirë mbulim për sigurinë. Por jo të gjitha këto mundësi janë në dispozicion plotësisht në versionin e komunitetit-një nga mundësitë interesante dhe të dobishme është integrimet SonarQube me sisteme të ndryshme të menaxhimit të depozitave të kodit, për shembull, si GitLab dhe BitBucket. Për të mos lejuar merge pull(merge) requestnë degën kryesore të depozitës në rast të degradimit të mbulimit. Por kjo është një histori plotësisht tjetër.
PS: E gjithë ajo që është përshkruar në artikull në formë kode është e disponueshme në .
Vetëm përdoruesit e regjistruar mund të marrin pjesë në anketë. , ju lutemi.
A përdorni ju platformën SonarQube:
26,3%Po5
15,8%Jo3
15,8%Kam dëgjuar për këtë platformë dhe dëshiroj të përdor3
10,5%Kam dëgjuar për këtë platformë dhe nuk dëshiroj të përdor2
0,0%Po përdor një platformë tjetër0
31,6%E dëgjova për herë të parë6
Nuk votuan 19 përdorues. U përmbajtën 3 përdorues.
Burimi: habr.com
