test(flex-layout): migrate custom matchers to Vitest

Author: LayZeeDK

projects/libs/flex-layout/_private-utils/testing/custom-matchers.ts

@@ -1,28 +1,42 @@
-declare var global: any;
-const _global = <any>(typeof window === 'undefined' ? global : window);
-
-import { _dom as _ } from './dom-tools';
-
 import {
   applyCssPrefixes,
   extendObject,
 } from '@ngbracket/ngx-layout/_private-utils';
 import { StyleUtils } from '@ngbracket/ngx-layout/core';
+ // This line is important even if imported values are not used! See https://stackoverflow.com/a/78524129/1071200
+import type { Assertion, AsymmetricMatchersContaining } from 'vitest';
+import { expect } from 'vitest';
 
-export const expect: (actual: any) => NgMatchers = <any>_global.expect;
+declare module 'vitest' {
+  interface Assertion<T = any> extends NgMatchers<T> {}
+  interface AsymmetricMatchersContaining extends NgMatchers {}
+}
+
+interface ExpectationResult {
+  pass: boolean;
+  message: () => string;
+  // If you pass these, they will automatically appear inside a diff when
+  // the matcher does not pass, so you don't need to print the diff yourself
+  actual?: unknown;
+  expected?: unknown;
+}
 
 /**
  * Jasmine matchers that check Angular specific conditions.
  */
-export interface NgMatchers extends jasmine.Matchers<any> {
+// export interface NgMatchers extends jasmine.Matchers<any> {
+export interface NgMatchers<R = unknown> {
   /**
    * Expect the element to have the given CSS styles injected INLINE
    *
    * ## Example
    *
    * {@example testing/ts/matchers.ts region='toHaveStyle'}
    */
-  toHaveStyle(expected: { [k: string]: string } | string): boolean;
+  toHaveInlineStyle(
+    expected: { [k: string]: string } | string,
+    styler: StyleUtils
+  ): R;
 
   /**
    * Expect the element to have the given CSS inline OR computed styles.
@@ -31,39 +45,36 @@ export interface NgMatchers extends jasmine.Matchers<any> {
    *
    * {@example testing/ts/matchers.ts region='toHaveStyle'}
    */
-  toHaveCSS(expected: { [k: string]: string } | string): boolean;
+  toHaveCSS(expected: { [k: string]: string } | string, styler: StyleUtils): R;
 
-  /**
-   * Invert the matchers.
-   */
-  not: NgMatchers;
+  // /**
+  //  * Invert the matchers.
+  //  */
+  // not: NgMatchers;
 }
 
 /**
  * NOTE: These custom JASMINE Matchers are used only
  *       in the Karma/Jasmine testing for the Layout Directives
  *       in `src/lib/flex/api`
  */
-export const customMatchers: jasmine.CustomMatcherFactories = {
+export const customMatchers: Record<
+  string,
+  (received: any, ...expected: any[]) => ExpectationResult
+> = {
   /**
    * Check element's inline styles only
    */
-  toHaveStyle: function () {
-    return {
-      compare: buildCompareStyleFunction(true),
-    };
-  },
+  toHaveInlineStyle: buildCompareStyleFunction(true),
 
   /**
    * Check element's css stylesheet only (if not present inline)
    */
-  toHaveCSS: function () {
-    return {
-      compare: buildCompareStyleFunction(false),
-    };
-  },
+  toHaveCSS: buildCompareStyleFunction(false),
 };
 
+expect.extend(customMatchers);
+
 /**
  * Curried value to function to check styles that are inline or in a stylesheet for the
  * specified DOM element.
@@ -73,7 +84,7 @@ function buildCompareStyleFunction(inlineOnly = true) {
     actual: any,
     styles: { [k: string]: string } | string,
     styler: StyleUtils
-  ) {
+  ): ExpectationResult {
     const found = {};
     const styleMap: { [k: string]: string } = {};
 
@@ -100,7 +111,7 @@ function buildCompareStyleFunction(inlineOnly = true) {
 
     return {
       pass: allPassed,
-      get message() {
+      message() {
         const expectedValueStr =
           typeof styles === 'string'
             ? styleMap

projects/libs/flex-layout/core/style-utils/style-utils.spec.ts

@@ -50,7 +50,7 @@ describe('styler', () => {
       componentWithTemplate(`
         <div></div>
       `);
-      expectNativeEl(fixture).not.toHaveStyle({ display: 'block' }, styler);
+      expectNativeEl(fixture).not.toHaveInlineStyle({ display: 'block' }, styler);
     });
 
     it('should find to "display" for inline style <div></div>', () => {

projects/libs/flex-layout/extended/img-src/img-src.spec.ts

@@ -120,7 +120,7 @@ describe('img-src directive', () => {
 
       fixture.detectChanges();
       if (isPlatformServer(platformId)) {
-        expectEl(img).toHaveStyle(
+        expectEl(img).toHaveInlineStyle(
           {
             content: 'url(https://dummyimage.com/300x300/c72538/ffffff.png)',
           },
@@ -130,7 +130,7 @@ describe('img-src directive', () => {
         let url = 'https://dummyimage.com/700x400/258cc7/fff.png';
         fixture.componentInstance.defaultSrc = url;
         fixture.detectChanges();
-        expectEl(img).toHaveStyle(
+        expectEl(img).toHaveInlineStyle(
           {
             content: `url(${url})`,
           },
@@ -174,7 +174,7 @@ describe('img-src directive', () => {
 
         const img = queryFor(fixture, 'img')[0];
         fixture.detectChanges();
-        expectEl(img).not.toHaveStyle(
+        expectEl(img).not.toHaveInlineStyle(
           {
             content: 'url(https://dummyimage.com/300x300/c72538/ffffff.png)',
           },
@@ -194,7 +194,7 @@ describe('img-src directive', () => {
 
         const img = queryFor(fixture, 'img')[0];
 
-        expectEl(img).toHaveStyle(
+        expectEl(img).toHaveInlineStyle(
           {
             content: `url(https://dummyimage.com/300x300/c72538/ffffff.png)`,
           },
@@ -203,7 +203,7 @@ describe('img-src directive', () => {
 
         mediaController.activate('md');
         fixture.detectChanges();
-        expectEl(img).toHaveStyle(
+        expectEl(img).toHaveInlineStyle(
           {
             content: `url(${SRC_URLS['md'][0]})`,
           },
@@ -226,7 +226,7 @@ describe('img-src directive', () => {
       fixture.detectChanges();
       expect(imgEl).toBeDefined();
       if (isPlatformServer(platformId)) {
-        expectEl(img).toHaveStyle(
+        expectEl(img).toHaveInlineStyle(
           {
             content: `url(${SRC_URLS['md'][0]})`,
           },
@@ -236,7 +236,7 @@ describe('img-src directive', () => {
         // When activating an unused breakpoint, fallback to default [src] value
         mediaController.activate('xl');
         fixture.detectChanges();
-        expectEl(img).toHaveStyle(
+        expectEl(img).toHaveInlineStyle(
           {
             content: `url(${SRC_URLS['xs'][0]})`,
           },
@@ -264,7 +264,7 @@ describe('img-src directive', () => {
       let imgEl = img.nativeElement;
       expect(imgEl).toBeDefined();
       if (isPlatformServer(platformId)) {
-        expectEl(img).toHaveStyle(
+        expectEl(img).toHaveInlineStyle(
           {
             content: `url(${defaultSrc})`,
           },
@@ -273,7 +273,7 @@ describe('img-src directive', () => {
 
         mediaController.activate('xs');
         fixture.detectChanges();
-        expectEl(img).toHaveStyle(
+        expectEl(img).toHaveInlineStyle(
           {
             content: `url(${xsSrc})`,
           },
@@ -282,7 +282,7 @@ describe('img-src directive', () => {
 
         mediaController.activate('lg');
         fixture.detectChanges();
-        expectEl(img).toHaveStyle(
+        expectEl(img).toHaveInlineStyle(
           {
             content: `url(${defaultSrc})`,
           },
@@ -314,7 +314,7 @@ describe('img-src directive', () => {
       expect(imgEl).toBeDefined();
       if (isPlatformServer(platformId)) {
         expect(imgEl).toHaveAttribute('src', '');
-        expectEl(img).toHaveStyle(
+        expectEl(img).toHaveInlineStyle(
           {
             content: `url(${SRC_URLS['md'][0]})`,
           },
@@ -324,7 +324,7 @@ describe('img-src directive', () => {
         // When activating an unused breakpoint, fallback to default [src] value
         mediaController.activate('xl');
         fixture.detectChanges();
-        expectEl(img).not.toHaveStyle(
+        expectEl(img).not.toHaveInlineStyle(
           {
             content: `url(${SRC_URLS['md'][0]})`,
           },