Merge pull request #439 from jean-the-coder/fix-storybook
Fix Storybook
This commit is contained in:
Jason Kulatunga
GitHub
commit
7dec0491ee
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
||||
|
|
@ -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
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
15
Makefile
15
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
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
/out-tsc
|
||||
# Only exists if Bazel was run
|
||||
/bazel-out
|
||||
/storybook-static
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue