chore: refactor test for using OnPush strategy (#8890)

taiga-family · Sep 11, 2024 · 09db4f2 · 09db4f2
1 parent de77588
commit 09db4f2
Showing 1 changed file with 13 additions and 12 deletions.
diff --git a/projects/addon-doc/components/code/tests/highlight.spec.ts b/projects/addon-doc/components/code/tests/highlight.spec.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, type DebugElement} from '@angular/core';
+import {ChangeDetectionStrategy, type DebugElement, signal} from '@angular/core';
 import {Component, Input} from '@angular/core';
 import type {ComponentFixture} from '@angular/core/testing';
 import {fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing';
@@ -22,14 +22,13 @@ describe('Highlight Directive', () => {
         standalone: true,
         imports: [Highlight],
         template: `
-            <code [highlight]="code || ''"></code>
+            <code [highlight]="code()"></code>
         `,
-        // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-        changeDetection: ChangeDetectionStrategy.Default,
+        changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class Test {
         @Input()
-        public code?: string | null;
+        public code = signal('');
     }
 
     beforeEach(waitForAsync(async () => {
@@ -62,37 +61,39 @@ describe('Highlight Directive', () => {
     });
 
     it('should highlight given text', fakeAsync(() => {
-        component.code = testJsCode;
+        component.code.set(testJsCode);
         fixture.detectChanges();
+
         loader.ready.subscribe((lib: HighlightLibrary) => {
             highlightedCode = lib.highlightAuto(
                 testJsCode,
                 // note: enable auto detect language mode
                 null as unknown as string[],
             ).value;
         });
+
         tick(500);
 
         expect(directiveElement.nativeElement.innerHTML).toBe(highlightedCode);
     }));
 
     it('should reset text if empty string was passed', () => {
-        component.code = '';
+        component.code.set('');
         fixture.detectChanges();
 
         expect(directiveElement.nativeElement.innerHTML).toBe('');
     });
 
     it('should not highlight if code is undefined', () => {
         jest.spyOn(directiveInstance, 'highlightElement');
-        component.code = null;
+        component.code.set('');
         fixture.detectChanges();
 
         expect(directiveInstance.highlightElement).not.toHaveBeenCalled();
     });
 
     it('should highlight given text and highlight another text when change', fakeAsync(() => {
-        component.code = testJsCode;
+        component.code.set(testJsCode);
         fixture.detectChanges();
         loader.ready.subscribe((lib: HighlightLibrary) => {
             highlightedCode = lib.highlightAuto(
@@ -105,7 +106,7 @@ describe('Highlight Directive', () => {
 
         expect(directiveElement.nativeElement.innerHTML).toBe(highlightedCode);
 
-        component.code = testHtmlCode;
+        component.code.set(testHtmlCode);
         fixture.detectChanges();
         loader.ready.subscribe((lib: HighlightLibrary) => {
             highlightedCode = lib.highlightAuto(
@@ -118,13 +119,13 @@ describe('Highlight Directive', () => {
 
         expect(directiveElement.nativeElement.innerHTML).toBe(highlightedCode);
 
-        component.code = '';
+        component.code.set('');
         fixture.detectChanges();
         tick(300);
 
         expect(directiveElement.nativeElement.innerHTML).toBe('');
 
-        component.code = null;
+        component.code.set('');
         fixture.detectChanges();
         tick(300);