Platformu aktivně využíváme při naší práci soundQube udržet kvalitu kódu na vysoké úrovni. Při integraci jednoho z projektů napsaných v VueJs+Typescript, nastaly problémy. Rád bych vám proto blíže řekl, jak se nám je podařilo vyřešit.

V tomto článku si povíme, jak jsem psal výše, o platformě SonarQube. Trochu teorie - co to je obecně, pro ty, kteří o tom slyší poprvé:

soundQube (bývalý Sonar) je open source platforma pro nepřetržitou kontrolu a měření kvality kódu.
Podporuje analýzu kódu a detekci chyb podle pravidel MISRA C, MISRA C++, MITER/CWE a CERT Secure Coding Standards. Dokáže také rozpoznat chyby ze seznamů OWASP Top 10 a CWE/SANS Top 25 programovacích chyb.
Navzdory skutečnosti, že platforma používá různé připravené nástroje, SonarQube redukuje výsledky na jeden dashboard, uchovává historii běhů a umožňuje vám tak vidět obecný trend změn v kvalitě softwaru během vývoje.

Více podrobností naleznete na oficiální stránky

Je podporováno velké množství programovacích jazyků. Soudě podle informací z výše uvedeného odkazu se jedná o více než 25 jazyků. Chcete-li podporovat konkrétní jazyk, musíte nainstalovat příslušný plugin. Komunitní verze obsahuje plugin pro práci s Javascript (včetně typesсript), i když wiki říká opak. Za Javascript plugin odpovídá SonarJS, pro strojopis SonarTS resp.

Oficiální klient se používá k zasílání informací o pokrytí sonarqube-skener, který pomocí nastavení z config-file, odešle tato data na server soundQube pro další konsolidaci a agregaci.

pro Javascript je npm obal. Začněme tedy s implementací krok za krokem soundQube в Vue- využití projektu Strojopis.

K nasazení serveru soundQube pojďme využít docker-compose.

sonar.yaml:

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

Zahájení:

docker-compose -f sonar.yml up

Poté soundQube bude k dispozici na: http://localhost:9001 .

Zatím v něm nejsou žádné projekty a to je fér. Tuto situaci napravíme. Vzal jsem si oficiální příklad projektu VueJS+TS+Jest. Ohneme to k sobě:

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

Nejprve musíme nainstalovat klienta soundQubekterý se nazývá sonar-skenerpro Npm je tam obal:

yarn add sonarqube-scanner

A okamžitě přidejte příkaz do skripty s tím pracovat.

package.json:

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

Dále, aby skener fungoval, musíte nastavit nastavení projektu ve speciálním souboru. Začněme základy.

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 serveru Sonar'A;
• sonar.název projektu – jeho název, lze jej kdykoli změnit, protože projekt je identifikován projektový klíč;
• sonar.zdroje – složka se zdroji, obvykle toto src, ale může to být cokoliv. Tato složka je nastavena relativně ke kořenové složce, což je složka, ze které se spouští skener;
• sonar.testy – parametr, který jde v tandemu s předchozím. Toto je složka, kde jsou umístěny testy. V tomto projektu žádná taková složka neexistuje a test je umístěn vedle testované komponenty ve složce 'test', takže to zatím budeme ignorovat a použijeme další parametr;
• sonar.test.inkluze – cesta pro testy s použitím masky, v seznamu může být několik prvků oddělených čárkami;
• sonar.sourceEncoding – kódování pro zdrojové soubory.

Pro první spuštění skeneru je vše připraveno, kromě hlavní předchozí akce: spuštění samotného testovacího enginu, aby mohl generovat informace o pokrytí, které skener následně využije.

Chcete-li to však provést, musíte nakonfigurovat testovací stroj tak, aby generoval tyto informace. V tomto projektu je testovací motor existuje. A jeho nastavení jsou v odpovídající části souboru balíček.json.

Přidejme tato nastavení:

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

To znamená, že příznak samotný nastavíme pro potřebu výpočtu pokrytí a zdroj (spolu s výjimkami), na základě kterého se bude tvořit.

Nyní provedeme test:

yarn test

Uvidíme následující:

Důvodem je, že v samotné komponentě není žádný kód. Pojďme to napravit.

HelloWorld.vue:

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

To bude stačit pro výpočet pokrytí.

Po restartování testu se přesvědčíme o tomto:

Na obrazovce bychom měli vidět informace o pokrytí a ve složce projektu se vytvoří složka krytí s informacemi o pokrytí testu v univerzálním formátu LCOV (rozšíření LTP GCOV).

Gcov je volně distribuovaný nástroj pro zkoumání pokrytí kódem. Gcov generuje přesný počet provedení pro každý příkaz v programu a umožňuje přidávat anotace do zdrojového kódu. Gcov přichází jako standardní nástroj jako součást balíčku GCC.
Lcov - grafické rozhraní pro gcov. Sestavuje soubory gcov pro více zdrojových souborů a vytváří sadu stránek HTML s kódem a informacemi o pokrytí. Stránky jsou také generovány pro usnadnění navigace. Lcov podporuje pokrytí řetězců, funkcí a větví.

Po dokončení testů budou umístěny informace o pokrytí pokrytí/lcov.info.
Musíme říct Sonar„Odkud to mohu získat? Přidejme proto do jeho konfiguračního souboru následující řádky. Ale je tu jeden bod: projekty mohou být vícejazyčné, tedy ve složce src existují zdrojové kódy pro několik programovacích jazyků a příslušnost k jednomu nebo druhému, a naopak použití jednoho nebo druhého pluginu je určeno jeho rozšířením. A informace o pokrytí mohou být uloženy na různých místech pro různé programovací jazyky, takže každý jazyk má svou vlastní sekci pro nastavení. Náš projekt využívá Strojopis, takže pro něj potřebujeme sekci nastavení:

sonar-projekt.vlastnosti:

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

Vše je připraveno k prvnímu spuštění skeneru. Rád bych poznamenal, že projekt je Sonar'e se vytvoří automaticky při prvním spuštění skeneru pro daný projekt. V následujících časech se budou shromažďovat informace, aby bylo možné vidět dynamiku změn parametrů projektu v čase.

Použijme tedy příkaz vytvořený dříve v balíček.json:

yarn run sonar 

Poznámka: můžete také použít parametr -X pro podrobnější protokolování.

Pokud byl skener spuštěn poprvé, bude nejprve stažen binární soubor samotného skeneru. Poté se spustí a začne skenovat server Sonar'a pro nainstalované pluginy, čímž se vypočítá podporovaný jazyk. Načítají se také různé další parametry pro jeho provoz: profily kvality, aktivní pravidla, úložiště metrik, pravidla serveru.

Poznámka: V rámci tohoto článku se jim nebudeme podrobně věnovat, ale vždy se můžete obrátit na oficiální zdroje.

Dále začíná analýza složek src za dostupnost zdrojových souborů pro všechny (pokud konkrétní není výslovně specifikován) podporovaný jazyk, s jejich následnou indexací.

Následují různé další analýzy, kterým se v tomto článku nevěnujeme (například linting, detekce duplikace kódu atd.).

Na samém konci práce skeneru jsou všechny shromážděné informace agregovány, archivovány a odeslány na server.

Poté již můžeme vidět, co se stalo ve webovém rozhraní:

Jak vidíme, něco fungovalo a dokonce to vykazuje určitý druh pokrytí, ale neodpovídá tomu našemu existuje-zpráva.

Pojďme na to přijít. Podívejme se na projekt podrobněji, klikněte na hodnotu pokrytí a „propadněte“ do podrobné zprávy o souboru:

Zde vidíme kromě hlavního zkoumaného souboru HelloWorld.vue, existuje také soubor main.ts, což kazí celý obrázek pokrytí. Ale jak to, že jsme to vyloučili z výpočtu krytí. Ano, vše správně, ale bylo to na úrovni existuje, ale skener to zaindexoval, takže to skončilo v jeho výpočtech.

Pojďme to opravit:

sonar-projekt.vlastnosti:

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

Rád bych upřesnil: kromě složek, které jsou uvedeny v tomto parametru, jsou přidány také všechny složky uvedené v parametru sonar.test.inkluze.

Po spuštění skeneru vidíme správné informace:

Podívejme se na další bod - Profily kvality. Výše jsem mluvil o podpoře Sonarv několika jazycích současně. To je přesně to, co vidíme. Ale víme, že náš projekt je napsaný TS, tak proč zatěžovat skener zbytečnými manipulacemi a kontrolami. Jazyk pro analýzu nastavíme přidáním dalšího parametru do konfiguračního souboru Sonar'A:

sonar-projekt.vlastnosti:

...
sonar.language=ts
...

Spusťte skener znovu a podívejte se na výsledek:

Krytí bylo úplně pryč.

Pokud se podíváme do protokolu skeneru, můžeme vidět následující řádek:

To znamená, že naše projektové soubory jednoduše nebyly indexovány.

Situace je následující: oficiálně podporováno VueJs je v pluginu SonarJSkdo je zodpovědný za Javascript.

Tato podpora ale v pluginu není SonarTS pro TS, o kterém byl otevřen oficiální tiket v bug trackeru Sonar'A:

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

Zde je několik odpovědí od jednoho ze zástupců vývojářů SonarQube, které tuto skutečnost potvrzují.

Ale všechno nám fungovalo, namítáte. Ano je, zkusme to trochu "zaseknout".
Pokud existuje podpora .vue-soubory Sonar"Ach, tak mu zkusme říct, aby je považoval za." Strojopis.

Přidáme parametr:

sonar-projekt.vlastnosti:

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

Spustíme skener:

A voila, vše je zpět k normálu a pouze s jedním profilem Strojopis. To znamená, že se nám podařilo vyřešit problém v podpoře VueJs+TS pro soundQube.

Zkusme jít dále a trochu vylepšit informace o pokrytí.

Co jsme zatím udělali:

• přidány do projektu Sonar-skener;
• založit existuje generovat informace o pokrytí;
• nakonfigurováno Sonar-skener;
• vyřešil problém podpory .vue-soubory + Strojopis.

Kromě testovacího pokrytí existují další zajímavá užitečná kritéria pro kvalitu kódu, například duplikace kódu a počet řádků (zapojených do výpočtu koeficientů souvisejících se složitostí kódu) projektu.

V aktuální implementaci pluginu pro práci s TS (SonarTS) to nebude fungovat CPD (Copy Paste Detector) a počítání řádků kódu .vue-soubory.

Chcete-li vytvořit syntetickou situaci duplikace kódu, jednoduše duplikujte soubor součásti s jiným názvem a také jej přidejte do kódu main.ts fiktivní funkci a duplikovat ji s jiným názvem. Chcete-li zkontrolovat duplicitu jako v .vuea v .ts -soubory.

main.ts:

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

Chcete-li to provést, musíte dočasně okomentovat konfigurační řádek:

sonar-projekt.vlastnosti:

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

Restartujeme skener spolu s testováním:

yarn test && yarn run sonar

Naše pokrytí samozřejmě klesne, ale to nás teď nezajímá.

Pokud jde o duplikování řádků kódu, uvidíme:

Pro kontrolu použijeme CPD- užitek - jscpd:

npx jscpd src

Pro řádky kódu:

Možná to bude vyřešeno v budoucích verzích pluginu SonarJS(TS). Rád bych poznamenal, že postupně začínají slučovat tyto dva pluginy do jednoho SonarJS, což je podle mě správné.

Nyní jsem chtěl zvážit možnost zlepšení informací o pokrytí.

Zatím můžeme vidět pokrytí testem v procentech pro celý projekt, a zejména pro soubory. Je ale možné tento ukazatel rozšířit o informaci o množství jednotka-testy pro projekt i v kontextu souborů.

Existuje knihovna, která může existuje-převést zprávu do formátu pro Sonar'A:
obecná testovací data - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Pojďme nainstalovat tuto knihovnu v našem projektu:

yarn add jest-sonar-reporter

A přidejte jej do konfigurace existuje:

package.json:

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

Nyní provedeme test:

yarn test

Poté se v kořenovém adresáři projektu vytvoří soubor test-report.xml.

Použijeme to v konfiguraci Sonar'A:

sonar-projekt.vlastnosti:

…
sonar.testExecutionReportPaths=test-report.xml
…

A restartujte skener:

yarn run sonar

Podívejme se, co se změnilo v rozhraní Sonar'A:

A nic se nezměnilo. Faktem je, že Sonar nepovažuje soubory popsané ve zprávě Jest za soubory jednotka-testy. Abychom tuto situaci napravili, použijeme konfigurační parametr Sonar sonar.testy, ve kterém výslovně označíme složky s testy (zatím máme pouze jednu):

sonar-projekt.vlastnosti:

…
sonar.tests=src/components/__tests__
…

Restartujeme skener:

yarn run sonar

Podívejme se, co se změnilo v rozhraní:

Nyní jsme viděli počet našich jednotka-testuje a po neúspěchu kliknutím dovnitř můžeme vidět rozdělení tohoto čísla mezi soubory projektu:

Závěr

Podívali jsme se tedy na nástroj pro průběžnou analýzu soundQube. Úspěšně jsme do něj integrovali projekt napsaný v VueJs+TS. Opraveny některé problémy s kompatibilitou. Zvýšili jsme informační obsah indikátoru pokrytí testem. V tomto článku jsme zkoumali pouze jedno z kritérií kvality kódu (možná jedno z hlavních), ale soundQube podporuje další kritéria kvality, včetně testování bezpečnosti. Ale ne všechny tyto funkce jsou plně dostupné v obec-verze. Jednou ze zajímavých a užitečných funkcí je integrace soundQube s různými systémy pro správu úložišť kódu, jako jsou GitLab a BitBucket. Aby se zabránilo merge pull(merge) request'a do hlavní větve úložiště, když je pokrytí degradováno. Ale to je příběh na úplně jiný článek.

PS: Vše popsané v článku ve formě kódu je k dispozici v moje vidlička.

Průzkumu se mohou zúčastnit pouze registrovaní uživatelé. Přihlásit se, prosím.

Používáte platformu SonarQube:

• 26,3%Ano 5

• 15,8%No3

• 15,8%Slyšel jsem o této platformě a chci použít3

• 10,5%Slyšel jsem o této platformě a nechci používat2

• 0,0%Používám jinou platformu0

• 31,6%Slyšel jsem o ní poprvé 6

Hlasovalo 19 uživatelů. 3 uživatelů se zdrželo hlasování.

Zdroj: www.habr.com