Storybook Integration for Component testing. (fastenhealth#142)

Co-authored-by: Serinus1 <junkmayle670@yahoo.com>

.github/workflows/build.yaml

@@ -25,6 +25,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
+      - name: "Populate frontend version information"
+        run: "cd frontend && ./git.version.sh"
       - name: Set up depot.dev multi-arch runner
         uses: depot/setup-action@v1
       # Login against a Docker registry except on PR

.gitignore

@@ -60,3 +60,4 @@ test.go
 /.couchdb
 
 config.dev.yaml
+.cache/

CONTRIBUTING.md

@@ -227,3 +227,9 @@ curl -X POST http://localhost:9090/api/auth/signin -H 'Content-Type: application
 curl -H "Authorization: Bearer ${JWT_TOKEN_HERE}" http://localhost:5984/_session
 
 ```
+
+
+# Run Component Storybook
+```bash
+ng run fastenhealth:storybook
+```

README.md

@@ -7,6 +7,7 @@
 # Fasten - On Premise/Self-Hosted
 
 [![CI](https://github.com/fastenhealth/fasten-onprem/actions/workflows/ci.yaml/badge.svg)](https://github.com/fastenhealth/fasten-onprem/actions/workflows/ci.yaml)
+[![codecov](https://codecov.io/gh/fastenhealth/fasten-onprem/branch/main/graph/badge.svg?token=6O0ZUABEHT&style=flat-square)](https://codecov.io/gh/fastenhealth/fasten-onprem)
 [![GitHub license](https://img.shields.io/github/license/fastenhealth/fasten-onprem?style=flat-square)](https://github.com/fastenhealth/fasten-onprem/blob/main/LICENSE.md)
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/fastenhealth/fasten-onprem?style=flat-square)](https://github.com/fastenhealth/fasten-onprem/releases/latest)
 [![Discord Join](https://img.shields.io/badge/discord-join-blueviolet?style=flat-square&logo=discord)](https://discord.gg/Bykz6BAN8p)

backend/pkg/database/sqlite_repository_graph.go

@@ -301,10 +301,10 @@ func getSourcesAndSinksForGraphType(graphType pkg.ResourceGraphType) ([][]string
 	case pkg.ResourceGraphTypeMedicalHistory:
 		sources = [][]string{
 			{"condition", "composition"},
-			{"encounter"},
+			{"encounter", "explanationofbenefit"},
 		}
 		sinks = [][]string{
-			{"location", "device", "organization", "practitioner", "medication", "patient"}, //resources that are shared across multiple conditions
+			{"location", "device", "organization", "practitioner", "medication", "patient", "coverage"}, //resources that are shared across multiple conditions
 			{"binary"},
 		}
 		sourceFlattenRelated = map[string]bool{

backend/pkg/web/handler/glossary.go

@@ -39,7 +39,7 @@ func FindCodeSystem(codeSystem string) (string, error) {
 	if codeSystemId, ok := codeSystemIds[codeSystem]; ok {
 		return codeSystemId, nil
 	} else {
-		return "", fmt.Errorf("Code System not found")
+		return "", fmt.Errorf("Code System not found: %s", codeSystem)
 	}
 
 }

backend/pkg/web/server.go

@@ -80,7 +80,7 @@ func (ae *AppEngine) Setup(logger *logrus.Entry) *gin.Engine {
 				ae.Logger.Warningln("***UNSAFE***")
 				unsafe := api.Group("/unsafe")
 				{
-					//http://localhost:9090/api/raw/test@test.com/436d7277-ad56-41ce-9823-44e353d1b3f6/Patient/smart-1288992
+					//http://localhost:9090/api/unsafe/testuser1/3508f8cf-6eb9-4e4b-8174-dd69a493a2b4/Patient/smart-1288992
 					unsafe.GET("/:username/:sourceId/*path", handler.UnsafeRequestSource)
 					unsafe.GET("/:username/graph/:graphType", handler.UnsafeResourceGraph)
 

frontend/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/angular";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/angular",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

frontend/.storybook/preview.ts

@@ -0,0 +1,29 @@
+import type { Preview } from "@storybook/angular";
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import docJson from "../documentation.json";
+import {applicationConfig} from "@storybook/angular";
+import {importProvidersFrom} from "@angular/core";
+import {HttpClientModule} from "@angular/common/http";
+setCompodocJson(docJson);
+
+// see: https://github.com/storybookjs/storybook/issues/21942#issuecomment-1516177565
+const decorators = [
+  // applicationConfig({
+  //   providers: [importProvidersFrom(HttpClientModule)]
+  // })
+];
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: decorators
+};
+
+export default preview;

frontend/.storybook/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*", "./preview.ts"],
+  "files": ["./typings.d.ts"]
+}

frontend/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

frontend/angular.json

@@ -23,7 +23,10 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "allowedCommonJsDependencies": ["chart.js", "highlight.js"],
+            "allowedCommonJsDependencies": [
+              "chart.js",
+              "highlight.js"
+            ],
             "aot": true,
             "assets": [
               "src/favicon.ico",
@@ -32,14 +35,13 @@
                 "glob": "**/*",
                 "input": "./node_modules/dwv/decoders/",
                 "output": "/assets/dwv/decoders/"
-              },
+              }
             ],
             "styles": [
               "src/styles.scss"
             ],
             "scripts": [
-              "node_modules/@panva/oauth4webapi/build/index.js",
-
+              "node_modules/@panva/oauth4webapi/build/index.js"
             ]
           },
           "configurations": {
@@ -125,7 +127,6 @@
                 }
               ]
             }
-
           }
         },
         "serve": {
@@ -193,6 +194,43 @@
               "devServerTarget": "fastenhealth:serve:prod"
             }
           }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "fastenhealth:build",
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "./node_modules/dwv/decoders/",
+                "output": "/assets/dwv/decoders/"
+              }
+            ],
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "fastenhealth:build",
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
+            "outputDir": "storybook-static"
+          }
         }
       }
     }

frontend/git.version.sh

@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+
+if [[ -z "${CI}" ]]; then
+    echo "running locally (not in Github Actions). generating version file from git client"
+    GIT_TAG=`git describe --tags`
+    GIT_BRANCH=`git rev-parse --abbrev-ref HEAD`
+
+    if [[ "$GIT_BRANCH" == "main" ]]; then
+        VERSION_INFO="${GIT_TAG}"
+    else
+        VERSION_INFO="${GIT_BRANCH}#${GIT_TAG}"
+    fi
+else
+    echo "running in Github Actions, generating version file from environmental variables"
+    # https://docs.github.com/en/actions/learn-github-actions/environment-variables
+    VERSION_INFO="${GITHUB_REF_NAME}"
+
+    if [[ "$GITHUB_REF_TYPE" == "branch" ]]; then
+            VERSION_INFO="${VERSION_INFO}#${GITHUB_SHA::7}"
+    fi
+fi
+
+echo "writing version file (version: ${VERSION_INFO})"
+cat <<EOT > src/environments/versions.ts
+// this file is automatically generated by git.version.ts script
+export const versionInfo = {
+    version: '${VERSION_INFO}',
+};
+EOT

frontend/package.json

@@ -9,7 +9,9 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "dist": "ng build --watch --output-path=../dist"
+    "dist": "ng build --watch --output-path=../dist",
+    "storybook": "ng run fastenhealth:storybook",
+    "build-storybook": "ng run fastenhealth:build-storybook"
   },
   "private": true,
   "dependencies": {
@@ -38,6 +40,7 @@
     "chart.js": "2.9.4",
     "dwv": "^0.31.0",
     "fhirpath": "^3.3.0",
+    "gridstack": "7.3.0",
     "humanize-duration": "^3.27.3",
     "idb": "^7.1.0",
     "jose": "^4.10.4",
@@ -58,6 +61,13 @@
     "@angular/cli": "^14.1.3",
     "@angular/compiler-cli": "^14.1.3",
     "@angular/language-service": "^14.1.3",
+    "@compodoc/compodoc": "^1.1.19",
+    "@storybook/addon-essentials": "^7.0.7",
+    "@storybook/addon-interactions": "^7.0.7",
+    "@storybook/addon-links": "^7.0.7",
+    "@storybook/angular": "^7.0.7",
+    "@storybook/blocks": "^7.0.7",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "codelyzer": "^5.1.2",
@@ -70,8 +80,14 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.7",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~4.6.4"
+  },
+  "resolutions": {
+    "webpack": "5.74.0"
   }
 }

frontend/src/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import {HttpClientModule, HTTP_INTERCEPTORS, HttpClient} from '@angular/common/http';
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { HeaderComponent } from './components/header/header.component';
 import { FooterComponent } from './components/footer/footer.component';
@@ -32,6 +32,8 @@ import {PipesModule} from './pipes/pipes.module';
 import { ResourceCreatorComponent } from './pages/resource-creator/resource-creator.component';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { NgSelectModule } from '@ng-select/ng-select';
+import {HTTP_CLIENT_TOKEN} from "./dependency-injection";
+import {WidgetsModule} from './widgets/widgets.module';
 
 @NgModule({
   declarations: [
@@ -64,9 +66,14 @@ import { NgSelectModule } from '@ng-select/ng-select';
     MomentModule,
     PipesModule,
     InfiniteScrollModule,
-    NgSelectModule
+    NgSelectModule,
+    WidgetsModule
   ],
   providers: [
+    {
+      provide: HTTP_CLIENT_TOKEN,
+      useClass: HttpClient,
+    },
     {
       provide: HTTP_INTERCEPTORS,
       useClass: AuthInterceptorService,

frontend/src/app/components/fhir/common/badge/badge.component.spec.ts

@@ -8,7 +8,7 @@ describe('BadgeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ BadgeComponent ]
+      imports: [ BadgeComponent ]
     })
     .compileComponents();
 

frontend/src/app/components/fhir/common/badge/badge.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
-
 @Component({
+  standalone: true,
   selector: 'fhir-ui-badge',
   templateUrl: './badge.component.html',
   styleUrls: ['./badge.component.scss']

frontend/src/app/components/fhir/common/badge/badge.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import {BadgeComponent} from "./badge.component";
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<BadgeComponent> = {
+  title: 'Fhir/Common/Badge',
+  component: BadgeComponent,
+  decorators: [
+    // moduleMetadata({
+    //   imports: [AppModule]
+    // })
+    // applicationConfig({
+    //   providers: [importProvidersFrom(AppModule)],
+    // }),
+  ],
+  tags: ['autodocs'],
+  render: (args: BadgeComponent) => ({
+    props: {
+      backgroundColor: null,
+      ...args,
+    },
+  }),
+  argTypes: {
+    status: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<BadgeComponent>;
+
+// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
+export const Primary: Story = {
+  args: {
+    status: "active",
+  }
+};
+
+export const Secondary: Story = {
+  args: {
+    status: 'refuted'
+  },
+};
+

frontend/src/app/components/fhir/common/table/table.component.spec.ts

@@ -8,7 +8,7 @@ describe('TableComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TableComponent ]
+      imports: [ TableComponent ]
     })
     .compileComponents();