Wij maken actief gebruik van het platform in ons werk SonarQube om de codekwaliteit op een hoog niveau te houden. Bij het integreren van een van de projecten die zijn geschreven in VueJs+Typescript, er ontstonden problemen. Daarom wil ik u graag meer in detail vertellen hoe we deze hebben opgelost.

In dit artikel zullen we het hebben, zoals ik hierboven schreef, over het SonarQube-platform. Een beetje theorie - wat het in het algemeen is, voor degenen die er voor het eerst over horen:

SonarQube (voormalig Sonar) is een open source platform voor continue inspectie en meting van de codekwaliteit.
Ondersteunt codeanalyse en foutdetectie volgens de regels van de programmeerstandaarden MISRA C, MISRA C++, MITRE/CWE en CERT Secure Coding Standards. Het kan ook fouten herkennen uit de OWASP Top 10 en CWE/SANS Top 25 programmeerfoutenlijsten.
Ondanks het feit dat het platform verschillende kant-en-klare tools gebruikt, reduceert SonarQube de resultaten tot één enkel dashboard, waarbij een geschiedenis van runs wordt bijgehouden en u daardoor de algemene trend van veranderingen in de softwarekwaliteit tijdens de ontwikkeling kunt zien.

Meer details zijn te vinden op de officiële website

Er wordt een groot aantal programmeertalen ondersteund. Afgaande op de informatie uit de bovenstaande link zijn dit meer dan 25 talen. Om een ​​specifieke taal te ondersteunen, moet u de juiste plug-in installeren. De communityversie bevat een plug-in om mee te werken Javascript (inclusief typesсript), hoewel de wiki het tegenovergestelde zegt. Achter Javascript plug-in antwoorden SonarJS, voor typoscript SonarTS respectievelijk.

De officiële client wordt gebruikt om dekkingsinformatie te verzenden sonarqube-scanner, die, met behulp van de instellingen van config-file, stuurt deze gegevens naar de server SonarQube voor verdere consolidatie en aggregatie.

Voor Javascript er is npm-wikkelaar. Laten we dus beginnen met de stapsgewijze implementatie SonarQube в Vue-project gebruiken getypte tekst.

Om de server te implementeren SonarQube laten we profiteren havenarbeider-compose.

sonar.yaml:

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

Launch:

docker-compose -f sonar.yml up

Daarna SonarQube zal beschikbaar zijn op: http://localhost:9001 .

Er zitten nog geen projecten in en dat is eerlijk. Wij zullen deze situatie corrigeren. Ik heb het officiële voorbeeldproject voor genomen VueJS+TS+Jest. Laten we het naar onszelf buigen:

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

Eerst moeten we de client installeren SonarQubewelke wordt genoemd sonar-scannervoor NPM er is een verpakking:

yarn add sonarqube-scanner

En voeg onmiddellijk het commando toe aan scripts om ermee te werken.

pakket.json:

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

Om de scanner te laten werken, moet u vervolgens de projectinstellingen in een speciaal bestand instellen. Laten we beginnen met de basis.

sonar-project.eigenschappen:

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 Sonar'A;
• sonar.projectKey – unieke project-ID op de server Sonar'A;
• sonar.projectnaam – de naam ervan, deze kan op elk moment worden gewijzigd, aangezien het project wordt geïdentificeerd door projectSleutel;
• sonar.bronnen – map met bronnen, meestal deze src, maar het kan van alles zijn. Deze map wordt ingesteld ten opzichte van de hoofdmap, de map van waaruit de scanner wordt gestart;
• sonar.tests – een parameter die samengaat met de vorige. Dit is de map waarin de tests zich bevinden. In dit project bestaat zo'n map niet en de test bevindt zich naast het onderdeel dat wordt getest in de map 'proef', dus we negeren het voorlopig en gebruiken de volgende parameter;
• sonar.test.insluitsels – pad voor tests met behulp van een masker, er kunnen verschillende elementen worden vermeld, gescheiden door komma's;
• sonar.sourceEncoding – codering voor bronbestanden.

Voor de eerste lancering van de scanner is alles klaar, behalve de belangrijkste voorafgaande actie: het lanceren van de testengine zelf, zodat deze informatie kan genereren over de dekking, die de scanner vervolgens zal gebruiken.

Maar om dit te doen, moet u de testengine configureren om deze informatie te genereren. In dit project is de testmotor er is. En de instellingen ervan bevinden zich in de overeenkomstige sectie van het bestand package.json.

Laten we deze instellingen toevoegen:

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

Dat wil zeggen, we stellen de vlag zelf in voor de noodzaak om de dekking te berekenen en de bron (samen met uitzonderingen) op basis waarvan deze zal worden gevormd.

Laten we nu de test uitvoeren:

yarn test

We zullen het volgende zien:

De reden is dat er geen code in de component zelf zit. Laten we dit oplossen.

HelloWorld.vue:

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

Dit is voldoende om de dekking te berekenen.

Nadat we de test opnieuw hebben gestart, zorgen we ervoor dat:

Op het scherm zouden we informatie over de dekking moeten zien en er wordt een map aangemaakt in de projectmap dekking met testdekkingsinformatie in een universeel formaat LCOV (LTP GCOV-extensie).

Gcov is een gratis verspreid hulpprogramma voor het onderzoeken van codedekking. Gcov genereert het exacte aantal uitvoeringen voor elke instructie in een programma en stelt u in staat annotaties aan de broncode toe te voegen. Gcov wordt standaard geleverd als onderdeel van het GCC-pakket.
Lcov - grafische interface voor gcov. Het verzamelt gcov-bestanden voor meerdere bronbestanden en produceert een reeks HTML-pagina's met code- en dekkingsinformatie. Er worden ook pagina's gegenereerd om de navigatie te vergemakkelijken. Lcov ondersteunt dekking van strings, functies en vertakkingen.

Nadat de tests zijn voltooid, wordt de dekkingsinformatie weergegeven in dekking/lcov.info.
Wij moeten zeggen Sonar'Waar kan ik het vandaan halen? Laten we daarom de volgende regels aan het configuratiebestand toevoegen. Maar er is één punt: projecten kunnen meertalig zijn, dat wil zeggen in de map src er zijn broncodes voor verschillende programmeertalen en aansluiting bij de een of andere, en op zijn beurt wordt het gebruik van een of andere plug-in bepaald door de extensie ervan. En dekkingsinformatie kan voor verschillende programmeertalen op verschillende plaatsen worden opgeslagen, dus elke taal heeft zijn eigen sectie om dit in te stellen. Ons project gebruikt getypte tekst, dus we hebben er speciaal een instellingensectie voor nodig:

sonar-project.eigenschappen:

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

Alles is klaar voor de eerste lancering van de scanner. Ik zou willen opmerken dat het project dat is Sonar'e wordt automatisch aangemaakt de eerste keer dat u de scanner voor een bepaald project uitvoert. In daaropvolgende tijden zal informatie worden verzameld om de dynamiek van veranderingen in projectparameters in de loop van de tijd te zien.

Laten we dus de eerder gemaakte opdracht gebruiken package.json:

yarn run sonar 

Opmerking: U kunt ook de parameter gebruiken -X voor meer gedetailleerde logboekregistratie.

Als de scanner voor de eerste keer wordt gestart, wordt eerst het binaire bestand van de scanner zelf gedownload. Daarna begint het en begint het de server te scannen Sonar'a voor geïnstalleerde plug-ins, waarbij de ondersteunde taal wordt berekend. Diverse andere parameters voor de werking ervan worden ook geladen: kwaliteitsprofielen, actieve regels, opslagplaats voor statistieken, serverregels.

Opmerking: We zullen er in het kader van dit artikel niet in detail op ingaan, maar u kunt altijd contact opnemen met officiële bronnen.

Vervolgens begint de mapanalyse src voor de beschikbaarheid van bronbestanden voor alle (als een specifieke niet expliciet is gespecificeerd) ondersteunde talen, met hun daaropvolgende indexering.

Vervolgens komen diverse andere analyses aan bod, waar we in dit artikel niet op ingaan (bijvoorbeeld linting, detectie van duplicatie van code, etc.).

Helemaal aan het einde van het werk van de scanner wordt alle verzamelde informatie samengevoegd, gearchiveerd en naar de server verzonden.

Hierna kunnen we al zien wat er in de webinterface is gebeurd:

Zoals we kunnen zien, heeft er iets gewerkt en is er zelfs sprake van enige dekking, maar het komt niet overeen met de onze er is-rapport.

Laten we het uitzoeken. Laten we het project in meer detail bekijken, op de dekkingswaarde klikken en naar een gedetailleerd dossierrapport gaan:

Hier zien we, naast het hoofdbestand, het onderzochte dossier Hallo Wereld.vue, er is ook een bestand belangrijkste.ts, wat het hele beeld van de berichtgeving bederft. Maar hoe komt het dat we dit hebben uitgesloten van de dekkingsberekening? Ja, alles klopt, maar het was op niveau er is, maar de scanner indexeerde het, zodat het in de berekeningen terechtkwam.

Laten we dit oplossen:

sonar-project.eigenschappen:

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

Ik wil graag een verduidelijking maken: naast de mappen die in deze parameter zijn opgegeven, worden ook alle mappen die in de parameter worden vermeld toegevoegd sonar.test.insluitsels.

Na het starten van de scanner zien we de juiste informatie:

Laten we naar het volgende punt kijken - Kwaliteitsprofielen. Ik heb hierboven gesproken over ondersteuning Sonar'Om meerdere talen tegelijk. Dit is precies wat we zien. Maar we weten dat ons project is geschreven TS, dus waarom zou u de scanner belasten met onnodige manipulaties en controles? We zullen de taal voor analyse instellen door nog een parameter aan het configuratiebestand toe te voegen Sonar'A:

sonar-project.eigenschappen:

...
sonar.language=ts
...

Laten we de scanner opnieuw uitvoeren en het resultaat bekijken:

De dekking was volledig verdwenen.

Als we naar het scannerlogboek kijken, zien we de volgende regel:

Dat wil zeggen dat onze projectbestanden eenvoudigweg niet zijn geïndexeerd.

De situatie is als volgt: officieel ondersteund VueJ's staat in de plug-in SonarJSvoor wie is verantwoordelijk Javascript.

Maar deze ondersteuning zit niet in de plug-in SonarTS voor TS, waarover een officieel ticket werd geopend in de bugtracker Sonar'A:

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

Hier zijn enkele antwoorden van een van de vertegenwoordigers van de SonarQube-ontwikkelaars, die dit feit bevestigen.

Maar alles werkte voor ons, protesteert u. Ja, dat is zo, laten we het een beetje proberen “hacken”.
Als er steun is .vue-bestanden Sonar'Oh, laten we dan proberen hem te vertellen dat hij ze moet beschouwen als getypte tekst.

Laten we een parameter toevoegen:

sonar-project.eigenschappen:

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

Laten we de scanner starten:

En voila, alles is weer normaal, en met slechts één profiel getypte tekst. Dat wil zeggen, we zijn erin geslaagd het probleem ter ondersteuning op te lossen VueJs+TS voor SonarQube.

Laten we proberen verder te gaan en de dekkingsinformatie een beetje te verbeteren.

Wat we tot nu toe hebben gedaan:

• toegevoegd aan het project Sonar-scanner;
• opgericht er is om dekkingsinformatie te genereren;
• geconfigureerd Sonar-scanner;
• het ondersteuningsprobleem opgelost .vue-bestanden + getypte tekst.

Naast de testdekking zijn er nog andere interessante nuttige criteria voor codekwaliteit, bijvoorbeeld codeduplicatie en het aantal regels (betrokken bij de berekening van coëfficiënten gerelateerd aan codecomplexiteit) van het project.

In de huidige implementatie van de plugin om mee te werken TS (SonarTS) zal niet werken CPD (kopieer-plakdetector) en het tellen van regels code .vue-bestanden.

Om een ​​synthetische situatie van codeduplicatie te creëren, dupliceert u eenvoudigweg het componentbestand met een andere naam en voegt u dit ook aan de code toe belangrijkste.ts een dummy-functie en dupliceer deze met een andere naam. Om te controleren op duplicatie zoals in .vueen Ts -bestanden.

belangrijkste.ts:

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

Om dit te doen, moet u tijdelijk commentaar geven op de configuratieregel:

sonar-project.eigenschappen:

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

Laten we de scanner opnieuw opstarten en testen:

yarn test && yarn run sonar

Natuurlijk zal onze berichtgeving afnemen, maar daar zijn we nu niet in geïnteresseerd.

In termen van het dupliceren van coderegels zullen we het volgende zien:

Om dit te controleren zullen we gebruiken CPD-nutsvoorziening - jscpd:

npx jscpd src

Voor regels code:

Mogelijk wordt dit in toekomstige plug-inversies opgelost SonarJS(TS). Ik zou willen opmerken dat ze deze twee plug-ins geleidelijk beginnen samen te voegen tot één SonarJS, wat volgens mij juist is.

Nu wilde ik de mogelijkheid overwegen om de dekkingsinformatie te verbeteren.

Tot nu toe kunnen we de testdekking procentueel zien, voor het hele project en voor bestanden in het bijzonder. Maar het is mogelijk om deze indicator uit te breiden met informatie over de hoeveelheid eenheid-tests voor het project, maar ook in de context van bestanden.

Er is een bibliotheek die dat kan er is-converteer het rapport naar een formaat voor Sonar'A:
generieke testgegevens - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Laten we deze bibliotheek in ons project installeren:

yarn add jest-sonar-reporter

En voeg het toe aan de configuratie er is:

pakket.json:

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

Laten we nu de test uitvoeren:

yarn test

Hierna wordt er een bestand aangemaakt in de root van het project testrapport.xml.

Laten we het gebruiken in de configuratie Sonar'A:

sonar-project.eigenschappen:

…
sonar.testExecutionReportPaths=test-report.xml
…

En start de scanner opnieuw:

yarn run sonar

Laten we eens kijken wat er in de interface is veranderd Sonar'A:

En er is niets veranderd. Feit is dat Sonar de in het Jest-rapport beschreven bestanden niet als bestanden beschouwt eenheid-testen. Om deze situatie te corrigeren, gebruiken we de configuratieparameter Sonar sonar.tests, waarin we de mappen met tests expliciet zullen aangeven (we hebben er voorlopig maar één):

sonar-project.eigenschappen:

…
sonar.tests=src/components/__tests__
…

Laten we de scanner opnieuw opstarten:

yarn run sonar

Laten we eens kijken wat er is veranderd in de interface:

Nu hebben we het nummer van ons gezien eenheid-tests en nadat we hebben gefaald door naar binnen te klikken, kunnen we de verdeling van dit nummer over de projectbestanden zien:

Conclusie

Daarom hebben we gekeken naar een tool voor continue analyse SonarQube. We hebben er met succes een project in geïntegreerd VueJs+TS. Enkele compatibiliteitsproblemen opgelost. We hebben de informatie-inhoud van de testdekkingsindicator verhoogd. In dit artikel hebben we slechts één van de codekwaliteitscriteria onderzocht (misschien een van de belangrijkste), maar SonarQube ondersteunt andere kwaliteitscriteria, waaronder veiligheidstests. Maar niet al deze functies zijn volledig beschikbaar in gemeenschap-versies. Een van de interessante en nuttige functies is integratie SonarQube met verschillende coderepository-beheersystemen, zoals GitLab en BitBucket. Voorkomen merge pull(merge) verzoek'a naar de hoofdtak van de opslagplaats wanneer de dekking verslechtert. Maar dit is een verhaal voor een heel ander artikel.

PS: Alles wat in het artikel in de vorm van code wordt beschreven, is beschikbaar in mijn vork.

Alleen geregistreerde gebruikers kunnen deelnemen aan het onderzoek. Inloggen, Alsjeblieft.

Maakt u gebruik van het SonarQube-platform:

• 26,3%Ja5

• 15,8%Geen3

• 15,8%Ik heb over dit platform gehoord en wil 3

• 10,5%Ik heb over dit platform gehoord en wil geen gebruik maken van2

• 0,0%Ik gebruik een ander platform0

• 31,6%De eerste keer dat ik over haar hoor6

19 gebruikers hebben gestemd. 3 gebruikers onthielden zich van stemming.

Bron: www.habr.com