Рубрики
Uncategorized

Публикация объединенного отчета о покрытии кода NX Workspace в Azure CI Pipeline

Если вы работаете над рабочей пространством NX Monorepo и имеете много угловых проектов. И если вы используете Азур … Tagged с DevOps, NX, Tutorial, новички.

Если вы работаете над NX Monorepo Рабочая пространство и имеет много угловых проектов. И если вы используете конвейер Azure CI/CD, то вы можете знать, что не существует встроенной задачи Azure, которая объединит все ваше покрытие кода XML. Следовательно, единственный обходной путь — это то, что вы должны консолидировать все отчеты о покрытии кода в одном и опубликовать только один.

Что такое отчет о покрытии кода в конвейере Azure CI

Покрытие кода помогает вам определить долю кода вашего проекта, который фактически проверяется с помощью таких тестов, как модульные тесты. Чтобы повысить вашу уверенность в изменениях кода, и эффективно защищать от ошибок Учить больше…

Просмотр результатов покрытия кода помогает идентифицировать пути (ы) кода, которые не охватываются тестами. Эта информация важна для улучшения тестового обеспечения с течением времени за счет сокращения тестового долга.

Вы можете увидеть на уровне файлов в конвейере Azure

Azure DevOps не объединяет несколько отчетов о покрытии кода

В настоящее время функциональность отчетности по покрытию кода, предоставленная этой задачей, ограничена и не объединяет данные охвата. Если вы предоставляете несколько файлов в качестве входных данных для задачи, рассматривается только первый совпадение. Если вы используете несколько задач покрытия кода публикации в трубопроводе, резюме и отчет отображаются для последней задачи. Любые ранее загруженные данные игнорируются. Учить больше…

Тем не менее, Azure DevOps поддерживает слияние нескольких результатов испытаний и отображать из коробки. Проверьте Опубликовать результаты теста NX Monorepo Angular Azure Tipelines статья, чтобы узнать больше.

Установка пакета NPM Cobertura-Merge

В это время Azure Pipeline поддерживает только показ покрытия кода с использованием Коберра или Jacoco Только форматы покрытия. Я использую Cobertura, чтобы опубликовать охват кода.

Cobertura-Merge Является ли пакет NPM — это утилита для объединения нескольких файлов Cobertura XML в одну. Я буду использовать этот пакет NPM для объединения всех файлов кода.

Установка пакета Glob NPM

У нас есть вложенные файлы покрытия кода, поэтому я хочу найти весь путь файла. Поэтому я устанавливаю Glob NPM Package сделать это для меня. Пакет Glob NPM: соответствует файлам, используя шаблоны, которые использует оболочка, как звезды и прочее.

Структура папок нескольких файлов покрытия кода

Так как у меня есть NRWL. Nx monorepo, который имеет угловые приложения и либели. И когда я запускаю тест с помощью -codecoverage = true Тогда это создает Cobertura-Coverage.xml файлы Читать [опубликовать покрытие кода NX Monorepo Angular в Azure Tipelines], чтобы узнать, как публиковать охват кода в Azure Pipeline.

Обратите внимание, у меня есть файлы покрытия из приложений (приложения) и библиотек (LIBS)

Поиск всех путей файла покрытия

Нам нужно пройти путь каждого Cobertura-Coverage.xml файл.

Давайте создадим Merge-CodeCoverage.js Файл JavaScript для поиска всех файлов XML мы будем использовать глобус пакет NPM.

const glob = require('glob');
const path = require('path');

const targetDir = path.resolve(__dirname, '../../coverage');

glob(targetDir + '/**/*.xml', {}, (err, files)=>{
  console.log(files)
})

[
  "c:/Full Stack Master/Fullstackmaster COURSES/Mono Repo Course/temp/nx-monorepo-angular/coverage/apps/cutepuppies-admin/cobertura-coverage.xml",
  "c:/Full Stack Master/Fullstackmaster COURSES/Mono Repo Course/temp/nx-monorepo-angular/coverage/apps/cutepuppies-client/cobertura-coverage.xml",
  "c:/Full Stack Master/Fullstackmaster COURSES/Mono Repo Course/temp/nx-monorepo-angular/coverage/libs/branding/logger/cobertura-coverage.xml",
]

Отладка JavaScript в VS -коде

Прочитайте эту статью, чтобы узнать Как отлаживать узел. JS -код в VSCODE

Переместите все покрытие Cobertura XML в папку слияния

Установить fs-extra который поможет нам скопировать весь файл покрытия в слияние Папка, а затем мы будем пользователем Cobertura-Merge Пакет NPM, чтобы получить сингл Объединение Cobertura-Coverage.xml файл.

function copyCodeCoverageToMergedFolder() {
  const coverageDir = path.resolve(__dirname, '../../coverage');
  const mergedDir = path.join(coverageDir, '/merged');
  const files = glob(coverageDir + '/**/*.xml', { sync: true });

  files.forEach((f, i) => {
    const x = `${path.basename(f)}-${i}.xml`; // creating unique file name
    fs.copySync(f, `${mergedDir}/${x}`);
  });
}

Объединение всех покрытий Cobertura XML в один отчет

Мы создадим Объединение Cobertura-Coverage.xml который объединяется из всех файлов отчета.

Чтобы объединить все из них, нам нужен ниже сценарий.

npx cobertura-merge -o merged-cobertura-coverage.xml package1=cobertura-coverage.xml-0.xml package2=cobertura-coverage.xml-1.xml package3=cobertura-coverage.xml-2.xml

Запуск сценария Cobertura-Merge

Объединенный файл, созданный внутри объединенной папки

Объединенный файл cobertura-coverage.xml

Вот JavaScript для объединения файлов покрытия кода.

function mergeCodeCoverage() {
  const files = glob(mergedDir + '/**/*.xml', { sync: true });

  const packages = files
    .map((f, i) => `package${i + 1}=${path.basename(f)}`)
    .join(' ');
  const script = `cobertura-merge -o merged-cobertura-coverage.xml ${packages}`;

  execSync(script, {
    stdio: [0, 1, 2],
    cwd: mergedDir,
  });
}

Обновление Azure Pipeline для публикации покрытия кода

Используйте ниже задание, чтобы опубликовать отчет о покрытии объединенного кода в Azure Pipeline.

    # Publish Code Coverage Results
  - task: PublishCodeCoverageResults@1
    enabled: false
    displayName: Code Coverage
    inputs:
      codeCoverageTool: 'Cobertura'
      summaryFileLocation: '$(Build.SourcesDirectory)/coverage/merged/merged-cobertura-coverage.xml'
    condition: |
      and(
        succeeded(),
        not(contains(
            variables['COMMANDS'],
            '"test":[]'
        ))
      )

Определите, сколько проектов затронуто

Я изменил logging.service.ts в сервисе брендинга. Который используется обоими приложениями.

Запустить NX затронут: DEP-граф

Запуск Azure Pipeline для NX Monorepo

Теперь давайте запустим трубопровод Azure и посмотрим, сможем ли мы увидеть, что покрытие кода 3 проектов отображается в объединенном виде.

См. 3 теста работают в конвейере Azure

Покрытие кода публикации в конвейере Azure

Обратите внимание, что он опубликовал отчет о покрытии кода для всех 3 проектов.

Исключение файлов из покрытия кода

Я хочу исключить файлы корневых папок SRC из покрытия кода. Мы не хотим показывать test.ts или Polyfills.ts Отчет о покрытии.

Перейти к Workspace.json Подайте и определите имена ваших проектов и в тест Конфигурация вставьте покрытие кода. Исключите список файлов, как ниже скриншот.

"codeCoverageExclude": [
          "apps/cutepuppies-client/src/test.ts",
          "apps/cutepuppies-client/src/polyfills.ts"
        ],

Теперь беги nx run cutepuppies-client: контрольная работа

Теперь обратите внимание, что у нас нет SRC Файлы папок покрытие кода.

Давайте сделаем это, исключая всю тестовую конфигурацию нашего проекта.

Показание имен проектов в отчете о покрытии объединенного кода

Обратите внимание, что у меня есть покрытие кода из ниже проектов.

Я хочу показать имена проектов в отчете о покрытии кода Azure Pipeline. Поэтому мы обновим код JavaScript, чтобы разместить правильное имя проекта на файл покрытия кода в нашем покрытии Cerged Code XML. Как ниже:

Мне нужно генерировать и запустить ниже Cobertura Merge Скрипт для создания правильного файла покрытия с объединенным кодом с именами проектов.

npx cobertura-merge -o merged-cobertura-coverage.xml cutepuppies-admin=apps-cutepuppies-admin-cobertura-coverage.xml cutepuppies-client=apps-cutepuppies-client-cobertura-coverage.xml branding-logger=libs-branding-logger-cobertura-coverage.xml branding-ngmaterial=libs-branding-ngmaterial-cobertura-coverage.xml customers-users=libs-customers-users-cobertura-coverage.xml sales-puppies=libs-sales-puppies-cobertura-coverage.xml sales-puppy-editor=libs-sales-puppy-editor-cobertura-coverage.xml

Измените покрытие кода слияния в JavaScript

function mergeCodeCoverage() {
  copyCodeCoverageToMergedFolder();

  const files = glob(mergedDir + '/**/*.xml', { sync: true });

  const packages = files
    .map((f, i) => {
      const fileName = path.basename(f);
      const projectName = projects.filter((p) => fileName.search(p) > -1).pop();

      return `${projectName}=${fileName}`;
    })
    .join(' ');

  const script = `npx cobertura-merge -o merged-cobertura-coverage.xml ${packages}`;

  execSync(script, {
    stdio: [0, 1, 2],
    cwd: mergedDir,
  });
}

 function copyCodeCoverageToMergedFolder() {
  fs.emptyDirSync(mergedDir);
  const files = glob(coverageDir + '/**/*.xml', { sync: true });

  files.forEach((f, i) => {
    const x = f.split('/coverage/')[1].replace(/\//g, '-').split('/').pop();
    fs.copySync(f, `${mergedDir}/${x}`);
  });
}

Запуск Azure Pipeline и показ NX Monorepo All Projects Code Code

Теперь ты должен Вызовите приведенный выше JavaScript из Azure-Pipelines.yml Файл Анкет

🏃 Запустите свой трубопровод

💯 Показывание процента покрытия кода

: ugging_face: Обратите внимание, что теперь мы видим наше покрытие кода на приложение и правильные имена файлов.

Станьте разработчиком полного стека 💻

Если вы хотите стать разработчиком полного стека и увеличить свой носитель в качестве нового разработчика программного обеспечения или ведущего разработчика/архитектора. Рассмотрим подписку на наши полные программы обучения разработке стека. У нас есть планы на ежемесячные членства в целом, и вы получите неограниченный доступ ко всем нашим видео курсам, слайдам, исходному коду и ежемесячным видеопрограммам.

  • Пожалуйста, подпишитесь на All-Access Choinship Pro Plan Чтобы получить доступ к текущим и будущим угловым, node.js и смежным курсам.
  • Пожалуйста, подпишитесь на Элитный план всех доступа Чтобы получить все от профессионального плана. Кроме того, вы получите доступ к ежемесячным видеопрограммам в прямом эфире с Rupesh, и вы можете задать сомнения/вопросы и получить больше помощи, советов и приемов.

Вы, светлое будущее, ждет вас, так что посетите сегодня Fullstackmaster И позвольте мне помочь вам сесть в компанию Dream Software в качестве разработчика, архитектора или ведущего инженера.

💖 Скажи мне!

Рупеш Тивари www.rupeshtiwari.com ✉ Электронная почта Rupesh Основатель Fullstack Master

Оригинал: «https://dev.to/rupeshtiwari/merge-and-publish-code-coverage-for-nx-workspace-in-azure-ci-pipeline-1pk5»

Читайте ещё по теме: