Platformu aktívne využívame pri našej práci SonarQube udržať kvalitu kódu na vysokej úrovni. Pri integrácii jedného z projektov napísaných v VueJs+Typescript, nastali problémy. Preto by som vám chcel podrobnejšie povedať, ako sa nám ich podarilo vyriešiť.

V tomto článku si povieme, ako som písal vyššie, o platforme SonarQube. Trochu teórie - čo to je vo všeobecnosti, pre tých, ktorí o tom počujú prvýkrát:

SonarQube (bývalý sonar) je open source platforma na nepretržitú kontrolu a meranie kvality kódu.
Podporuje analýzu kódu a detekciu chýb podľa pravidiel programovacích štandardov MISRA C, MISRA C++, MITER/CWE a CERT Secure Coding Standards. Dokáže tiež rozpoznať chyby zo zoznamov OWASP Top 10 a CWE/SANS Top 25 programových chýb.
Napriek tomu, že platforma využíva rôzne hotové nástroje, SonarQube redukuje výsledky na jeden dashboard, pričom uchováva históriu chodov a umožňuje vám tak vidieť všeobecný trend zmien v kvalite softvéru počas vývoja.

Viac podrobností nájdete na oficiálne internetové stránky

Je podporované veľké množstvo programovacích jazykov. Súdiac podľa informácií z vyššie uvedeného odkazu, ide o viac ako 25 jazykov. Ak chcete podporovať konkrétny jazyk, musíte nainštalovať príslušný doplnok. Komunitná verzia obsahuje plugin na prácu s Javascript (vrátane typeсript), hoci wiki hovorí opak. vzadu Javascript plugin odpovedá SonarJS, pre Strojopis SonarTS resp.

Oficiálny klient sa používa na odosielanie informácií o pokrytí sonarqube-skener, ktorý pomocou nastavení z config-file, odošle tieto údaje na server SonarQube na ďalšiu konsolidáciu a agregáciu.

pre Javascript je npm obal. Začnime teda s implementáciou krok za krokom SonarQube в Vue- využitie projektu strojopisom.

Na nasadenie servera SonarQube poďme využiť prístavný robotník, komponovať.

sonar.yaml:

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

Spustenie:

docker-compose -f sonar.yml up

Potom SonarQube bude k dispozícii na: http://localhost:9001 .

Zatiaľ v ňom nie sú žiadne projekty a to je fér. Túto situáciu napravíme. Použil som oficiálny príklad projektu VueJS+TS+Jest. Ohnite to k sebe:

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

Najprv musíme nainštalovať klienta SonarQube, ktorá sa volá sonar-skenerpre NPM je tam obal:

yarn add sonarqube-scanner

A okamžite pridajte príkaz do skripty pracovať s tým.

package.json:

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

Ďalej, aby skener fungoval, musíte nastaviť nastavenia projektu v špeciálnom súbore. Začnime od základov.

sonar-projekt.vlastnosti:

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 – jedinečný identifikátor projektu na serveri sonar'A;
• sonar.názov projektu – jeho názov, možno ho kedykoľvek zmeniť, keďže projekt identifikuje projektový kľúč;
• sonar.zdroje – priečinok so zdrojmi, zvyčajne tento src, ale môže to byť čokoľvek. Tento priečinok je nastavený relatívne ku koreňovému priečinku, čo je priečinok, z ktorého sa skener spúšťa;
• sonar.testy – parameter, ktorý ide v tandeme s predchádzajúcim. Toto je priečinok, v ktorom sa nachádzajú testy. V tomto projekte takýto priečinok neexistuje a test sa nachádza vedľa testovaného komponentu v priečinku 'test', takže ho zatiaľ budeme ignorovať a použijeme nasledujúci parameter;
• sonar.test.inklúzie – cesta pre testy s použitím masky, v zozname môže byť niekoľko prvkov oddelených čiarkami;
• sonar.sourceEncoding – kódovanie pre zdrojové súbory.

Na prvé spustenie skenera je všetko pripravené, okrem hlavnej predchádzajúcej akcie: spustenie samotného testovacieho enginu, aby mohol generovať informácie o pokrytí, ktoré skener následne využije.

Aby ste to dosiahli, musíte nakonfigurovať testovací nástroj na generovanie týchto informácií. V tomto projekte je testovací motor existuje. A jeho nastavenia sú v príslušnej časti súboru package.json.

Pridajme tieto nastavenia:

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

To znamená, že samotný príznak nastavíme pre potrebu výpočtu pokrytia a zdroj (spolu s výnimkami), na základe ktorého sa vytvorí.

Teraz spustíme test:

yarn test

Uvidíme nasledovné:

Dôvodom je, že v samotnom komponente nie je žiadny kód. Poďme to napraviť.

HelloWorld.vue:

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

To bude stačiť na výpočet pokrytia.

Po reštartovaní testu sa presvedčíme o tomto:

Na obrazovke by sme mali vidieť informácie o pokrytí a v priečinku projektu sa vytvorí priečinok krytie s informáciami o testovaní v univerzálnom formáte LCOV (rozšírenie LTP GCOV).

Gcov je voľne distribuovaný nástroj na skúmanie pokrytia kódom. Gcov generuje presný počet vykonaní pre každý príkaz v programe a umožňuje vám pridávať anotácie do zdrojového kódu. Gcov prichádza ako štandardný nástroj ako súčasť balíka GCC.
Lcov - grafické rozhranie pre gcov. Zhromažďuje súbory gcov pre viacero zdrojových súborov a vytvára sadu stránok HTML s kódom a informáciami o pokrytí. Na uľahčenie navigácie sa generujú aj stránky. Lcov podporuje pokrytie reťazcov, funkcií a vetiev.

Po dokončení testov sa zobrazia informácie o pokrytí pokrytie/lcov.info.
Musíme povedať sonar„Odkiaľ to môžem získať? Pridajme preto do jeho konfiguračného súboru nasledujúce riadky. Ale je tu jeden bod: projekty môžu byť viacjazyčné, to znamená v priečinku src existujú zdrojové kódy pre niekoľko programovacích jazykov a príslušnosť k jednému alebo druhému, a naopak, použitie jedného alebo druhého pluginu je určené jeho rozšírením. A informácie o pokrytí môžu byť uložené na rôznych miestach pre rôzne programovacie jazyky, takže každý jazyk má svoju vlastnú sekciu na nastavenie. Náš projekt využíva strojopisom, takže na to potrebujeme sekciu nastavení:

sonar-projekt.vlastnosti:

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

Všetko je pripravené na prvé spustenie skenera. Chcel by som poznamenať, že projekt je sonar'e sa vytvorí automaticky pri prvom spustení skenera pre daný projekt. V nasledujúcich časoch sa budú zhromažďovať informácie, aby bolo možné vidieť dynamiku zmien parametrov projektu v čase.

Použime teda príkaz vytvorený skôr v package.json:

yarn run sonar 

Poznámka: môžete použiť aj parameter -X pre podrobnejšie protokolovanie.

Ak bol skener spustený prvýkrát, najskôr sa stiahne binárny súbor samotného skenera. Potom sa spustí a spustí skenovanie servera sonar'a pre nainštalované doplnky, čím sa vypočíta podporovaný jazyk. Načítajú sa aj rôzne ďalšie parametre pre jeho prevádzku: profily kvality, aktívne pravidlá, úložisko metrík, pravidlá servera.

Poznámka: V rámci tohto článku sa im nebudeme podrobne venovať, ale vždy sa môžete obrátiť na oficiálne zdroje.

Ďalej sa začne analýza priečinkov src za dostupnosť zdrojových súborov pre všetky (ak konkrétny nie je výslovne špecifikovaný) podporovaný jazyk, s ich následnou indexáciou.

Nasledujú rôzne ďalšie analýzy, ktorým sa v tomto článku nevenujeme (napríklad linting, detekcia duplicity kódu atď.).

Na samom konci práce skenera sa všetky zhromaždené informácie agregujú, archivujú a odosielajú na server.

Potom už môžeme vidieť, čo sa stalo vo webovom rozhraní:

Ako vidíme, niečo fungovalo a dokonca ukazuje nejaký druh pokrytia, ale nezhoduje sa s naším existuje-správa.

Poďme na to. Pozrime sa na projekt podrobnejšie, kliknite na hodnotu pokrytia a „prepadnite“ do podrobnej správy súboru:

Tu vidíme okrem hlavného skúmaného súboru HelloWorld.vue, existuje aj súbor main.ts, čo kazí celý obraz pokrytia. Ale ako to, že sme to vylúčili z výpočtu krytia. Áno, všetko je správne, ale bolo to na úrovni existuje, ale skener to zaindexoval, takže to skončilo v jeho výpočtoch.

Opravme to:

sonar-projekt.vlastnosti:

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

Chcel by som objasniť: okrem priečinkov, ktoré sú uvedené v tomto parametri, sa pridajú aj všetky priečinky uvedené v parametri sonar.test.inklúzie.

Po spustení skenera sa nám zobrazia správne informácie:

Pozrime sa na ďalší bod - Kvalitné profily. Vyššie som hovoril o podpore sonarv niekoľkých jazykoch súčasne. To je presne to, čo vidíme. Ale vieme, že náš projekt je napísaný TS, tak prečo namáhať skener zbytočnými manipuláciami a kontrolami. Jazyk pre analýzu nastavíme pridaním ďalšieho parametra do konfiguračného súboru sonar'A:

sonar-projekt.vlastnosti:

...
sonar.language=ts
...

Spustite skener znova a pozrite si výsledok:

Pokrytie úplne zmizlo.

Ak sa pozrieme na protokol skenera, môžeme vidieť nasledujúci riadok:

To znamená, že naše projektové súbory jednoducho neboli indexované.

Situácia je nasledovná: oficiálne podporované VueJs je v plugine SonarJSkto je zodpovedný za Javascript.

Ale táto podpora nie je v plugine SonarTS pre TS, o ktorom sa otvoril oficiálny tiket v bug trackeri sonar'A:

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

Tu je niekoľko odpovedí od jedného zo zástupcov vývojárov SonarQube, ktoré túto skutočnosť potvrdzujú.

Ale všetko nám fungovalo, namietate. Áno je, skúsme to trochu "hack".
Ak existuje podpora .vue-súbory sonar„Och, potom mu skúsme povedať, aby ich považoval za strojopisom.

Pridajme parameter:

sonar-projekt.vlastnosti:

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

Spustíme skener:

A voila, všetko sa vrátilo do normálu a iba s jedným profilom strojopisom. To znamená, že sa nám podarilo vyriešiť problém v podpore VueJs+TS pre SonarQube.

Skúsme ísť ďalej a trochu vylepšiť informácie o pokrytí.

Čo sme doteraz urobili:

• pridané do projektu sonar- skener;
• nastaviť existuje generovať informácie o pokrytí;
• nakonfigurovaný sonar- skener;
• vyriešil problém podpory .vue-súbory + strojopisom.

Okrem testovacieho pokrytia existujú ďalšie zaujímavé užitočné kritériá pre kvalitu kódu, napríklad duplikácia kódu a počet riadkov (zapojených do výpočtu koeficientov súvisiacich so zložitosťou kódu) projektu.

V aktuálnej implementácii pluginu pre prácu s TS (SonarTS) nebudem pracovať CPD (Copy Paste Detector) a počítanie riadkov kódu .vue-súbory.

Ak chcete vytvoriť syntetickú situáciu duplikácie kódu, jednoducho duplikujte súbor komponentu s iným názvom a tiež ho pridajte do kódu main.ts fiktívnu funkciu a duplikovať ju s iným názvom. Ak chcete skontrolovať duplicitu ako v .vuea v .ts -súbory.

main.ts:

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

Ak to chcete urobiť, musíte dočasne komentovať konfiguračný riadok:

sonar-projekt.vlastnosti:

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

Reštartujme skener spolu s testovaním:

yarn test && yarn run sonar

Samozrejme, že naše pokrytie klesne, ale to nás teraz nezaujíma.

Pokiaľ ide o duplikovanie riadkov kódu, uvidíme:

Na kontrolu použijeme CPD-úžitok - jscpd:

npx jscpd src

Pre riadky kódu:

Možno to bude vyriešené v budúcich verziách doplnkov SonarJS(TS). Chcel by som poznamenať, že postupne začínajú spájať tieto dva pluginy do jedného SonarJS, čo je podľa mňa správne.

Teraz som chcel zvážiť možnosť zlepšenia informácií o pokrytí.

Zatiaľ môžeme vidieť pokrytie testom v percentách, pre celý projekt a najmä pre súbory. Je však možné tento ukazovateľ rozšíriť o informácie o množstve jednotka-testy pre projekt, ako aj v kontexte súborov.

Existuje knižnica, ktorá môže existuje-previesť správu do formátu pre sonar'A:
všeobecné testovacie údaje - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Nainštalujte túto knižnicu v našom projekte:

yarn add jest-sonar-reporter

A pridajte ho do konfigurácie existuje:

package.json:

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

Teraz spustíme test:

yarn test

Potom sa vytvorí súbor v koreňovom adresári projektu test-report.xml.

Použime to v konfigurácii sonar'A:

sonar-projekt.vlastnosti:

…
sonar.testExecutionReportPaths=test-report.xml
…

A reštartujte skener:

yarn run sonar

Pozrime sa, čo sa zmenilo v rozhraní sonar'A:

A nič sa nezmenilo. Faktom je, že Sonar nepovažuje súbory opísané v správe Jest za súbory jednotka-testy. Aby sme túto situáciu napravili, používame konfiguračný parameter sonar sonar.testy, v ktorom explicitne označíme priečinky s testami (zatiaľ máme len jeden):

sonar-projekt.vlastnosti:

…
sonar.tests=src/components/__tests__
…

Reštartujeme skener:

yarn run sonar

Pozrime sa, čo sa zmenilo v rozhraní:

Teraz sme videli počet našich jednotka-testuje a po zlyhaní kliknutím dovnútra môžeme vidieť rozdelenie tohto čísla medzi súbory projektu:

Záver

Pozreli sme sa teda na nástroj na nepretržitú analýzu SonarQube. Úspešne sme do nej integrovali projekt napísaný v r VueJs+TS. Opravené niektoré problémy s kompatibilitou. Zvýšili sme informačný obsah indikátora pokrytia testom. V tomto článku sme skúmali iba jedno z kritérií kvality kódu (možno jedno z hlavných), ale SonarQube podporuje ďalšie kritériá kvality vrátane testovania bezpečnosti. Nie všetky tieto funkcie sú však plne dostupné obec- verzie. Jednou zo zaujímavých a užitočných funkcií je integrácia SonarQube s rôznymi systémami správy úložísk kódu, ako sú GitLab a BitBucket. Zabrániť zlúčiť vytiahnuť (zlúčiť) žiadosť'a do hlavnej vetvy archívu, keď sa pokrytie zhorší. Ale to je už príbeh na úplne iný článok.

PS: Všetko popísané v článku vo forme kódu je dostupné v moja vidlička.

Do prieskumu sa môžu zapojiť iba registrovaní užívatelia. Prihlásiť saProsím.

Používate platformu SonarQube:

• 26,3%Áno5

• 15,8%č.3

• 15,8%Počul som o tejto platforme a chcem použiť3

• 10,5%Počul som o tejto platforme a nechcem použiť 2

• 0,0%Používam inú platformu0

• 31,6%Prvýkrát o nej počujem 6

Hlasovalo 19 užívateľov. 3 používatelia sa zdržali hlasovania.

Zdroj: hab.com