Oma töös kasutame me aktiivselt platvormi SonarQube koodi kvaliteedi kõrgel tasemel hoidmiseks. Ühe projekti integreerimise käigus, mis oli kirjutatud VueJs+Typescript, tekkisid probleemid. Seetõttu tahaksin rääkida detailselt, kuidas neid lahendada.

Käesolevas artiklis käsitletakse, kuidas juba mainitud platvormi SonarQube. Natuke teooriat — mis see tegelikult on, neile, kes kuulevad sellest esmakordselt:

SonarQube (endine Sonar) — avatud lähtekoodiga platvorm pidevaks analüüsiks (ingl. continuous inspection) ja koodi kvaliteedi mõõtmiseks.
Toetab koodi analüüsi ja vigade otsimist vastavalt programmeerimisstandardite reeglitele MISRA C, MISRA C++, MITRE/CWE ja CERT Secure Coding Standards. Samuti oskab tuvastada vigu OWASP Top-10 ja CWE/SANS Top-25 programmeerimise vigade nimekirjadest.
Kuigi platvorm kasutab erinevaid valmis tööriistu, koondab SonarQube tulemused ühte informatiivse paneeli (ingl. dashboard), hoides jooksukordade ajalugu ja võimaldades seeläbi näha üldist suundumust tarkvara kvaliteedi muutumisel arenduse käigus.

Rohkem teavet saab leida ametlikul kodulehel

Toetatakse suurt arvu programmeerimiskeeli. Üleminekuinfost lähtuvalt on neid rohkem kui 25. Konkreetse keele toetamiseks tuleb paigaldada vastav plugin. Community versioon sisaldab pluginaid töötamiseks Javascript (sealhulgas typescript), kuigi wikis on kirjutatud vastupidist. Selle eest vastutab plugin Javascript SonarJS , Typescripti eestSonarTS Teabe edastamiseks katvuse kohta kasutatakse ametlikku klienti vastavalt.

, mis, kasutades seadistusi failist config, saadab need andmed serverisse edasi konsolideerimiseks ja aggregeerimiseks.npm-ümbris SonarQube . Alustame samm-sammult rakendamist

Kuna Javascript has -projekt, mis kasutabTypescript SonarQube ühes Vuesonar.yaml version: '1' services: simplesample-sonar: image: sonarqube:lts ports: - 9001:9000 - 9092:9092 network_mode: bridge.

docker-compose -f sonar.yml up SonarQube Pärast seda docker-compose.

Praegu pole sellel projekte ja see on õigustatud. Parandame seda olukorda. Võtsin aluseks ametliku näidisprojekti:

VueJS+TS+Jest

Käivitamine:

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

Esmalt peame paigaldama kliendi SonarQube , mille nimi on http://localhost:9001 .

sonar-scanner VueJS+TS+Jest. Kloneerime selle enda juurde:

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

Esiteks peame me installima kliendi SonarQube, mille nimi on sonar-scanner, et npm on pakett:

yarn add sonarqube-scanner

Ja lisame kohe käsu skriptid selle kasutamiseks.

package.json:

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

Edasi, et skanner töötaks, peame määrama projekti sätted eraldi failis. Alustame põhiteadmistest.

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 – aadress Sonar’a;
sonar.projectKey – projekti unikaalne identifikaator serveris Sonar’a;
sonar.projectName – selle nimetus, mida saab igal ajal muuta, kuna projekti identifitseerimine toimub projectKey;
sonar.sources – allikafailide kaust, tavaliselt on see src, kuid see võib olla ka mõni muu. See kaust seadistatakse võrreldes juurkaustaga, milleks on kaust, kust skanner käivitatakse;
sonar.tests – parameeter, mis käib koos eelneva. See on kaust, kus asuvad testid. Antud projektis ei ole sellist kausta, ja test asub koos testitava komponendiga kaustas ‘test‘, seega jätame selle praegu tähelepanuta ja kasutame järgmist parameetrit;
sonar.test.inclusions – testimiseks mõeldud tee maskiga, mitme elemendi loetlemine komadega;
sonar.sourceEncoding – lähtefailide kodeering.

Skanneri esmakordseks käivitamiseks on kõik valmis, välja arvatud põhieelting: testimismootori käivitamine, et luua hõlmatusinfot, mida skanner hiljem kasutab.

Kuid selle jaoks tuleb testimismootor seadistada selle teabe genereerimiseks. Käesolevas projektis on testimismootor Jest. Selle seadistused asuvad vastavas faili osas package.json.

Lisame need seadistused:

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

Seega määrame katvuse arvutamise nõudmise lippu ja allika (koos eranditega), mille alusel see kujundatakse.

Nüüd käivitame testi:

yarn test

Näeme järgmist:

Põhjus on see, et komponent ise ei sisalda koodi. Parandame selle.

HelloWorld.vue:

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

Seda on piisavalt hõlmatuse arvutamiseks.

Pärast testi taaskäivitamist kinnitame seda:

Ekraanil peaksime nägema katte teavet ning projekti kausta luuakse kaust coverage katte teabe kohta testide universaalses formaadis LCOV (LTP GCOV laiendus).

Gcov — vabalt levitatav tööriist koodi katte analüüsimiseks. Gcov genereerib täpse arvu täitmise kohta iga operaatori jaoks programmis ja võimaldab lisada annotatsioone allikale. Gcov pakutakse standardtööriistana GCC paketi koostisosana.
Lcov — graafiline liides gcovile. See kogub mitme allika failide jaoks gcov faile ja loob HTML lehtede komplekti koodi ja katte teabega. Samuti genereeritakse lehed navigeerimise lihtsustamiseks. Lcov toetab ridade, funktsioonide ja harude katvust.

Pärast testide sooritamist asub katte teave coverage/lcov.info.
Peame ütlema Sonarkuhu seda võtta. Seetõttu lisame järgmised read tema konfiguratsioonifaili. Kuid on üks asi: projektid võivad olla mitmekeelsed, st kaustas src seal on mitmeid programmeerimiskeelte alusfailid ning nende kasutamine ja pluginate valik sõltub selle laiendist. Teavet katvuse kohta võib hoida erinevates kohtades erinevate programmeerimiskeelte jaoks, seetõttu on iga program keele jaoks oma seade. Meie projekt kasutab version: '1' services: simplesample-sonar: image: sonarqube:lts ports: - 9001:9000 - 9092:9092 network_mode: bridge, seega vajame selle jaoks eraldi seadete jaotust:

sonar-project.properties:

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

Kõik on valmis skanneri esimeseks käivitamiseks. Tähelepanu, et projektis Sonarloob automaatselt esmakordsel skanneri käivitamisel antud projektile. Järgmistel kordadel tuleb teave kokku, et jälgida projekti parameetrite muutumist ajas.

Nii et kasutame varem loodud käsku package.json:

yarn run sonar

Märkus: võib kasutada ka valikut -X täiendava detailsuse saamiseks logimisel.

Kui skanneri käivitamine on esmakordne, siis laaditakse kõigepealt alla skanneri binaarfail. Pärast seda käivitatakse see ja hakkab serverit skaneerima. Sonarja pluginite olemasolu osas, arvutades seeläbi toetatud programmeerimiskeeli. Samuti laaditakse teised erinevad parameetrid selle tööks: kvaliteediprofiilid, aktiivsed reeglid, mõõdikute hoidla, serveri reeglid.

Märkus: me ei peatu nende peal artikli käigus, kuid alati saab pöörduda ametlike allikate poole.

Järgmisena algab kausta analüüs src toetatavatele programmeerimiskeeltele (kui ei ole selgelt määratud mõnda konkreetset), järgneb nende indekseerimine.

Seejärel toimub mitmeid muid analüüse, millele me selles artiklis ei paigaldu, näiteks: lintimine, koodi dubleerimise määramine jne.

Skaneerimise lõpus toimub kogu kogutud teabe koondamine, arhiivimine ja saatmine serverisse.

Pärast seda saame vaadata, mis tulemuseks sai veebiliideses:

Nagu näeme, on midagi saadud ja isegi kuvatakse mingit katvust, kuid see ei vasta meie Jest-aruandele.

Hakkame asjaga tegelema. Vaatame projekti lähemalt, klõpsame katvuse väärtusel ja "langeme" üksikasjalikku arvesse failide kohta:

Siit näeme, et peamise, uuritava faili kõrval HelloWorld.vue, on olemas ka fail main.ts, mis rikub kogu katvuse vaate. Aga kuidas see võimalik on, me välistasime selle katvusest. Jah, see on õige, aga see oli tasemel Jest, kuid skanner on selle indekseerinud, seega on see sattunud selle arvutustesse.

Korrigeerime selle:

sonar-project.properties:

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

Tahaksin märkida, et peale nende kaustade, mis on antud selles parameetris, lisatakse ka kõik kaustad, mis on loetletud parameetris sonar.test.inclusions.

Pärast skanneri käivitamist näeme juba õiget teavet:

Tuleb uurida järgmist punkti — Kvaliteedi profiilid. Rääkisin varem toetamisest Sonarmitme programmeerimiskeele samal ajal. See on just see, mida me jälgime. Kuid me teame, et meie projekt on kirjutatud TS, seega miks häirida skännerit üleliigsete manipuleerimiste ja kontrollidega. Analüüsimiseks määrame keele, lisades konfigureerimisfaili juurde veel ühe parameetri Sonar:

sonar-project.properties:

...
sonar.language=ts
...

Käivitame skanneri uuesti ja vaatame tulemust:

Katvus on täielikult kadunud.

Kui vaatame skanneri logisse, siis näeme järgmist rida:

See tähendab, et meie projekti failid ei olnud lihtsalt indekseeritud.

Olukord on järgmine: ametlikult on tugi VueJs pluginas , Typescripti eest, mis vastutab Javascript.

Aga seda tuge pole pluginas Teabe edastamiseks katvuse kohta kasutatakse ametlikku klienti kuna TS, mille kohta on esitatud ametlik pilet bugihaldusesse Sonar:

Siin on mõned vastused ühelt SonarQube'i arendaja esindajalt, mis kinnitab seda fakti.

Aga me ju tegime alles, vastaksite Te. Jah, nii on, proovime siis natuke „häkkerdada”.
Kui tugi on .vue-failidele Sonar, siis proovime öelda, et ta vaataks neid kui version: '1' services: simplesample-sonar: image: sonarqube:lts ports: - 9001:9000 - 9092:9092 network_mode: bridge.

Lisame parameetri:

sonar-project.properties:

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

Käivitage skanner:

Ja voilà, kõik on tagasi oma kolme, ja ühe profiiliga ainult version: '1' services: simplesample-sonar: image: sonarqube:lts ports: - 9001:9000 - 9092:9092 network_mode: bridge. See tähendab, et suutisime lahendada probleemi toe VueJs+TS kuna SonarQube.

Proovime minna edasi ja parandame natuke katvuse teavet.

Mida me oleme seni teinud:

lisatud projekti Sonar-skanner;
seadistatud Jest katvuse teabe genereerimiseks;
konfigureeritud Sonar-skanner;
lahendatud toe probleem .vue-failidele + version: '1' services: simplesample-sonar: image: sonarqube:lts ports: - 9001:9000 - 9092:9092 network_mode: bridge.

Lisaks katvusele testidega on ka teisi huvitavaid kvaliteedikriteeriume, näiteks koodi dubleerimine ja ridade arv (osalevad koodi keerukuskoefitsientide arvutamisel) projektis.

Praeguses pistikprogrammi versioonis, et töötada TS (Teabe edastamiseks katvuse kohta kasutatakse ametlikku klienti) ei tööta CPD (Kopeeri-Kleebi Detektor) ja koodiridade arvu .vue-failide.

Koodide dubleerimise kunstliku olukorra loomiseks duplitseerime lihtsalt komponendi faili teise nimega, lisame samuti koodis main.ts tühifunktsiooni ja dubleerime selle teise nimega. Et kontrollida dubleerimist nagu .vue, kui ka .ts -failides.

main.ts:

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

Selleks on vajalik ajutiselt kommenteerida konfiguratsioonirida:

sonar-project.properties:

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

Käivitame skanneri koos testimisega uuesti:

yarn test && yarn run sonar

Meie katvus langeb, aga hetkel ei huvita meid see.

Koodiridade dubleerimise vaates näeme:

Kontrollimiseks kasutame CPD-utiliiti – jscpd:

npx jscpd src

Koodiridade jaoks:

See võib tulevikus pluginade versioonides lahenduda SonarJS(TS). Soovin märkida, et nad hakkavad järk-järgult neid kahte plugina kokku sulgema , Typescripti eest, mis, arvan, on õige.

Nüüd tahaksin arutada katvuse teabe parandamise võimalust.

Kuni näeme katvust testide osas protsentides, kogu projekti ulatuses ja failide osas. Kuid on võimalus laiendada seda näitajat teabe koguse kaudu unit-testprojekti, samuti failide lõikes.

On olemas raamatukogu, mis oskab Jest-aruande konvertida formaati Sonar:
üldine testandmed — https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Installime selle raamatukogu oma projekti:

yarn add jest-sonar-reporter

Ja lisame selle konfiguratsiooni Jest:

package.json:

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

Nüüd teeme testi:

yarn test

Pärast seda luuakse projekti juurese prüki test-report.xml.

Kasutame seda konfiguratsioonis Sonar:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ja taastame skänneri:

yarn run sonar

Vaata, mis on liideses muutunud Sonar:

Ja midagi ei ole muutunud. Asi on selles, et Sonar ei käsitle failide, mis on kirjeldatud Jest-aruandes, kui failide unit-testide. Selle olukorra parandamiseks kasutame konfiguratsiooniparameetrit Sonar sonar.tests, kus määrame selgelt testide kaustad (praegu on meil ainult üks):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Taastame skänneri:

yarn run sonar

Vaata, mis on liideses muutunud:

Nüüd näeme meie unit-testide arvu ja klikkides sinna sisse, saame näha selle arvu jaotust projekti failide vahel:

Kokkuvõte

Nii et rääkisime pideva analüüsi tööriistast SonarQube. Edukas integreerimine sellesse projekti, mis on kirjutatud VueJs+TS. Oleme lahendanud mõned ühilduvusprobleemid. Oleme suurendanud testide katvuse näitaja informatiivsust. Selles artiklis käsitleme ainult ühte koodikvaliteedi kriteeriumi (võimalik, et ühte peamist), kuid SonarQube toetab ka teisi kvaliteedi kriteeriume, sealhulgas turvatestimist. Kuid mitte kõik need võimalused pole täielikult saadaval community-versioonis. Üks huvitav ja kasulik funktsioon on integratsioonid SonarQube erinevate koodihalduse süsteemidega, näiteks nagu GitLab ja BitBucket. Et vältida merge pull(merge) requestpeamine haru repo halvenenud katvuse korral. Kuid see on juba hoopis teise artikli teema.

PS: Kogu, mis on artiklis kirjas koodi kujul, on saadaval minu forgis.

Ainult registreeritud kasutajad saavad küsitluses osaleda. Logige sisse, palun.