V svojem delu aktivno uporabljamo platformo SonarQube za vzdrževanje visokega standarda kakovosti kode. Pri integraciji enega od projektov, napisanega na VueJs+Typescript, so nastale težave. Zato bi rad podrobneje opisal, kako smo jih rešili.
V tem članku bo govora, kot sem že omenil, o platformi SonarQube. Malo teorije — kaj to sploh je, za tiste, ki jo slišijo prvič:
SonarQube (prej Sonar) — platforma z odprto kodo za neprekinjeno analizo in merjenje kakovosti kode.
Podpira analizo kode in iskanje napak v skladu s pravili standardov programiranja MISRA C, MISRA C++, MITRE/CWE in CERT Secure Coding Standards. Prav tako zna prepoznati napake iz seznamov OWASP Top-10 in CWE/SANS Top-25 napak programiranja.
Čeprav platforma uporablja različna orodja, SonarQube združuje rezultate v enotno informacijsko ploščo, prazno zgodovino ponovitev ter omogoča vpogled v splošno tendenco sprememb kakovosti programske opreme med razvojem.
Več informacij lahko najdete na
Podpora za številne programske jezike. Sodeč po informacijah v zgornji povezavi — to je več kot 25 jezikov. Za podporo določenemu jeziku je potrebno namestiti ustrezno vtičnico. V community različico je vključen vtičnik za delo z Javascript (vključno z typescript), čeprav v wiki piše nasprotno. Za Javascript je odgovoren vtičnik SonarJS, za Typescript SonarTS ustrezno.
Za pošiljanje informacij o pokritosti se uporablja uradni odjemalec sonarqube-scanner, ki s pomočjo nastavitev iz config-datoteke pošilja te podatke na strežnik SonarQube za nadaljnje konsolidiranje in agregacijo.
Za Javascript je . Torej, začnimo s postopno implementacijo SonarQube u Vue-projekta, ki uporablja Typescript.
Za postavitev strežnika SonarQube uporabimo docker-compose.
sonar.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridgeZagon:
docker-compose -f sonar.yml upPo tem SonarQube bo dostopen na naslovu – .
Trenutno ni projektov in to je upravičeno. To situacijo bomo odpravili. Kot osnovo sem vzel uradni primer projekta za VueJS+TS+Jest. Klonirajmo ga k sebi:
git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitNajprej moramo namestiti odjemalca, SonarQubeki se imenuje sonar-scanner, za npm ima ovitek:
yarn add sonarqube-scannerIn takoj dodamo ukaz v scripts za njegovu upotrebu.
package.json:
{
…
scripts: {
...
"sonar": "sonar-scanner"
...
},
…
}Zatim, za rad skenera, potrebno je postaviti podešavanja projekta u posebnoj datoteci. Počećemo s osnovnim.
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 – naziv, koji se može menjati u bilo trenutku, jer se identifikacija projekta vrši preko projectKey;
- sonar.sources – folder sa izvorima, obično je to src, ali može biti bilo šta. Ovaj folder se postavlja u odnosu na korenski folder, odakle je pokrenut skener;
- sonar.tests – parametar koji ide u paru sa prethodnim. To je folder u kojem se nalaze testovi. U ovom projektu, takav folder ne postoji, a test se nalazi pored testiranog komponente u folderu ‘test‘, pa ćemo ga za sada ignorisati i koristiti sledeći parametar;
- sonar.test.inclusions – putanja za testove koristeći masku, može biti više elemenata koji su navedeni zarezom;
- sonar.sourceEncoding – kodiranje za izvorne datoteke.
Za prvo pokretanje skenera sve je spremno, osim osnovne prethodne radnje: pokretanje samog testnog okvira, za generisanje informacija o pokrivenosti, koje će kasnije koristiti skener.
Ali za to je potrebno podesiti testni okvir za generisanje tih informacija. U ovom projektu testni okvir — to je Jest. A njegova podešavanja se nalaze u odgovarajućem delu datoteke package.json.
Dodajmo ova podešavanja:
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],Odnosno, postavljamo oznaku za potrebu izračunavanja pokrivenosti i izvor (zajedno sa izuzecima), na osnovu kojih će se formirati.
Sada pokrenimo test:
yarn testVidećemo sledeće:
Razlog je u tome što u samom komponentu, zapravo, nema koda. Ispravićemo to.
HelloWorld.vue:
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...To će biti dovoljno za izračunavanje pokrivenosti.
Nakon ponovnog pokretanja testa uverićemo se u to:
Na ekranu bismo trebali videti informacije o pokrivenosti, a u folderu projekta biće kreiran folder coverage sa informacijama o pokrivenosti testovima u univerzalnom formatu LCOV (LTP GCOV ekstenzija).
Gcov — odprtokodna utilita za raziskovanje pokritosti kode. Gcov generira natančno število izvedb za vsak operator v programu in omogoča dodajanje opomb k izvorni kodi. Gcov je na voljo kot standardna utilita v okviru paketa GCC.
Lcov — grafični vmesnik za gcov. Zbira datoteke gcov za več datotek z izvorno kodo in ustvarja komplet HTML strani s kodo in informacijami o pokritosti. Generirajo se tudi strani za lažje navigacijo. Lcov podpira pokritje vrstic, funkcij in razvejanji.
Po izvedbi testov bodo informacije o pokritosti na voljo v coverage/lcov.info.
Moramo povedati Sonarod kje jo dobiti. Zato bomo dodali naslednje vrstice v njegovo konfiguracijsko datoteko. Vendar pa je tu en vidik: projekti so lahko večjezični, torej v mapi src se nahajajo izvorne datoteke za več programskih jezikov, pripadnost določenemu jeziku pa je odvisna od njegovega razširjenja. In informacije o pokritosti so lahko shranjene na različnih mestih za različne programske jezike, zato ima vsak programski jezik svoj razdelek za nastavitev tega. Naš projekt uporablja Typescript, zato potrebujemo razdelek nastavitev prav zanj:
sonar-project.properties:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.infoVse je pripravljeno za prvo zagon skenerja. Rad bi opozoril, da se projekt v Sonarustvari samodejno ob prvem zagonu skenerja za ta projekt. Pri naslednjih zagonih se informacije že akumulirajo, da lahko vidimo dinamiko sprememb parametrov projekta v času.
Torej, uporabimo ukaz, ki smo ga ustvarili prej v package.json:
yarn run sonar Opomba: lahko pa uporabite tudi parameter -X za podrobnejše beleženje.
Če je bil zagon skenerja prvič, bo najprej prenesel binarno datoteko samega skenerja. Po tem se zažene in začne skenirati strežnik Sonarza nameščene dodatke, s čimer izračuna podprte programske jezike. Prav tako se naložijo drugi različni parametri za njegovo delovanje: quality profiles, active rules, metrics repository, server rules.
Opomba: podrobneje se na njih ne bomo ustavljali v okviru tega članka, vendar se lahko vedno obrnete na uradne vire.
Nato se začne analiza mape src o prisotnosti izvornih datotek za vse (razen če je izrecno navedeno kakšno specifično) podpirane jezike, s poznejšo indeksacijo.
Nato sledijo druge različne analize, na katerih se v tem članku ne osredotočamo (na primer: linting, določanje podvajanja kode itd.).
Na koncu dela skenerja pride do agregacije vseh zbranih informacij, arhiviranja in pošiljanja le-te na strežnik.
Po tem si lahko ogledamo, kaj smo dobili v spletnem vmesniku:
Kot vidimo, je nekaj uspelo in celo kaže neko pokritost, vendar ta ne ustreza našemu Jest-poročilu.
Poglejmo podrobneje. Oglejmo si projekt bolj podrobno, kliknimo na vrednost pokritosti in "povlečemo" se v podroben pregled po datotekah:
Tukaj vidimo poleg glavne raziskovane datoteke HelloWorld.vue, prisotno tudi datoteko main.ts, ki pokvari celotno sliko pokritosti. Kako to, da smo jo izključili iz izračuna pokritosti? Da, vse je pravilno, vendar je bilo to na ravni Jest, vendar jo je skener indeksiral, zato je prišla v njegove izračune.
Poglejmo, kako to popraviti:
sonar-project.properties:
...
sonar.exclusions=src/main.ts
...Želim poudariti: poleg tistih map, ki so določene v tem parametru, so dodane tudi vse mape, navedene v parametru sonar.test.inclusions.
Po zagonu skenerja že vidimo pravilne informacije:
Razpravljamo o naslednjem vprašanju – Quality profiles. Omenil sem zgoraj, da podpira Sonarveč programskih jezikov hkrati. To prav zdaj opazujemo. Vemo, da je naš projekt napisan v TS, zato zakaj obremenjevati skener z nepotrebnimi manipulacijami in preverjanji. Jezik za analizo bomo določili z dodajanjem še enega parametra v konfiguracijsko datoteko Sonar’a:
sonar-project.properties:
...
sonar.language=ts
...Ponovno zagnamo skener in si ogledamo rezultat:
Pokritost je izginila.
Če pogledamo v log skenerja, lahko vidimo naslednjo vrstico:
To pomeni, da naše datoteke preprosto niso bile indeksirane.
Situacija je naslednja: uradna podpora za VueJs je v vtičniku, ki odgovarja za SonarJS, toda te podpore ni v vtičniku Javascript.
, o čemer je odprt uradni ticket v bug trackerju. SonarTS za TSTukaj so nekateri odgovori enega od predstavnikov s strani razvijalcev SonarQube, ki potrjujejo ta podatek. Sonar’a:
Ampak vse je delovalo, se boste pritožili. Da, to drži, poglejmo, kako malo
“hacked” Če je podpora za.
.vue -datoteke. SonarEntão vamos tentar dizer a ele para considerá-los como Typescript.
Vamos adicionar um parâmetro:
sonar-project.properties:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...Vamos executar o scanner:
E, voilà, tudo voltou ao normal, e com um perfil apenas para Typescript. Ou seja, conseguimos resolver o problema de suporte VueJs+TS za SonarQube.
Vamos tentar ir além e melhorar um pouco as informações sobre a cobertura.
O que fizemos até agora:
- adicionamos ao projeto Sonar-o scanner;
- configuramos Jest para gerar informações sobre a cobertura;
- configuramos Sonar-o scanner;
- resolvemos o problema de suporte -datoteke-arquivos + Typescript.
Além da cobertura por testes, há outros critérios interessantes de qualidade de código, como a duplicação de código e o número de linhas (que participa no cálculo dos parâmetros relacionados à complexidade do código) do projeto.
Na implementação atual do plugin para trabalhar com TS (SonarTS) não funcionará CPD (Copy Paste Detector) e contagem de linhas de código -datoteke-arquivos.
Para criar uma situação sintética de duplicação de código, basta duplicar o arquivo do componente com um nome diferente e também adicionar ao código main.ts uma função-vazia e duplicá-la com um nome diferente. Para verificar a duplicação, como em -datoteke, kot tudi v .ts -arquivos.
main.ts:
...
fuction name(params:string): void {
console.log(params);
}
...Para isso, é necessário comentar temporariamente a linha de configuração:
sonar-project.properties:
...
sonar.exclusions=src/main.ts
...Vamos reiniciar o scanner juntamente com os testes:
yarn test && yarn run sonarClaro que nossa cobertura irá cair, mas neste momento isso não nos interessa.
Na perspectiva de duplicação de linhas de código, veremos:
Para verificação, utilizaremos CPD-a ferramenta – jscpd:
npx jscpd src
Para as linhas de código:
Talvez isso seja resolvido em futuras versões dos plugins SonarJS(TS). Quero notar que eles estão gradualmente começando a fundir esses dois plugins em um só SonarJS, o que, eu acho, é correto.
Agora gostaríamos de considerar uma opção para melhorar as informações sobre a cobertura.
Enquanto vemos a cobertura dos testes em termos percentuais, por todo o projeto e por arquivos em particular. Mas há a possibilidade de expandir esse indicador com informações sobre a quantidade de unit-testes no projeto, bem como por arquivos.
Há uma biblioteca que pode Jest-converter o relatório para o formato de Sonar’a:
generic test data — .
Vamos instalar essa biblioteca em nosso projeto:
yarn add jest-sonar-reporterE a adicionaremos à configuração Jest:
package.json:
…
"testResultsProcessor": "jest-sonar-reporter"
…Agora vamos executar o teste:
yarn testApós o qual um arquivo será criado na raiz do projeto test-report.xml.
Vamos usá-lo na configuração Sonar’a:
sonar-project.properties:
…
sonar.testExecutionReportPaths=test-report.xml
…E reiniciaremos o scanner:
yarn run sonarPoglejmo, kaj se je spremenilo v vmesniku Sonar’a:
In nič se ni spremenilo. Gre za to, da Sonar ne obravnava datotek, opisanih v Jest poročilu, kot datotek unit-testov. Da bi to situacijo odpravili, uporabimo parameter konfiguracije Sonar sonar.tests, v katerem jasno navedemo mape s testi (zaenkrat imamo le eno):
sonar-project.properties:
…
sonar.tests=src/components/__tests__
…Ponovno zaženimo skener:
yarn run sonarPoglejmo, kaj se je spremenilo v vmesniku:
Zdaj smo videli število naših unit-testov in, ko kliknemo vanje, lahko vidimo porazdelitev tega števila po datotekah projekta:
Zaključek
Torej, obravnavali smo orodje za kontinuirano analizo SonarQube. Uspešno smo ga integrirali s projektom, napisanim v VueJs+TS. Rešili smo nekatere težave s skladnostjo. Povišali smo informativnost kazalnika o pokritosti s testi. V tem članku smo obravnavali le eno od meril kakovosti kode (morda eno najbolj osnovnih), vendar SonarQube podpira tudi druga merila kakovosti, vključno s testiranjem na varnost. Vendar niso vse te možnosti v celoti na voljo v community-različici. Ena zanimivih in uporabnih možnosti so integracije SonarQube z različnimi sistemi za upravljanje repozitorijev kode, na primer GitLab in BitBucket. Da preprečimo merge pull(merge) requestv glavno vejo repozitorija pri poslabšanju pokritosti. Ampak to je že zgodba za povsem drug članek.
PS: Vse, kar je opisano v članku v obliki kode, je na voljo v .
Samo registrovani korisnici mogu učestvovati u anketi. , molim vas.
Ali uporabljate platformo SonarQube:
26,3%Da5
15,8%Ne3
15,8%Slišal sem za to platformo in jo želim uporabiti3
10,5%Slišal sem za to platformo in je nočem uporabiti2
0,0%Uporabljam drugo platformo0
31,6%Prvič slišim zanj6
Glasovalo je 19 uporabnikov. 3 uporabniki so se vzdržali.
Izvor: habr.com
