diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 09d391e9..1266efa2 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -1,66 +1,22 @@ name: CI -# This workflow is triggered on pushes & pull requests +# This workflow is triggered on pushes on: - pull_request: - branches: - - main - - sandbox - - beta push: branches: [ main, beta ] # Publish semver tags as releases. release: types: [published] jobs: - test-frontend: - name: Test Frontend - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v2 - - name: test - uses: actions/setup-node@v1 - with: - node-version: 20.x - - name: Test Frontend - run: | - make test-frontend-coverage - - name: Upload coverage - uses: actions/upload-artifact@v3 - with: - name: coverage - path: ${{ github.workspace }}/frontend/coverage/fastenhealth/lcov.info - retention-days: 1 - test-backend: - name: Test Backend - runs-on: ubuntu-latest - container: ghcr.io/packagrio/packagr:latest-golang - env: - STATIC: true - steps: - - name: Checkout - uses: actions/checkout@v2 - - name: Test Backend - run: | - go install github.com/golang/mock/mockgen@v1.6.0 - go generate ./... - make test-backend-coverage - CGO_ENABLED=0 go build -buildvcs=false ./backend/cmd/fasten/ - - name: Upload coverage - uses: actions/upload-artifact@v3 - with: - name: coverage - path: ${{ github.workspace }}/backend-coverage.txt - retention-days: 1 + test: + uses: ./.github/workflows/development.yaml test-coverage: name: Test Coverage Upload needs: - - test-backend - - test-frontend + - test runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v2 + uses: actions/checkout@v4 - name: Download coverage reports uses: actions/download-artifact@v3 with: @@ -72,12 +28,11 @@ jobs: flags: unittests fail_ci_if_error: true verbose: true - storybook: name: Storybook Upload runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 - run: cd frontend && yarn install diff --git a/.github/workflows/development.yaml b/.github/workflows/development.yaml new file mode 100644 index 00000000..16dd46ff --- /dev/null +++ b/.github/workflows/development.yaml @@ -0,0 +1,68 @@ +name: Development + +on: + pull_request: + types: + - opened + - edited + - synchronize + - reopened + workflow_call: + +jobs: + test-frontend: + name: Test Frontend + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 20.x + - name: Test Frontend + run: | + make test-frontend-coverage + - name: Upload coverage + uses: actions/upload-artifact@v3 + with: + name: coverage + path: ${{ github.workspace }}/frontend/coverage/fastenhealth/lcov.info + retention-days: 1 + test-backend: + name: Test Backend + runs-on: ubuntu-latest + container: ghcr.io/packagrio/packagr:latest-golang + env: + STATIC: true + steps: + - name: Checkout code + uses: actions/checkout@v4 + - name: Setup + run: | + go install github.com/golang/mock/mockgen@v1.6.0 + go generate ./... + - name: Test Backend + run: | + make test-backend-coverage + CGO_ENABLED=0 go build -buildvcs=false ./backend/cmd/fasten/ + - name: Upload coverage + uses: actions/upload-artifact@v3 + with: + name: coverage + path: ${{ github.workspace }}/backend-coverage.txt + retention-days: 1 + compile-storybook: + name: Compile Storybook + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + - name: Setup + uses: actions/setup-node@v4 + with: + node-version: 20.x + - run: | + make build-storybook + + diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 917dfdf7..d3c51e59 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -239,9 +239,21 @@ curl -H "Authorization: Bearer ${JWT_TOKEN_HERE}" http://localhost:5984/_session ``` -# Run Component Storybook +# How do I work with Storybook? + +[Storybook](https://storybook.js.org) allows development and testing of frontend components in isolation. +When running the Storybook server, each defined story can be viewed and interacted with on it's own allowing for defining and testing of various states and conditions. + +In order to run the Storybook server, run the following command and open the url provided: + ```bash -ng run fastenhealth:storybook +make serve-storybook +``` + +If you only want to verify that all stories build properly (a check that is run on commits and PRs), you can run the following command: + +```bash +make build-storybook ``` diff --git a/Makefile b/Makefile index 1027a3be..e08143bf 100644 --- a/Makefile +++ b/Makefile @@ -7,9 +7,13 @@ .PHONY: test test: test-backend test-frontend -.PHONY: serve-frontend-storybook -serve-frontend-storybook: - cd frontend && ng run fastenhealth:storybook +.PHONY: build-storybook +build-storybook: dep-frontend + cd frontend && npx ng run fastenhealth:build-storybook + +.PHONY: serve-storybook +serve-storybook: dep-frontend + cd frontend && npx ng run fastenhealth:storybook .PHONY: serve-frontend serve-frontend: dep-frontend @@ -83,7 +87,6 @@ build-frontend-desktop-prod: dep-frontend build-frontend-offline-sandbox: dep-frontend cd frontend && yarn build -- -c offline_sandbox - .PHONY: test-frontend # reduce logging, disable angular-cli analytics for ci environment test-frontend: dep-frontend @@ -98,7 +101,3 @@ test-frontend-coverage: dep-frontend # reduce logging, disable angular-cli analytics for ci environment test-frontend-coverage-ci: dep-frontend cd frontend && npx ng test --watch=false --code-coverage --browsers=ChromeHeadlessCI - -.PHONY: test-frontend-storybook -test-frontend-storybook: - cd frontend && ng run fastenhealth:storybook diff --git a/frontend/.gitignore b/frontend/.gitignore index 8ce15f69..720acb29 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -6,6 +6,7 @@ /out-tsc # Only exists if Bazel was run /bazel-out +/storybook-static # dependencies /node_modules diff --git a/frontend/src/app/components/medical-sources-card/medical-sources-card.stories.ts b/frontend/src/app/components/medical-sources-card/medical-sources-card.stories.ts index abb5db7b..e97869fd 100644 --- a/frontend/src/app/components/medical-sources-card/medical-sources-card.stories.ts +++ b/frontend/src/app/components/medical-sources-card/medical-sources-card.stories.ts @@ -1,17 +1,19 @@ import type { Meta, StoryObj } from '@storybook/angular'; +import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular'; + import {MedicalSourcesCardComponent} from './medical-sources-card.component' +import { PatientAccessBrand } from 'src/app/models/patient-access-brands'; +import { ImageFallbackDirective } from 'src/app/directives/image-fallback.directive'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction const meta: Meta = { title: 'Components/MedicalSourcesCard', component: MedicalSourcesCardComponent, decorators: [ - // moduleMetadata({ - // imports: [AppModule] - // }) - // applicationConfig({ - // providers: [importProvidersFrom(AppModule)], - // }), + componentWrapperDecorator((story) => `
${story}
`), + moduleMetadata({ + declarations: [ImageFallbackDirective] + }) ], tags: ['autodocs'], render: (args: MedicalSourcesCardComponent) => ({ @@ -33,41 +35,26 @@ const meta: Meta = { export default meta; type Story = StoryObj; +const brand: PatientAccessBrand = { + id: 'b53c77ed-c0f4-4d6a-bddf-5c0e3934c2d6', + name: 'Aetna', + last_updated: '2024-01-12T05:20:50.52Z', + portal_ids: [] +}; + // More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args export const Entry: Story = { args: { sourceInfo: { - metadata: { - // aliases?: string[] - // brand_logo?: string - category: [], - display: "Aetna", - hidden: false, - // identifiers?: {[name:string]: string} - // patient_access_description?: string - // patient_access_url?: string - platform_type: "aetna", - source_type: "aetna" - } - } + brand: brand + }, } }; export const LoadingAuthorize: Story = { args: { sourceInfo: { - metadata: { - // aliases?: string[] - // brand_logo?: string - category: [], - display: "Aetna", - hidden: false, - // identifiers?: {[name:string]: string} - // patient_access_description?: string - // patient_access_url?: string - platform_type: "aetna", - source_type: "aetna" - } + brand: brand }, status: 'authorize' }, @@ -76,18 +63,7 @@ export const LoadingAuthorize: Story = { export const LoadingToken: Story = { args: { sourceInfo: { - metadata: { - // aliases?: string[] - // brand_logo?: string - category: [], - display: "Aetna", - hidden: false, - // identifiers?: {[name:string]: string} - // patient_access_description?: string - // patient_access_url?: string - platform_type: "aetna", - source_type: "aetna" - } + brand: brand }, status: 'token' }, @@ -96,57 +72,18 @@ export const LoadingToken: Story = { export const Failed: Story = { args: { sourceInfo: { - metadata: { - // aliases?: string[] - // brand_logo?: string - category: [], - display: "Aetna", - hidden: false, - // identifiers?: {[name:string]: string} - // patient_access_description?: string - // patient_access_url?: string - platform_type: "aetna", - source_type: "aetna" - } + brand: brand }, status: 'failed' }, }; - -export const Hidden: Story = { +export const MissingLogo: Story = { args: { sourceInfo: { - metadata: { - // aliases?: string[] - // brand_logo?: string - category: [], - display: "Aetna", - hidden: true, - // identifiers?: {[name:string]: string} - // patient_access_description?: string - // patient_access_url?: string - platform_type: "aetna", - source_type: "aetna" - } - } - }, -}; - -export const CustomBrandLogo: Story = { - args: { - sourceInfo: { - metadata: { - // aliases?: string[] - brand_logo: 'bluebutton.png', - category: [], - display: "Aetna", - hidden: false, - // identifiers?: {[name:string]: string} - // patient_access_description?: string - // patient_access_url?: string - platform_type: "aetna", - source_type: "aetna" + brand: { + ...brand, + id: 'aetna-123', } } },