SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

අපි අපගේ කාර්යයේදී වේදිකාව සක්රියව භාවිතා කරමු soundQube කේතයේ ගුණාත්මකභාවය ඉහළ මට්ටමක පවත්වා ගැනීමට. ලියා ඇති ව්‍යාපෘති වලින් එකක් ඒකාබද්ධ කරන විට VueJs+Typescript, ගැටළු ඇති විය. එමනිසා, අපි ඒවා විසඳීමට සමත් වූ ආකාරය වඩාත් විස්තරාත්මකව ඔබට කියන්නට කැමැත්තෙමි.

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

මෙම ලිපියෙන් අපි SonarQube වේදිකාව ගැන මා ඉහත ලියා ඇති පරිදි කතා කරමු. කුඩා න්‍යායක් - පොදුවේ එය කුමක්ද, පළමු වරට ඒ ගැන අසන අය සඳහා:

soundQube (හිටපු සෝනාර්) යනු අඛණ්ඩ පරීක්ෂාව සහ කේත තත්ත්ව මැනීම සඳහා විවෘත මූලාශ්‍ර වේදිකාවකි.
MISRA C, MISRA C++, MITER/CWE සහ CERT ආරක්‍ෂිත කේතීකරණ ප්‍රමිති ක්‍රමලේඛන ප්‍රමිතීන්ට අනුව කේත විශ්ලේෂණය සහ දෝෂ හඳුනාගැනීම සඳහා සහාය වේ. එයට OWASP Top 10 සහ CWE/SANS Top 25 ක්‍රමලේඛන දෝෂ ලැයිස්තුවෙන් ද දෝෂ හඳුනා ගත හැක.
වේදිකාව විවිධ සූදානම් කළ මෙවලම් භාවිතා කරන බව නොතකා, SonarQube ප්‍රතිඵල තනි උපකරණ පුවරුවකට අඩු කරයි, ධාවන ඉතිහාසයක් පවත්වා ගෙන යන අතර එමඟින් සංවර්ධනය අතරතුර මෘදුකාංගයේ ගුණාත්මක භාවයේ සාමාන්‍ය ප්‍රවණතාව දැකීමට ඔබට ඉඩ සලසයි.

වැඩි විස්තර සොයා ගත හැක නිල වෙබ් අඩවිය

ක්‍රමලේඛන භාෂා විශාල සංඛ්‍යාවක් සඳහා සහය දක්වයි. ඉහත සබැඳියේ තොරතුරු අනුව විනිශ්චය කිරීම, මේවා භාෂා 25 කට වඩා වැඩි ය. නිශ්චිත භාෂාවක් සඳහා සහය දැක්වීමට, ඔබ සුදුසු ප්ලගිනය ස්ථාපනය කළ යුතුය. ප්‍රජා අනුවාදයට වැඩ කිරීම සඳහා ප්ලගිනයක් ඇතුළත් වේ කරුණාකර Javascript (typesript ඇතුළුව), විකි ප්‍රතිවිරුද්ධ දේ පැවසුවද. පිටුපස කරුණාකර Javascript ප්ලගින පිළිතුරු SonarJS, Typescript සඳහා SonarTS පිළිවෙලින්.

ආවරණ තොරතුරු යැවීමට නිල සේවාදායකයා භාවිතා කරයි sonarqube-ස්කෑනර්සිට සිටුවම් භාවිතා කරමින් config-file, මෙම දත්ත සේවාදායකයට යවයි soundQube තවදුරටත් තහවුරු කිරීම සහ එකතු කිරීම සඳහා.

සඳහා කරුණාකර Javascriptnpm එතුම. එබැවින්, අපි පියවරෙන් පියවර ක්රියාත්මක කිරීම ආරම්භ කරමු soundQube в Vue- ව්යාපෘතිය භාවිතා කිරීම යතුරු ලියනය.

සේවාදායකයක් යෙදවීමට soundQube අපි ප්‍රයෝජන ගනිමු docker-compose.

sonar.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 .

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම
එහි තවමත් ව්යාපෘති කිසිවක් නොමැති අතර එය සාධාරණයි. අපි මෙම තත්ත්වය නිවැරදි කරන්නෙමු. මම නිල උදාහරණ ව්‍යාපෘතිය ගත්තා VueJS+TS+Jest. අපි එය අප දෙසට නැමෙමු:

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

මුලින්ම අපි සේවාදායකයා ස්ථාපනය කළ යුතුයි soundQubeයනුවෙන් හඳුන්වනු ලැබේ සෝනාර්-ස්කෑනර්සඳහා npm දවටනයක් තිබේ:

yarn add sonarqube-scanner

සහ වහාම විධානය එක් කරන්න පිටපත් එය සමඟ වැඩ කිරීමට.

pack.json:

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

මීලඟට, ස්කෑනරය වැඩ කිරීමට, ඔබ විශේෂ ගොනුවක් තුළ ව්යාපෘති සැකසුම් සකස් කළ යුතුය. අපි මූලික කරුණු වලින් පටන් ගනිමු.

sonar-project.properties:

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 - ලිපිනය සෝනාර්'ඒ;
  • sonar.projectKey - සේවාදායකයේ අද්විතීය ව්‍යාපෘති හඳුනාගැනීම සෝනාර්'ඒ;
  • sonar.projectName - ව්‍යාපෘතිය හඳුනාගෙන ඇති බැවින් එහි නම, එය ඕනෑම වේලාවක වෙනස් කළ හැකිය projectKey;
  • sonar.මූලාශ්ර - මූලාශ්ර සහිත ෆෝල්ඩරය, සාමාන්යයෙන් මෙය src, නමුත් ඕනෑම දෙයක් විය හැක. මෙම ෆෝල්ඩරය මූල ෆෝල්ඩරයට සාපේක්ෂව සකසා ඇත, එය ස්කෑනරය දියත් කරන ලද ෆෝල්ඩරය වේ;
  • sonar.පරීක්ෂණ - පෙර පරාමිතිය සමඟ සමපාත වන පරාමිතියකි. පරීක්ෂණ පිහිටා ඇති ෆෝල්ඩරය මෙයයි. මෙම ව්‍යාපෘතියේ, එවැනි ෆෝල්ඩරයක් නොමැති අතර, ෆෝල්ඩරයේ පරීක්ෂා කරන සංරචකය අසල පරීක්ෂණය පිහිටා ඇත.ටෙස්ට්', එබැවින් අපි එය දැනට නොසලකා හැර ඊළඟ පරාමිතිය භාවිතා කරන්නෙමු;
  • sonar.test.ඇතුළත් කිරීම් - වෙස් මුහුණක් භාවිතයෙන් පරීක්ෂණ සඳහා මාර්ගය, කොමාවෙන් වෙන් කර ඇති මූලද්‍රව්‍ය කිහිපයක් තිබිය හැක;
  • sonar.sourceEncoding - මූලාශ්‍ර ගොනු සඳහා කේතනය කිරීම.

ස්කෑනරයේ පළමු දියත් කිරීම සඳහා, ප්‍රධාන පූර්ව ක්‍රියාව හැර සියල්ල සූදානම්: පරීක්ෂණ එන්ජිම දියත් කිරීම, එමඟින් ආවරණය පිළිබඳ තොරතුරු ජනනය කළ හැකි අතර, ස්කෑනරය පසුව භාවිතා කරනු ඇත.

නමුත් මෙය සිදු කිරීම සඳහා, මෙම තොරතුරු උත්පාදනය කිරීම සඳහා ඔබ පරීක්ෂණ එන්ජිම වින්යාසගත කළ යුතුය. මෙම ව්යාපෘතියේ දී, පරීක්ෂණ එන්ජිම වේ නැත. තවද එහි සැකසුම් ගොනුවේ අනුරූප කොටසෙහි ඇත පැකේජය.

අපි මෙම සැකසුම් එකතු කරමු:

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

එනම්, ආවරණය සහ මූලාශ්‍රය (ව්‍යතිරේක සහිතව) ගණනය කිරීමේ අවශ්‍යතාවය සඳහා අපි ධජය සකස් කරන්නේ කුමන පදනම මතද යන්නයි.

දැන් අපි පරීක්ෂණය ධාවනය කරමු:

yarn test

අපි පහත සඳහන් දේ දකිමු:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

හේතුව එම සංරචකයේම කේතයක් නොමැති වීමයි. අපි මේක හදමු.

HelloWorld.vue:

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

ආවරණය ගණනය කිරීම සඳහා මෙය ප්රමාණවත් වනු ඇත.

පරීක්ෂණය නැවත ආරම්භ කිරීමෙන් පසු, අපි මෙය සහතික කරමු:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

තිරය ​​මත අපි ආවරණය පිළිබඳ තොරතුරු දැකිය යුතු අතර, ව්යාපෘති ෆෝල්ඩරය තුළ ෆෝල්ඩරයක් සාදනු ඇත ආවරණය විශ්වීය ආකෘතියකින් පරීක්ෂණ ආවරණ තොරතුරු සමඟ LCOV (LTP GCOV දිගුව).

Gcov කේත ආවරණය පරීක්ෂා කිරීම සඳහා නිදහසේ බෙදා හරින ලද උපයෝගීතාවයකි. Gcov වැඩසටහනක එක් එක් ප්‍රකාශය සඳහා නිශ්චිත ක්‍රියාත්මක කිරීම් සංඛ්‍යාව උත්පාදනය කරන අතර මූල කේතයට අනුසටහන් එක් කිරීමට ඔබට ඉඩ සලසයි. Gcov GCC පැකේජයේ කොටසක් ලෙස සම්මත උපයෝගීතාවයක් ලෙස පැමිණේ.
Lcov - gcov සඳහා චිත්රක අතුරුමුහුණත. එය බහු මූලාශ්‍ර ගොනු සඳහා gcov ගොනු එකලස් කරන අතර කේත සහ ආවරණ තොරතුරු සහිත HTML පිටු කට්ටලයක් නිෂ්පාදනය කරයි. සංචලනය පහසු කිරීම සඳහා පිටු ද ජනනය කෙරේ. Lcov තන්තු, කාර්යයන් සහ ශාඛා ආවරණය කිරීමට සහාය වේ.

පරීක්ෂණ අවසන් වූ පසු, ආවරණ තොරතුරු ස්ථානගත කරනු ලැබේ ආවරණය/lcov.info.
අපි කියන්න ඕන සෝනාර්'මට එය ලබා ගත හැක්කේ කොතැනින්ද? එබැවින්, එහි වින්‍යාස ගොනුවට පහත පේළි එකතු කරමු. නමුත් එක් කරුණක් තිබේ: ව්යාපෘති බහුභාෂා විය හැකිය, එනම්, ෆෝල්ඩරයේ src ක්‍රමලේඛන භාෂා කිහිපයක් සඳහා ප්‍රභව කේත සහ එකක් හෝ තවත් එකක් සමඟ අනුබද්ධව ඇති අතර, අනෙක් අතට, එක් හෝ තවත් ප්ලගිනයක් භාවිතා කිරීම එහි දිගුව මගින් තීරණය වේ. තවද විවිධ ක්‍රමලේඛන භාෂා සඳහා ආවරණ තොරතුරු විවිධ ස්ථානවල ගබඩා කළ හැක, එබැවින් මෙය සැකසීම සඳහා සෑම භාෂාවකටම තමන්ගේම අංශයක් ඇත. අපගේ ව්‍යාපෘතිය භාවිතා කරයි යතුරු ලියනය, ඒ නිසා අපට ඒ සඳහා සැකසුම් අංශයක් අවශ්‍යයි:

sonar-project.properties:

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

ස්කෑනරයේ පළමු දියත් කිරීම සඳහා සියල්ල සූදානම්. ව්‍යාපෘතිය බව සටහන් කිරීමට කැමැත්තෙමි සෝනාර්දී ඇති ව්‍යාපෘතියක් සඳහා ඔබ පළමු වරට ස්කෑනරය ධාවනය කරන විට e ස්වයංක්‍රීයව නිර්මාණය වේ. පසුකාලීන කාලවලදී, කාලයත් සමඟ ව්‍යාපෘති පරාමිතීන්හි වෙනස්වීම් වල ගතිකතාවයන් බැලීම සඳහා තොරතුරු රැස් කරනු ලැබේ.

ඉතින්, අපි කලින් නිර්මාණය කළ විධානය භාවිතා කරමු පැකේජය:

yarn run sonar 

සටහන: ඔබට පරාමිතිය ද භාවිතා කළ හැකිය -X වඩාත් සවිස්තරාත්මක ලොග් කිරීම සඳහා.

ස්කෑනරය පළමු වරට දියත් කළේ නම්, ස්කෑනරයේ ද්විමය මුලින්ම බාගත වේ. ඊට පසු, එය ආරම්භ වන අතර සේවාදායකය ස්කෑන් කිරීම ආරම්භ කරයි සෝනාර්'a ස්ථාපිත ප්ලගීන සඳහා, එමගින් සහාය දක්වන භාෂාව ගණනය කිරීම. එහි ක්‍රියාකාරිත්වය සඳහා වෙනත් විවිධ පරාමිතීන් ද පටවා ඇත: ගුණාත්මක පැතිකඩ, සක්‍රීය නීති, ප්‍රමිතික ගබඩාව, සේවාදායක නීති.

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

සටහන: මෙම ලිපියේ රාමුව තුළ අපි ඔවුන් ගැන විස්තරාත්මකව වාසය නොකරමු, නමුත් ඔබට සැමවිටම නිල මූලාශ්‍ර සම්බන්ධ කර ගත හැකිය.

ඊළඟට, ෆෝල්ඩර විශ්ලේෂණය ආරම්භ වේ src සියල්ල සඳහා මූලාශ්‍ර ගොනු ලබා ගැනීම සඳහා (නිශ්චිත එකක් පැහැදිලිව සඳහන් කර නොමැති නම්) සහය දක්වන භාෂාව, ඒවායේ පසුකාලීන සුචිගත කිරීම් සමඟ.

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

ඊළඟට අපි මෙම ලිපියේ අවධානය යොමු නොකරන වෙනත් විවිධ විශ්ලේෂණයන් වෙත පැමිණෙමු (උදාහරණයක් ලෙස, ලින්ටින් කිරීම, කේත අනුපිටපත් හඳුනා ගැනීම, ආදිය).

ස්කෑනරයේ කාර්යය අවසානයේ, එකතු කරන ලද සියලුම තොරතුරු එකතු කර, සංරක්ෂණය කර සේවාදායකයට යවනු ලැබේ.

මෙයින් පසු, වෙබ් අතුරු මුහුණතේ සිදු වූ දේ අපට දැනටමත් දැක ගත හැකිය:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

අපට පෙනෙන පරිදි, යමක් වැඩ කළ අතර, යම් ආකාරයක ආවරණයක් පවා පෙන්වයි, නමුත් එය අපගේ ඒවාට නොගැලපේ නැත-වාර්තාව.

අපි එය තේරුම් ගනිමු. අපි ව්‍යාපෘතිය වඩාත් විස්තරාත්මකව බලමු, ආවරණ අගය මත ක්ලික් කරන්න, සහ සවිස්තරාත්මක ගොනු වාර්තාවකට "වැටෙන්න":

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

මෙන්න අපි ප්රධාන, පරීක්ෂා කරන ලද ගොනුවට අමතරව දකිනවා HelloWorld.vue, ගොනුවක් ද තිබේ main.ts, ආවරණයේ සම්පූර්ණ පින්තූරය නරක් කරයි. නමුත් අපි එය ආවරණය ගණනය කිරීමෙන් බැහැර කළේ කෙසේද? ඔව්, සෑම දෙයක්ම නිවැරදියි, නමුත් එය මට්ටමේ විය නැත, නමුත් ස්කෑනරය එය සුචිගත කර ඇත, එබැවින් එය එහි ගණනය කිරීම් වලින් අවසන් විය.

අපි මෙය නිවැරදි කරමු:

sonar-project.properties:

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

මම පැහැදිලි කිරීමක් කිරීමට කැමතියි: මෙම පරාමිතියෙහි දක්වා ඇති ෆෝල්ඩර වලට අමතරව, පරාමිතියෙහි ලැයිස්තුගත කර ඇති සියලුම ෆෝල්ඩර ද එකතු කරනු ලැබේ. sonar.test.ඇතුළත් කිරීම්.

ස්කෑනරය දියත් කිරීමෙන් පසුව, අපි නිවැරදි තොරතුරු දකිමු:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

අපි ඊළඟ කරුණ දෙස බලමු - ගුණාත්මක පැතිකඩ. මම සහයෝගය ගැන ඉහත කතා කළා සෝනාර්'ඕම් එකවර භාෂා කිහිපයක්. මෙය හරියටම අපි දකිමු. නමුත් අපගේ ව්‍යාපෘතිය ලියා ඇති බව අපි දනිමු TS, එසේනම් අනවශ්‍ය උපාමාරු සහ චෙක්පත් සමඟ ස්කෑනරය වෙහෙසට පත් කරන්නේ ඇයි? වින්‍යාස ගොනුවට තවත් එක් පරාමිතියක් එක් කිරීමෙන් අපි විශ්ලේෂණය සඳහා භාෂාව සකසන්නෙමු සෝනාර්'ඒ:

sonar-project.properties:

...
sonar.language=ts
...

අපි ස්කෑනරය නැවත ධාවනය කර ප්රතිඵලය බලමු:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

ආවරණය සම්පූර්ණයෙන්ම නැති විය.

අපි ස්කෑනර් ලොගය දෙස බැලුවහොත්, අපට පහත පේළිය දැකිය හැකිය:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

එනම්, අපගේ ව්‍යාපෘති ගොනු හුදෙක් සුචිගත කර නොතිබීමයි.

තත්වය පහත පරිදි වේ: නිල වශයෙන් සහාය VueJs ප්ලගිනයේ ඇත SonarJSකවුද වගකියන්නේ කරුණාකර Javascript.

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

නමුත් මෙම සහාය ප්ලගිනයේ නොමැත SonarTS සඳහා TS, බග් ට්රැකර් එකේ නිල ටිකට් පතක් විවෘත කරන ලදී සෝනාර්'ඒ:

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

මෙම සත්‍යය සනාථ කරමින් SonarQube සංවර්ධකයින්ගේ එක් නියෝජිතයෙකුගෙන් පිළිතුරු කිහිපයක් මෙන්න.

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

නමුත් සෑම දෙයක්ම අප වෙනුවෙන් වැඩ කළා, ඔබ විරුද්ධයි. ඔව් ඒක තමයි, අපි ටිකක් උත්සාහ කරමු "හැක්".
සහයෝගයක් තියෙනවා නම් .vue- ගොනු සෝනාර්'ඔහ්, එහෙනම් අපි ඔහුට කියන්න උත්සාහ කරමු ඒවා ලෙස සලකන්න යතුරු ලියනය.

අපි පරාමිතියක් එකතු කරමු:

sonar-project.properties:

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

අපි ස්කෑනරය දියත් කරමු:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

සහ, voila, සෑම දෙයක්ම සාමාන්ය තත්ත්වයට පත් වී ඇති අතර, එක් පැතිකඩක් සඳහා පමණි යතුරු ලියනය. එනම්, අපි සහයෝගයෙන් ගැටලුව විසඳීමට සමත් විය VueJs+TS සඳහා soundQube.

අපි තවදුරටත් ඉදිරියට ගොස් ආවරණ තොරතුරු ටිකක් වැඩි දියුණු කිරීමට උත්සාහ කරමු.

අපි මෙතෙක් කර ඇති දේ:

  • ව්යාපෘතියට එකතු කරන ලදී සෝනාර්- ස්කෑනර්;
  • සැලසුම නැත ආවරණ තොරතුරු උත්පාදනය කිරීමට;
  • වින්යාසගත කර ඇත සෝනාර්- ස්කෑනර්;
  • ආධාරක ගැටළුව විසඳා ඇත .vue-ගොනු + යතුරු ලියනය.

පරීක්ෂණ ආවරණයට අමතරව, කේතයේ ගුණාත්මක භාවය සඳහා වෙනත් රසවත් ප්රයෝජනවත් නිර්ණායක තිබේ, උදාහරණයක් ලෙස, කේත අනුපිටපත් කිරීම සහ ව්යාපෘතියේ රේඛා ගණන (කේත සංකීර්ණතාවයට අදාළ සංගුණක ගණනය කිරීම සඳහා සම්බන්ධ වේ).

සමඟ වැඩ කිරීම සඳහා ප්ලගිනය වත්මන් ක්රියාත්මක කිරීමේදී TS (SonarTS) ක්රියා නොකරනු ඇත CPD (පිටපත් පේස්ට් අනාවරකය) සහ කේත රේඛා ගණන් කිරීම .vue- ගොනු.

කේත අනුපිටපත්වල කෘතිම තත්වයක් නිර්මාණය කිරීම සඳහා, සංරචක ගොනුව වෙනත් නමකින් අනුපිටපත් කර එය කේතයට එක් කරන්න. main.ts ව්යාජ කාර්යයක් සහ වෙනත් නමකින් එය අනුපිටපත් කරන්න. ලෙස අනුපිටපත් පරීක්ෂා කිරීමට .vue, සහ .ts - ගොනු.

main.ts:

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

මෙය සිදු කිරීම සඳහා, ඔබ වින්‍යාස රේඛාව තාවකාලිකව අදහස් දැක්විය යුතුය:

sonar-project.properties:

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

පරීක්ෂා කිරීම සමඟ ස්කෑනරය නැවත ආරම්භ කරමු:

yarn test && yarn run sonar

ඇත්ත වශයෙන්ම, අපගේ ආවරණය පහත වැටෙනු ඇත, නමුත් දැන් අපි ඒ ගැන උනන්දු නොවේ.

කේතයේ අනුපිටපත් රේඛා අනුව, අපි දකිමු:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

පරීක්ෂා කිරීමට අපි භාවිතා කරන්නෙමු සීපීඩී- උපයෝගිතා - jscpd:

npx jscpd src

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

කේත රේඛා සඳහා:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

සමහර විට මෙය අනාගත ප්ලගින අනුවාද වල විසඳනු ඇත SonarJS(TS). ඔවුන් ක්‍රමයෙන් මෙම ප්ලගීන දෙක එකකට ඒකාබද්ධ කිරීමට පටන් ගන්නා බව සටහන් කිරීමට කැමැත්තෙමි SonarJS, මම හිතන්නේ එය නිවැරදියි.

දැන් මට ආවරණ තොරතුරු වැඩිදියුණු කිරීමේ විකල්පය සලකා බැලීමට අවශ්ය විය.

මෙතෙක් අපට සම්පූර්ණ ව්‍යාපෘතිය සඳහා සහ විශේෂයෙන්ම ගොනු සඳහා ප්‍රතිශත අනුව පරීක්ෂණ ආවරණය දැකිය හැක. නමුත් ප්‍රමාණය පිළිබඳ තොරතුරු සමඟ මෙම දර්ශකය පුළුල් කළ හැකිය ඒකකය-ව්‍යාපෘතිය සඳහා පරීක්ෂණ, මෙන්ම ගොනු සන්දර්භය තුළ.

පුළුවන් පුස්තකාලයක් තියෙනවා නැත- වාර්තාව ආකෘතියට පරිවර්තනය කරන්න සෝනාර්'ඒ:
සාමාන්ය පරීක්ෂණ දත්ත - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

අපගේ ව්‍යාපෘතියේ මෙම පුස්තකාලය ස්ථාපනය කරමු:

yarn add jest-sonar-reporter

සහ එය වින්‍යාසයට එක් කරන්න නැත:

pack.json:

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

දැන් අපි පරීක්ෂණය ධාවනය කරමු:

yarn test

ඉන්පසු ව්‍යාපෘතියේ මූලයේ ගොනුවක් සාදනු ලැබේ test-report.xml.

අපි එය වින්‍යාසය තුළ භාවිතා කරමු සෝනාර්'ඒ:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

සහ ස්කෑනරය නැවත ආරම්භ කරන්න:

yarn run sonar

අපි බලමු මොනවද මේ Interface එකේ වෙනස් වෙලා තියෙන්නේ කියලා සෝනාර්'ඒ:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

සහ කිසිවක් වෙනස් වී නැත. සත්‍යය නම් Sonar විසින් Jest වාර්තාවේ විස්තර කර ඇති ගොනු ගොනු ලෙස නොසලකයි ඒකකය- පරීක්ෂණ. මෙම තත්වය නිවැරදි කිරීම සඳහා, අපි මානකරන පරාමිතිය භාවිතා කරමු සෝනාර් sonar.පරීක්ෂණ, එහිදී අපි පරීක්ෂණ සහිත ෆෝල්ඩර පැහැදිලිව දක්වන්නෙමු (අපට දැනට ඇත්තේ එකක් පමණි):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

ස්කෑනරය නැවත ආරම්භ කරමු:

yarn run sonar

අතුරු මුහුණතේ වෙනස් වී ඇති දේ බලමු:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

දැන් අපි දැක්කා අපේ නම්බර් එක ඒකකය-පරීක්ෂණ සහ, ඇතුළත ක්ලික් කිරීමෙන් අසාර්ථක වූ පසු, ව්‍යාපෘති ගොනු අතර මෙම අංකය බෙදා හැරීම අපට දැකිය හැකිය:

SonarQube සමඟ VueJS+TS ව්‍යාපෘති ඒකාබද්ධ කිරීම

නිගමනය

එබැවින්, අපි අඛණ්ඩ විශ්ලේෂණය සඳහා මෙවලමක් දෙස බැලුවෙමු soundQube. අපි එයට ලියා ඇති ව්‍යාපෘතියක් සාර්ථකව ඒකාබද්ධ කළෙමු VueJs+TS. අනුකූලතා ගැටළු කිහිපයක් විසඳා ඇත. අපි පරීක්ෂණ ආවරණ දර්ශකයේ තොරතුරු අන්තර්ගතය වැඩි කළෙමු. මෙම ලිපියෙන් අපි කේත තත්ත්ව නිර්ණායක වලින් එකක් පමණක් පරීක්ෂා කළෙමු (සමහර විට ප්රධාන ඒවායින් එකක්), නමුත් soundQube ආරක්ෂිත පරීක්ෂණ ඇතුළුව අනෙකුත් තත්ත්ව නිර්ණායක සඳහා සහය දක්වයි. නමුත් මෙම සියලු විශේෂාංග සම්පූර්ණයෙන්ම ලබා ගත නොහැක ප්රජාව- අනුවාද. සිත්ගන්නාසුළු හා ප්රයෝජනවත් අංගයන්ගෙන් එකක් වන්නේ ඒකාබද්ධ කිරීමයි soundQube GitLab සහ BitBucket වැනි විවිධ කේත ගබඩා කළමනාකරණ පද්ධති සමඟ. වැළැක්වීම සඳහා ඒකාබද්ධ අදින්න (ඒකාබද්ධ) ඉල්ලීම'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

අදහස් එක් කරන්න