Aħna nużaw il-pjattaforma b'mod attiv fix-xogħol tagħna soundQube biex tinżamm il-kwalità tal-kodiċi f'livell għoli. Meta tintegra wieħed mill-proġetti miktubin VueJs+Typescript, qamu problemi. Għalhekk, nixtieq ngħidlek f'aktar dettall kif irnexxielna nsolvuhom.

F'dan l-artikolu ser nitkellmu, kif ktibt hawn fuq, dwar il-pjattaforma SonarQube. Ftit teorija - x'inhi b'mod ġenerali, għal dawk li qed jisimgħu dwarha għall-ewwel darba:

soundQube (ex Sonar) hija pjattaforma ta' sors miftuħ għal spezzjoni kontinwa u kejl tal-kwalità tal-kodiċi.
Jappoġġja l-analiżi tal-kodiċi u s-sejbien tal-iżbalji skont ir-regoli tal-istandards tal-ipprogrammar tal-MISRA C, MISRA C++, MITRE/CWE u CERT Secure Coding Standards. Jista' wkoll jirrikonoxxi żbalji mil-listi ta' żbalji ta' programmazzjoni tal-OWASP Top 10 u CWE/SANS Top 25.
Minkejja l-fatt li l-pjattaforma tuża diversi għodod lesti, SonarQube inaqqas ir-riżultati għal dashboard wieħed, li jżomm storja ta 'ġirjiet u b'hekk jippermettilek tara x-xejra ġenerali ta' bidliet fil-kwalità tas-softwer waqt l-iżvilupp.

Aktar dettalji jistgħu jinstabu fuq websajt uffiċjali

Numru kbir ta 'lingwi ta' programmar huma appoġġjati. Meta wieħed jiġġudika mill-informazzjoni mill-link hawn fuq, dawn huma aktar minn 25 lingwa. Biex tappoġġja lingwa speċifika, trid tinstalla l-plugin xieraq. Il-verżjoni tal-komunità tinkludi plugin biex taħdem magħha Javascript (inkluż typesсript), għalkemm il-wiki tgħid l-oppost. Wara Javascript tweġibiet tal-plugin SonarJS, għal Typescript SonarTS rispettivament.

Il-klijent uffiċjali jintuża biex jibgħat informazzjoni dwar il-kopertura sonarqube-scanner, li, bl-użu tas-settings minn konfigurazzjoni-file, jibgħat din id-dejta lis-server soundQube għal aktar konsolidazzjoni u aggregazzjoni.

Għal Javascript hemm tgeżwir npm. Allura, ejja nibdew l-implimentazzjoni pass pass soundQube в Vue-proġett bl-użu Tipografiku.

Biex tuża server soundQube ejja nieħdu vantaġġ docker-compose.

sonar.yaml:

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

Tnedija:

docker-compose -f sonar.yml up

Wara soundQube se jkunu disponibbli fuq: http://localhost:9001 .

Għad m'hemm l-ebda proġett fih u dan huwa ġust. Aħna se nikkoreġu din is-sitwazzjoni. Ħadt il-proġett eżempju uffiċjali għal VueJS+TS+Jest. Ejja ngħawġuha lejna nfusna:

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

L-ewwel għandna bżonn ninstallaw il-klijent soundQube, li tissejjaħ sonar-scannergħal npm hemm tgeżwir:

yarn add sonarqube-scanner

U immedjatament żid il-kmand skripts biex taħdem magħha.

package.json:

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

Sussegwentement, biex l-iskaner jaħdem, trid tissettja s-settings tal-proġett f'fajl speċjali. Nibdew bl-affarijiet bażiċi.

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 - indirizz Sonar'A;
• sonar.projectKey – identifikatur uniku tal-proġett fuq is-server Sonar'A;
• sonar.projectName – isimha, jista’ jinbidel fi kwalunkwe ħin, peress li l-proġett huwa identifikat minn projectKey;
• sonar.sorsi – folder bis-sorsi, normalment dan src, iżda jista 'jkun xi ħaġa. Dan il-folder huwa ssettjat relattiv għall-fowlder tal-għeruq, li huwa l-folder li minnu jitnieda l-iskaner;
• sonar.testijiet – parametru li jmur flimkien ma' dak ta' qabel. Dan huwa l-folder fejn jinsabu t-testijiet. F'dan il-proġett, m'hemm l-ebda folder bħal dan, u t-test jinsab ħdejn il-komponent li qed jiġi ttestjat fil-folder 'test', għalhekk aħna ser ninjorawha għalissa u nużaw il-parametru li jmiss;
• sonar.test.inklużjonijiet – mogħdija għat-testijiet bl-użu ta' maskra, jista' jkun hemm diversi elementi elenkati separati b'virgoli;
• sonar.sourceEncoding – kodifikazzjoni għall-fajls tas-sors.

Għall-ewwel tnedija tal-iskaner, kollox huwa lest, ħlief għall-azzjoni prinċipali preċedenti: it-tnedija tal-magna tat-test innifsu, sabiex tkun tista 'tiġġenera informazzjoni dwar il-kopertura, li l-iskaner se juża sussegwentement.

Iżda biex tagħmel dan, għandek bżonn tikkonfigura l-magna tat-test biex tiġġenera din l-informazzjoni. F'dan il-proġett, il-magna tat-test hija ġest. U l-issettjar tiegħu jinsab fit-taqsima korrispondenti tal-fajl package.json.

Ejja nżidu dawn is-settings:

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

Jiġifieri, aħna nissettjaw il-bandiera nnifisha għall-ħtieġa li tikkalkula l-kopertura u s-sors (flimkien ma 'eċċezzjonijiet) li fuq il-bażi tiegħu se tkun iffurmata.

Issa ejja nagħmel it-test:

yarn test

Se naraw dan li ġej:

Ir-raġuni hija li m'hemm l-ebda kodiċi fil-komponent innifsu. Ejja nirranġaw dan.

HelloWorld.vue:

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

Dan ikun biżżejjed biex tiġi kkalkulata l-kopertura.

Wara li nibdew mill-ġdid it-test, aħna niżguraw minn dan:

Fuq l-iskrin għandna naraw informazzjoni dwar il-kopertura, u se jinħoloq folder fil-folder tal-proġett kopertura b'informazzjoni dwar il-kopertura tat-test f'format universali LCOV (estensjoni LTP GCOV).

Gcov hija utilità mqassma liberament għall-eżami tal-kopertura tal-kodiċi. Gcov jiġġenera n-numru eżatt ta 'eżekuzzjonijiet għal kull dikjarazzjoni fi programm u jippermettilek li żżid annotazzjonijiet mal-kodiċi tas-sors. Gcov jiġi bħala utilità standard bħala parti mill-pakkett tal-GCC.
Lcov - interface grafiku għal gcov. Jiġbor fajls gcov għal fajls ta' sorsi multipli u jipproduċi sett ta' paġni HTML b'informazzjoni dwar kodiċi u kopertura. Il-paġni huma ġġenerati wkoll biex jagħmlu n-navigazzjoni aktar faċli. Lcov jappoġġja kopertura ta 'kordi, funzjonijiet, u fergħat.

Wara li jitlestew it-testijiet, l-informazzjoni dwar il-kopertura tkun tinsab fiha kopertura/lcov.info.
Irridu ngħidu Sonar'Minn nista' niksebha? Għalhekk, ejja nżidu l-linji li ġejjin mal-fajl tal-konfigurazzjoni tiegħu. Iżda hemm punt wieħed: il-proġetti jistgħu jkunu multilingwi, jiġifieri, fil-folder src hemm kodiċi tas-sors għal diversi lingwi ta 'programmar u affiljazzjoni ma' waħda jew oħra, u mbagħad, l-użu ta 'plugin wieħed jew ieħor huwa determinat mill-estensjoni tiegħu. U l-informazzjoni dwar il-kopertura tista 'tinħażen f'postijiet differenti għal lingwi ta' programmar differenti, għalhekk kull lingwa għandha t-taqsima tagħha għat-twaqqif ta 'dan. Il-proġett tagħna juża Tipografiku, għalhekk neħtieġu taqsima tas-settings biss għaliha:

sonar-project.properties:

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

Kollox lest għall-ewwel tnedija tal-iskaner. Nixtieq ninnota li l-proġett huwa Sonar'e tinħoloq awtomatikament l-ewwel darba li tħaddem l-iskaner għal proġett partikolari. Fi żminijiet sussegwenti, l-informazzjoni se tkun akkumulata sabiex tara d-dinamika tal-bidliet fil-parametri tal-proġett matul iż-żmien.

Allura, ejja nużaw il-kmand maħluq aktar kmieni fi package.json:

yarn run sonar 

Nota: tista 'wkoll tuża l-parametru -X għal qtugħ aktar dettaljat.

Jekk l-iskaner ġie mniedi għall-ewwel darba, allura l-binarju tal-iskaner innifsu se jitniżżel l-ewwel. Wara dan jibda u jibda jiskennja s-server Sonar'a għall-plugins installati, u b'hekk tikkalkula l-lingwa appoġġjata. Diversi parametri oħra għat-tħaddim tiegħu huma wkoll mgħobbija: profili ta 'kwalità, regoli attivi, repożitorju ta' metriċi, regoli tas-server.

Nota: Aħna mhux se noqogħdu fuqhom fid-dettall fil-qafas ta 'dan l-artikolu, iżda tista' dejjem tikkuntattja sorsi uffiċjali.

Sussegwentement, tibda l-analiżi tal-folder src għad-disponibbiltà ta' fajls sors għal kull lingwa appoġġjata (jekk wieħed speċifiku mhux speċifikat b'mod espliċitu), bl-indiċjar sussegwenti tagħhom.

Wara jiġu diversi analiżi oħra, li aħna ma niffokawx fuqhom f'dan l-artikolu (pereżempju, bħal linting, skoperta ta' duplikazzjoni tal-kodiċi, eċċ.).

Fl-aħħar nett tax-xogħol tal-iskaner, l-informazzjoni kollha miġbura hija aggregata, arkivjata u mibgħuta lis-server.

Wara dan, diġà nistgħu naraw x'ġara fl-interface tal-web:

Kif nistgħu naraw, xi ħaġa ħadmet, u anke turi xi tip ta 'kopertura, iżda ma taqbilx tagħna ġest-rapport.

Ejja insemmu. Ejja nħarsu lejn il-proġett f'aktar dettall, ikklikkja fuq il-valur tal-kopertura, u "taqa'" f'rapport dettaljat tal-fajl:

Hawnhekk naraw, minbarra l-fajl prinċipali, eżaminat HelloWorld.vue, hemm ukoll fajl main.ts, li jħassru l-istampa kollha tal-kopertura. Imma kif eskludewha mill-kalkolu tal-kopertura. Iva, kollox huwa korrett, iżda kien fil-livell ġest, iżda l-iskaner indiċjawh, għalhekk spiċċa fil-kalkoli tiegħu.

Ejja nirranġaw dan:

sonar-project.properties:

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

Nixtieq nagħmel kjarifika: minbarra l-folders li huma speċifikati f'dan il-parametru, il-folders kollha elenkati fil-parametru huma miżjuda wkoll sonar.test.inklużjonijiet.

Wara li tniedi l-iskaner, naraw l-informazzjoni korretta:

Ejja nħarsu lejn il-punt li jmiss - Profili ta ’kwalità. Tkellimt hawn fuq dwar l-appoġġ Sonar'minn diversi lingwi fl-istess ħin. Dan huwa eżattament dak li qed naraw. Imma nafu li l-proġett tagħna huwa miktub fih TS, allura għaliex tisforza l-iskaner b'manipulazzjonijiet u kontrolli bla bżonn. Se nissettjaw il-lingwa għall-analiżi billi nżidu parametru ieħor mal-fajl tal-konfigurazzjoni Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Ejja nerġgħu nħaddmu l-iskaner u naraw ir-riżultat:

Il-kopertura kienet marret għal kollox.

Jekk inħarsu lejn il-ġurnal tal-iskaner, nistgħu naraw il-linja li ġejja:

Jiġifieri, il-fajls tal-proġett tagħna sempliċement ma kinux indiċjati.

Is-sitwazzjoni hija kif ġej: appoġġjat uffiċjalment VueJs jinsab fil-plugin SonarJSmin hu responsabbli għal Javascript.

Iżda dan l-appoġġ mhuwiex fil-plugin SonarTS għall- TS, li dwaru nfetaħ biljett uffiċjali fil-bug tracker Sonar'A:

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

Hawn huma xi tweġibiet minn wieħed mir-rappreżentanti mill-iżviluppaturi SonarQube, li jikkonferma dan il-fatt.

Imma kollox ħadem għalina, toġġezzjona. Iva huwa, ejja nippruvawha ftit "hack".
Jekk ikun hemm appoġġ .vue-fajls Sonar'oh, allura ejja nippruvaw ngħidulu biex iqishom bħala Tipografiku.

Ejja nżidu parametru:

sonar-project.properties:

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

Ejja nniedu l-iskaner:

U, voila, kollox huwa lura għan-normal, u bi profil wieħed biss għal Tipografiku. Jiġifieri, irnexxielna nsolvu l-problema fl-appoġġ VueJs+TS għall- soundQube.

Ejja nippruvaw immorru aktar u ntejbu ftit l-informazzjoni tal-kopertura.

Dak li għamilna s'issa:

• miżjud mal-proġett Sonar-skaner;
• imwaqqaf ġest biex tiġġenera informazzjoni dwar il-kopertura;
• ikkonfigurat Sonar-skaner;
• solvuta l-problema ta 'appoġġ .vue-fajls + Tipografiku.

Minbarra l-kopertura tat-test, hemm kriterji utli oħra interessanti għall-kwalità tal-kodiċi, pereżempju, id-duplikazzjoni tal-kodiċi u n-numru ta 'linji (involuti fil-kalkolu tal-koeffiċjenti relatati mal-kumplessità tal-kodiċi) tal-proġett.

Fl-implimentazzjoni attwali tal-plugin biex taħdem magħhom TS (SonarTS) mhux se taħdem CPD (Copy Paste Detector) u l-għadd tal-linji tal-kodiċi .vue-fajls.

Biex toħloq sitwazzjoni sintetika ta 'duplikazzjoni tal-kodiċi, sempliċement idduplika l-fajl tal-komponenti b'isem differenti u żidha wkoll mal-kodiċi main.ts funzjoni finta u duplikaha b'isem differenti. Biex tiċċekkja għal duplikazzjoni bħal fi .vue, u fi .ts -fajls.

main.ts:

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

Biex tagħmel dan, għandek bżonn tikkummenta temporanjament il-linja tal-konfigurazzjoni:

sonar-project.properties:

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

Ejja nerġgħu nibdew l-iskaner flimkien mal-ittestjar:

yarn test && yarn run sonar

Naturalment, il-kopertura tagħna se taqa ', iżda issa m'aħniex interessati f'dan.

F'termini ta' duplikazzjoni ta' linji ta' kodiċi, se naraw:

Biex niċċekkjaw aħna se nużaw CPD-utilità - jscpd:

npx jscpd src

Għal linji ta' kodiċi:

Forsi dan se jiġi solvut fil-verżjonijiet futuri tal-plugin SonarJS(TS). Nixtieq ninnota li gradwalment qed jibdew jingħaqdu dawn iż-żewġ plugins f'wieħed SonarJS, li naħseb li hija korretta.

Issa ridt nikkunsidra l-għażla li ttejjeb l-informazzjoni tal-kopertura.

S'issa nistgħu naraw kopertura tat-test f'termini perċentwali għall-proġett kollu, u għall-fajls b'mod partikolari. Iżda huwa possibbli li tespandi dan l-indikatur b'informazzjoni dwar il-kwantità unità-testijiet għall-proġett, kif ukoll fil-kuntest tal-fajls.

Hemm librerija li tista ġest-ikkonverti r-rapport f'format għal Sonar'A:
data ġenerika tat-test - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Ejja ninstallaw din il-librerija fil-proġett tagħna:

yarn add jest-sonar-reporter

U żidha mal-konfigurazzjoni ġest:

package.json:

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

Issa ejja nagħmel it-test:

yarn test

Wara dan se jinħoloq fajl fl-għerq tal-proġett test-report.xml.

Ejja nużawha fil-konfigurazzjoni Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

U erġa ibda l-iskaner:

yarn run sonar

Ejja naraw x'inbidel fl-interface Sonar'A:

U xejn ma nbidel. Il-fatt hu li Sonar ma jqisx il-fajls deskritti fir-rapport Jest bħala fajls unità-testijiet. Sabiex tikkoreġi din is-sitwazzjoni, nużaw il-parametru tal-konfigurazzjoni Sonar sonar.testijiet, li fiha se nindikaw b'mod espliċitu l-folders bit-testijiet (għalna wieħed biss għalissa):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Ejja nerġgħu nibdew l-iskaner:

yarn run sonar

Ejja naraw x'inbidel fl-interface:

Issa rajna n-numru tagħna unità-testijiet u, wara li fallew billi nikklikkjaw ġewwa, nistgħu naraw id-distribuzzjoni ta 'dan in-numru fost il-fajls tal-proġett:

Konklużjoni

Allura, ħares lejn għodda għal analiżi kontinwa soundQube. Integrajna b’suċċess fiha proġett miktub fih VueJs+TS. Irranġa xi kwistjonijiet ta' kompatibilità. Żidna l-kontenut tal-informazzjoni tal-indikatur tal-kopertura tat-test. F'dan l-artikolu, eżaminajna wieħed biss mill-kriterji għall-kwalità tal-kodiċi (forsi wieħed minn dawk ewlenin), iżda soundQube jappoġġja kriterji ta' kwalità oħra, inkluż l-ittestjar tas-sikurezza. Iżda mhux dawn il-karatteristiċi kollha huma kompletament disponibbli fi komunità-verżjonijiet. Waħda mill-karatteristiċi interessanti u utli hija l-integrazzjoni soundQube b'diversi sistemi ta' ġestjoni tar-repożitorji tal-kodiċi, bħal GitLab u BitBucket. Biex tipprevjeni merge pull(merge) talba“a lill-fergħa prinċipali tar-repożitorju meta l-kopertura tkun degradata. Iżda din hija storja għal artiklu kompletament differenti.

PS: Kollox deskritt fl-artikolu fil-forma ta 'kodiċi huwa disponibbli fi il-furketta tiegħi.

Utenti reġistrati biss jistgħu jipparteċipaw fl-istħarriġ. Idħol, ta 'xejn.

Tuża l-pjattaforma SonarQube:

• 26,3%Iva5

• 15,8%Nru3

• 15,8%Smajt dwar din il-pjattaforma u rrid nuża3

• 10,5%Smajt dwar din il-pjattaforma u ma rridx nuża2

• 0,0%Qed nuża pjattaforma differenti0

• 31,6%L-ewwel darba li smajt dwarha6

Ivvutaw 19 utent. 3 utent astjenew.

Sors: www.habr.com