Oma töös kasutame aktiivselt platvormi SonarQube koodi kvaliteedi hoidmiseks kõrgel tasemel. Ühe esitatud projekti integreerimise käigus, mis on kirjutatud VueJs+Typescript, tekkisid probleemid. Seetõttu sooviksin rääkida lähemalt, kuidas suudeti need lahendada.

Antud artiklis räägitakse, nagu eelnevalt mainitud, platvormist SonarQube. Veidi teooriat — mis see üldse 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 programmimise standardite MISRA C, MISRA C++, MITRE/CWE ja CERT Secure Coding Standards reeglitele. Samuti oskab tuvastada vigu OWASP Top-10 ja CWE/SANS Top-25 programmi vigade loenditest.
Hoolimata asjaolust, et platvorm kasutab erinevaid valmis tööriistu, koondab SonarQube tulemused ühele teabelehe (ingl. dashboard), hoides jooksuajaloo ja võimaldades seega näha tarkvara kvaliteedi üldist suundumust arendamise käigus.

Edasi saate lugeda ametlikul kodulehe

Toetatakse suurt hulka programmeerimiskeeli. Ühelt lingilt vaadates — rohkem kui 25 keelt. Spetsiifilise keele toetamiseks on vajalik vastava plugina installimine. Community versioon sisaldab plugina, mis töötab Javascript (sealhulgas typesсript), kuigi vikis on kirjutatud vastupidist. Selle eest vastutab plugin Javascript SonarJS , Typescripti eestSonarTS Infode saatmiseks katvuse kohta kasutatakse ametlikku klienti vastavalt.

sonarqube-scanner , mis, kasutades seadistusiconfig failist, saadab need andmed serverisseedasi konsolideerimiseks ja aggregatsiooniks. SonarQube npm-moodul

Tooge Javascript on . Nii et alustame samm-sammult rakendamistVue SonarQube ja projekt, mis kasutabTypescripti Serveri seadistamiseks kasutame.

docker-compose SonarQube sonar.yaml version: '1' services: simplesample-sonar: image: sonarqube:lts ports: - 9001:9000 - 9092:9092 network_mode: bridge.

Käivitamine::

docker-compose -f sonar.yml up

Pärast seda

on saadaval aadressil –

Praegu ei ole seal projekte ja see on tõsi. Parandame seda olukorda. Aluseks võtsin ametliku näidisprojekti SonarQube VueJS+TS+Jest http://localhost:9001 .

. Kloneerime selle endale: git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitEsmalt peame installima kliendi

, mis nimetatakse

sonar-scanner SonarQube, npm jaoks on olemas wrapper: yarn add sonarqube-scanner, jaoks npm on wrappers:

yarn add sonarqube-scanner

Ja lisame kohe meeskonna scripts selle töötamiseks.

package.json:

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

Seejärel, et skannimistööriist töötaks, peame määrama projekti seaded spetsiaalses failis. Alustame põhitest.

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 – kaust allikfailide jaoks, tavaliselt see on src, kuid see võib olla mis tahes. See kaust määratakse suhte võrra juurkaustaga, millega skanner käivitatakse;
sonar.tests – parameeter, mis koosneb eelnevatest. See on kaust, kus asuvad testid. Antud projektis ei ole sellist kausta, ja test asub lähimasse kausta ‘test‘, seega ignoreerime seda ja kasutame järgmisi parameetreid;
sonar.test.inclusions – tee testide jaoks, kasutades mustrit; neid võib olla mitu, eraldatud koma abil;
sonar.sourceEncoding – koodimine allikafailide jaoks.

Esimese skannimise käivitamiseks on kõik valmis, välja arvatud põhieelse tegevuse: testimootori käivitamine, et genereerida teavet katvuse kohta, mida skanner hiljem kasutab.

Kuid selleks tuleb testimootor seadistada selle teabe genereerimiseks. Antud projektis on testimootor Jest. Ja selle seaded asuvad faili vastavas jaotises. package.json.

Lisame need seaded:

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

See tähendab, et määrame katvuse arvutamise vajaduse lipu ja allika (koos eranditega), mille alusel see moodustatakse.

Nüüd käivitame testi:

yarn test

Nähes järgmist:

Põhjus on selles, et komponentide koodis endas ei ole. Lahendame selle.

HelloWorld.vue:

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

Seda on katvuse arvutamiseks piisavalt.

Pärast testi uuesti käivitamist veendume selles:

Ekraanil peaksime nägema katvuse teavet ning projekti kaustas luuakse kaust coverage teavet testide katvuse kohta universaalses formaadis LCOV (LTP GCOV laienemine).

Gcov — vabalt levitatav utiliit koodikattuvuse uurimiseks. Gcov genereerib täpse täitmisarvu iga programmi operaatori jaoks ja võimaldab lisada annotatsioone lähtekoodile. Gcov tuleb standardse utiliidina GCC paketi koosseisus.
Lcov — gcov'i graafiline liides. See kogub mitme lähtekoodi failiga gcov'i faile ja loob komplekti HTML-lehti koodi ja katvuse andmetega. Samuti genereeritakse navigeerimise lihtsustamiseks lehed. Lcov toetab ridade, funktsioonide ja harude katvust.

Pärast testide sooritamist asub katvuse teave coverage/lcov.info.
Me peame ütlema Sonar’lt, kust seda võtta. Seetõttu lisame järgmised read tema konfiguratsioonifaili. Kuid on üks asi: projektid võivad olla mitmekeelsed, st kaustas src asuvad lähtekoodid mitmete programmeerimiskeelte jaoks ja kuuluvus ühte või teise ning vastavalt sellele kasutatakse teatud pluginaid, määratakse nende laiendi järgi. Ja katvuse info võib eri programmeerimiskeelte jaoks olla erinevates kohtades, seega on igale programmeerimiskeele jaoks oma seadistusosa. Meie projekt kasutab Serveri seadistamiseks kasutame, seega vajame seadistusosa just selle jaoks:

sonar-project.properties:

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

Kõik on valmis skanneri esimeseks käivitamiseks. Tahan märkida, et projekt Sonar’s luuakse automaatselt esmakordsel skanneri sisselülitamisel selle projekti jaoks. Järgnevatel kordadel akumuleerub teave, et näha projekti parameetrite muutumise dünaamikat ajas.

Seega kasutame varasemalt loodud käsklust package.json:

yarn run sonar

Märkus: võib kasutada ka parameetrit -X kuna see võimaldab detailsemat logimist.

Kui skanner käivitati esmakordselt, allalaaditakse esmalt skanneri binaarfail. Seejärel käivitatakse see ja alustatakse serveri skaneerimist Sonar’lt installitud pluginate tuvastamiseks, arvutades seeläbi toetatavad programmeerimiskeeled. Samuti laaditakse alla mitmed muud erinevad parameetrid selle tööks: kvaliteediprofiilid, aktiivsed reeglid, mõõdikute hoidla, serveri reeglid.

Märkus: millele me käesolevas artiklis süvitsi ei lasku, kuid alati on võimalik pöörduda ametlike allikate poole.

Seejärel algab kausta analüüsimine src kõikide toetatud programmeerimiskeelte lähtefailide olemasolu tuvastamine (kui ei ole selgelt määratletud mõnda konkreetset), millele järgneb nende indekseerimine.

Edasi liikudes on mitmed erinevad analüüsid, millele me selles artiklis tähelepanu ei pööra (nt sellised nagu: lintimine, koodeksemääramise määramine jne).

Skaneri töö lõpus toimub kogu kogutud teabe agregatsioon, arhiveerimine ja selle saatmine serverisse.

Pärast seda saame juba vaadata, mida veebiliideses saavutatud on:

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

Käime asju läbi. Vaatame projekti lähemalt, klõpsame katvuse väärtusel ja "sukeldume" detailreportsse failide kohta:

Siin näeme lisaks põhifailile, millega tegeleme, HelloWorld.vue, on olemas ka fail main.ts, mis rikkus kogu katvuse pildi. Aga kuidas see juhtus, me olime selle katvusest välja jätnud. Jah, kõik on õige, kuid see oli tasemel Jest, kuid skanner on selle indekseerinud, mistõttu see sattus tema arvutustesse.

Parandame selle:

sonar-project.properties:

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

Tahaksin teha täpsustuse: peale nende kaustade, mis on selles parameetris määratud, lisatakse ka kõik kaustad, mis on loetletud parameetris sonar.test.inclusions.

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

Arutame järgmise punkti – Quality profiles. Rääkisin varem toe pakkumisest Sonarmitme programmikeele samal ajal. Just seda me nüüd näeme. Kuid me teame, et meie projekt on kirjutatud TS, seega miks koormata skannerit liigsete manipuleerimiste ja kontrollidega. Analüüsimiseks määrame keele, lisades veel ühe parameetri konfiguratsioonifaili Sonar:

sonar-project.properties:

...
sonar.language=ts
...

Käivitame skanneri uuesti ja vaatame tulemust:

Katvus on täielikult kadunud.

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

See tähendab, et meie projekti faile ei ole lihtsalt indekseeritud.

Olukord on järgmine: ametlikult on tugi VueJs plugines olemas, mis vastutab , Typescripti eest, kuid selle tuge ei ole plugines Javascript.

, mille kohta on ametlik ticet bug-trackeris avatud. Infode saatmiseks katvuse kohta kasutatakse ametlikku klienti jaoks TSSiin on mõned vastused ühelt SonarQube arendajalt, kes kinnitab seda fakti. Sonar:

Aga meil on ju kõik töötanud, ütlete Te. Jah, see on tõsi, proovime natuke

„häkkerida“ Kui on tugi.
.vue -failidele-faile SonarKui nii on, proovime talle öelda, et ta vaataks neid kui Serveri seadistamiseks kasutame.

Lisame parameetri:

sonar-project.properties:

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

Käivitame skänneri:

Ja voilà, kõik on tagasi oma kohtades, ja ainult ühe profiiliga Serveri seadistamiseks kasutame. See tähendab, et probleem toetuse osas on lahendatud VueJs+TS jaoks SonarQube.

Proovime minna edasi ja parandada katte teavet.

Mida oleme senini teinud:

oleme projekti lisanud Sonar-skänneri;
seadsime Jest katte teabe genereerimiseks;
konfigureerisime Sonar-skänneri;
lahendasime toetuse probleemi -failidele-failide + Serveri seadistamiseks kasutame.

Lisaks kattele testide kaudu on veel teisi huvitavaid kasulikke koodikvaliteedi kriteeriume, näiteks koodi dubleerimine ja ridade arv (osaleb koodi keerukuse koefitsientide arvutuses) projekti.

Praeguses plugina versioonis ei hakka TS (Infode saatmiseks katvuse kohta kasutatakse ametlikku klienti) töötama CPD (Copy Paste Detector) ja koodiridade arvutamine -failidele-failide.

Koodi dubleerimise sünteetilise olukorra loomiseks dubleerime lihtsalt komponendi faili teise nimega, lisame koodi main.ts tühifunktsiooni ja dubleerime selle teise nimega. Et kontrollida dubleerimist nii -failidele, kui ka .ts -failides.

main.ts:

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

Selleks on vajalik ajutiselt kommenteerida konfiguratsiooni rida:

sonar-project.properties:

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

Käivitame skänneri koos testimisega:

yarn test && yarn run sonar

Meie katet langetatakse, kuid praegu pole see meid huvitav.

Koodiridade dubleerimise vaates näeme:

Kontrollimiseks kasutame CPD-utiliiti – jscpd:

npx jscpd src

Koodiridade jaoks:

Võib-olla lahendatakse see tulevaste pluginate versioonides SonarJS(TS). Tahan märkida, et nad hakkavad järk-järgult need kaks plugina kokku sulandama , Typescripti eest, mis, arvan, on õige.

Nüüd sooviks uurida katte teabe parandamise varianti.

Kuni näeme katte protsenti kogu projektis ja konkreetselt failides. Kuid on võimalus seda näitajat laiendada teabega testide arvu üksuse-katsete kohta projektis ning ka failide lõikes.

On olemas teek, mis oskab Jest-aruannet konverteerida formaati Sonar:
üldised testandmed — https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Paigaldame selle teegi 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 juurde fail test-report.xml.

Kasutame seda konfiguratsioonis Sonar:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ja käivitame skänneri uuesti:

yarn run sonar

Vaadake, mis on muutunud liideses Sonar:

Ja mitte midagi ei muutunud. Asi on selles, et Sonar ei käsitle Jest-raportis kirjeldatud faile kui testifailideks. üksuse-testimiseks. Selle olukorra parandamiseks kasutame konfiguratsiooniparametrit Sonar sonar.tests, kus määrame selgelt testide kaustad (meil on praegu üks):

sonar-project.properties:

...
sonar.tests=src/components/__tests__
...

Käivitame skanneri uuesti:

yarn run sonar

Vaadake, mis on muutunud liideses:

Nüüd näeme meie üksuse-testide arvu ja klõpsates saame vaadata selle arvu jaotust projekti failides:

Kokkuvõte

Nii et oleme uurinud pideva analüüsi tööriista. SonarQubeOleme selle edukalt integreerinud projekti, mis on kirjutatud VueJs+TS. Lahendasime mõned ühilduvusprobleemid. Parandasime testide katvuse näitaja informatiivsust. Antud artiklis käsitlesime ainult ühte koodi kvaliteedi kriteeriumi (võib-olla ühte peamist), kuid SonarQube toetab ka teisi kvaliteedi kriteeriume, sealhulgas turvakatsete tegemist. Kuid mitte kõik need võimalused ei ole täielikult juurdepääsetavad community-versioonis. Üks huvitav ja kasulik funktsioon on integreerimised SonarQube erinevate koodihalduse süsteemidega, näiteks sellistega nagu GitLab ja BitBucket. Et vältida merge pull(merge) request'ipeamise reposi harusse, kui katvuse tase langeb. Kuid see on juba täiesti teise artikli teema.

PS: Kõik, mida artiklis kookirutena kirjeldati, on saadaval minu forgis. Kasutate platvormi SonarQube:.

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