Активно ја користиме платформата во нашата работа soundQube за одржување на квалитетот на кодот на високо ниво. При интегрирање на еден од проектите напишан во VueJs+Typescript, се појавија проблеми. Затоа, би сакал подетално да ви кажам како успеавме да ги решиме.

Во оваа статија ќе зборуваме, како што напишав погоре, за платформата SonarQube. Мала теорија - што е тоа воопшто, за оние кои првпат слушаат за тоа:

soundQube (поранешен Сонар) е платформа со отворен код за континуирана проверка и мерење на квалитетот на кодот.
Поддржува анализа на кодови и откривање грешки според правилата на програмските стандарди MISRA C, MISRA C++, MITER/CWE и CERT Secure Coding Standards. Исто така, може да препознае грешки од списоците со програмски грешки Топ 10 и CWE/SANS Топ 25 на OWASP.
И покрај фактот што платформата користи различни готови алатки, SonarQube ги намалува резултатите на една контролна табла, чувајќи историја на работи и со тоа ви овозможува да го видите општиот тренд на промени во квалитетот на софтверот за време на развојот.

Повеќе детали може да се најдат на официјална веб-страница

Поддржани се голем број програмски јазици. Судејќи според информациите од врската погоре, ова се повеќе од 25 јазици. За поддршка на одреден јазик, мора да го инсталирате соодветниот приклучок. Верзијата на заедницата вклучува приклучок за работа со Го вклучите Javascript- (вклучувајќи typeсript), иако викито го кажува спротивното. Зад Го вклучите Javascript- одговори на приклучокот SonarJS, за Typescript SonarTS соодветно.

Официјалниот клиент се користи за испраќање информации за покриеност сонаркубе-скенер, кој, користејќи ги поставките од конфигурациски-датотека, ги испраќа овие податоци до серверот soundQube за понатамошна консолидација и агрегација.

За Го вклучите Javascript- постои npm обвивка. Значи, да започнеме чекор-по-чекор имплементација soundQube в Vue-проект со користење Машина за пишување.

За распоредување на серверот soundQube ајде да ги искористиме докер-компонира.

сонар.yaml:

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

Лансира:

docker-compose -f sonar.yml up

Потоа soundQube ќе бидат достапни на: http://localhost:9001 .

Сè уште нема проекти во него и тоа е фер. Ќе ја поправиме оваа ситуација. Го зедов официјалниот пример проект за VueJS+TS+Jest. Ајде да го свиткаме кон себе:

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

Прво треба да го инсталираме клиентот soundQube, кој се нарекува сонар-скенерза npm има обвивка:

yarn add sonarqube-scanner

И веднаш додадете ја командата во скрипти да работи со него.

пакет.json:

{
 … 
   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

• sonar.host.url - адреса Сонар'А;
• сонар.projectKey – единствен идентификатор на проектот на серверот Сонар'А;
• сонар.Име на проектот – неговото име, може да се смени во секое време, бидејќи проектот е идентификуван од проектКлуч;
• сонар.извори – папка со извори, обично ова src, но може да биде се. Оваа папка е поставена во однос на основната папка, која е папката од која се стартува скенерот;
• сонар.тестови – параметар кој оди во тандем со претходниот. Ова е папката каде што се наоѓаат тестовите. Во овој проект, нема таква папка, а тестот се наоѓа веднаш до компонентата што се тестира во папката 'тест', така што засега ќе го игнорираме и ќе го користиме следниот параметар;
• сонар.тест.вклучувања – патека за тестови со помош на маска, може да има неколку елементи наведени поделени со запирки;
• сонар.изворЕнкодирање – кодирање за изворни датотеки.

За првото лансирање на скенерот, сè е подготвено, освен главното претходно дејство: стартување на самиот тест-мотор, за да може да генерира информации за покриеноста, што скенерот последователно ќе ги користи.

Но, за да го направите ова, треба да го конфигурирате тест моторот за да ги генерира овие информации. Во овој проект, тест моторот е постои. И неговите поставки се во соодветниот дел од датотеката пакет.json.

Ајде да ги додадеме овие поставки:

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

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

Сега да го извршиме тестот:

yarn test

Ќе го видиме следново:

Причината е што нема код во самата компонента. Ајде да го поправиме ова.

HelloWorld.vue:

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

Ова ќе биде доволно за да се пресмета покриеноста.

Откако ќе го рестартираме тестот, ќе се увериме во ова:

На екранот треба да видиме информации за покриеноста и ќе се креира папка во папката на проектот покриеност со информации за покриеност на тестот во универзален формат LCOV (продолжување LTP GCOV).

Гцов е слободно дистрибуирана алатка за испитување на покриеноста на кодот. Gcov го генерира точниот број на извршување за секоја изјава во програмата и ви овозможува да додавате прибелешки на изворниот код. Gcov доаѓа како стандардна алатка како дел од пакетот GCC.
Лцов - графички интерфејс за gcov. Склопува gcov-датотеки за повеќе изворни датотеки и произведува збир на HTML-страници со код и информации за покриеност. Страниците исто така се генерираат за да се олесни навигацијата. Lcov поддржува покривање на низи, функции и гранки.

По завршувањето на тестовите, информациите за покриеноста ќе бидат лоцирани во покриеност/lcov.info.
Треба да кажеме Сонар„Од каде можам да го добијам? Затоа, да ги додадеме следните редови во неговата конфигурациска датотека. Но, постои една точка: проектите можат да бидат повеќејазични, односно во папката src постојат изворни кодови за неколку програмски јазици и поврзаност со еден или друг, а за возврат, употребата на еден или друг приклучок се одредува со неговото проширување. И информациите за покриеноста може да се складираат на различни места за различни програмски јазици, така што секој јазик има свој дел за поставување на ова. Нашиот проект користи Машина за пишување, затоа ни треба дел за поставки само за него:

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

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

Сè е подготвено за првото лансирање на скенерот. Би сакал да напоменам дека проектот е Сонар'e се креира автоматски при првиот пат кога ќе го стартувате скенерот за даден проект. Во следните времиња, информациите ќе се акумулираат со цел да се види динамиката на промените во параметрите на проектот со текот на времето.

Значи, ајде да ја користиме командата создадена претходно во пакет.json:

yarn run sonar 

Забелешка: можете да го користите и параметарот -X за подетално сеча.

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

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

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

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

На самиот крај од работата на скенерот, сите собрани информации се собираат, архивираат и се испраќаат до серверот.

По ова, веќе можеме да видиме што се случи во веб-интерфејсот:

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

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

Овде гледаме, покрај главната, испитувана датотека HelloWorld.vue, има и датотека главни.ц, што ја расипува целата слика за покриеноста. Но, како тоа го исклучивме од пресметката на покриеноста. Да, се е точно, но беше на ниво постои, но скенерот го индексираше, па заврши во неговите пресметки.

Ајде да го поправиме ова:

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

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

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

По стартувањето на скенерот, ги гледаме точните информации:

Да ја погледнеме следната точка - Квалитетни профили. Зборував погоре за поддршка Сонар„Од неколку јазици во исто време. Ова е токму она што го гледаме. Но, знаеме дека нашиот проект е напишан во TS, па зошто да го напрегате скенерот со непотребни манипулации и проверки. Јазикот за анализа ќе го поставиме со додавање на уште еден параметар во конфигурациската датотека Сонар'А:

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

...
sonar.language=ts
...

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

Покриеноста беше целосно исчезна.

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

Тоа е, нашите проектни датотеки едноставно не беа индексирани.

Ситуацијата е следна: официјално поддржана VueJs е во приклучокот SonarJSкој е одговорен за Го вклучите Javascript-.

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

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

Еве неколку одговори од еден од претставниците на програмерите на SonarQube, кои го потврдуваат овој факт.

Но, сè функционираше за нас, вие се противите. Да е така, ајде да пробаме малку „хакирање“.
Доколку има поддршка .vue-датотеки Сонар„О, тогаш ајде да се обидеме да му кажеме да ги смета за нив Машина за пишување.

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

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

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

Ајде да го стартуваме скенерот:

И, voila, се се врати во нормала, и тоа со еден профил само за Машина за пишување. Односно, успеавме да го решиме проблемот во поддршка VueJs+TS за soundQube.

Ајде да се обидеме да одиме понатаму и малку да ги подобриме информациите за покриеноста.

Што направивме досега:

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

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

Во тековната имплементација на приклучокот за работа со TS (SonarTS) нема да работи CPD (Детектор за копирање вметнување) и броење линии на код .vue-датотеки.

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

main.ts:

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

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

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

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

Ајде да го рестартираме скенерот заедно со тестирањето:

yarn test && yarn run sonar

Секако дека ќе ни падне покриеноста, но сега тоа не не интересира.

Во однос на дуплирање на линии на код, ќе видиме:

За да провериме ќе користиме КПД-алатка - jscpd:

npx jscpd src

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

Можеби ова ќе се реши во идните верзии на приклучокот SonarJS(TS). Би сакал да забележам дека тие постепено почнуваат да ги спојуваат овие два приклучоци во еден SonarJS, што мислам дека е точно.

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

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

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

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

yarn add jest-sonar-reporter

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

пакет.json:

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

Сега да го извршиме тестот:

yarn test

По што ќе се креира датотека во коренот на проектот тест-извештај.xml.

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

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

…
sonar.testExecutionReportPaths=test-report.xml
…

И перезапустим сканер:

yarn run sonar

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

И ништо не се смени. Факт е дека Sonar не ги смета датотеките опишани во извештајот Jest како датотеки единица- тестови. За да ја поправиме оваа ситуација, го користиме параметарот за конфигурација Сонар сонар.тестови, во која експлицитно ќе ги посочиме папките со тестови (засега имаме само еден):

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

…
sonar.tests=src/components/__tests__
…

Ајде да го рестартираме скенерот:

yarn run sonar

Ајде да видиме што се смени во интерфејсот:

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

Заклучок

Значи, погледнавме алатка за континуирана анализа soundQube. Успешно интегриравме во него проект напишан во VueJs+TS. Поправени некои проблеми со компатибилноста. Ја зголемивме информациската содржина на индикаторот за покриеност на тестот. Во оваа статија испитавме само еден од критериумите за квалитет на кодот (можеби еден од главните), но soundQube поддржува други критериуми за квалитет, вклучително и безбедносно тестирање. Но, не сите од овие функции се целосно достапни во заедницата- верзии. Една од интересните и корисни карактеристики е интеграцијата soundQube со различни системи за управување со складиштето на код, како што се GitLab и BitBucket. За да се спречи merge pull(merge) барање'a до главната гранка на складиштето кога покриеноста е деградирана. Но, ова е приказна за сосема друга статија.

PS: Сè што е опишано во статијата во форма на код е достапно во мојата вилушка.

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

Дали ја користите платформата SonarQube:

• 26,3%Да 5

• 15,8%Бр 3 г

• 15,8%Слушнав за оваа платформа и сакам да ја користам3

• 10,5%Слушнав за оваа платформа и не сакам да ја користам2

• 0,0%Јас користам друга платформа0

• 31,6%Прв пат слушам за неа6

Гласаа 19 корисници. 3 корисници се воздржаа.

Извор: www.habr.com