From ad14e5040e28edb383c78174b8fbf1c4b221f1e3 Mon Sep 17 00:00:00 2001 From: Zargham Khan Date: Mon, 7 Nov 2022 00:16:30 +0100 Subject: [PATCH 1/3] feat(testing): add avatar harness class --- projects/testing/core/avatar.harness.ts | 9 +++++++++ projects/testing/core/index.ts | 1 + 2 files changed, 10 insertions(+) create mode 100644 projects/testing/core/avatar.harness.ts diff --git a/projects/testing/core/avatar.harness.ts b/projects/testing/core/avatar.harness.ts new file mode 100644 index 000000000000..5d3a246557ce --- /dev/null +++ b/projects/testing/core/avatar.harness.ts @@ -0,0 +1,9 @@ +import {TuiComponentHarness} from '@taiga-ui/testing/utils'; + +export class TuiAvatarHarness extends TuiComponentHarness { + static hostSelector = `tui-avatar`; + + async text(): Promise { + return (await this.host()).text(); + } +} diff --git a/projects/testing/core/index.ts b/projects/testing/core/index.ts index b05a20981695..74818bc755e5 100644 --- a/projects/testing/core/index.ts +++ b/projects/testing/core/index.ts @@ -1,4 +1,5 @@ export * from './action.harness'; +export * from './avatar.harness'; export * from './badge.harness'; export * from './button.harness'; export * from './card.harness'; From 972d12b98efe955a5eb3bc5fb0bd4aedada907fe Mon Sep 17 00:00:00 2001 From: Zargham Khan Date: Mon, 7 Nov 2022 00:17:13 +0100 Subject: [PATCH 2/3] feat(testing): refactor avatar spec to use its harness --- .../avatar/tests/avatar.component.spec.ts | 115 +++++++++--------- 1 file changed, 56 insertions(+), 59 deletions(-) diff --git a/projects/kit/components/avatar/tests/avatar.component.spec.ts b/projects/kit/components/avatar/tests/avatar.component.spec.ts index 13b4825e2fe1..aa739613e433 100644 --- a/projects/kit/components/avatar/tests/avatar.component.spec.ts +++ b/projects/kit/components/avatar/tests/avatar.component.spec.ts @@ -1,45 +1,44 @@ -import {Component, ViewChild} from '@angular/core'; +import {HarnessLoader} from '@angular/cdk/testing'; +import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; +import {Component} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core'; -import {TuiAvatarComponent, TuiAvatarModule} from '@taiga-ui/kit'; -import {configureTestSuite, TuiPageObject} from '@taiga-ui/testing'; +import {TuiAvatarModule} from '@taiga-ui/kit'; +import {configureTestSuite, TuiAvatarHarness} from '@taiga-ui/testing'; describe(`Avatar`, () => { @Component({ template: ` + + + + `, }) - class TestComponent { - @ViewChild(TuiAvatarComponent, {static: true}) - component!: TuiAvatarComponent; - - avatarUrl: string | null = `someUrl`; - text: string | null = `James Cameron`; - autoColor = false; - size: TuiSizeXS | TuiSizeXL = `m`; - } + class TestComponent {} let fixture: ComponentFixture; - let testComponent: TestComponent; - let component: TuiAvatarComponent; - let pageObject: TuiPageObject; - const testContext = { - get prefix() { - return `tui-avatar__`; - }, - }; - - function getAvatar(): HTMLElement { - return pageObject.getByAutomationId(`${testContext.prefix}component`)! - .nativeElement; - } + let loader: HarnessLoader; configureTestSuite(() => { TestBed.configureTestingModule({ @@ -50,55 +49,53 @@ describe(`Avatar`, () => { beforeEach(() => { fixture = TestBed.createComponent(TestComponent); - pageObject = new TuiPageObject(fixture); - testComponent = fixture.componentInstance; - fixture.detectChanges(); - component = testComponent.component; + loader = TestbedHarnessEnvironment.loader(fixture); }); describe(`computedText`, () => { - it(`if there is an avatar, the text value is empty`, () => { - expect(component.computedText).toBe(``); + it(`if there is an avatar, the text value is empty`, async () => { + const avatar = await loader.getHarness(TuiAvatarHarness); + + expect(await avatar.text()).toBe(``); }); - it(`if there is no avatar, the text value is taken from the first letters of the words in text`, () => { - testComponent.avatarUrl = null; - fixture.detectChanges(); + it(`if there is no avatar, the text value is taken from the first letters of the words in text`, async () => { + const avatar = await loader.getHarness( + TuiAvatarHarness.with({selector: `#null-url`}), + ); - expect(component.computedText).toBe(`JC`); + expect(await avatar.text()).toBe(`JC`); }); - it(`if the avatar is absent, and there is one word in text, its first letter is taken`, () => { - testComponent.avatarUrl = null; - testComponent.text = `James`; - fixture.detectChanges(); + it(`if the avatar is absent, and there is one word in text, its first letter is taken`, async () => { + const avatar = await loader.getHarness( + TuiAvatarHarness.with({selector: `#null-url-with-text`}), + ); - expect(component.computedText).toBe(`J`); + expect(await avatar.text()).toBe(`J`); }); - it(`for xs sizes only one letter is taken`, () => { - testComponent.avatarUrl = null; - testComponent.size = `xs`; - fixture.detectChanges(); + it(`for xs sizes only one letter is taken`, async () => { + const avatar = await loader.getHarness( + TuiAvatarHarness.with({selector: `#null-url-xs`}), + ); - expect(component.computedText).toBe(`J`); + expect(await avatar.text()).toBe(`J`); }); }); // TODO: Jest doesn't support intersection observe xdescribe(`Avatar color`, () => { it(`if there is an avatarUrl the color is rgba(0, 0, 0, 0)`, () => { - expect(getComputedStyle(getAvatar()).backgroundColor).toBe( - `rgba(0, 0, 0, 0)`, - ); + /* expect(getComputedStyle(getAvatar()).backgroundColor).toBe( */ + /* `rgba(0, 0, 0, 0)`, */ + /* ); */ }); it(`when autoColor is on, the color will be - rgb(160, 170, 228)`, () => { - testComponent.autoColor = true; - fixture.detectChanges(); - expect(getComputedStyle(getAvatar()).backgroundColor).toBe( - `rgb(160, 170, 228)`, - ); + /* expect(getComputedStyle(getAvatar()).backgroundColor).toBe( */ + /* `rgb(160, 170, 228)`, */ + /* ); */ }); }); }); From dd8646723fb8df1c6b52577add5a4a14bbac9e32 Mon Sep 17 00:00:00 2001 From: Zargham Khan Date: Tue, 8 Nov 2022 00:21:35 +0100 Subject: [PATCH 3/3] feat(testing): revert changes --- .../avatar/tests/avatar.component.spec.ts | 25 +++++++++++++------ 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/projects/kit/components/avatar/tests/avatar.component.spec.ts b/projects/kit/components/avatar/tests/avatar.component.spec.ts index aa739613e433..af2c4453671c 100644 --- a/projects/kit/components/avatar/tests/avatar.component.spec.ts +++ b/projects/kit/components/avatar/tests/avatar.component.spec.ts @@ -3,7 +3,7 @@ import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; import {Component} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TuiAvatarModule} from '@taiga-ui/kit'; -import {configureTestSuite, TuiAvatarHarness} from '@taiga-ui/testing'; +import {configureTestSuite, TuiAvatarHarness, TuiPageObject} from '@taiga-ui/testing'; describe(`Avatar`, () => { @Component({ @@ -39,6 +39,17 @@ describe(`Avatar`, () => { let fixture: ComponentFixture; let loader: HarnessLoader; + let pageObject: TuiPageObject; + const testContext = { + get prefix() { + return `tui-avatar__`; + }, + }; + + function getAvatar(): HTMLElement { + return pageObject.getByAutomationId(`${testContext.prefix}component`)! + .nativeElement; + } configureTestSuite(() => { TestBed.configureTestingModule({ @@ -87,15 +98,15 @@ describe(`Avatar`, () => { // TODO: Jest doesn't support intersection observe xdescribe(`Avatar color`, () => { it(`if there is an avatarUrl the color is rgba(0, 0, 0, 0)`, () => { - /* expect(getComputedStyle(getAvatar()).backgroundColor).toBe( */ - /* `rgba(0, 0, 0, 0)`, */ - /* ); */ + expect(getComputedStyle(getAvatar()).backgroundColor).toBe( + `rgba(0, 0, 0, 0)`, + ); }); it(`when autoColor is on, the color will be - rgb(160, 170, 228)`, () => { - /* expect(getComputedStyle(getAvatar()).backgroundColor).toBe( */ - /* `rgb(160, 170, 228)`, */ - /* ); */ + expect(getComputedStyle(getAvatar()).backgroundColor).toBe( + `rgb(160, 170, 228)`, + ); }); }); });