feat(testing): avatar harness test (taiga-family#3019)

projects/kit/components/avatar/tests/avatar.component.spec.ts

@@ -1,34 +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, TuiPageObject} from '@taiga-ui/testing';
 
 describe(`Avatar`, () => {
     @Component({
         template: `
             <tui-avatar
-                automation-id="tui-avatar__component"
-                [avatarUrl]="avatarUrl"
-                [text]="text"
-                [size]="size"
-                [autoColor]="autoColor"
+                id="default"
+                [avatarUrl]="'someURL'"
+                [text]="'James Cameron'"
+            ></tui-avatar>
+            <tui-avatar
+                id="null-url"
+                [avatarUrl]="null"
+                [text]="'James Cameron'"
+            ></tui-avatar>
+            <tui-avatar
+                id="null-url-with-text"
+                [avatarUrl]="null"
+                [text]="'James'"
+            ></tui-avatar>
+            <tui-avatar
+                id="null-url-xs"
+                size="xs"
+                [avatarUrl]="null"
+                [text]="'James'"
+            ></tui-avatar>
+            <tui-avatar
+                id="auto-color"
+                [autoColor]="true"
             ></tui-avatar>
         `,
     })
-    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<TestComponent>;
-    let testComponent: TestComponent;
-    let component: TuiAvatarComponent;
+    let loader: HarnessLoader;
     let pageObject: TuiPageObject<TestComponent>;
     const testContext = {
         get prefix() {
@@ -50,38 +60,38 @@ 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`);
         });
     });
 
@@ -94,8 +104,6 @@ describe(`Avatar`, () => {
         });
 
         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)`,
             );

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<string> {
+        return (await this.host()).text();
+    }
+}

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';