SED-4412 create jest tests for base components #1300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

dvladir wants to merge 33 commits into master from SED-4412-create-jest-tests-for-base-components

jest.config.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,4 +10,5 @@ module.exports = { @@
       ],
       moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>' }),
       modulePathIgnorePatterns: ['<rootDir>/dist/'],
+      testEnvironment: '@happy-dom/jest-environment',
     };

package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -111,6 +111,7 @@ @@
         "jest": "29.5.0",
         "@types/jest": "29.5.14",
         "jest-preset-angular": "14.6.2",
+        "@happy-dom/jest-environment": "19.0.2",
         "ts-jest": "29.4.4"
       },
       "engines": {
@@ Expand Down @@

projects/step-core/src/lib/client/step-client-module.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ import { @@
     import { BaseHttpRequest } from './generated/core/BaseHttpRequest';
     import { OPEN_API_CONFIG_PROVIDER } from './generated/open-api-config.provider';
     import { lazyLoadedMainInterceptor } from './augmented/interceptros/lazy-loaded.interceptor';
+    import { TableRemoteDataSourceFactoryService } from './table';
     export * from './generated/core/BaseHttpRequest';
     export { ApiError } from './generated/core/ApiError';
@@ Expand All @@
           useExisting: StepHttpRequestService,
         },
       ]);
+    export const provideTestStepApi = () =>
+      makeEnvironmentProviders([
+        provideHttpClient(withInterceptorsFromDi()),
+        OPEN_API_CONFIG_PROVIDER,
+        {
+          provide: BaseHttpRequest,
+          useExisting: StepHttpRequestService,
+        },
+        {
+          provide: TableRemoteDataSourceFactoryService,
+          useValue: null,
+        },
+      ]);

...omponents/artefact-inline-details-header/artefact-inline-details-header.component.test.ts

-Original file line number
+Diff line change
@@ -0,0 +1,43 @@
+    import { Component, signal } from '@angular/core';
+    import { ArtefactInlineDetailsHeaderComponent } from '@exense/step-core';
+    import { ComponentFixture, TestBed } from '@angular/core/testing';
+    import { By } from '@angular/platform-browser';
+    @Component({
+      selector: 'step-artefact-inline-details-header-test',
+      imports: [ArtefactInlineDetailsHeaderComponent],
+      template: `
+        <step-artefact-inline-details-header [template]="foo" [isVisible]="isVisible()" />
+        <ng-template #foo>
+          <div class="testDiv">FOO</div>
+        </ng-template>
+      `,
+    })
+    class ArtefactInlineDetailsHeaderTestComponent {
+      readonly isVisible = signal(false);
+    }
+    describe('ArtefactInlineDetailsHeader', () => {
+      let fixture: ComponentFixture<ArtefactInlineDetailsHeaderTestComponent>;
+      beforeEach(async () => {
+        await TestBed.configureTestingModule({ imports: [ArtefactInlineDetailsHeaderTestComponent] }).compileComponents();
+        fixture = TestBed.createComponent(ArtefactInlineDetailsHeaderTestComponent);
+        fixture.detectChanges();
+        await fixture.whenStable();
+      });
+      it('Content visibility', async () => {
+        let content = fixture.debugElement.query(By.css('.testDiv'));
+        expect(content).toBeNull();
+        fixture.componentInstance.isVisible.set(true);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        content = fixture.debugElement.query(By.css('.testDiv'));
+        expect(content).not.toBeNull();
+        expect((content.nativeElement as HTMLElement).textContent).toBe('FOO');
+      });
+    });

...omponents/streaming-attachment-indicator/streaming-attachment-indicator.component.test.ts

-Original file line number
+Diff line change
@@ -0,0 +1,78 @@
+    import { ComponentFixture, TestBed } from '@angular/core/testing';
+    import {
+      AttachmentMeta,
+      AugmentedResourcesService,
+      StreamingAttachmentIndicatorComponent,
+      StreamingAttachmentMeta,
+    } from '@exense/step-core';
+    import { v4 } from 'uuid';
+    import { By } from '@angular/platform-browser';
+    import { MatProgressSpinner } from '@angular/material/progress-spinner';
+    import { AugmentedStreamingResourcesService } from '../../../../client/augmented/services/augmented-streaming-resources.service';
+    const SIMPLE_ATTACHMENT: AttachmentMeta = {
+      name: 'test.jpg',
+      mimeType: 'image/jpeg',
+      type: 'step.attachment.AttachmentMeta',
+      id: v4(),
+    };
+    const STREAMING_ATTACHMENT: StreamingAttachmentMeta = {
+      name: 'test.txt',
+      mimeType: 'plain/text',
+      type: 'step.attachments.StreamingAttachmentMeta',
+      id: v4(),
+      currentNumberOfLines: 10,
+      status: 'INITIATED',
+    };
+    const IN_PROGRESS_STREAMING_ATTACHMENT: StreamingAttachmentMeta = {
+      ...STREAMING_ATTACHMENT,
+      status: 'IN_PROGRESS',
+    };
+    describe('StreamingAttachmentIndicatorComponent', () => {
+      let fixture: ComponentFixture<StreamingAttachmentIndicatorComponent>;
+      beforeEach(async () => {
+        await TestBed.configureTestingModule({
+          imports: [StreamingAttachmentIndicatorComponent],
+          providers: [
+            {
+              provide: AugmentedResourcesService,
+              useValue: null,
+            },
+            {
+              provide: AugmentedStreamingResourcesService,
+              useValue: null,
+            },
+          ],
+        }).compileComponents();
+        fixture = TestBed.createComponent(StreamingAttachmentIndicatorComponent);
+        fixture.detectChanges();
+        await fixture.whenStable();
+      });
+      it('Check indicator visibility', async () => {
+        let indicator = fixture.debugElement.query(By.directive(MatProgressSpinner));
+        expect(indicator).toBeNull();
+        fixture.componentRef.setInput('attachment', SIMPLE_ATTACHMENT);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        indicator = fixture.debugElement.query(By.directive(MatProgressSpinner));
+        expect(indicator).toBeNull();
+        fixture.componentRef.setInput('attachment', STREAMING_ATTACHMENT);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        indicator = fixture.debugElement.query(By.directive(MatProgressSpinner));
+        expect(indicator).toBeNull();
+        fixture.componentRef.setInput('attachment', IN_PROGRESS_STREAMING_ATTACHMENT);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        indicator = fixture.debugElement.query(By.directive(MatProgressSpinner));
+        expect(indicator).not.toBeNull();
+      });
+    });

...p-core/src/lib/modules/attachments/components/trace-viewer/trace-viewer.component.test.ts

-Original file line number
+Diff line change
@@ -0,0 +1,56 @@
+    import { TraceViewerComponent } from './trace-viewer.component';
+    import { ComponentFixture, TestBed } from '@angular/core/testing';
+    import { APP_HOST } from '../../../../client/_common';
+    import { By } from '@angular/platform-browser';
+    import { ComponentRef } from '@angular/core';
+    import { DOCUMENT } from '@angular/common';
+    describe('Trace Viewer', () => {
+      let componentRef: ComponentRef<TraceViewerComponent>;
+      let fixture: ComponentFixture<TraceViewerComponent>;
+      beforeEach(async () => {
+        await TestBed.configureTestingModule({
+          imports: [TraceViewerComponent],
+          providers: [
+            {
+              provide: APP_HOST,
+              useValue: 'https://step.ch',
+            },
+          ],
+        }).compileComponents();
+        fixture = TestBed.createComponent(TraceViewerComponent);
+        componentRef = fixture.componentRef;
+        fixture.detectChanges();
+      });
+      it('Initial view', async () => {
+        const iframe = fixture.debugElement.query(By.css('iframe'));
+        expect(iframe.nativeElement.src).toEqual('https://step.ch/trace-viewer/');
+      });
+      it('Set report url', async () => {
+        componentRef.setInput('reportUrl', 'https://step.ch/reports/1');
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const iframe = fixture.debugElement.query(By.css('iframe'));
+        expect(iframe.nativeElement.src).toEqual('https://step.ch/trace-viewer/?trace=https://step.ch/reports/1');
+      });
+      it('Oper url', async () => {
+        componentRef.setInput('reportUrl', 'https://step.ch/reports/1');
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const doc = TestBed.inject(DOCUMENT);
+        const spyWindowOpen = jest.spyOn(doc.defaultView!, 'open').mockImplementation(() => {});
+        expect(spyWindowOpen).not.toHaveBeenCalled();
+        componentRef.instance.openInSeparateTab();
+        expect(spyWindowOpen).toHaveBeenCalledWith(
+          'https://step.ch/trace-viewer/?trace=https://step.ch/reports/1',
+          '_blank',
+        );
+      });
+    });

...to-shrink-list/components/auto-shrink-item-value/auto-shrink-item-value.component.test.ts

-Original file line number
+Diff line change
@@ -0,0 +1,74 @@
+    import { Component, Directive, signal } from '@angular/core';
+    import { KeyValue } from '@angular/common';
+    import { AutoShrinkItemValueComponent } from '@exense/step-core';
+    import { TestBed } from '@angular/core/testing';
+    import { By } from '@angular/platform-browser';
+    @Directive()
+    abstract class AutoShrinkItemValueBaseComponent {
+      readonly item = signal<KeyValue<string, string>>({ key: '', value: '' });
+    }
+    @Component({
+      selector: 'step-auto-shrink-item-value-without-template-test',
+      imports: [AutoShrinkItemValueComponent],
+      template: `
+        @if (item(); as item) {
+          <step-auto-shrink-item-value [item]="item" />
+        }
+      `,
+    })
+    class AutoShrinkItemValueWithoutTemplateComponent extends AutoShrinkItemValueBaseComponent {}
+    @Component({
+      selector: 'step-auto-shrink-item-value-with-template-test',
+      imports: [AutoShrinkItemValueComponent],
+      template: `
+        @if (item(); as item) {
+          <step-auto-shrink-item-value [item]="item" [emptyValueTemplate]="test" />
+        }
+        <ng-template #test>
+          <div class="test">EMPTY</div>
+        </ng-template>
+      `,
+    })
+    class AutoShrinkItemValueWithTemplateComponent extends AutoShrinkItemValueBaseComponent {}
+    describe('AutoShrinkItemValueComponent', () => {
+      beforeEach(async () => {
+        await TestBed.configureTestingModule({
+          imports: [AutoShrinkItemValueWithoutTemplateComponent, AutoShrinkItemValueWithTemplateComponent],
+        }).compileComponents();
+      });
+      it('Without empty template', async () => {
+        let fixture = TestBed.createComponent(AutoShrinkItemValueWithoutTemplateComponent);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        expect((fixture.nativeElement as HTMLElement).innerText.trim()).toBe('');
+        fixture.componentInstance.item.set({ key: 'foo', value: 'FOO' });
+        fixture.detectChanges();
+        await fixture.whenStable();
+        expect((fixture.nativeElement as HTMLElement).innerText.trim()).toBe('FOO');
+      });
+      it('With empty template', async () => {
+        let fixture = TestBed.createComponent(AutoShrinkItemValueWithTemplateComponent);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        let emptyContainer = fixture.debugElement.query(By.css('.test'));
+        expect(emptyContainer).not.toBeNull();
+        expect((emptyContainer.nativeElement as HTMLElement).innerText).toBe('EMPTY');
+        fixture.componentInstance.item.set({ key: 'foo', value: 'FOO' });
+        fixture.detectChanges();
+        await fixture.whenStable();
+        emptyContainer = fixture.debugElement.query(By.css('.test'));
+        expect(emptyContainer).toBeNull();
+        expect((fixture.nativeElement as HTMLElement).innerText.trim()).toBe('FOO');
+      });
+    });

...-package-common/components/automation-package-info/automation-package-info.component.html

-Original file line number
+Diff line change
@@ -1,3 +1 @@
-    <div>
-      {{(automationPackage$ | async)?.attributes?.['name'] ?? ''}}
-    </div>
+    <div>{{ (automationPackage$ | async)?.attributes?.['name'] ?? '' }}</div>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SED-4412 create jest tests for base components #1300

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

chatgpt-codex-connector bot Feb 3, 2026

Uh oh!

Uh oh!

SED-4412 create jest tests for base components #1300

Are you sure you want to change the base?

Uh oh!

SED-4412 create jest tests for base components #1300

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

chatgpt-codex-connector bot Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!