Github actions CI workflow

Author: MichaelDoyle

.github/workflows/ci.yml

@@ -0,0 +1,29 @@
+name: ngx-json-treeview CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build_and_test:
+    runs-on: ubuntu-latest
+    steps:
+        - uses: actions/checkout@v4
+        - uses: pnpm/action-setup@v3
+        - name: Set up node v20
+          uses: actions/setup-node@v4
+          with:
+            node-version: 20.x
+            cache: 'pnpm'
+        - name: Install dependencies
+          run: pnpm install
+        - name: Check Code Format
+          run: pnpm format:check
+        - name: Build
+          run: pnpm build
+        - name: Run Tests
+          run: pnpm test --watch=false

package.json

@@ -18,6 +18,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.2.6",
+    "@angular/cdk": "^19.2.9",
     "@angular/common": "^19.2.6",
     "@angular/compiler": "^19.2.6",
     "@angular/core": "^19.2.6",

pnpm-lock.yaml

@@ -2,10 +2,10 @@ import { Component } from '@angular/core';
 import { NgxJsonTreeviewComponent } from 'ngx-json-treeview';
 
 @Component({
-    selector: 'app-root',
-    imports: [NgxJsonTreeviewComponent],
-    templateUrl: './app.component.html',
-    styleUrl: './app.component.scss'
+  selector: 'app-root',
+  imports: [NgxJsonTreeviewComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
   baseObj = {

projects/demo/src/app/app.component.ts

@@ -1,22 +1,28 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { TestBed } from '@angular/core/testing';
 import { NgxJsonTreeviewComponent } from './ngx-json-treeview.component';
 
-describe('NgxJsonTreeviewComponent', () => {
-  let component: NgxJsonTreeviewComponent;
-  let fixture: ComponentFixture<NgxJsonTreeviewComponent>;
+async function setupTest({
+  json = {},
+}: {
+  json?: any;
+} = {}) {
+  await TestBed.configureTestingModule({
+    imports: [NgxJsonTreeviewComponent],
+  }).compileComponents();
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NgxJsonTreeviewComponent],
-    }).compileComponents();
+  const fixture = TestBed.createComponent(NgxJsonTreeviewComponent);
+  const component = fixture.componentInstance;
+  fixture.componentRef.setInput('json', json);
+  fixture.detectChanges();
+  const loader = TestbedHarnessEnvironment.loader(fixture);
 
-    fixture = TestBed.createComponent(NgxJsonTreeviewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+  return { component, fixture, loader };
+}
 
-  it('should create', () => {
+describe('NgxJsonTreeviewComponent', () => {
+  it('should create', async () => {
+    const { component } = await setupTest();
     expect(component).toBeTruthy();
   });
 });

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.spec.ts

@@ -10,10 +10,10 @@ export interface Segment {
 }
 
 @Component({
-    selector: 'ngx-json-treeview',
-    imports: [CommonModule],
-    templateUrl: './ngx-json-treeview.component.html',
-    styleUrls: ['./ngx-json-treeview.component.scss']
+  selector: 'ngx-json-treeview',
+  imports: [CommonModule],
+  templateUrl: './ngx-json-treeview.component.html',
+  styleUrls: ['./ngx-json-treeview.component.scss'],
 })
 export class NgxJsonTreeviewComponent {
   // inputs & outputs