Ne e përdorim në mënyrë aktive platformën në punën tonë soundQube për të ruajtur cilësinë e kodit në një nivel të lartë. Kur integroni një nga projektet e shkruara në VueJs+Typescript, u shfaqën probleme. Prandaj, do të doja t'ju tregoja më në detaje se si arritëm t'i zgjidhnim ato.

Në këtë artikull do të flasim, siç shkrova më lart, për platformën SonarQube. Një teori e vogël - çfarë është në përgjithësi, për ata që po dëgjojnë për herë të parë për të:

soundQube (ish hidrolokator) është një platformë me burim të hapur për inspektimin e vazhdueshëm dhe matjen e cilësisë së kodit.
Mbështet analizën e kodit dhe zbulimin e gabimeve sipas rregullave të standardeve të programimit MISRA C, MISRA C++, MITER/CWE dhe CERT Secure Coding Standards. Ai gjithashtu mund të njohë gabimet nga listat e gabimeve të programimit Top 10 dhe CWE/SANS Top 25 të OWASP.
Përkundër faktit se platforma përdor mjete të ndryshme të gatshme, SonarQube redukton rezultatet në një pult të vetëm, duke mbajtur një histori të ekzekutimeve dhe duke ju lejuar kështu të shihni tendencën e përgjithshme të ndryshimeve në cilësinë e softuerit gjatë zhvillimit.

Më shumë detaje mund të gjenden në faqen zyrtare të internetit

Mbështetet një numër i madh i gjuhëve të programimit. Duke gjykuar nga informacioni nga lidhja e mësipërme, këto janë më shumë se 25 gjuhë. Për të mbështetur një gjuhë specifike, duhet të instaloni shtojcën e duhur. Versioni i komunitetit përfshin një shtojcë për të punuar me të Javascript (përfshirë tipinсript), megjithëse wiki thotë të kundërtën. Mbrapa Javascript përgjigjet e shtojcave SonarJS, për Typescript SonarTS respektivisht.

Klienti zyrtar përdoret për të dërguar informacione mbulimi sonarqube-skaner, e cila, duke përdorur cilësimet nga config-file, i dërgon këto të dhëna në server soundQube për konsolidim dhe agregim të mëtejshëm.

Për Javascript ka mbështjellës npm. Pra, le të fillojmë zbatimin hap pas hapi soundQube в Vue-përdorimi i projektit i daktilografuar.

Për të vendosur serverin soundQube le të përfitojmë Docker-Shkruaj.

sonar.yaml:

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

Nisja:

docker-compose -f sonar.yml up

Pas kësaj soundQube do të jetë në dispozicion në: http://localhost:9001 .

Nuk ka ende projekte në të dhe kjo është e drejtë. Ne do ta korrigjojmë këtë situatë. Kam marrë shembullin zyrtar të projektit për VueJS+TS+Jest. Le ta përkulim drejt vetes:

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

Së pari duhet të instalojmë klientin soundQube, e cila quhet sonar-skanerpër NPM ka një mbështjellës:

yarn add sonarqube-scanner

Dhe menjëherë shtoni komandën në scripts për të punuar me të.

package.json:

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

Tjetra, që skaneri të funksionojë, duhet të vendosni cilësimet e projektit në një skedar të veçantë. Le të fillojmë me bazat.

sonar-projekt.veti:

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 - adresë hidrolokator'A;
sonar.ProjektiKey – identifikues unik i projektit në server hidrolokator'A;
sonar.Emri i projektit – emri i tij, mund të ndryshohet në çdo kohë, pasi projekti identifikohet nga ProjektKey;
sonar.burimet – dosje me burime, zakonisht kjo src, por mund të jetë çdo gjë. Kjo dosje vendoset në lidhje me dosjen rrënjësore, e cila është dosja nga e cila niset skaneri;
sonar.teste – një parametër që shkon së bashku me atë të mëparshëm. Kjo është dosja ku ndodhen testet. Në këtë projekt, nuk ka një dosje të tillë, dhe testi ndodhet pranë komponentit që testohet në dosje 'provë', kështu që ne do ta injorojmë atë për momentin dhe do të përdorim parametrin tjetër;
sonar.test.përfshirje – rruga për testet duke përdorur një maskë, mund të ketë disa elementë të renditur të ndarë me presje;
sonar.burimiEnkodimi – kodimi për skedarët burimor.

Për lëshimin e parë të skanerit, gjithçka është gati, përveç veprimit kryesor të mëparshëm: lëshimi i vetë motorit të testimit, në mënyrë që ai të mund të gjenerojë informacione rreth mbulimit, të cilin skaner do ta përdorë më pas.

Por për ta bërë këtë, duhet të konfiguroni motorin e testimit për të gjeneruar këtë informacion. Në këtë projekt, motori i testimit është ka. Dhe cilësimet e tij janë në seksionin përkatës të skedarit package.json.

Le të shtojmë këto cilësime:

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

Kjo do të thotë, ne vendosëm vetë flamurin për nevojën për të llogaritur mbulimin dhe burimin (së bashku me përjashtimet) mbi bazën e të cilit do të formohet.

Tani le të bëjmë testin:

yarn test

Do të shohim sa vijon:

Arsyeja është se nuk ka kod në vetë komponentin. Le ta rregullojmë këtë.

HelloWorld.vue:

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

Kjo do të jetë e mjaftueshme për të llogaritur mbulimin.

Pas rifillimit të testit, ne do të sigurohemi për këtë:

Në ekran duhet të shohim informacione rreth mbulimit dhe do të krijohet një dosje në dosjen e projektit mbulim me informacionin e mbulimit të testit në një format universal LCOV (Zgjatja LTP GCOV).

Gcov është një mjet i shpërndarë lirisht për ekzaminimin e mbulimit të kodit. Gcov gjeneron numrin e saktë të ekzekutimeve për çdo deklaratë në një program dhe ju lejon të shtoni shënime në kodin burimor. Gcov vjen si një mjet standard si pjesë e paketës GCC.
Lcov - ndërfaqe grafike për gcov. Ai mbledh skedarë gcov për skedarë të shumëfishtë burimor dhe prodhon një grup faqesh HTML me kodin dhe informacionin e mbulimit. Faqet krijohen gjithashtu për ta bërë më të lehtë navigimin. Lcov mbështet mbulimin e vargjeve, funksioneve dhe degëve.

Pas përfundimit të testeve, informacioni i mbulimit do të vendoset në mbulim/lcov.info.
Duhet të themi hidrolokator'Nga mund ta marr? Prandaj, le të shtojmë rreshtat e mëposhtëm në skedarin e tij të konfigurimit. Por ka një pikë: projektet mund të jenë shumëgjuhëshe, domethënë në dosje src ka kode burimore për disa gjuhë programimi dhe lidhje me njërën ose tjetrën, dhe nga ana tjetër, përdorimi i një ose një shtojce tjetër përcaktohet nga shtrirja e tij. Dhe informacioni i mbulimit mund të ruhet në vende të ndryshme për gjuhë të ndryshme programimi, kështu që çdo gjuhë ka seksionin e vet për konfigurimin e kësaj. Projekti ynë përdor i daktilografuar, kështu që ne kemi nevojë për një seksion cilësimesh vetëm për të:

sonar-projekt.veti:

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

Gjithçka është gati për lëshimin e parë të skanerit. Dua të theksoj se projekti është hidrolokator'e krijohet automatikisht herën e parë që përdorni skanerin për një projekt të caktuar. Në kohët e mëvonshme, informacioni do të grumbullohet për të parë dinamikën e ndryshimeve në parametrat e projektit me kalimin e kohës.

Pra, le të përdorim komandën e krijuar më herët package.json:

yarn run sonar

Shenim: mund të përdorni edhe parametrin -X për prerje më të detajuara.

Nëse skaneri është nisur për herë të parë, atëherë së pari do të shkarkohet binar i vetë skanerit. Pas kësaj, ai fillon dhe fillon të skanojë serverin hidrolokator'a për shtojcat e instaluara, duke llogaritur kështu gjuhën e mbështetur. Ngarkohen gjithashtu parametra të tjerë të ndryshëm për funksionimin e tij: profilet e cilësisë, rregullat aktive, depoja e metrikës, rregullat e serverit.

Shenim: Ne nuk do të ndalemi në to në detaje në kuadrin e këtij artikulli, por gjithmonë mund të kontaktoni burimet zyrtare.

Më pas, fillon analiza e dosjeve src për disponueshmërinë e skedarëve burimor për të gjitha gjuhët e mbështetura (nëse një specifik nuk është specifikuar në mënyrë eksplicite), me indeksimin e tyre të mëvonshëm.

Më pas vijnë analiza të tjera të ndryshme, në të cilat nuk fokusohemi në këtë artikull (për shembull, si lintimi, zbulimi i dyfishimit të kodit, etj.).

Në fund të punës së skanerit, të gjitha informacionet e mbledhura grumbullohen, arkivohen dhe dërgohen në server.

Pas kësaj, ne tashmë mund të shohim se çfarë ndodhi në ndërfaqen e internetit:

Siç mund ta shohim, diçka funksionoi, madje tregon një lloj mbulimi, por nuk përputhet me tonën ka-raporti.

Le ta kuptojmë. Le ta shikojmë projektin në më shumë detaje, klikojmë në vlerën e mbulimit dhe "të kalojmë" në një raport të detajuar të skedarit:

Këtu shohim, përveç dosjes kryesore, të shqyrtuar HelloWorld.vue, ka edhe dosje kryesore.ts, e cila prish të gjithë pamjen e mbulimit. Po si e kemi përjashtuar nga përllogaritja e mbulimit. Po, gjithçka është e saktë, por ishte në nivel ka, por skaneri e indeksoi, kështu që përfundoi në llogaritjet e tij.

Le ta rregullojmë këtë:

sonar-projekt.veti:

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

Do të doja të bëja një sqarim: përveç dosjeve që janë specifikuar në këtë parametër, shtohen edhe të gjitha dosjet e listuara në parametër. sonar.test.përfshirje.

Pas nisjes së skanerit, ne shohim informacionin e saktë:

Le të shohim pikën tjetër - Profile cilësore. Unë fola më lart për mbështetjen hidrolokatornga disa gjuhë në të njëjtën kohë. Kjo është pikërisht ajo që ne po shohim. Por ne e dimë se projekti ynë është shkruar në TS, pra pse ta tendosni skanerin me manipulime dhe kontrolle të panevojshme. Ne do të vendosim gjuhën për analizë duke shtuar një parametër më shumë në skedarin e konfigurimit hidrolokator'A:

sonar-projekt.veti:

...
sonar.language=ts
...

Le të ekzekutojmë përsëri skanerin dhe të shohim rezultatin:

Mbulimi ishte zhdukur plotësisht.

Nëse shikojmë regjistrin e skanerit, mund të shohim rreshtin e mëposhtëm:

Kjo do të thotë, skedarët tanë të projektit thjesht nuk u indeksuan.

Situata është si vijon: e mbështetur zyrtarisht VueJs është në shtojcë SonarJSkush është përgjegjës për Javascript.

Por kjo mbështetje nuk është në shtojcë SonarTS për TS, për të cilën u hap një biletë zyrtare në gjurmuesin e gabimeve hidrolokator'A:

Këtu janë disa përgjigje nga një prej përfaqësuesve nga zhvilluesit e SonarQube, duke konfirmuar këtë fakt.

Por gjithçka funksionoi për ne, ju kundërshtoni. Po është, le ta provojmë pak "hak".
Nëse ka mbështetje .vue-skedarët hidrolokator'Oh, atëherë le të përpiqemi t'i themi që t'i konsiderojë ato si i daktilografuar.

Le të shtojmë një parametër:

sonar-projekt.veti:

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

Le të hapim skanerin:

Dhe, voila, gjithçka është kthyer në normalitet, dhe me një profil vetëm për i daktilografuar. Kjo do të thotë, ne arritëm ta zgjidhim problemin në mbështetje VueJs+TS për soundQube.

Le të përpiqemi të shkojmë më tej dhe të përmirësojmë pak informacionin e mbulimit.

Çfarë kemi bërë deri tani:

shtuar në projekt hidrolokator-skaner;
ngritur ka për të gjeneruar informacion mbi mbulimin;
konfiguruar hidrolokator-skaner;
zgjidhi problemin e mbështetjes .vue-skedarët + i daktilografuar.

Përveç mbulimit të testit, ekzistojnë kritere të tjera interesante të dobishme për cilësinë e kodit, për shembull, dyfishimi i kodit dhe numri i rreshtave (të përfshirë në llogaritjen e koeficientëve që lidhen me kompleksitetin e kodit) të projektit.

Në zbatimin aktual të shtojcës për të punuar me TS (SonarTS) nuk punon CPD (Detektor Copy Paste) dhe numërimi i rreshtave të kodit .vue-skedarët.

Për të krijuar një situatë sintetike të dyfishimit të kodit, thjesht dubliko skedarin e komponentit me një emër tjetër dhe shtojeni gjithashtu në kod kryesore.ts një funksion dummy dhe dublikojeni atë me një emër tjetër. Për të kontrolluar për dyfishim si në .vue, dhe në .ts -skedarët.

kryesore.ts:

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

Për ta bërë këtë, duhet të komentoni përkohësisht linjën e konfigurimit:

sonar-projekt.veti:

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

Le të rifillojmë skanerin së bashku me testimin:

yarn test && yarn run sonar

Natyrisht, mbulimi ynë do të bjerë, por tani kjo nuk na intereson.

Për sa i përket dyfishimit të rreshtave të kodit, do të shohim:

Për të kontrolluar ne do të përdorim CPD- dobia - jscpd:

npx jscpd src

Për rreshtat e kodit:

Ndoshta kjo do të zgjidhet në versionet e ardhshme të shtojcave SonarJS(TS). Dua të vërej se ata gradualisht po fillojnë t'i bashkojnë këto dy shtojca në një SonarJS, që mendoj se është e saktë.

Tani doja të shqyrtoja mundësinë e përmirësimit të informacionit të mbulimit.

Deri më tani mund të shohim mbulimin e testimit në përqindje për të gjithë projektin, dhe për skedarët në veçanti. Por është e mundur të zgjerohet ky tregues me informacion në lidhje me sasinë njësi-teste për projektin, si dhe në kontekstin e skedarëve.

Ka një bibliotekë që mund ka-konvertoni raportin në format për hidrolokator'A:
të dhëna gjenerike të testit - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Le ta instalojmë këtë bibliotekë në projektin tonë:

yarn add jest-sonar-reporter

Dhe shtoni atë në konfigurim ka:

package.json:

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

Tani le të bëjmë testin:

yarn test

Pas së cilës do të krijohet një skedar në rrënjën e projektit test-raport.xml.

Le ta përdorim atë në konfigurim hidrolokator'A:

sonar-projekt.veti:

…
sonar.testExecutionReportPaths=test-report.xml
…

Dhe rinisni skanerin:

yarn run sonar

Le të shohim se çfarë ka ndryshuar në ndërfaqe hidrolokator'A:

Dhe asgjë nuk ka ndryshuar. Fakti është se Sonar nuk i konsideron skedarët e përshkruar në raportin Jest si skedarë njësi-teste. Për të korrigjuar këtë situatë, ne përdorim parametrin e konfigurimit hidrolokator sonar.teste, në të cilën do të tregojmë në mënyrë eksplicite dosjet me teste (kemi vetëm një për momentin):

sonar-projekt.veti:

…
sonar.tests=src/components/__tests__
…

Le të rifillojmë skanerin:

yarn run sonar

Le të shohim se çfarë ka ndryshuar në ndërfaqe:

Tani kemi parë numrin tonë njësi-teston dhe, pasi dështoi duke klikuar brenda, ne mund të shohim shpërndarjen e këtij numri midis skedarëve të projektit:

Përfundim

Pra, ne shikuam një mjet për analizë të vazhdueshme soundQube. Ne integruam me sukses në të një projekt të shkruar në VueJs+TS. Rregulloi disa probleme me pajtueshmërinë. Ne rritëm përmbajtjen e informacionit të treguesit të mbulimit të testit. Në këtë artikull ne shqyrtuam vetëm një nga kriteret e cilësisë së kodit (ndoshta një nga ato kryesore), por soundQube mbështet kritere të tjera të cilësisë, duke përfshirë testimin e sigurisë. Por jo të gjitha këto veçori janë plotësisht të disponueshme në Komuniteti-versionet. Një nga veçoritë interesante dhe të dobishme është integrimi soundQube me sisteme të ndryshme të menaxhimit të depove të kodeve, si GitLab dhe BitBucket. Të parandalosh merge pull(bashkim) kërkesë'a në degën kryesore të depove kur mbulimi është i degraduar. Por kjo është një histori për një artikull krejtësisht të ndryshëm.

PS: Gjithçka e përshkruar në artikull në formën e kodit është në dispozicion në piruni im.

Vetëm përdoruesit e regjistruar mund të marrin pjesë në anketë. Hyni, te lutem

A përdorni platformën SonarQube:

26,3%Po 5
15,8%Nr 3
15,8%Kam dëgjuar për këtë platformë dhe dua ta përdor3
10,5%Kam dëgjuar për këtë platformë dhe nuk dua ta përdor2
0,0%Unë jam duke përdorur një platformë tjetër0
31,6%Hera e parë që kam dëgjuar për të6

19 përdorues votuan. 3 përdorues abstenuan.

Burimi: www.habr.com

Integrimi i projektit VueJS+TS me SonarQube

Përfundim

A përdorni platformën SonarQube:

Shto një koment Cancel përgjigje