Интеграција ВуеЈС+ТС пројекта са СонарКубе

Активно користимо платформу у свом раду СонарКубе за одржавање квалитета кода на високом нивоу. Приликом интеграције једног од пројеката написаних у ВуеЈс+Типесцрипт, појавили су се проблеми. Стога бих желео да вам детаљније кажем како смо успели да их решимо.

Интеграција ВуеЈС+ТС пројекта са СонарКубе

У овом чланку ћемо говорити, као што сам горе написао, о платформи СонарКубе. Мало теорије - шта је то уопште, за оне који први пут чују за то:

СонарКубе (бивши Сонар) је платформа отвореног кода за континуирану инспекцију и мерење квалитета кода.
Подржава анализу кода и откривање грешака према правилима програмских стандарда МИСРА Ц, МИСРА Ц++, МИТЕР/ЦВЕ и ЦЕРТ Стандарда Сецуре Цодинг Стандардс. Такође може да препозна грешке са листа ОВАСП Топ 10 и ЦВЕ/САНС Топ 25 грешака у програмирању.
Упркос чињеници да платформа користи различите готове алате, СонарКубе своди резултате на једну контролну таблу, чувајући историју покретања и на тај начин вам омогућавајући да видите општи тренд промена квалитета софтвера током развоја.

Више детаља можете пронаћи на званични сајт

Подржан је велики број програмских језика. Судећи по информацијама са горњег линка, ради се о више од 25 језика. Да бисте подржали одређени језик, морате инсталирати одговарајући додатак. Верзија заједнице укључује додатак за рад са њим Јавасцрипт (укључујући и типографију), иако вики каже супротно. Иза Јавасцрипт плугин ансверс СонарЈС, за Типесцрипт СонарТС респективно.

Званични клијент се користи за слање информација о покривености сонаркубе-скенер, који, користећи подешавања из цонфиг-филе, шаље ове податке серверу СонарКубе за даљу консолидацију и агрегацију.

За Јавасцрипт ту је нпм омотач. Дакле, почнимо са имплементацијом корак по корак СонарКубе в Вуе-користећи пројекат Стројопис.

За постављање сервера СонарКубе хајде да искористимо доцкер-цомпосе.

сонар.иамл:

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

Лансирање:

docker-compose -f sonar.yml up

После тога СонарКубе биће доступан на: http://localhost:9001 .

Интеграција ВуеЈС+ТС пројекта са СонарКубе
У њему још нема пројеката и то је фер. Исправићемо ову ситуацију. Узео сам званични пример пројекта за ВуеЈС+ТС+Јест. Хајде да га савијемо према себи:

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

Прво морамо да инсталирамо клијента СонарКубе, која се зове сонар-скенерза нпм постоји омот:

yarn add sonarqube-scanner

И одмах додајте команду у скрипте да ради са њим.

пацкаге.јсон:

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

Затим, да би скенер радио, потребно је да подесите поставке пројекта у посебној датотеци. Почнимо са основама.

сонар-пројекат.особине:

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

  • сонар.хост.урл - адреса Сонар'А;
  • сонар.пројецтКеи – јединствени идентификатор пројекта на серверу Сонар'А;
  • сонар.пројецтНаме – његов назив, може се променити у било ком тренутку, пошто је пројекат идентификован по пројецтКеи;
  • сонар.извори – фасцикла са изворима, обично ово срц, али може бити било шта. Ова фасцикла је подешена у односу на основну фасциклу, која је фасцикла из које се покреће скенер;
  • сонар.тестирања – параметар који иде у тандему са претходним. Ово је фасцикла у којој се налазе тестови. У овом пројекту не постоји таква фасцикла, а тест се налази поред компоненте која се тестира у фасцикли 'тест', па ћемо га за сада занемарити и користити следећи параметар;
  • сонар.тест.инцлусионс – путања за тестове помоћу маске, може бити неколико елемената наведених одвојених зарезима;
  • сонар.соурцеЕнцодинг – кодирање изворних датотека.

За прво покретање скенера све је спремно, осим главне претходне радње: покретање самог тест мотора, како би могао да генерише информације о покривености, које ће скенер накнадно користити.

Али да бисте то урадили, потребно је да конфигуришете тест машину да генерише ове информације. У овом пројекту, тест мотор је има. А његова подешавања су у одговарајућем одељку датотеке пацкаге.јсон.

Хајде да додамо ова подешавања:

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

Односно, постављамо саму заставу за потребу израчунавања покривености и извор (уз изузетке) на основу којег ће се формирати.

Сада покренимо тест:

yarn test

Видећемо следеће:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Разлог је тај што у самој компоненти нема кода. Хајде да поправимо ово.

ХеллоВорлд.вуе:

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

Ово ће бити довољно за израчунавање покривености.

Након поновног покретања теста, уверићемо се у ово:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

На екрану би требало да видимо информације о покривености, а фолдер ће бити креиран у фасцикли пројекта Покривеност са информацијама о покривености тестом у универзалном формату ЛЦОВ (ЛТП ГЦОВ екстензија).

Гцов је бесплатно дистрибуиран услужни програм за испитивање покривености кода. Гцов генерише тачан број извршења за сваку наредбу у програму и омогућава вам да додате белешке у изворни код. Гцов долази као стандардни услужни програм као део ГЦЦ пакета.
Лцов - графички интерфејс за гцов. Он саставља гцов датотеке за више изворних датотека и производи скуп ХТМЛ страница са кодом и информацијама о покривености. Странице се такође генеришу да олакшају навигацију. Лцов подржава покривање низова, функција и грана.

Након што се тестови заврше, информације о покривености ће се налазити у цовераге/лцов.инфо.
Морамо рећи Сонар'Одакле могу да га набавим? Стога, додајмо следеће редове његовој конфигурационој датотеци. Али постоји једна ствар: пројекти могу бити вишејезични, односно у фасцикли срц постоје изворни кодови за неколико програмских језика и припадност једном или другом, а заузврат, употреба једног или другог додатка је одређена његовом екстензијом. А информације о покривености могу да се чувају на различитим местима за различите програмске језике, тако да сваки језик има свој одељак за ово подешавање. Наш пројекат користи Стројопис, тако да нам је потребан одељак подешавања само за то:

сонар-пројекат.особине:

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

Све је спремно за прво покретање скенера. Желео бих да напоменем да је пројекат Сонар'е се креира аутоматски када први пут покренете скенер за дати пројекат. У наредним временима, информације ће се акумулирати како би се видела динамика промена параметара пројекта током времена.

Дакле, хајде да користимо команду креирану раније у пацкаге.јсон:

yarn run sonar 

Напомена: можете користити и параметар -X ради детаљнијег евидентирања.

Ако је скенер покренут први пут, тада ће се прво преузети бинарни запис самог скенера. Након тога се покреће и почиње скенирање сервера Сонар'а за инсталиране додатке, чиме се израчунава подржани језик. Учитавају се и разни други параметри за његов рад: квалитетни профили, активна правила, ризница метрика, правила сервера.

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Напомена: Нећемо се детаљније задржавати на њима у оквиру овог чланка, али увек можете контактирати званичне изворе.

Затим почиње анализа фасцикле срц за доступност изворних датотека за све (ако одређени није експлицитно наведен) подржане језике, уз њихово накнадно индексирање.

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Следе разне друге анализе, на које се у овом чланку не фокусирамо (на пример, као што су линтинг, детекција дуплирања кода, итд.).

На самом крају рада скенера, све прикупљене информације се агрегирају, архивирају и шаљу на сервер.

Након овога, већ можемо да видимо шта се десило у веб интерфејсу:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Као што видимо, нешто је успело, па чак и показује неку врсту покривености, али не поклапа се са нашим има-извештај.

Хајде да то схватимо. Хајде да детаљније погледамо пројекат, кликнемо на вредност покривености и „упаднемо“ у детаљан извештај о фајлу:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Овде видимо, поред главног, прегледани фајл ХеллоВорлд.вуе, постоји и датотека маин.тс, што квари целу слику покривености. Али како то да смо то искључили из обрачуна покрића. Да, све је тачно, али је било на нивоу има, али га је скенер индексирао, па је завршио у његовим прорачунима.

Хајде да поправимо ово:

сонар-пројекат.особине:

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

Желео бих да направим појашњење: поред фасцикли које су наведене у овом параметру, додају се и сви директоријуми наведени у параметру сонар.тест.инцлусионс.

Након покретања скенера, видимо тачне информације:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Хајде да погледамо следећу тачку - Квалитетни профили. Горе сам говорио о подршци Сонарна више језика у исто време. То је управо оно што видимо. Али знамо да је наш пројекат уписан TS, па зашто напрезати скенер непотребним манипулацијама и проверама. Подесићемо језик за анализу додавањем још једног параметра у конфигурациони фајл Сонар'А:

сонар-пројекат.особине:

...
sonar.language=ts
...

Хајде да поново покренемо скенер и видимо резултат:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Покривеност је потпуно нестала.

Ако погледамо дневник скенера, можемо видети следећи ред:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

То јест, наши пројектни фајлови једноставно нису индексирани.

Ситуација је следећа: званично подржана ВуеЈс је у додатку СонарЈСко је одговоран за Јавасцрипт.

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Али ова подршка није у додатку СонарТС за TS, о чему је отворена званична карта у баг трацкеру Сонар'А:

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

Ево неколико одговора једног од представника програмера СонарКубе, који потврђују ову чињеницу.

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Али све нам је успело, приговорите. Да јесте, хајде да пробамо мало "хацк".
Ако постоји подршка .вуе-фајлови Сонар„Ох, хајде да покушамо да му кажемо да их сматра као Стројопис.

Хајде да додамо параметар:

сонар-пројекат.особине:

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

Хајде да покренемо скенер:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

И, воила, све се вратило у нормалу, и то само са једним профилом за Стројопис. Односно, успели смо да решимо проблем у подршци ВуеЈс+ТС за СонарКубе.

Хајде да покушамо да идемо даље и мало побољшамо информације о покривености.

Шта смо до сада урадили:

  • додато у пројекат Сонар-скенер;
  • подесити има да генерише информације о покривености;
  • конфигурисан Сонар-скенер;
  • решио проблем подршке .вуе-филес + Стројопис.

Поред покривености тестом, постоје и други занимљиви корисни критеријуми за квалитет кода, на пример, дуплирање кода и број линија (укључених у израчунавање коефицијената који се односе на сложеност кода) пројекта.

У тренутној имплементацији додатка за рад са TS (СонарТС) неће радити ЦПД (Цопи Пасте Детецтор) и бројање редова кода .вуе-фајлови.

Да бисте створили синтетичку ситуацију дуплирања кода, једноставно дуплирајте датотеку компоненте са другим именом и додајте је у код маин.тс лажну функцију и дуплирајте је другим именом. За проверу дуплирања као у .вуе, и ин .тс -фајлови.

маин.тс:

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

Да бисте то урадили, морате привремено да коментаришете конфигурациону линију:

сонар-пројекат.особине:

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

Хајде да поново покренемо скенер заједно са тестирањем:

yarn test && yarn run sonar

Наравно, покривеност ће нам пасти, али сада нас то не занима.

Што се тиче дуплирања линија кода, видећемо:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

За проверу користићемо ЦПД-корисност - јсцпд:

npx jscpd src

Интеграција ВуеЈС+ТС пројекта са СонарКубе

За линије кода:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Можда ће ово бити решено у будућим верзијама додатака СонарЈС(ТС). Желео бих да приметим да постепено почињу да спајају ова два додатка у један СонарЈС, што мислим да је тачно.

Сада сам желео да размотрим опцију побољшања информација о покривености.

До сада можемо видети покривеност тестом у процентима за цео пројекат, а посебно за фајлове. Али могуће је проширити овај индикатор информацијама о количини јединица-тестове за пројекат, као иу контексту фајлова.

Постоји библиотека која може има-претворити извештај у формат за Сонар'А:
генерички тест података - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Хајде да инсталирамо ову библиотеку у наш пројекат:

yarn add jest-sonar-reporter

И додајте га у конфигурацију има:

пацкаге.јсон:

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

Сада покренимо тест:

yarn test

Након тога ће бити креирана датотека у корену пројекта тест-репорт.кмл.

Хајде да га користимо у конфигурацији Сонар'А:

сонар-пројекат.особине:

…
sonar.testExecutionReportPaths=test-report.xml
…

И поново покрените скенер:

yarn run sonar

Да видимо шта се променило у интерфејсу Сонар'А:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

И ништа се није променило. Чињеница је да Сонар датотеке описане у извештају Јест не сматра датотекама јединица-тестови. Да бисмо исправили ову ситуацију, користимо параметар конфигурације Сонар сонар.тестирања, у којем ћемо експлицитно назначити директоријуме са тестовима (за сада имамо само један):

сонар-пројекат.особине:

…
sonar.tests=src/components/__tests__
…

Поново покренимо скенер:

yarn run sonar

Да видимо шта се променило у интерфејсу:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Сада смо видели број наших јединица-тестове и, пошто није успео кликом унутра, можемо видети дистрибуцију овог броја међу пројектним фајловима:

Интеграција ВуеЈС+ТС пројекта са СонарКубе

Закључак

Дакле, погледали смо алат за континуирану анализу СонарКубе. Успешно смо интегрисали у њу пројекат написан ВуеЈс+ТС. Поправљени су неки проблеми са компатибилношћу. Повећали смо информативни садржај индикатора покривености тестом. У овом чланку смо испитали само један од критеријума квалитета кода (можда један од главних), али СонарКубе подржава друге критеријуме квалитета, укључујући тестирање безбедности. Али нису све ове функције у потпуности доступне заједница-верзије. Једна од занимљивих и корисних карактеристика је интеграција СонарКубе са различитим системима за управљање репозиторијумом кода, као што су ГитЛаб и БитБуцкет. За спречавање Мерге пулл(спајање) захтев'а у главну грану спремишта када је покривеност смањена. Али ово је прича за сасвим другачији чланак.

ПС: Све што је описано у чланку у облику кода доступно је у моја виљушка.

Само регистровани корисници могу учествовати у анкети. Пријавите се, Добродошао си.

Да ли користите СонарКубе платформу:

  • 100%Иес5

  • 100%Но3

  • 100%Чуо сам за ову платформу и желим да је користим3

  • 100%Чуо сам за ову платформу и не желим да је користим2

  • 100%Користим другу платформу0

  • 100%Први пут чујем за њу6

Гласало је 19 корисника. 3 корисника су била уздржана.

Извор: ввв.хабр.цом

Додај коментар