Aktivno koristimo platformu u svom radu soundQube za održavanje kvaliteta koda na visokom nivou. Prilikom integracije jednog od projekata upisanih u VueJs+Typescript, pojavili su se problemi. Stoga bih vam želio detaljnije reći kako smo ih uspjeli riješiti.

U ovom članku ćemo govoriti, kao što sam gore napisao, o platformi SonarQube. Malo teorije - šta je to uopšte, za one koji prvi put čuju za to:

soundQube (bivši Sonar) je platforma otvorenog koda za kontinuiranu inspekciju i mjerenje kvaliteta koda.
Podržava analizu koda i detekciju grešaka prema pravilima programskih standarda MISRA C, MISRA C++, MITER/CWE i CERT Standarda Secure Coding Standards. Takođe može prepoznati greške sa OWASP Top 10 i CWE/SANS Top 25 lista programskih grešaka.
Unatoč činjenici da platforma koristi različite gotove alate, SonarQube svodi rezultate na jednu kontrolnu ploču, čuvajući povijest pokretanja i na taj način vam omogućavajući da vidite opći trend promjena u kvaliteti softvera tokom razvoja.

Više detalja možete pronaći na službena web stranica

Podržan je veliki broj programskih jezika. Sudeći po informacijama sa gornjeg linka, radi se o više od 25 jezika. Da biste podržali određeni jezik, morate instalirati odgovarajući dodatak. Verzija zajednice uključuje dodatak za rad sa njim Javascript (uključujući pisaće), iako wiki kaže suprotno. Iza Javascript plugin answers SonarJS, za Typescript SonarTS respektivno.

Zvanični klijent se koristi za slanje informacija o pokrivenosti sonarqube-skener, koji, koristeći postavke iz config-file, šalje ove podatke na server soundQube za dalju konsolidaciju i agregaciju.

Do Javascript je npm omotač. Dakle, počnimo s implementacijom korak po korak soundQube в Vue-koristenje projekta Strojopis.

Za postavljanje servera soundQube hajde da iskoristimo docker-compose.

sonar.yaml:

version: '1'
    services:
        simplesample-sonar:
            image: sonarqube:lts
            ports:
                - 9001:9000
                - 9092:9092
            network_mode: bridge

Pokreni:

docker-compose -f sonar.yml up

Posle ovoga soundQube bit će dostupan na: http://localhost:9001 .

U njemu još nema projekata i to je pošteno. Ispravićemo ovu situaciju. Uzeo sam službeni primjer projekta VueJS+TS+Jest. Savijajmo ga prema sebi:

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

Prvo moramo instalirati klijenta soundQube, koji se zove sonar-skenerza npm postoji omot:

yarn add sonarqube-scanner

I odmah dodajte naredbu u skripte raditi s tim.

package.json:

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

Zatim, da bi skener radio, morate postaviti postavke projekta u posebnu datoteku. Počnimo s osnovama.

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'A;
• sonar.projectKey – jedinstveni identifikator projekta na serveru Sonar'A;
• sonar.projectName – njegov naziv, može se promeniti u bilo kom trenutku, pošto je projekat identifikovan po projectKey;
• sonar.sources – folder sa izvorima, obično ovo src, ali može biti bilo šta. Ova mapa je postavljena u odnosu na osnovnu mapu, koja je mapa iz koje se pokreće skener;
• sonar.testovi – parametar koji ide u tandemu sa prethodnim. Ovo je fascikla u kojoj se nalaze testovi. U ovom projektu ne postoji takva fascikla, a test se nalazi pored komponente koja se testira u fascikli 'test', pa ćemo ga za sada zanemariti i koristiti sljedeći parametar;
• sonar.test.inclusions – putanja za testove pomoću maske, može biti nekoliko elemenata navedenih odvojenih zarezima;
• sonar.sourceEncoding – kodiranje izvornih datoteka.

Za prvo pokretanje skenera sve je spremno, osim glavne prethodne radnje: pokretanja samog test motora, kako bi mogao generirati informacije o pokrivenosti koje će skener naknadno koristiti.

Ali da biste to učinili, morate konfigurirati test motor da generiše ove informacije. U ovom projektu, test motor je ima. A njegove postavke su u odgovarajućem dijelu datoteke package.json.

Dodajmo ove postavke:

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

Odnosno, postavljamo samu zastavicu za potrebe izračuna pokrivenosti i izvor (uz izuzetke) na osnovu kojeg će se formirati.

Sada pokrenimo test:

yarn test

Vidjet ćemo sljedeće:

Razlog je taj što u samoj komponenti nema koda. Hajde da popravimo ovo.

HelloWorld.vue:

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

Ovo će biti dovoljno za izračunavanje pokrivenosti.

Nakon ponovnog pokretanja testa, uvjerit ćemo se u ovo:

Na ekranu bismo trebali vidjeti informacije o pokrivenosti, a folder će biti kreiran u folderu projekta pokrivenost sa informacijama o pokrivenosti testom u univerzalnom formatu LCOV (LTP GCOV ekstenzija).

Gcov je slobodno distribuirani uslužni program za ispitivanje pokrivenosti koda. Gcov generiše tačan broj izvršenja za svaku naredbu u programu i omogućava vam da dodate napomene izvornom kodu. Gcov dolazi kao standardni uslužni program kao dio GCC paketa.
Lcov - grafički interfejs za gcov. Sastavlja gcov datoteke za više izvornih datoteka i proizvodi skup HTML stranica s kodom i informacijama o pokrivenosti. Stranice se također generiraju kako bi se olakšala navigacija. Lcov podržava pokrivanje nizova, funkcija i grana.

Nakon što su testovi završeni, informacije o pokrivenosti će se nalaziti u coverage/lcov.info.
Moramo reći Sonar'Odakle ga mogu nabaviti? Stoga, dodajmo sljedeće redove njegovoj konfiguracijskoj datoteci. Ali postoji jedna stvar: projekti mogu biti višejezični, odnosno u folderu src postoje izvorni kodovi za nekoliko programskih jezika i pripadnost jednom ili drugom, a zauzvrat, upotreba jednog ili drugog dodatka određena je njegovom ekstenzijom. I informacije o pokrivenosti mogu se pohraniti na različitim mjestima za različite programske jezike, tako da svaki jezik ima svoj odjeljak za ovo podešavanje. Naš projekat koristi Strojopis, tako da nam je potreban odjeljak postavki samo za to:

sonar-project.properties:

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

Sve je spremno za prvo pokretanje skenera. Napominjem da je projekat Sonar'e se kreira automatski kada prvi put pokrenete skener za dati projekat. U narednim vremenima, informacije će se akumulirati kako bi se sagledala dinamika promjena parametara projekta tokom vremena.

Dakle, koristimo naredbu kreiranu ranije u package.json:

yarn run sonar 

Napomena: možete koristiti i parametar -X za detaljnije evidentiranje.

Ako je skener pokrenut prvi put, tada će se prvo preuzeti binarni zapis samog skenera. Nakon toga se pokreće i počinje skeniranje servera Sonar'a za instalirane dodatke, čime se izračunava podržani jezik. Učitavaju se i razni drugi parametri za njegov rad: kvalitetni profili, aktivna pravila, spremište metrika, pravila servera.

Napomena: Nećemo se detaljnije zadržavati na njima u okviru ovog članka, ali uvijek se možete obratiti službenim izvorima.

Zatim počinje analiza foldera src za dostupnost izvornih datoteka za sve (ako određeni nije eksplicitno naveden) podržane jezike, uz njihovo naknadno indeksiranje.

Slijede razne druge analize na koje se u ovom članku ne fokusiramo (na primjer, kao što su linting, detekcija dupliciranja koda, itd.).

Na samom kraju rada skenera, sve prikupljene informacije se agregiraju, arhiviraju i šalju na server.

Nakon ovoga, već možemo vidjeti šta se dogodilo u web interfejsu:

Kao što vidimo, nešto je uspjelo, pa čak i pokazuje neku vrstu pokrivenosti, ali ne poklapa se s našim ima-izveštaj.

Hajde da to shvatimo. Pogledajmo projekat detaljnije, kliknite na vrijednost pokrivenosti i “upadnite” u detaljan izvještaj o fajlu:

Ovdje vidimo, pored glavnog, pregledani fajl HelloWorld.vue, postoji i fajl main.ts, što kvari cjelokupnu sliku pokrivenosti. Ali kako to da smo ga isključili iz obračuna pokrivenosti. Da, sve je tačno, ali bilo je na nivou ima, ali ga je skener indeksirao, pa je završio u njegovim proračunima.

Popravimo ovo:

sonar-project.properties:

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

Želio bih da napravim pojašnjenje: pored foldera koji su navedeni u ovom parametru, dodaju se i svi folderi navedeni u parametru sonar.test.inclusions.

Nakon pokretanja skenera, vidimo ispravne informacije:

Pogledajmo sledeću tačku - Profili kvaliteta. Gore sam govorio o podršci Sonarna nekoliko jezika istovremeno. To je upravo ono što vidimo. Ali znamo da je naš projekat upisan TS, pa zašto naprezati skener nepotrebnim manipulacijama i provjerama. Postavićemo jezik za analizu dodavanjem još jednog parametra u konfiguracioni fajl Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Pokrenimo ponovo skener i vidimo rezultat:

Pokrivenost je potpuno nestala.

Ako pogledamo dnevnik skenera, možemo vidjeti sljedeći red:

To jest, naši projektni fajlovi jednostavno nisu bili indeksirani.

Situacija je sljedeća: zvanično podržana VueJs je u dodatku SonarJSko je odgovoran Javascript.

Ali ova podrška nije u dodatku SonarTS do TS, o čemu je otvorena službena karta u bug trackeru Sonar'A:

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

Evo nekoliko odgovora jednog od predstavnika SonarQube programera koji potvrđuju ovu činjenicu.

Ali sve nam je uspelo, prigovorite. Da jeste, hajde da probamo malo "hack".
Ako postoji podrška .vue-fajlovi Sonar'Oh, hajde da mu onda pokušamo reći da ih smatra Strojopis.

Dodajmo parametar:

sonar-project.properties:

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

Pokrenimo skener:

I, voila, sve se vratilo u normalu, i to samo sa jednim profilom za Strojopis. Odnosno, uspjeli smo riješiti problem u podršci VueJs+TS do soundQube.

Pokušajmo ići dalje i malo poboljšati informacije o pokrivenosti.

Šta smo do sada uradili:

• dodano projektu Sonar-skener;
• postaviti ima generirati informacije o pokrivenosti;
• konfigurisano Sonar-skener;
• riješio problem podrške .vue-fajlovi + Strojopis.

Osim pokrivenosti testom, postoje i drugi zanimljivi korisni kriteriji za kvalitet koda, na primjer, dupliciranje koda i broj linija (uključenih u izračunavanje koeficijenata povezanih sa složenošću koda) projekta.

U trenutnoj implementaciji dodatka za rad sa TS (SonarTS) neće raditi CPD (Copy Paste Detector) i brojanje redova koda .vue-fajlovi.

Da biste stvorili sintetičku situaciju dupliciranja koda, jednostavno duplicirajte datoteku komponente s drugim imenom i dodajte je u kod main.ts lažnu funkciju i duplicirati je s drugim imenom. Za provjeru dupliranja kao u .vue, i .ts -fajlovi.

main.ts:

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

Da biste to učinili, morate privremeno komentirati konfiguracijsku liniju:

sonar-project.properties:

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

Ponovo pokrenimo skener zajedno sa testiranjem:

yarn test && yarn run sonar

Naravno, pokrivenost će nam pasti, ali sada nas to ne zanima.

Što se tiče dupliranja linija koda, vidjet ćemo:

Za provjeru ćemo koristiti CPD-korisnost – jscpd:

npx jscpd src

Za linije koda:

Možda će to biti riješeno u budućim verzijama dodataka SonarJS(TS). Želio bih napomenuti da postepeno počinju spajati ova dva dodatka u jedan SonarJS, što mislim da je tačno.

Sada sam htio razmotriti opciju poboljšanja informacija o pokrivenosti.

Do sada možemo vidjeti pokrivenost testom u procentima, za cijeli projekat, a posebno za fajlove. Ali moguće je proširiti ovaj indikator informacijama o količini jedinica-testove za projekat, kao iu kontekstu fajlova.

Postoji biblioteka koja može ima-pretvoriti izvještaj u format za Sonar'A:
generičke testne podatke - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Hajde da instaliramo ovu biblioteku u naš projekat:

yarn add jest-sonar-reporter

I dodajte ga u konfiguraciju ima:

package.json:

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

Sada pokrenimo test:

yarn test

Nakon toga će se kreirati datoteka u korijenu projekta test-report.xml.

Koristimo ga u konfiguraciji Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

I ponovo pokrenite skener:

yarn run sonar

Hajde da vidimo šta se promenilo u interfejsu Sonar'A:

I ništa se nije promijenilo. Činjenica je da Sonar datoteke opisane u izvještaju Jest ne smatra datotekama jedinica-testovi. Kako bismo ispravili ovu situaciju, koristimo parametar konfiguracije Sonar sonar.testovi, u kojem ćemo eksplicitno naznačiti foldere sa testovima (za sada imamo samo jedan):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Ponovo pokrenimo skener:

yarn run sonar

Hajde da vidimo šta se promenilo u interfejsu:

Sada smo vidjeli broj naših jedinica-testove i, nakon neuspjelog klika unutra, možemo vidjeti distribuciju ovog broja među projektnim datotekama:

zaključak

Dakle, pogledali smo alat za kontinuiranu analizu soundQube. Uspješno smo integrirali u nju projekt napisan VueJs+TS. Ispravljeni su neki problemi s kompatibilnošću. Povećali smo informativni sadržaj indikatora pokrivenosti testom. U ovom članku smo ispitali samo jedan od kriterija kvalitete koda (možda jedan od glavnih), ali soundQube podržava druge kriterije kvalitete, uključujući testiranje sigurnosti. Ali nisu sve ove funkcije u potpunosti dostupne zajednica-verzije. Jedna od zanimljivih i korisnih karakteristika je integracija soundQube sa različitim sistemima za upravljanje repozitorijumom koda, kao što su GitLab i BitBucket. Spriječiti Merge pull(spajanje) zahtjev'a u glavnu granu spremišta kada je pokrivenost smanjena. Ali ovo je priča za potpuno drugačiji članak.

PS: Sve što je opisano u članku u obliku koda dostupno je u moja viljuška.

Samo registrovani korisnici mogu učestvovati u anketi. Prijavite semolim.

Da li koristite SonarQube platformu:

• 26,3%Da5

• 15,8%No3

• 15,8%Čuo sam za ovu platformu i želim je koristiti3

• 10,5%Čuo sam za ovu platformu i ne želim je koristiti2

• 0,0%Koristim drugu platformu0

• 31,6%Prvi put čujem za nju6

Glasalo je 19 korisnika. 3 korisnika je bila uzdržana.

izvor: www.habr.com