내 워크플로우

저는 React로 만든 서버 없는 SPA & PWA를 발표했습니다. 이것은 자신의 GitHub 작업 흐름을 사용하여 GitHub 페이지에 직접 배치합니다.CI/CD 동안 테스트 덮어쓰기 배지를 자동으로 생성하여 동일한 저장소에 저장하고 싶습니다 (제3자 서버와 관련이 없음).
우선, 나는 Angular Coverage Badges를 보았다. 이것이 바로 내가 원하는 것이다.

테스트 덮어쓰기 결과 파일 가져오기

관련 정보 추출

휘장 생성

엠블럼을 myrepo에 올리고 파이프 구축을 시작하는 동일한 지점에 올린다

그리고 나는 몇 가지 내용을 추가하고 Pull Request 를 만들어서 나의 수요를 만족시켰다. (기본적으로 테스트 덮어쓰기 XML 파일을 해석한다.)응답을 기다린 후에, 나는 이것이 내가 원하는 것이 아니라고 결정했다. 나는 미니 동작을 더 좋아하고, 그 결과를 다른 미니 동작의 입력으로 다시 사용하는 것을 좋아한다.이런 방식을 통해 나는 파이프를 쉽게 변경하고 코드를 가능한 한 작은 조작으로 나누어 합성할 수 있다. 예를 들어 the way React works.
지금, 나의 workflow는 보기에 다음과 같다.

구축 및 테스트 프로세스(구축 또는 배포 변경되지 않음)

XML 덮어쓰기 데이터는 미니 PHP 작업gha-clover-test-coverage-check을 사용하여 처리됩니다.그것은 약간 minimal additions 이 필요하다.

은 이전 동작에서 출력된 처리 데이터를 자체 동작으로 바꾸어 휘장Badge Action을 생성한다.여기에서 덮어쓰기 데이터는 휘장 값 (덮어쓰기 백분율) 을 채우고 값 배경색을 결정하는 데 사용됩니다.

생성된 휘장을 전용 지점에 저장하고 이 지점은 모든 지점에서 생성된 휘장을 테스트합니다.

다음 단계: 용기 동작action.yml을 생성하여 미니 동작과 접착 동작(littlerun을 연결하여 값을 얻거나 해석하거나 조정), 그리고 나와 다른 사람들이 더욱 간단한 방식으로 같은 일을 하여 모든 사람의 수요에 적응하도록 도와준다.

제출 범주:

수리원은 반드시 갖추어야 한다

DIY 배포

전화우호형

Yaml 파일 또는 코드 링크

내가 코드를 제출한 첫 번째 행동 코드:

XML clover 파일 분석 기능 추가 #3

emibcn
발표 날짜 Jul 16, 2020
나는 다음과 같이 덧붙였다.

xml2json의 의존항package.json.그것은 환매dist/build/Release/node_expat.node를 증가시켰다

XML로 가져온 TS 모델

XML을 사용된 구조로 변환하는 함수

일부 테스트

나는 변했다.

해석할 기본 파일:coverage/clover.xml

덮어쓰기 테스트에서 Github 워크플로우 생성 및 해석

자술,행동.yml 및 포장.json 환매 변경과 차이 반영

또한 이 과정은nuningcoverage-summary.json의 결과를 사용하여 덮어쓰기 휘장을 자동으로 추가합니다.github/badges/.
기존의 2개의 해상도와 새로운 해상도를 거기에 두는 일반적인 해상도 스케줄러를 만드는 것이 가장 좋다.사용자 강제 해상도 유형을 허용하는 옵션도 추가되었습니다.현재 파일 확장자가 자동으로 검사합니다. 파일 이름이 npm test -- --coverage 로 끝나면 원본 파일을 사용하고, 그렇지 않으면 clover XML 해상도를 사용합니다.

</div>
<div class="gh-btn-container"><a class="gh-btn" href="https://github.com/demyanets/angular-coverage-badges-action/pull/3">View on GitHub</a></div>

내가 제출한 두 번째 행동 코드:

수정 #1 - 처리된 값을 GitHub 작업 출력으로 내보내기 #3

emibcn
발표 날짜 Sep 08, 2020
복구 #1

</div>
<div class="gh-btn-container"><a class="gh-btn" href="https://github.com/johanvanhelden/gha-clover-test-coverage-check/pull/3">View on GitHub</a></div>

내가 취한 행동 코드

emibcn / 휘장 행동

GitHub 작업 및 GitHub 워크플로우 CPU 시간을 사용하여 배지 작성(제3자 서버 없음)

휘장 행동

이 작업은 GitHub 작업과 GitHub 워크플로우 CPU 시간(제3자 서버 없음)을 사용하여 SVG 배지를 생성합니다.엠블럼은 NPM 패키지gradient-badge를 사용하여 생성됩니다.

입력

.json

휘장이 필요한 왼쪽 라벨은 보통 정적이다.

태그

레이블에 필요한 16진수 또는 명명된 색상입니다.기본값: label-color

555

정확한 신분을 휘장으로 해야 하며, 통상적으로 결과에 근거한다.

지위

16진수 또는 배지 값의 배경 명명 색상이 있는 그룹 (쉼표로 구분) 이 필요합니다.그래디언트 배경을 여러 개 생성합니다.기본값: color.

파란색

필요한 휘장 스타일: 납작하거나 클래식.기본값: style

경전

아이콘을 사용합니다.

우상

아이콘이 정사각형이 아닌 경우 이 옵션을 설정합니다.기본값: icon-width

십삼

배지 비율을 설정하다.기본값: scale

일.

배지 이미지 파일을 저장하는 파일 경로입니다.정의되지 않으면 path 동작 출력으로만 내보냅니다.

출력

휘장

엠블럼 SVG 콘텐츠.

예제 용법

uses: emibcn/badge-action@v1
with
  label: 'Test coverage'

…
View on GitHub

이러한 작업을 사용하는 JS PWA 응용 프로그램의 코드

emibcn / Rac1.js

반응하다Rac1 라디오 팟캐스트를 재생하는 js 응용 프로그램

Rac1 radio station 팟캐스트를 듣는 웹 응용 프로그램입니다.React를 JS 프런트엔드 라이브러리 및 GitHub 페이지로 사용하여 게시합니다Rac1 podcast player at Github Pages.여기에서 this repo's badge branch 을 사용하여 this project's GitHub workflow/Actions 에서 실행gh-pages 한 결과입니다 this project's source application 섹션의 자세한 내용 참조).
Install는 GoogleBot이 현대 JS를 실행하는 데 도움을 주기 위해 podcasts lister 에만 의존하는 순수한 JS 라이브러리이기 때문에 다른 JS 프로젝트에 쉽게 사용할 수 있습니다.

동기

내가 이 프로그램을 만든 데는 세 가지 이유가 있다.

나는 이 팟캐스트들을 들을 수 있는 더 좋은 방법이 필요하다. abortcontroller-polyfill는 나에게 아무런 쓸모가 없기 때문이다. 나는 그것이 나의 모든 장치와 쉽게 호환되기를 바란다.

현대 자바스크립트 배우기(다른 현대적인 것들): 오래전부터 자바스크립트(주로 JQuery)를 사용했는데...

official app

운영 배포

GitHub에서 보기 추가 리소스/정보

제가 하는 작업은 JS 패키지의 키스 인터페이스입니다. 이 인터페이스는 전달된 속성에 따라 SVG 파일을 생성합니다.JS 패키지는 app at GitHub Pages 입니다.