[WIP] test(flex-layout): convert SSR test setup to Vitest

Author: LayZeeDK

package.json

@@ -24,7 +24,7 @@
     "build:universal-demo-app": "nx run universal-demo-app:build:production",
     "serve:universal-demo-app": "nx run universal-demo-app:serve-ssr",
     "test": "nx test @ngbracket/ngx-layout",
-    "test:ssr": "webpack --config test/webpack-spec-ssr-bundle.js && jasmine --config=test/jasmine-ssr.json",
+    "test:ssr": "nx test @ngbracket/ngx-layout --configuration=ssr",
     "test:watch": "vitest --watch --ui --project \"@ngbracket/ngx-layout\"",
     "lint": "stylelint projects/libs/**/*.scss --config=stylelint-config.json && tslint --project ./tsconfig.json --config tslint.json",
     "release": "pnpm build && pnpm stamp",

pnpm-lock.yaml

@@ -1195,7 +1195,7 @@ describe('flex directive', () => {
       // The parent flex-direction not found;
       // A flex-direction should have been auto-injected to the parent...
       // fallback to 'row' and set child width styles accordingly
-      expect(parent.nativeElement.getAttribute('style')).not.toContain(
+      expect(parent.nativeElement.getAttribute('style') ?? '').not.toContain(
         '-webkit-flex-direction'
       );
       expectEl(element).toHaveInlineStyle({ 'min-width': '40px' }, styler);

projects/libs/flex-layout/flex/flex/flex.spec.ts

@@ -1,3 +1,4 @@
+import { isPlatformBrowser } from '@angular/common';
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -234,7 +235,7 @@ describe('layout-gap directive', () => {
         nodes = queryFor(fixture, '[fxFlex]');
         expect(nodes.length).toEqual(3);
 
-        if (typeof MutationObserver !== 'undefined') {
+        if (isPlatformBrowser(platformId) && typeof MutationObserver !== 'undefined') {
           expectEl(nodes[0]).toHaveInlineStyle({ 'margin-right': '13px' }, styler);
           expectEl(nodes[1]).toHaveInlineStyle({ 'margin-right': '13px' }, styler);
           expectEl(nodes[2]).not.toHaveInlineStyle(
@@ -271,7 +272,7 @@ describe('layout-gap directive', () => {
         nodes = queryFor(fixture, '[fxFlex]');
 
         expect(nodes.length).toEqual(1);
-        if (typeof MutationObserver !== 'undefined') {
+        if (isPlatformBrowser(platformId) && typeof MutationObserver !== 'undefined') {
           expectEl(nodes[0]).not.toHaveInlineStyle(
             { 'margin-right': '13px' },
             styler

projects/libs/flex-layout/flex/layout-gap/layout-gap.spec.ts

@@ -1,4 +1,5 @@
 import { Directionality } from '@angular/cdk/bidi';
+import { isPlatformBrowser } from '@angular/common';
 import {
   AfterContentInit,
   Directive,
@@ -7,6 +8,7 @@ import {
   Injectable,
   NgZone,
   OnDestroy,
+  PLATFORM_ID,
 } from '@angular/core';
 import { LAYOUT_VALUES } from '@ngbracket/ngx-layout/_private-utils';
 import {
@@ -144,7 +146,8 @@ export class LayoutGapDirective
     protected directionality: Directionality,
     protected styleUtils: StyleUtils,
     styleBuilder: LayoutGapStyleBuilder,
-    marshal: MediaMarshaller
+    marshal: MediaMarshaller,
+    @Inject(PLATFORM_ID) protected platformId: Object
   ) {
     super(elRef, styleBuilder, styleUtils, marshal);
     const extraTriggers = [
@@ -264,7 +267,7 @@ export class LayoutGapDirective
 
   protected buildChildObservable(): void {
     this.zone.runOutsideAngular(() => {
-      if (typeof MutationObserver !== 'undefined') {
+      if (isPlatformBrowser(this.platformId) && typeof MutationObserver !== 'undefined') {
         this.observer = new MutationObserver((mutations: MutationRecord[]) => {
           const validatedChanges = (it: MutationRecord): boolean => {
             return (

projects/libs/flex-layout/flex/layout-gap/layout-gap.ts

@@ -27,6 +27,12 @@
       "outputs": ["{options.reportsDirectory}"],
       "options": {
         "reportsDirectory": "../../../coverage/projects/libs/flex-layout"
+      },
+      "configurations": {
+        "ssr": {
+          "config": "projects/libs/flex-layout/vite.config.ssr.mts",
+          "reportsDirectory": "../../../coverage/ssr/projects/libs/flex-layout"
+        }
       }
     }
   }

projects/libs/flex-layout/project.json

@@ -0,0 +1,14 @@
+import '@analogjs/vitest-angular/setup-zone';
+import '@testing-library/jest-dom/vitest';
+import './_private-utils/testing/custom-matchers';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  ServerTestingModule,
+  platformServerTesting,
+} from '@angular/platform-server/testing';
+
+getTestBed().initTestEnvironment(
+  ServerTestingModule,
+  platformServerTesting(),
+);

projects/libs/flex-layout/test-setup.ssr.ts

@@ -13,7 +13,8 @@
     ]
   },
   "files": [
-    "test-setup.ts"
+    "test-setup.ts",
+    "test-setup.ssr.ts"
   ],
   "include": [
     "vite.config.ts",