test(palette-service): correctly mock palette service for tests

Author: pawcoding

src/app/home/home.component.spec.ts

@@ -2,7 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { AnalyticsService, AnalyticsServiceMock } from '../shared/data-access/analytics.service';
-import { PaletteService, PaletteServiceMock } from '../shared/data-access/palette.service';
+import { PaletteService } from '../shared/data-access/palette.service';
+import { PaletteServiceMock } from '../shared/data-access/palette.service-mock';
 import { HomeService, HomeServiceMock } from './data-access/home.service';
 import HomeComponent from './home.component';
 

src/app/list/list.component.spec.ts

@@ -3,7 +3,8 @@ import { ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { DialogService, DialogServiceMock } from '../shared/data-access/dialog.service';
 import { ListService, ListServiceMock } from '../shared/data-access/list.service';
-import { PaletteService, PaletteServiceMock } from '../shared/data-access/palette.service';
+import { PaletteService } from '../shared/data-access/palette.service';
+import { PaletteServiceMock } from '../shared/data-access/palette.service-mock';
 import ListComponent from './list.component';
 
 describe('ListComponent', () => {

src/app/shared/data-access/confetti.service.spec.ts

@@ -1,6 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 import { ConfettiService } from './confetti.service';
-import { PaletteService, PaletteServiceMock } from './palette.service';
+import { PaletteService } from './palette.service';
+import { PaletteServiceMock } from './palette.service-mock';
 
 describe('ConfettiService', () => {
   let service: ConfettiService;

src/app/shared/data-access/palette.service-mock.ts

@@ -0,0 +1,39 @@
+import { signal } from '@angular/core';
+import { PaletteScheme } from '../constants/palette-scheme';
+import { Tailwind, TailwindGrays, TailwindRainbow } from '../constants/tailwind-colors';
+import { Color } from '../model/color.model';
+import { Palette } from '../model/palette.model';
+import { Shade } from '../model/shade.model';
+
+/**
+ * The original service is located at ./palette.service.ts
+ * This mock in in this separate file to not include the Tailwind example palettes in the production bundle.
+ */
+
+export class PaletteServiceMock {
+  public readonly palette = signal<Palette | undefined>(
+    new Palette('Mock', [new Color([Shade.random()], 'MockColor')], 'test-id')
+  );
+  public readonly isGenerating = signal(false);
+  public loadPaletteFromLocalStorage(id: string, _onlyReturn: boolean): Palette | undefined {
+    switch (id) {
+      case 'test-id':
+        return this.palette();
+      case TailwindRainbow.id:
+        return TailwindRainbow;
+      case TailwindGrays.id:
+        return TailwindGrays;
+      case Tailwind.id:
+        return Tailwind;
+      default:
+        return undefined;
+    }
+  }
+  public savePaletteToLocalStorage(_upgrade: boolean): void {}
+  public duplicatePalette(_name?: string): string {
+    return 'test-id';
+  }
+  public async generatePalette(_hex: string, _scheme: PaletteScheme): Promise<string> {
+    return 'test-id';
+  }
+}

src/app/shared/data-access/palette.service.ts

@@ -564,14 +564,8 @@ export class PaletteService {
   }
 }
 
-export class PaletteServiceMock {
-  public palette = signal<Palette | undefined>(
-    new Palette('Mock', [new Color([Shade.random()], 'MockColor')], 'test-id')
-  );
-  public isGenerating = signal(false);
-  public loadPaletteFromLocalStorage(): void {}
-  public savePaletteToLocalStorage(): void {}
-  public generatePalette(_hex: string, _scheme: PaletteScheme): string {
-    return 'test-id';
-  }
-}
+/**
+ * The corresponding mock for this service is located in ./palette.service-mock.ts
+ * This is because the mock uses the Tailwind example palettes under the hood.
+ * We don't want to include these in the production bundle, but only in the testing environment keeping the bundle size smaller.
+ */

src/app/shared/data-access/pwa.service.spec.ts

@@ -7,7 +7,8 @@ import { SwUpdateMock } from '../utils/sw-update-mock';
 import { AnalyticsService, AnalyticsServiceMock } from './analytics.service';
 import { ConfettiService, ConfettiServiceMock } from './confetti.service';
 import { DialogService, DialogServiceMock } from './dialog.service';
-import { PaletteService, PaletteServiceMock } from './palette.service';
+import { PaletteService } from './palette.service';
+import { PaletteServiceMock } from './palette.service-mock';
 import { PwaService } from './pwa.service';
 import { ToastService, ToastServiceMock } from './toast.service';
 import { VersionService, VersionServiceMock } from './version.service';
@@ -106,7 +107,6 @@ describe('PwaService', () => {
 
     expect(dialogService.confirm).toHaveBeenCalledTimes(1);
     expect(paletteService.savePaletteToLocalStorage).toHaveBeenCalledTimes(1);
-    // @ts-expect-error Function has an optional parameter which does not get detected here
     expect(paletteService.savePaletteToLocalStorage).toHaveBeenCalledWith(true);
     expect(analyticsService.trackEvent).toHaveBeenCalledWith(
       TrackingEventCategory.PWA,

src/app/view/ui/import-color/import-color.component.spec.ts

@@ -2,7 +2,8 @@ import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { ListService, ListServiceMock } from '../../../shared/data-access/list.service';
-import { PaletteService, PaletteServiceMock } from '../../../shared/data-access/palette.service';
+import { PaletteService } from '../../../shared/data-access/palette.service';
+import { PaletteServiceMock } from '../../../shared/data-access/palette.service-mock';
 import { ImportColorComponent } from './import-color.component';
 
 describe('ImportColorComponent', () => {

src/app/view/ui/import-color/import-color.component.stories.ts

@@ -2,31 +2,17 @@ import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
 import { Meta, applicationConfig } from '@storybook/angular';
 import { Tailwind, TailwindGrays, TailwindRainbow } from '../../../shared/constants/tailwind-colors';
 import { ListService, ListServiceMock } from '../../../shared/data-access/list.service';
-import { PaletteService, PaletteServiceMock } from '../../../shared/data-access/palette.service';
-import { Palette } from '../../../shared/model';
+import { PaletteService } from '../../../shared/data-access/palette.service';
+import { PaletteServiceMock } from '../../../shared/data-access/palette.service-mock';
 import { createStory } from '../../../shared/utils/storybook';
 import { ImportColorComponent } from './import-color.component';
 
 const listService = new ListServiceMock();
+listService.remove('test-id');
 listService.add(TailwindRainbow);
 listService.add(TailwindGrays);
 listService.add(Tailwind);
 
-const paletteService = new PaletteServiceMock();
-// @ts-expect-error - Types of this mock are not correct
-paletteService.loadPaletteFromLocalStorage = (id: string): Palette | undefined => {
-  switch (id) {
-    case TailwindRainbow.id:
-      return TailwindRainbow;
-    case TailwindGrays.id:
-      return TailwindGrays;
-    case Tailwind.id:
-      return Tailwind;
-    default:
-      return undefined;
-  }
-};
-
 const meta: Meta<ImportColorComponent> = {
   title: 'View/Import Color',
   component: ImportColorComponent,
@@ -48,7 +34,7 @@ const meta: Meta<ImportColorComponent> = {
         },
         {
           provide: PaletteService,
-          useValue: paletteService
+          useClass: PaletteServiceMock
         }
       ]
     })

src/app/view/view.component.spec.ts

@@ -10,7 +10,8 @@ import { AnalyticsService, AnalyticsServiceMock } from '../shared/data-access/an
 import { ColorService, ColorServiceMock } from '../shared/data-access/color.service';
 import { DialogService, DialogServiceMock } from '../shared/data-access/dialog.service';
 import { ListService, ListServiceMock } from '../shared/data-access/list.service';
-import { PaletteService, PaletteServiceMock } from '../shared/data-access/palette.service';
+import { PaletteService } from '../shared/data-access/palette.service';
+import { PaletteServiceMock } from '../shared/data-access/palette.service-mock';
 import { PwaService, PwaServiceMock } from '../shared/data-access/pwa.service';
 import { ToastService, ToastServiceMock } from '../shared/data-access/toast.service';
 import { TrackingEventAction, TrackingEventCategory } from '../shared/enums/tracking-event';