Vi använder plattformen aktivt i vårt arbete soundQube att upprätthålla kodkvaliteten på en hög nivå. När man integrerar ett av projekten som skrivits in VueJs+Typescript, problem uppstod. Därför skulle jag vilja berätta mer i detalj hur vi lyckades lösa dem.

I den här artikeln kommer vi att prata, som jag skrev ovan, om SonarQube-plattformen. En liten teori - vad det är i allmänhet, för de som hör om det för första gången:

soundQube (före detta Ekolod) är en öppen källkodsplattform för kontinuerlig inspektion och kodkvalitetsmätning.
Stöder kodanalys och feldetektering enligt reglerna i programmeringsstandarderna MISRA C, MISRA C++, MITER/CWE och CERT Secure Coding Standards. Den kan också känna igen fel från OWASP Top 10 och CWE/SANS Top 25 programmeringsfellistor.
Trots att plattformen använder olika färdiga verktyg, reducerar SonarQube resultaten till en enda instrumentpanel, håller en historik över körningar och låter dig därigenom se den allmänna trenden med förändringar i mjukvarukvalitet under utveckling.

Mer information finns på officiella hemsida

Ett stort antal programmeringsspråk stöds. Av informationen från länken ovan att döma är dessa fler än 25 språk. För att stödja ett specifikt språk måste du installera lämplig plugin. Communityversionen innehåller ett plugin för att arbeta med Javascript (inklusive typerсript), även om wikin säger motsatsen. Bakom Javascript plugin svar SonarJS, för Typescript SonarTS respektive.

Den officiella klienten används för att skicka täckningsinformation sonarqube-skanner, som med hjälp av inställningarna från config-fil, skickar denna data till servern soundQube för ytterligare konsolidering och aggregering.

för Javascript finns npm omslag. Så låt oss börja steg-för-steg implementering soundQube в Vue-projekt med hjälp av skrivmaskin.

För att distribuera servern soundQube låt oss dra fördel docker-compose.

sonar.yaml:

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

Lansera:

docker-compose -f sonar.yml up

Därefter soundQube kommer att finnas på: http://localhost:9001 .

Det finns inga projekt i det ännu och det är rättvist. Vi kommer att rätta till denna situation. Jag tog det officiella exempelprojektet för VueJS+TS+Jest. Låt oss böja det mot oss själva:

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

Först måste vi installera klienten soundQube, som kallas ekolodsskannerför npm det finns ett omslag:

yarn add sonarqube-scanner

Och lägg omedelbart till kommandot skript att arbeta med det.

package.json:

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

Därefter, för att skannern ska fungera, måste du ställa in projektinställningarna i en speciell fil. Låt oss börja med grunderna.

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 - adress Ekolod'A;
sonar.projectKey – unik projektidentifierare på servern Ekolod'A;
sonar.projectName – dess namn, det kan ändras när som helst, eftersom projektet identifieras av projektnyckel;
ekolod.källor – mapp med källor, vanligtvis detta src, men kan vara vad som helst. Denna mapp är inställd i förhållande till rotmappen, som är den mapp från vilken skannern startas;
ekolod.test – en parameter som går parallellt med den föregående. Det här är mappen där testerna finns. I det här projektet finns det ingen sådan mapp, och testet finns bredvid komponenten som testas i mappen 'test', så vi ignorerar det för tillfället och använder nästa parameter;
sonar.test.inneslutningar – sökväg för tester med en mask, det kan finnas flera element listade separerade med kommatecken;
sonar.sourceEncoding – kodning för källfiler.

För den första lanseringen av skannern är allt klart, förutom den huvudsakliga föregående åtgärden: starta själva testmotorn, så att den kan generera information om täckningen, som skannern senare kommer att använda.

Men för att göra detta måste du konfigurera testmotorn för att generera denna information. I detta projekt är testmotorn det finns. Och dess inställningar finns i motsvarande del av filen package.json.

Låt oss lägga till dessa inställningar:

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

Det vill säga, vi sätter själva flaggan för behovet av att beräkna täckning och källan (tillsammans med undantag) på grundval av vilken den kommer att bildas.

Låt oss nu köra testet:

yarn test

Vi kommer att se följande:

Anledningen är att det inte finns någon kod i själva komponenten. Låt oss fixa det här.

HelloWorld.vue:

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

Detta kommer att räcka för att beräkna täckningen.

Efter att ha startat om testet kommer vi att se till detta:

På skärmen bör vi se information om täckningen, och en mapp kommer att skapas i projektmappen täckning med testtäckningsinformation i ett universellt format LCOV (LTP GCOV-tillägg).

Gcov är ett fritt distribuerat verktyg för att undersöka kodtäckning. Gcov genererar det exakta antalet körningar för varje sats i ett program och låter dig lägga till kommentarer till källkoden. Gcov kommer som ett standardverktyg som en del av GCC-paketet.
Lcov - grafiskt gränssnitt för gcov. Den sätter ihop gcov-filer för flera källfiler och producerar en uppsättning HTML-sidor med kod och täckningsinformation. Sidor genereras också för att underlätta navigeringen. Lcov stöder täckning av strängar, funktioner och grenar.

Efter att testerna är slutförda kommer täckningsinformation att finnas i coverage/lcov.info.
Vi måste säga Ekolod'Var kan jag få det ifrån? Låt oss därför lägga till följande rader till dess konfigurationsfil. Men det finns en poäng: projekt kan vara flerspråkiga, det vill säga i mappen src det finns källkoder för flera programmeringsspråk och anknytning till ett eller annat, och i sin tur bestäms användningen av ett eller annat plugin av dess förlängning. Och täckningsinformation kan lagras på olika platser för olika programmeringsspråk, så varje språk har sin egen sektion för att ställa in detta. Vårt projekt använder skrivmaskin, så vi behöver en inställningssektion bara för det:

sonar-project.properties:

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

Allt är klart för första lanseringen av skannern. Jag skulle vilja notera att projektet är Ekolod'e skapas automatiskt första gången du kör skannern för ett givet projekt. I efterföljande tider kommer information att samlas för att se dynamiken i förändringar i projektparametrar över tid.

Så låt oss använda kommandot som skapades tidigare package.json:

yarn run sonar

Notera: Du kan också använda parametern -X för mer detaljerad loggning.

Om skannern startades för första gången kommer binären för själva skannern att laddas ner först. Efter det startar den och börjar skanna servern Ekolod'a för installerade plugins, och beräknar därigenom språk som stöds. Olika andra parametrar för dess funktion laddas också: kvalitetsprofiler, aktiva regler, statistikförråd, serverregler.

Notera: Vi kommer inte att uppehålla oss i detalj inom ramen för den här artikeln, men du kan alltid kontakta officiella källor.

Därefter börjar mappanalysen src för tillgängligheten av källfiler för alla (om ett specifikt sådant inte är uttryckligen specificerat) som stöds språk, med efterföljande indexering.

Därefter kommer olika andra analyser, som vi inte fokuserar på i den här artikeln (till exempel linting, upptäckt av kodduplicering etc.).

I slutet av skannerns arbete samlas all insamlad information, arkiveras och skickas till servern.

Efter detta kan vi redan se vad som hände i webbgränssnittet:

Som vi kan se fungerade något, och visar till och med någon form av täckning, men det stämmer inte överens med vår det finns-Rapportera.

Låt oss ta reda på det. Låt oss titta på projektet mer i detalj, klicka på täckningsvärdet och "falla igenom" i en detaljerad filrapport:

Här ser vi, förutom den huvudsakliga, granskade filen HelloWorld.vue, det finns också en fil main.ts, vilket förstör hela bilden av bevakningen. Men hur kommer det sig att vi uteslutit det från beräkningen av täckningen. Ja, allt stämmer, men det var på nivån det finns, men skannern indexerade det, så det hamnade i sina beräkningar.

Låt oss fixa detta:

sonar-project.properties:

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

Jag skulle vilja göra ett förtydligande: förutom de mappar som anges i den här parametern läggs även alla mappar som anges i parametern till sonar.test.inneslutningar.

Efter att ha startat skannern ser vi rätt information:

Låt oss titta på nästa punkt - Kvalitetsprofiler. Jag pratade ovan om stöd Ekolodpå flera språk samtidigt. Det är precis vad vi ser. Men vi vet att vårt projekt är inskrivet TS, så varför anstränga skannern med onödiga manipulationer och kontroller. Vi kommer att ställa in språket för analys genom att lägga till ytterligare en parameter till konfigurationsfilen Ekolod'A:

sonar-project.properties:

...
sonar.language=ts
...

Låt oss köra skannern igen och se resultatet:

Täckningen var helt borta.

Om vi tittar på skannerloggen kan vi se följande rad:

Det vill säga, våra projektfiler var helt enkelt inte indexerade.

Situationen är som följer: officiellt stöd VueJs finns i plugin-programmet SonarJSvem är ansvarig för Javascript.

Men detta stöd finns inte i plugin SonarTS för TS, om vilken en officiell biljett öppnades i buggspåraren Ekolod'A:

Här är några svar från en av representanterna från SonarQube-utvecklarna som bekräftar detta faktum.

Men allt fungerade för oss, invänder du. Ja det är det, låt oss prova lite "hacka".
Om det finns stöd .vue-filer Ekolod'åh, låt oss då försöka säga åt honom att betrakta dem som skrivmaskin.

Låt oss lägga till en parameter:

sonar-project.properties:

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

Låt oss starta skannern:

Och voila, allt är tillbaka till det normala, och med en profil bara för skrivmaskin. Det vill säga vi lyckades lösa problemet i supporten VueJs+TS för soundQube.

Låt oss försöka gå längre och förbättra täckningsinformationen lite.

Vad vi har gjort hittills:

lagts till i projektet Ekolod-scanner;
uppstart det finns att generera täckningsinformation;
konfigurerad Ekolod-scanner;
löste supportproblemet .vue-filer + skrivmaskin.

Förutom testtäckning finns det andra intressanta användbara kriterier för kodkvalitet, till exempel kodduplicering och antalet rader (inblandade i beräkningen av koefficienter relaterade till kodkomplexitet) i projektet.

I den nuvarande implementeringen av plugin för att arbeta med TS (SonarTS) kommer inte att fungera CPD (Copy Paste Detector) och räkna rader med kod .vue-filer.

För att skapa en syntetisk situation med kodduplicering, duplicera helt enkelt komponentfilen med ett annat namn och lägger även till den i koden main.ts en dummyfunktion och duplicera den med ett annat namn. För att kontrollera om duplicering som i .vue, och i .ts -filer.

main.ts:

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

För att göra detta måste du tillfälligt kommentera konfigurationsraden:

sonar-project.properties:

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

Låt oss starta om skannern tillsammans med testning:

yarn test && yarn run sonar

Naturligtvis kommer vår bevakning att falla, men nu är vi inte intresserade av det.

När det gäller att duplicera kodrader kommer vi att se:

För att kontrollera kommer vi att använda CPD-verktyg - jscpd:

npx jscpd src

För kodrader:

Kanske kommer detta att lösas i framtida pluginversioner SonarJS(TS). Jag skulle vilja notera att de gradvis börjar slå samman dessa två plugins till ett SonarJS, vilket jag tycker är korrekt.

Nu ville jag överväga alternativet att förbättra täckningsinformationen.

Hittills kan vi se testtäckning i procent för hela projektet, och för filer i synnerhet. Men det är möjligt att utöka denna indikator med information om kvantiteten enhet-tester för projektet, såväl som i samband med filer.

Det finns ett bibliotek som kan det finns-konvertera rapporten till format för Ekolod'A:
generiska testdata - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Låt oss installera det här biblioteket i vårt projekt:

yarn add jest-sonar-reporter

Och lägg till det i konfigurationen det finns:

package.json:

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

Låt oss nu köra testet:

yarn test

Därefter skapas en fil i projektets rot test-report.xml.

Låt oss använda det i konfigurationen Ekolod'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Och starta om skannern:

yarn run sonar

Låt oss se vad som har förändrats i gränssnittet Ekolod'A:

Och ingenting har förändrats. Faktum är att Sonar inte betraktar filerna som beskrivs i Jest-rapporten som filer enhet-test. För att rätta till denna situation använder vi konfigurationsparametern Ekolod ekolod.test, där vi uttryckligen kommer att ange mapparna med tester (vi har bara en för tillfället):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Låt oss starta om skannern:

yarn run sonar

Låt oss se vad som har förändrats i gränssnittet:

Nu har vi sett numret på våra enhet-tester och, efter att ha misslyckats genom att klicka inuti, kan vi se fördelningen av detta nummer bland projektfilerna:

Slutsats

Så vi tittade på ett verktyg för kontinuerlig analys soundQube. Vi har framgångsrikt integrerat ett projekt skrivet i det VueJs+TS. Fixade några kompatibilitetsproblem. Vi ökade informationsinnehållet i testtäckningsindikatorn. I den här artikeln undersökte vi bara ett av kodkvalitetskriterierna (kanske ett av de viktigaste), men soundQube stöder andra kvalitetskriterier, inklusive säkerhetstester. Men inte alla dessa funktioner är fullt tillgängliga i samfundet-versioner. En av de intressanta och användbara funktionerna är integration soundQube med olika hanteringssystem för kodlager, såsom GitLab och BitBucket. Att förebygga merge pull(merge) begäran'a till förvarets huvudgren när täckningen är försämrad. Men det här är en historia för en helt annan artikel.

PS: Allt som beskrivs i artikeln i form av kod finns tillgängligt i min gaffel.

Endast registrerade användare kan delta i undersökningen. Logga in, Snälla du.