A munkánk során aktívan használjuk a platformot SonarQube a kódminőség magas színvonalának fenntartásához. Egyik projektünk integrálása során, amelyet VueJs+Typescript, problémák merültek fel. Ezért szeretném részletesebben bemutatni, hogyan sikerült ezeket megoldani.
Ebben a cikkben, ahogy említettem, a SonarQube platformról lesz szó. Egy kis elmélet – mi is ez valójában, azok számára, akik először hallanak róla:
SonarQube (korábban Sonar) – egy nyílt forráskódú platform a folyamatos elemzés (angolul continuous inspection) és a kódminőség mérésére.
Támogatja a kód elemzését és a hibák keresését a MISRA C, MISRA C++, MITRE/CWE és CERT Secure Coding Standards programozási szabványainak előírásainak megfelelően. Ezen kívül képes az OWASP Top-10 és a CWE/SANS Top-25 programozási hibák listájából hibákat felderíteni.
Annak ellenére, hogy a platform különféle kész eszközöket használ, a SonarQube az eredményeket egyetlen információs panelre (angolul dashboard) összevonja, nyomon követve a futások történetét, ezáltal lehetővé téve, hogy lássuk a szoftver minőségének fejlődési tendenciáit a fejlesztés során.
További részletek elérhetők itt:
Számos programozási nyelvet támogat. Az előző linken található információk szerint több mint 25 nyelvet. Egy adott nyelv támogatásához a megfelelő plugint kell telepíteni. A community verzióba beletartozik a plugin a Javascript (a typesсriptet is beleértve), bár a wikiben éppen az ellenkezője szerepel. A Javascript felelőse a plugin SonarJS, a Typescripté pedig SonarTS. vagy.
A lefedettségi adatok küldéséhez hivatalos klienst használunk sonarqube-scanner, amely a config-fájl beállításait használva küldi el ezeket az adatokat a szerverre SonarQube a további konszolidáció és aggregálás érdekében.
A Javascript tartalmaz . Tehát kezdjük el lépésről lépésre bevezetni a SonarQube be. Vue-projektet, amely Typescript.
felhasználása. SonarQube A szerver telepítéséhez docker-compose.
a:
sonar.yamlIndítás:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridgedocker-compose -f sonar.yml up SonarQube Ezután elérhető lesz a cím alatt – .
Jelenleg nincsenek projektek, ami jogos. Ezen a helyzeten javítani fogunk. Alapként egy hivatalos példa projektet vettem a VueJS+TS+Jest. Klónozzuk le magunknak:
git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitElőször telepítenünk kell a klienst, amelynek neve SonarQubesonar-scanner van egy wrapper-e:problémát jelent npm yarn add sonarqube-scanner
És azonnal hozzáadunk egy parancsot ahasználatához. scripts package.json:
csomag.json:
{
…
scripts: {
...
"sonar": "sonar-scanner"
...
},
…
}Ezután a szkenner működéséhez meg kell adni a projektbeállításokat egy speciális fájlban. Kezdjük az alapokkal.
sonar-project.properties:
sonar.host.url=http://localhost:9001
sonar.projectKey=test-project-vuejs-ts
sonar.projectName=Tesztalkalmazás (VueJS+TS)
sonar.sources=src
# sonar.tests=
sonar.test.inclusions=src/**/*tests*/*
sonar.sourceEncoding=UTF-8- sonar.host.url – cím Sonar’ja;
- sonar.projectKey – a projekt egyedi azonosítója a szerveren Sonar’ja;
- sonar.projectName – a neve, amely bármikor megváltoztatható, hiszen a projekt azonosítása a projectKey;
- sonar.sources – a források mappája, általában ez src, de lehet bármilyen. Ez a mappa a gyökérmappához képest van megadva, ami a szkenner által indított mappa;
- sonar.tests – paraméter, amely a korábbiakhoz tartozik. Ez az a mappa, ahol a tesztek találhatóak. Ebben a projektben nincs ilyen mappa, a teszt a tesztelendő komponens mellett található a ‘teszt‘ mappában, ezért most figyelmen kívül hagyjuk, és a következő paramétert használjuk;
- sonar.test.inclusions – az útvonal a tesztekhez maszk használatával, több elem is felsorolható, amelyet vesszővel elválasztunk;
- sonar.sourceEncoding – a forrásfájlok kódolása.
A szkenner első indításához minden készen áll, kivéve a fő előkészítő lépést: a tesztmotor indítása, amely információt generál a lefedettségről, amelyet ezután a szkenner fog használni.
De ehhez be kell állítani a tesztmotort, hogy generálja ezt az információt. Ebben a projektben a tesztmotor a Jest. A beállítása a fájl megfelelő szakaszában található. package.json.
Adjuk hozzá ezeket a beállításokat:
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],Tehát megadjuk magát a fedettség számításának szükségességét és a forrást (kivétellel együtt), amelyek alapján ez létrejön.
Most futtassuk a tesztet:
yarn testA következőket fogjuk látni:
Az oka az, hogy magában a komponensben nincsen kód. Javítsuk ki ezt.
HelloWorld.vue:
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...Ez elegendő lesz a lefedettség számításához.
A teszt újraindítása után győződjünk meg erről:
A képernyőn látnunk kell a lefedettségről szóló információt, a projekt mappájában pedig létrejön egy mappa coverage a tesztelések lefedettségi információival univerzális formátumban LCOV (LTP GCOV kiterjesztés).
Gcov — nyílt forráskódú segédprogram a kódlefedettség vizsgálatára. A Gcov pontosan megmutatja, hogy hány alkalommal hajtódik végre minden egyes utasítás a programban, és lehetővé teszi, hogy annotációkat adjunk a forráskódhoz. A Gcov a GCC csomag standard segédprogramjaként érhető el.
Lcov — grafikus felület a gcov számára. Összegyűjti a gcov fájlokat több forrásfájlból, és HTML-oldalcsomagot hoz létre a kód és a lefedettségi információk mellett. Továbbá navigációs oldalak is generálódnak. Az Lcov támogatja a sorok, funkciók és ágazások lefedettségét.
A tesztek végrehajtása után a lefedettségi információ a következő helyen található coverage/lcov.info.
Meg kell mondanunk Sonarhonnan szerezzük be. Ezért adjuk hozzá a következő sorokat a konfigurációs fájljához. Van egy apró megjegyzés: a projektek többnyelvűek lehetnek, ami azt jelenti, hogy a mappában src különböző programozási nyelvek forrásai találhatók, amelyekhez a megfelelő plugin használata a kiterjesztése alapján dől el. A lefedettségi információkat ezért különböző helyeken tárolhatják különböző programozási nyelvek számára, ezért minden programozási nyelv számára van egy beállítási rész. A projektünk Typescripthasználja, így szükség van a kifejezetten ehhez szükséges beállítási részre:
sonar-project.properties:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.infoMinden készen áll az első szkenner indítására. Szeretném megjegyezni, hogy a projekt a Sonarautomatikusan létrejön az adott projekt szkenner első indításakor. A következő alkalommal az információk már felhalmozódnak, hogy láthassuk a projekt paramétereinek időbeli változásait.
Tehát használjuk az előzőleg létrehozott parancsot a package.json:
yarn run sonar Megjegyzés: a részletesebb naplózás érdekében a -X paraméter is használható.
Ha a szkenner indítása először történik, először a szkenner bináris állományát töltjük le. Ezt követően elindul és elkezdi átvizsgálni a Sonarszervert a telepített pluginek felderítése érdekében, így számítja ki a támogatott programozási nyelveket is. Ezenkívül más különböző paramétereket is betölt a működéséhez: quality profiles, active rules, metrics repository, server rules.
Megjegyzés: részletesebben ezekre nem fogunk kitérni a jelen cikk keretein belül, de mindig lehet a hivatalos forrásokhoz fordulni.
Ezután megkezdődik a mappa elemzése. src a támogatott programozási nyelvekhez tartozó forrásfájlok elérhetőségét vizsgálva (ha nem határoztunk meg kifejezetten egy konkrétat), majd a fájlok indexelését végrehajtva.
Ezután további különböző elemzések következnek, amelyekre a cikkünkben nem térünk ki (például: lintelés, a kódduplikációk meghatározása stb.).
A szkenner munkájának végén a begyűjtött információk összesítése, archiválása és a szerverre való küldés történik.
Ezek után már megnézhetjük, hogy mi jött ki a webes felületen:
Látható, hogy valami kialakult, és még fedettséget is mutat, de ez nem felel meg a Jest-jelentésünknek.
Nézzük meg részletesebben. Vessünk egy pillantást a projektre, kattintsunk a fedettség értékére, és "merüljünk" el a fájlok részletes jelentésében:
Itt az alapvető, vizsgált fájl mellett látjuk HelloWorld.vue, itt van egy main.ts, amely tönkreteszi az egész fedettségi képet. De hogy lehet ez, hiszen kizártuk őt a fedettségi számításból. Igen, ez igaz, de ez a szinten történt, Jest, de a szkenner indexálta, így bekerült a számításaikba.
Javítsuk ki ezt:
sonar-project.properties:
...
sonar.exclusions=src/main.ts
...Szeretném megjegyezni: a megadott mappákon kívül minden olyan mappa is hozzáadódik, amely a paraméterben van megadva, sonar.test.inclusions.
A szkenner futtatása után már helyes információt látunk:
Nézzük meg a következő szempontot – Quality profiles. Korábban beszéltem róla, hogy a támogatás Sonartöbb programozási nyelv egyidejű alkalmazásához szükséges. Ezt pontosan most látjuk. De tudjuk, hogy a projektünk TSnyelven készült, ezért minek kínzani a szkennert felesleges manipulációkkal és ellenőrzésekkel. A nyelvet az elemzéshez úgy határozzuk meg, hogy egy új paramétert adunk hozzá a konfigurációs fájlhoz, Sonar:
sonar-project.properties:
...
sonar.language=ts
...Újra futtassuk a szkennert és nézzük meg az eredményt:
A fedettség teljesen eltűnt.
Ha megnézzük a szkenner naplóját, láthatjuk a következő sort:
Ez azt jelenti, hogy a projektünk fájljai egyszerűen nem voltak indexálva.
A helyzet a következő: hivatalosan a támogatás VueJs támogatott a pluginban, SonarJS, amely a Javascript.
-ért felelős, de ez a támogatás nem található meg a SonarTS. a TS-ban, amiről hivatalos tiket nyitottak a hibakövetőben. Sonar:
Itt van néhány válasz a SonarQube fejlesztői részéről, amely megerősíti ezt a tényt.
De mindenképpen minden jól működött, válaszolhat neki. Igen, így van, próbáljuk meg egy kicsit „hackelni”.
Ha van támogatás a .vue-fájlokhoz SonarHogyha így van, próbáljuk meg mondani neki, hogy tekintse őket úgy, mint Typescript.
Adjuk hozzá a paramétert:
sonar-project.properties:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...Futtassuk a szkennerünket:
És voilà, minden visszatért a régi kerékvágásba, és csak egy profilt használunk Typescript. Tehát sikerült megoldani a támogatási problémát VueJs+TS a SonarQube.
Próbáljuk tovább lépni és egy kicsit javítani az információt a lefedettségről.
Mit csináltunk eddig:
- hoztunk a projekthez Sonar-szkennert;
- beállítottuk Jest a lefedettséggel kapcsolatos információk generálásához;
- konfiguráltuk Sonar-szkennert;
- meglévő támogatási problémát .vue-fájlok + Typescript.
A tesztekkel való lefedettségen kívül más érdekes minőségi kritériumok is vannak, például a kódduplikáció és a sorok száma (részt vesz a kód komplexitásával kapcsolatos mutatók számításában) a projektben.
A plugin jelenlegi megvalósításában TS (SonarTS.) nem fog működni CPD (Másolat Másoló Detektor) és a kód sorok számának .vue-fájlok.
Egy szintetikus helyzet létrehozásához a kódduplikációval kapcsolatban, egyszerűen dublírozzuk a komponenst egy másik névvel, és a kódba is hozzáadunk main.ts egy üres funkciót, és dublírozzuk egy másik névvel. Azonban az itteni duplikációt ellenőrizzük .vue-ban, valamint a .ts A cím és a többi hálózati beállítás ezekhez a interfészekhez
main.ts:
...
funkció név(paraméter:string): void {
console.log(paraméter);
}
...Ehhez ideiglenesen ki kell kommentálni a konfigurációs sort:
sonar-project.properties:
...
sonar.exclusions=src/main.ts
...Újraindítjuk a szkennert a teszteléssel együtt:
yarn test && yarn run sonarTermészetesen a lefedettség csökkenni fog, de most ez nem érdekel minket.
A kód sorainak duplikálása szempontjából láthatjuk:
Ellenőrzéshez használjuk a CPD-eszközt – jscpd:
npx jscpd src
A kód sorokra:
Lehetséges, hogy ez a plugin jövőbeli verzióiban megoldódik SonarJS(TS). Szeretném megjegyezni, hogy fokozatosan kezdik egyesíteni ezt a két plugint egybe, SonarJSami szerintem helyes.
Most szeretném megvitatni a lefedettségi információk javításának lehetőségét.
Jelenleg a teszteket százalékos arányban látjuk az egész projektben, és a fájlok szerint. De van lehetőség arra, hogy ezt a mutatót kiegészítsük a fájlt, amely a következő típusú:-tesztek számával a projekten belül, valamint a fájlok szempontjából.
Van egy könyvtárunk, amely tudja Jest-a jelentést konvertálni olyan formátumba, mint Sonar:
generic test data — .
Telepítsük ezt a könyvtárat a projektünkbe:
yarn add jest-sonar-reporterÉs adjuk hozzá a konfigurációhoz Jest:
csomag.json:
…
"testResultsProcessor": "jest-sonar-reporter"
…Most futtassuk a tesztet:
yarn testEzt követően a projekt gyökerében létrejön a fájl test-report.xml.
Hivatkozzunk rá a konfigurációban Sonar:
sonar-project.properties:
…
sonar.testExecutionReportPaths=test-report.xml
…És indítsuk újra a szkennert:
yarn run sonarNézzük meg, mi változott a felületen Sonar:
És semmi sem változott. A helyzet az, hogy a Sonar nem tekinti a Jest-jelentésben leírt fájlokat fájloknak fájlt, amely a következő típusú:-tesztekhez. Annak érdekében, hogy megoldjuk ezt a helyzetet, felhasználjuk a konfigurációs paramétert Sonar sonar.tests, amelyben egyértelműen megadjuk a tesztelési mappákat (jelenleg egy van):
sonar-project.properties:
…
sonar.tests=src/components/__tests__
…Indítsuk újra a szkenNELŐT:
yarn run sonarNézzük meg, mi változott a felületen:
Most láthatjuk a tesztjeink számát, és ha rákattintunk, megnézhetjük ezt a számot a projekt fájljai szerint: fájlt, amely a következő típusú:Tehát megvizsgáltuk a folyamatos elemző eszközt.
Zárás
Sikeresen integráltuk vele a VueJs+Typescript alapú projektet. SonarQubeMegoldottunk néhány kompatibilitási problémát. Növeltük a tesztlefedettség információs mutatójának hatékonyságát. Ebben a cikkben csupán egy kódminőségi szempontot vizsgáltunk meg (valószínűleg az egyik legfontosabbat), de VueJs+TStámogat más minőségi szempontokat is, beleértve a biztonsági tesztelést. De nem minden lehetőség érhető el teljes mértékben SonarQube community -verzióban. Az egyik érdekes és hasznos lehetőség azkülönböző kódkezelő rendszerekkel (például GitLab és BitBucket) való integráció. Annak érdekében, hogy elkerüljük a SonarQube merge pull(merge) request a központi ágba, ha a lefedettség csökken. De ez már egy teljesen másik cikk története.Minden, ami a cikkben kód formájában le van írva, elérhető a
PS: forkomban .
Csak a regisztrált felhasználók vehetnek részt a szavazáson. , kérem.
Hallottam erről a platformról, és használni szeretném
26,3%Igen5
15,8%Nem3
15,8%Hallottam erről a platformról, de nem akarom használni
10,5%Használok egy másik platformot
0,0%Először hallok róla
31,6%19 felhasználó szavazott. 3 felhasználó tartózkodott.
A munkánk során aktívan használjuk a SonarQube platformot a kódminőség magas szinten tartására. Az egyik VueJs+Typescript alapú projekt integrálása során problémák merültek fel.
Forrás: habr.com
