data visualizer app

데이터 영상화 앱 및 플러그인

데이터 방문자-앱과 내부적으로 사용 된 플러그인이 포함 된 리포입니다. 대시 보드 앱과 같은 다른 앱에서 사용할 수 있습니다.

시작하기

Repo Root 디렉토리에서 Data-Visualizer-App을 실행하려면 종속성을 설치하십시오.

 $ yarn install

개발

Reto의 루트에서 yarn start localhost:3000 에서 앱을 시작하고 localhost:3001 에서 플러그인을 시작하십시오.

다른 포트에서 플러그인을 실행하면 다른 앱에서 테스트 할 수 있습니다. 예를 들어, 대시 보드 앱에서 테스트하기 위해 다른 포트에서 대시 보드 앱을 실행하고 DevTools를 통해 플러그인이 실행중인 호스트 및 포트로 플러그인 경로를 대체하십시오. 예제 단계 :

1. DV : yarn start
2. 대시 보드 : yarn start 이 시점에서 DV는 LocalHost : 3000, LocalHost : 3001의 DV 플러그인 및 LocalHost : 3002의 대시 보드 앱에서 실행됩니다.
3. 브라우저를 LocalHost : 3002로 가리 킵니다.
4. 응용 프로그램 탭에서 DevTools dhis2.dashboard.pluginOverrides: { "VISUALIZATION": "http://localhost:3001/plugin.html" } 통해 Dashboard 앱 LocalStorage 에이 항목을 추가하십시오.

동시에 여러 플러그인을 동시에 테스트하는 동일한 원칙을 사용하면 재정의에 구성된 포트가 재정의하는 플러그인에 적합한 것으로 확인하면됩니다.

다음 NPM 스크립트는 모두 Repo 루트 디렉토리에서 실행할 수 있습니다.

단위 테스트

 $ yarn test

적용 범위 보고서와 함께 단위 테스트를 실행하십시오

 $ yarn coverage

E2E 테스트

사이프러스는 E2E 브라우저 테스트에 사용됩니다. 이것은 PRS의 경우 CI에서 자동으로 실행되며 결과는 Cypress Cloud에서 볼 수 있습니다.

Cypress Cloud에서 테스트를 기록하려면 필요에 따라 다음 방법 중 하나를 사용할 수 있습니다.

• 커밋 메시지 : 레코딩을 활성화하기 위해 커밋 메시지에 [e2e record] 포함시킵니다.
• GitHub 레이블 : e2e record 레이블을 풀 요청에 적용하여 녹음을 트리거합니다.

이 설정은 Cypress 클라우드 크레딧을보다 효율적으로 관리하는 데 도움이되며, 명시 적으로 필요한 경우에만 녹음이 이루어질 수 있습니다.

로컬로 테스트를 실행하려면 로컬 cypress.env.json 파일에서 다음을 정의하십시오.

{
    " dhis2BaseUrl " : " https://test.e2e.dhis2.org/dev " ,
    " dhis2Username " : " admin " ,
    " dhis2Password " : " district " ,
}

대화식으로 테스트 실행 (Cypress UI) :

 yarn cypress:live

Cypress UI없이 콘솔에서 테스트를 실행하십시오.

 yarn cypress:run

줄무늬 및 서식

모든 고정 가능한 코드 스타일 위반 (Pretier 및 Eslint)을 자동으로 수정하십시오.

 $ yarn format

코드 스타일 위반에 대한 모든 파일 확인 (Pretier 및 Eslint)

 $ yarn lint

앱과 플러그인을 빌드하십시오

 $ yarn build

NetLify를 사용한 수동 테스트

이 repo는 PULL 요청을 NetLify에 배포하도록 구성됩니다. 이를 통해 마스터와 병합하기 전에 다른 사람들과 실행 구현을 다른 사람들과 공유 할 수 있습니다 (예 : 테스터, 제품 관리자, UX, 동료 개발자).

풀 요청 (IE #209)은 다음과 같습니다.

https://pr-209--dhis2-data-visualizer.netlify.app

NetLify는 또한 PR 배포에 직접 연결되는 각 PR에 상태 검사를 추가합니다.