Platformu aktivno koristimo u svom radu soundQube za održavanje kvalitete koda na visokoj razini. Prilikom integracije jednog od projekata napisanih u VueJs+Typescript, pojavili su se problemi. Stoga vam želim detaljnije reći kako smo ih uspjeli riješiti.

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

soundQube (prijašnji Sonar) je platforma otvorenog koda za kontinuiranu inspekciju i mjerenje kvalitete koda.
Podržava analizu koda i otkrivanje pogrešaka prema pravilima MISRA C, MISRA C++, MITER/CWE i CERT Secure Coding Standards. Također može prepoznati pogreške s popisa OWASP Top 10 i CWE/SANS Top 25 programskih pogrešaka.
Unatoč činjenici da platforma koristi različite gotove alate, SonarQube svodi rezultate na jednu nadzornu ploču, čuvajući povijest pokretanja i time vam omogućujući da vidite opći trend promjena u kvaliteti softvera tijekom razvoja.

Više detalja možete pronaći na službene web stranice

Podržan je veliki broj programskih jezika. Sudeći prema informacijama s gornjeg linka, radi se o više od 25 jezika. Za podršku određenog jezika morate instalirati odgovarajući dodatak. Verzija zajednice uključuje dodatak za rad Loše (uključujući tipsko pismo), iako wiki kaže suprotno. Iza Loše plugin odgovori SonarJS, za Typescript SonarTS respektivno.

Službeni klijent se koristi za slanje informacija o pokrivenosti sonarqube-skener, koji, koristeći postavke iz config-file, šalje ove podatke poslužitelju soundQube za daljnju konsolidaciju i agregaciju.

za Loše tu je npm omot. Dakle, počnimo implementaciju korak po korak soundQube в Vue- korištenje projekta kucana kopija.

Za postavljanje poslužitelja soundQube iskoristimo doker-nove poruke.

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

Poslije toga soundQube bit će dostupan na: http://localhost:9001 .

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

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

Prvo moramo instalirati klijenta soundQubekoja se zove sonar-skenerza NPM postoji omot:

yarn add sonarqube-scanner

I odmah dodajte naredbu za skripta raditi s njim.

package.json:

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

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

sonar-projekt.svojstva:

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 poslužitelju Sonar'A;
sonar.projectName – naziv, može se promijeniti u bilo kojem trenutku, budući da je projekt identificiran s projectKey;
sonar.izvori – mapa s izvorima, obično ovo src, ali može biti bilo što. Ova je mapa postavljena u odnosu na korijensku mapu, koja je mapa iz koje se pokreće skener;
sonar.ispitivanja – parametar koji ide u tandemu s prethodnim. Ovo je mapa u kojoj se nalaze testovi. U ovom projektu ne postoji takva mapa, a test se nalazi pored komponente koja se testira u mapi 'test', pa ćemo ga za sada zanemariti i koristiti sljedeći parametar;
sonar.test.uključenja – put za testove pomoću maske, može biti više elemenata navedenih odvojenih zarezima;
sonar.sourceEncoding – kodiranje za izvorne datoteke.

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

Ali da biste to učinili, morate konfigurirati testnu mašinu za generiranje ovih informacija. U ovom projektu testni motor je ima. A njegove postavke nalaze se u odgovarajućem odjeljku datoteke paket.json.

Dodajmo ove postavke:

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

Odnosno, postavljamo samu zastavu za potrebe izračuna pokrivenosti i izvora (zajedno s iznimkama) na temelju kojih će se formirati.

Sada pokrenimo test:

yarn test

Vidjet ćemo sljedeće:

Razlog je što u samoj komponenti nema koda. Popravimo ovo.

HelloWorld.vue:

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

To će biti dovoljno za izračun pokrivenosti.

Nakon ponovnog pokretanja testa, uvjerit ćemo se u sljedeće:

Na ekranu bismo trebali vidjeti informacije o pokrivenosti, a mapa će se stvoriti u mapi projekta pokrivenost s informacijama o pokrivenosti testom u univerzalnom formatu LCOV (LTP GCOV proširenje).

Gcov je slobodno distribuirani uslužni program za ispitivanje pokrivenosti koda. Gcov generira točan broj izvršavanja za svaku naredbu u programu i omogućuje vam dodavanje komentara izvornom kodu. Gcov dolazi kao standardni uslužni program kao dio GCC paketa.
Lcov - grafičko sučelje 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 grananja.

Nakon završetka testova informacije o pokrivenosti bit će smještene u pokrivenost/lcov.info.
Moramo reći Sonar'Gdje to mogu nabaviti? Stoga, dodajmo sljedeće retke njegovoj konfiguracijskoj datoteci. Ali postoji jedna točka: projekti mogu biti višejezični, odnosno u mapi src postoje izvorni kodovi za nekoliko programskih jezika i pripadnost jednom ili drugom, a zauzvrat, upotreba jednog ili drugog dodatka određena je njegovim proširenjem. A informacije o pokrivenosti mogu se pohraniti na različitim mjestima za različite programske jezike, tako da svaki jezik ima svoj odjeljak za ovo postavljanje. Naš projekt koristi kucana kopija, pa nam treba odjeljak postavki samo za to:

sonar-projekt.svojstva:

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

Sve je spremno za prvo pokretanje skenera. Napominjem da je projekt Sonar'e se stvara automatski kada prvi put pokrenete skener za određeni projekt. U narednim vremenima informacije će se prikupljati kako bi se vidjela dinamika promjena parametara projekta tijekom vremena.

Dakle, upotrijebimo naredbu stvorenu ranije u paket.json:

yarn run sonar

Napomena: također možete koristiti parametar -X za detaljniju evidenciju.

Ako je skener pokrenut prvi put, najprije će se preuzeti binarna datoteka samog skenera. Nakon toga se pokreće i počinje skenirati poslužitelj Sonar'a za instalirane dodatke, čime se izračunava podržani jezik. Učitavaju se i razni drugi parametri za njegov rad: profili kvalitete, aktivna pravila, repozitorij metrike, pravila poslužitelja.

Napomena: Nećemo se detaljno baviti njima u okviru ovog članka, ali uvijek se možete obratiti službenim izvorima.

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

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

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

Nakon ovoga već možemo vidjeti što se dogodilo na web sučelju:

Kao što vidimo, nešto je radilo, pa čak i pokazuje neku vrstu pokrivenosti, ali ne odgovara našem ima-izvješće.

Hajdemo shvatiti. Pogledajmo projekt detaljnije, kliknemo na vrijednost pokrivenosti i "propadnemo" u detaljno izvješće datoteke:

Ovdje vidimo, uz glavnu, ispitanu datoteku HelloWorld.vue, postoji i datoteka glavni.ts, što kvari cijelu sliku pokrivenosti. Ali kako to da smo ga isključili iz obračuna pokrića. Da, sve je točno, ali bilo je na nivou ima, no skener ga je indeksirao, pa je završio u njegovim izračunima.

Popravimo ovo:

sonar-projekt.svojstva:

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

Želio bih napraviti pojašnjenje: uz mape koje su navedene u ovom parametru, dodaju se i sve mape navedene u parametru sonar.test.uključenja.

Nakon pokretanja skenera vidimo točne informacije:

Pogledajmo sljedeću točku - Profili kvalitete. Gore sam govorio o podršci Sonarna nekoliko jezika istovremeno. To je upravo ono što vidimo. Ali znamo da je naš projekt zapisan TS, pa zašto opterećivati skener nepotrebnim manipulacijama i provjerama. Postavit ćemo jezik za analizu dodavanjem još jednog parametra u konfiguracijsku datoteku Sonar'A:

sonar-projekt.svojstva:

...
sonar.language=ts
...

Pokrenimo ponovno skener i vidimo rezultat:

Pokrivenost je potpuno nestala.

Ako pogledamo zapisnik skenera, možemo vidjeti sljedeći redak:

To jest, naše projektne datoteke jednostavno nisu bile indeksirane.

Situacija je sljedeća: službeno podržan VueJs nalazi se u dodatku SonarJStko je odgovoran za Loše.

Ali ova podrška nije u dodatku SonarTS za TS, o čemu je otvoren službeni tiket u bug trackeru Sonar'A:

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

Ali kod nas je sve radilo, prigovarate. Jeste, hajde da probamo malo “hack”.
Ako postoji podrška .vue-dosjei Sonar'oh, pokušajmo mu onda reći da ih smatra takvima kucana kopija.

Dodajmo parametar:

sonar-projekt.svojstva:

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

Pokrenimo skener:

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

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

Što smo do sada učinili:

dodano projektu Sonar-skener;
postaviti ima za generiranje informacija o pokrivenosti;
konfiguriran Sonar-skener;
riješio problem podrške .vue-datoteke + kucana kopija.

Osim pokrivenosti testom, postoje i drugi zanimljivi korisni kriteriji za kvalitetu koda, na primjer, dupliciranje koda i broj redaka (uključenih u izračun koeficijenata koji se odnose na složenost koda) projekta.

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

Da biste stvorili sintetičku situaciju dupliciranja koda, jednostavno duplicirajte komponentnu datoteku s drugim nazivom i također je dodajte kodu glavni.ts lažnu funkciju i duplicirajte je s drugim imenom. Za provjeru dupliciranja kao u .vue, i u .ts -dosjei.

main.ts:

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

Da biste to učinili, trebate privremeno komentirati konfiguracijski redak:

sonar-projekt.svojstva:

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

Ponovno pokrenimo skener zajedno s testiranjem:

yarn test && yarn run sonar

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

Što se tiče dupliciranja redaka koda, vidjet ćemo:

Za provjeru ćemo koristiti CPD-korisnost - jscpd:

npx jscpd src

Za retke koda:

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

Sada sam želio razmotriti mogućnost poboljšanja informacija o pokrivenosti.

Za sada možemo vidjeti pokrivenost testa u postocima za cijeli projekt, a posebno za datoteke. Ali moguće je proširiti ovaj pokazatelj podacima o količini jedinica-testovi za projekt, kao iu kontekstu datoteka.

Postoji knjižnica koja može ima-pretvoriti izvješće u format za Sonar'A:
generički testni podaci - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Instalirajmo ovu biblioteku u naš projekt:

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.

Iskoristimo ga u konfiguraciji Sonar'A:

sonar-projekt.svojstva:

…
sonar.testExecutionReportPaths=test-report.xml
…

I ponovno pokrenite skener:

yarn run sonar

Pogledajmo što se promijenilo u sučelju Sonar'A:

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

sonar-projekt.svojstva:

…
sonar.tests=src/components/__tests__
…

Ponovno pokrenimo skener:

yarn run sonar

Pogledajmo što se promijenilo u sučelju:

Sada smo vidjeli broj naših jedinica-testovi i, nakon neuspjeha klikom unutra, možemo vidjeti distribuciju ovog broja među datotekama projekta:

Zaključak

Dakle, pogledali smo alat za kontinuiranu analizu soundQube. U njega smo uspješno integrirali projekt napisan u VueJs+TS. Riješeni su neki problemi s kompatibilnošću. Povećali smo informativni sadržaj pokazatelja pokrivenosti testom. U ovom smo članku ispitali samo jedan od kriterija kvalitete koda (možda jedan od glavnih), ali soundQube podržava druge kriterije kvalitete, uključujući ispitivanje sigurnosti. Ali nisu sve ove značajke u potpunosti dostupne u zajednica-verzije. Jedna od zanimljivih i korisnih značajki je integracija soundQube s raznim sustavima za upravljanje repozitorijom koda, kao što su GitLab i BitBucket. Spriječiti spajanje zahtjev za povlačenjem (spajanjem).'a u glavnu granu repozitorija kada se pokrivenost smanji. Ali ovo je priča za sasvim drugi članak.

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

U anketi mogu sudjelovati samo registrirani korisnici. Prijaviti se, molim.

Koristite li SonarQube platformu:

26,3%Da5
15,8%br.3
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

Glasovalo je 19 korisnika. Suzdržana su bila 3 korisnika.

Izvor: www.habr.com

VueJS+TS integracija projekta sa SonarQube

Zaključak

Koristite li SonarQube platformu:

Dodajte komentar Odustani odgovor