Kami secara aktif menggunakan platform ini dalam pekerjaan kami soundQube untuk menjaga kualitas kode pada tingkat tinggi. Saat mengintegrasikan salah satu proyek yang tertulis VueJs+Skrip Ketik, masalah muncul. Oleh karena itu, saya ingin memberi tahu Anda lebih detail bagaimana kami berhasil menyelesaikannya.

Pada artikel ini kita akan berbicara, seperti yang saya tulis di atas, tentang platform SonarQube. Sedikit teori - apa itu secara umum, bagi mereka yang baru pertama kali mendengarnya:

soundQube (mantan Sonar) adalah platform sumber terbuka untuk inspeksi berkelanjutan dan pengukuran kualitas kode.
Mendukung analisis kode dan deteksi kesalahan sesuai dengan aturan standar pemrograman MISRA C, MISRA C++, MITRE/CWE dan CERT Secure Coding Standards. Ia juga dapat mengenali kesalahan dari daftar kesalahan pemrograman OWASP Top 10 dan CWE/SANS Top 25.
Terlepas dari kenyataan bahwa platform menggunakan berbagai alat siap pakai, SonarQube mengurangi hasilnya menjadi satu dasbor, menyimpan riwayat pengoperasian dan dengan demikian memungkinkan Anda melihat tren umum perubahan kualitas perangkat lunak selama pengembangan.

Detail lebih lanjut dapat ditemukan di situs resmi

Sejumlah besar bahasa pemrograman didukung. Dilihat dari informasi dari link di atas, ini lebih dari 25 bahasa. Untuk mendukung bahasa tertentu, Anda harus menginstal plugin yang sesuai. Versi komunitas menyertakan plugin untuk digunakan Javascript (termasuk Typesript), meskipun wiki mengatakan sebaliknya. Di belakang Javascript jawaban plugin SonarJS, untuk Naskah Ketik SonarTS masing.

Klien resmi digunakan untuk mengirim informasi cakupan pemindai sonarqube, yang mana, menggunakan pengaturan dari config-file, mengirimkan data ini ke server soundQube untuk konsolidasi dan agregasi lebih lanjut.

Untuk Javascript ada pembungkus npm. Jadi, mari kita mulai penerapan langkah demi langkah soundQube в Pandangan-proyek menggunakan Naskah.

Untuk menyebarkan server soundQube mari kita manfaatkan docker-compose.

sonar.yaml:

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

Meluncurkan:

docker-compose -f sonar.yml up

Setelah itu soundQube akan tersedia di: http://localhost:9001 .

Belum ada proyek di dalamnya dan itu wajar. Kami akan memperbaiki situasi ini. Saya mengambil contoh proyek resmi untuk VueJS+TS+Lelucon. Mari kita arahkan ke diri kita sendiri:

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

Pertama kita perlu menginstal klien soundQubeyang disebut pemindai sonaruntuk npm ada pembungkusnya:

yarn add sonarqube-scanner

Dan segera tambahkan perintah ke script untuk bekerja dengannya.

paket.json:

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

Selanjutnya, agar pemindai berfungsi, Anda perlu mengatur pengaturan proyek dalam file khusus. Mari kita mulai dengan dasar-dasarnya.

proyek-sonar.properti:

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 - alamat Sonar'A;
• sonar.projectKey – pengidentifikasi proyek unik di server Sonar'A;
• sonar.namaproyek – namanya, dapat diubah sewaktu-waktu, sejak proyek diidentifikasi oleh kunci proyek;
• sonar.sources – folder dengan sumber, biasanya ini src, tapi bisa apa saja. Folder ini diatur relatif terhadap folder akar, yaitu folder tempat pemindai diluncurkan;
• sonar.tes – parameter yang sejalan dengan parameter sebelumnya. Ini adalah folder tempat tes berada. Dalam proyek ini, tidak ada folder seperti itu, dan pengujian terletak di sebelah komponen yang diuji di folder 'uji', jadi kita akan mengabaikannya untuk saat ini dan menggunakan parameter berikutnya;
• sonar.test.inklusi – jalur untuk pengujian menggunakan mask, mungkin ada beberapa elemen yang dicantumkan dipisahkan dengan koma;
• sonar.sourceEncoding – pengkodean untuk file sumber.

Untuk peluncuran pertama pemindai, semuanya sudah siap, kecuali tindakan utama sebelumnya: meluncurkan mesin uji itu sendiri, sehingga dapat menghasilkan informasi tentang cakupan, yang nantinya akan digunakan pemindai.

Namun untuk melakukan ini, Anda perlu mengkonfigurasi mesin pengujian untuk menghasilkan informasi ini. Dalam proyek ini, mesin ujinya adalah ada. Dan pengaturannya ada di bagian file yang sesuai package.json.

Mari tambahkan pengaturan ini:

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

Artinya, kami menetapkan bendera itu sendiri untuk kebutuhan menghitung cakupan dan sumber (bersama dengan pengecualian) yang menjadi dasar pembentukannya.

Sekarang mari kita jalankan tesnya:

yarn test

Kita akan melihat yang berikut ini:

Alasannya adalah tidak ada kode di dalam komponen itu sendiri. Mari kita perbaiki ini.

HaloDunia.vue:

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

Ini akan cukup untuk menghitung cakupan.

Setelah memulai kembali pengujian, kami akan memastikan hal ini:

Di layar kita akan melihat informasi tentang cakupan, dan sebuah folder akan dibuat di folder proyek liputan dengan informasi cakupan tes dalam format universal LCOV (ekstensi LTP GCOV).

Gcov adalah utilitas yang didistribusikan secara bebas untuk memeriksa cakupan kode. Gcov menghasilkan jumlah eksekusi yang tepat untuk setiap pernyataan dalam suatu program dan memungkinkan Anda menambahkan anotasi ke kode sumber. Gcov hadir sebagai utilitas standar sebagai bagian dari paket GCC.
Lcov - antarmuka grafis untuk gcov. Ini merakit file gcov untuk beberapa file sumber dan menghasilkan satu set halaman HTML dengan kode dan informasi cakupan. Halaman juga dibuat untuk mempermudah navigasi. Lcov mendukung cakupan string, fungsi, dan cabang.

Setelah tes selesai, informasi cakupan akan ditempatkan di liputan/lcov.info.
Kita perlu mengatakannya Sonar'Dari mana saya dapat memperolehnya? Oleh karena itu, mari tambahkan baris berikut ke file konfigurasinya. Tapi ada satu hal: proyek bisa multibahasa, yaitu di dalam folder src ada kode sumber untuk beberapa bahasa pemrograman dan afiliasinya dengan satu atau lain hal, dan pada gilirannya, penggunaan plugin tertentu ditentukan oleh ekstensinya. Dan informasi cakupan dapat disimpan di tempat berbeda untuk bahasa pemrograman berbeda, sehingga setiap bahasa memiliki bagiannya sendiri untuk mengaturnya. Proyek kami menggunakan Naskah, jadi kita memerlukan bagian pengaturan hanya untuk itu:

proyek-sonar.properti:

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

Semuanya siap untuk peluncuran pertama pemindai. Saya ingin mencatat bahwa proyek ini SonarIni dibuat secara otomatis saat pertama kali Anda menjalankan pemindai untuk proyek tertentu. Di masa-masa berikutnya, informasi akan dikumpulkan untuk melihat dinamika perubahan parameter proyek dari waktu ke waktu.

Jadi, mari gunakan perintah yang dibuat sebelumnya package.json:

yarn run sonar 

Catatan: Anda juga dapat menggunakan parameternya -X untuk pencatatan lebih detail.

Jika pemindai diluncurkan untuk pertama kalinya, maka biner pemindai itu sendiri akan diunduh terlebih dahulu. Setelah itu dimulai dan mulai memindai server Sonar'a untuk plugin yang diinstal, sehingga menghitung bahasa yang didukung. Berbagai parameter lain untuk pengoperasiannya juga dimuat: profil kualitas, aturan aktif, repositori metrik, aturan server.

Catatan: Kami tidak akan membahasnya secara rinci dalam artikel ini, tetapi Anda selalu dapat menghubungi sumber resmi.

Selanjutnya, analisis folder dimulai src untuk ketersediaan file sumber untuk semua (jika yang spesifik tidak ditentukan secara eksplisit) bahasa yang didukung, dengan pengindeksan selanjutnya.

Berikutnya adalah berbagai analisis lainnya yang tidak kami fokuskan dalam artikel ini (misalnya seperti linting, deteksi duplikasi kode, dll).

Di akhir pekerjaan pemindai, semua informasi yang dikumpulkan dikumpulkan, diarsipkan, dan dikirim ke server.

Setelah ini, kita sudah dapat melihat apa yang terjadi di antarmuka web:

Seperti yang bisa kita lihat, ada sesuatu yang berhasil, dan bahkan menunjukkan semacam liputan, tetapi tidak sesuai dengan liputan kita ada-laporan.

Mari kita cari tahu. Mari kita lihat proyek ini lebih detail, klik pada nilai cakupan, dan “masuk” ke dalam laporan file terperinci:

Di sini kita melihat, selain file utama, file yang diperiksa HaloDunia.vue, ada juga file utama.ts, yang merusak gambaran keseluruhan liputan. Tapi kok kami mengecualikannya dari perhitungan pertanggungan. Ya, semuanya benar, tetapi berada pada level yang sama ada, tetapi pemindai mengindeksnya, sehingga berakhir dalam penghitungannya.

Mari kita perbaiki ini:

proyek-sonar.properti:

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

Saya ingin mengklarifikasi: selain folder yang ditentukan dalam parameter ini, semua folder yang tercantum dalam parameter juga ditambahkan sonar.test.inklusi.

Setelah meluncurkan pemindai, kami melihat informasi yang benar:

Mari kita lihat poin berikutnya - Profil berkualitas. Saya berbicara di atas tentang dukungan Sonar'om beberapa bahasa secara bersamaan. Inilah yang sebenarnya kita lihat. Tapi kami tahu bahwa proyek kami sudah tertulis TS, jadi mengapa membebani pemindai dengan manipulasi dan pemeriksaan yang tidak perlu. Kami akan mengatur bahasa untuk analisis dengan menambahkan satu parameter lagi ke file konfigurasi Sonar'A:

proyek-sonar.properti:

...
sonar.language=ts
...

Mari kita jalankan kembali pemindai dan lihat hasilnya:

Cakupannya benar-benar hilang.

Jika kita melihat log pemindai, kita dapat melihat baris berikut:

Artinya, file proyek kami tidak diindeks.

Situasinya adalah sebagai berikut: didukung secara resmi Vuejs ada di plugin SonarJSsiapa yang bertanggung jawab Javascript.

Namun dukungan ini tidak ada di plugin SonarTS untuk TS, yang tiket resminya dibuka di pelacak bug Sonar'A:

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

Berikut beberapa jawaban dari salah satu perwakilan pengembang SonarQube yang membenarkan fakta tersebut.

Tapi semuanya berhasil untuk kami, Anda keberatan. Ya benar, mari kita coba sedikit "meretas".
Jika ada dukungan .vue-file Sonar'oh, kalau begitu mari kita coba katakan padanya untuk mempertimbangkan mereka sebagai Naskah.

Mari tambahkan parameter:

proyek-sonar.properti:

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

Mari luncurkan pemindai:

Dan, voila, semuanya kembali normal, dan hanya dengan satu profil saja Naskah. Artinya, kami berhasil menyelesaikan masalah secara dukungan VueJs+TS untuk soundQube.

Mari kita coba melangkah lebih jauh dan sedikit meningkatkan cakupan informasi.

Apa yang telah kami lakukan sejauh ini:

• ditambahkan ke proyek Sonar-scanner;
• mempersiapkan ada untuk menghasilkan informasi cakupan;
• dikonfigurasi Sonar-scanner;
• memecahkan masalah dukungan .vue-file + Naskah.

Selain cakupan pengujian, ada kriteria menarik lainnya yang berguna untuk kualitas kode, misalnya, duplikasi kode dan jumlah baris (yang terlibat dalam penghitungan koefisien terkait kompleksitas kode) proyek.

Dalam implementasi saat ini plugin untuk digunakan TS (SonarTS) Tidak akan berhasil CPD (Detektor Salin Tempel) dan menghitung baris kode .vue-file.

Untuk membuat situasi sintetik duplikasi kode, cukup duplikat file komponen dengan nama berbeda dan tambahkan juga ke kode utama.ts fungsi dummy dan duplikat dengan nama yang berbeda. Untuk memeriksa duplikasi seperti pada .vue, dan masuk .ts -file.

main.ts:

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

Untuk melakukan ini, Anda perlu memberi komentar sementara pada baris konfigurasi:

proyek-sonar.properti:

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

Mari kita mulai ulang pemindai bersamaan dengan pengujian:

yarn test && yarn run sonar

Tentu saja cakupan kami akan turun, tetapi sekarang kami tidak tertarik dengan hal itu.

Dalam hal menduplikasi baris kode, kita akan melihat:

Untuk memeriksa kami akan menggunakan CPD-kegunaan - jscpd:

npx jscpd src

Untuk baris kode:

Mungkin masalah ini akan teratasi di versi plugin mendatang SonarJS(TS). Saya ingin mencatat bahwa mereka secara bertahap mulai menggabungkan kedua plugin ini menjadi satu SonarJS, yang menurut saya benar.

Sekarang saya ingin mempertimbangkan pilihan untuk meningkatkan cakupan informasi.

Sejauh ini kita dapat melihat cakupan pengujian dalam persentase untuk keseluruhan proyek, dan untuk file pada khususnya. Namun indikator ini dapat diperluas dengan informasi kuantitas satuan-tes untuk proyek, serta dalam konteks file.

Ada perpustakaan yang bisa ada-mengubah laporan ke dalam format untuk Sonar'A:
data uji umum - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Mari instal perpustakaan ini di proyek kita:

yarn add jest-sonar-reporter

Dan tambahkan ke konfigurasi ada:

paket.json:

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

Sekarang mari kita jalankan tesnya:

yarn test

Setelah itu file akan dibuat di root proyek laporan-tes.xml.

Mari kita gunakan dalam konfigurasi Sonar'A:

proyek-sonar.properti:

…
sonar.testExecutionReportPaths=test-report.xml
…

Dan mulai ulang pemindai:

yarn run sonar

Mari kita lihat apa yang berubah pada antarmuka Sonar'A:

Dan tidak ada yang berubah. Faktanya adalah Sonar tidak menganggap file yang dijelaskan dalam laporan Jest sebagai file satuan-tes. Untuk memperbaiki situasi ini, kami menggunakan parameter konfigurasi Sonar sonar.tes, di mana kami akan secara eksplisit menunjukkan folder dengan tes (kami hanya memiliki satu untuk saat ini):

proyek-sonar.properti:

…
sonar.tests=src/components/__tests__
…

Mari kita mulai ulang pemindai:

yarn run sonar

Mari kita lihat apa yang berubah pada antarmuka:

Sekarang kita telah melihat jumlah kita satuan-tes dan, setelah gagal dengan mengklik di dalam, kita dapat melihat distribusi nomor ini di antara file proyek:

Kesimpulan

Jadi, kami melihat alat untuk analisis berkelanjutan soundQube. Kami berhasil mengintegrasikan ke dalamnya proyek tertulis VueJs+TS. Memperbaiki beberapa masalah kompatibilitas. Kami meningkatkan kandungan informasi dari indikator cakupan tes. Pada artikel ini kami hanya memeriksa satu kriteria kualitas kode (mungkin salah satu kriteria utama), namun soundQube mendukung kriteria kualitas lainnya, termasuk pengujian keamanan. Namun tidak semua fitur tersebut tersedia sepenuhnya di masyarakat-versi. Salah satu fitur yang menarik dan bermanfaat adalah integrasi soundQube dengan berbagai sistem manajemen repositori kode, seperti GitLab dan BitBucket. Untuk mencegah menggabungkan tarikan (menggabungkan) permintaan'a ke cabang utama repositori ketika cakupannya terdegradasi. Tapi ini adalah cerita untuk artikel yang sama sekali berbeda.

PS: Segala sesuatu yang dijelaskan dalam artikel dalam bentuk kode tersedia di garpu saya.

Hanya pengguna terdaftar yang dapat berpartisipasi dalam survei. Masuk, silakan.

Apakah Anda menggunakan platform SonarQube:

• 26,3%Ya5

• 15,8%No3

• 15,8%Saya mendengar tentang platform ini dan ingin menggunakan3

• 10,5%Saya pernah mendengar tentang platform ini dan tidak ingin menggunakan2

• 0,0%Saya menggunakan platform0 yang berbeda

• 31,6%Pertama kali saya mendengar tentang dia6

19 pengguna memilih. 3 pengguna abstain.

Sumber: www.habr.com