test: test lifecycle component

libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.spec.ts

@@ -1,23 +1,76 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { LifecycleComponent } from './lifecycle.component'
+import { LifecycleComponent, LifecycleStep } from './lifecycle.component'
 import { TimelineModule } from 'primeng/timeline'
+import { LifecycleHarness, TestbedHarnessEnvironment } from '../../../../../testing'
+import { PrimeNgModule } from '../../primeng.module'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { PortalCoreModule } from '../../portal-core.module'
+
+const mockSteps: LifecycleStep[] = [
+  {
+    id: 'test1',
+    title: 'Test 1',
+  },
+  {
+    id: 'test2',
+    title: 'Test 2',
+    details: 'Test 2 description',
+  },
+  {
+    id: 'test3',
+    title: 'Test 3',
+  },
+]
 
 describe('LifecycleComponent', () => {
   let component: LifecycleComponent
   let fixture: ComponentFixture<LifecycleComponent>
+  let lifecycle: LifecycleHarness
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [LifecycleComponent],
-      imports: [TimelineModule]
+      imports: [TimelineModule, PrimeNgModule, BrowserAnimationsModule, PortalCoreModule],
     }).compileComponents()
 
     fixture = TestBed.createComponent(LifecycleComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
+    lifecycle = await TestbedHarnessEnvironment.harnessForFixture(fixture, LifecycleHarness)
   })
 
   it('should create', () => {
     expect(component).toBeTruthy()
+    expect(lifecycle).toBeTruthy()
+  })
+
+  it('should not render any initial lifecycle steps', async () => {
+    const steps = await lifecycle.getSteps()
+    expect(steps.length).toBe(0)
+  })
+
+  it('should render given lifecycle steps', async () => {
+    component.steps = mockSteps
+    const steps = await lifecycle.getSteps()
+    const highlightedSteps = await lifecycle.getHighlightedSteps()
+    expect(steps.length).toBe(3)
+    expect(highlightedSteps.length).toBe(0)
+    mockSteps.forEach(async (step, index) => {
+      expect(await steps[index].text()).toEqual(step.title + (step.details ?? ''))
+    })
+  })
+
+  it('should highlight a given lifecycle step', async () => {
+    component.steps = mockSteps
+    component.activeStepId = 'test2'
+    const steps = await lifecycle.getSteps()
+    const highlightedSteps = await lifecycle.getHighlightedSteps()
+    mockSteps.forEach(async (step, index) => {
+      if(step.id == component.activeStepId) {
+        expect(await steps[index].hasClass('bg-primary')).toEqual(true)
+      }
+    })
+    expect(steps.length).toBe(3)
+    expect(highlightedSteps.length).toBe(1) 
   })
 })

libs/portal-integration-angular/testing/index.ts

@@ -35,6 +35,7 @@ export * from './span.harness'
 export * from './page-header.harness'
 export * from './p-tableCheckbox.harness'
 export * from './create-or-edit-search-config-dialog.harness'
+export * from './lifecycle.harness'
 
 export * from '@angular/cdk/testing'
 export * from '@angular/cdk/testing/testbed'

libs/portal-integration-angular/testing/lifecycle.harness.ts

@@ -0,0 +1,8 @@
+import { ContentContainerComponentHarness } from "@angular/cdk/testing"
+
+export class LifecycleHarness extends ContentContainerComponentHarness {
+    static hostSelector = 'ocx-lifecycle'
+
+    getSteps = this.locatorForAll('.p-timeline-event-content .card')
+    getHighlightedSteps = this.locatorForAll('.p-timeline-event-content .card.bg-primary')
+}