feat(testing): refactor avatar spec to use its harness

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: `
             <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 pageObject: TuiPageObject<TestComponent>;
-    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)`, */
+            /* ); */
         });
     });
 });