Merge pull request #439 from jean-the-coder/fix-storybook

Fix Storybook
This commit is contained in:
Jason Kulatunga 2024-03-04 10:17:33 -08:00 committed by GitHub
commit 7dec0491ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 120 additions and 148 deletions

View File

@ -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

68
.github/workflows/development.yaml vendored Normal file
View File

@ -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

View File

@ -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
```

View File

@ -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

1
frontend/.gitignore vendored
View File

@ -6,6 +6,7 @@
/out-tsc
# Only exists if Bazel was run
/bazel-out
/storybook-static
# dependencies
/node_modules

View File

@ -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<MedicalSourcesCardComponent> = {
title: 'Components/MedicalSourcesCard',
component: MedicalSourcesCardComponent,
decorators: [
// moduleMetadata({
// imports: [AppModule]
// })
// applicationConfig({
// providers: [importProvidersFrom(AppModule)],
// }),
componentWrapperDecorator((story) => `<div style="width: 300px">${story}</div>`),
moduleMetadata({
declarations: [ImageFallbackDirective]
})
],
tags: ['autodocs'],
render: (args: MedicalSourcesCardComponent) => ({
@ -33,41 +35,26 @@ const meta: Meta<MedicalSourcesCardComponent> = {
export default meta;
type Story = StoryObj<MedicalSourcesCardComponent>;
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',
}
}
},