feat(frontend): preserve code color inversion

+ save color inversion of code in local storage
+ related unit tests

Author: Quenary

frontend/src/app/app.consts.ts

@@ -22,6 +22,10 @@ export enum ELocalStorageKey {
    * Last filters model
    */
   CARD_FILTERS = 'cardholder-card-filters',
+  /**
+   * Wether to invert code colors by default
+   */
+  CODE_COLOR_INVERSION = 'cardholder-code-color-inversion',
 }
 /**
  * Enum of useful regexp

frontend/src/app/shared/components/card-code-viewer/card-code-viewer.component.spec.ts

@@ -1,7 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CardCodeViewerComponent } from './card-code-viewer.component';
-import { createMatDialogMock } from 'src/app/test';
-import { MatDialog } from '@angular/material/dialog';
+import {
+  CardCodeViewerComponent,
+  CardCodeViewerDialogComponent,
+  ICardCodeViewerData,
+} from './card-code-viewer.component';
+import {
+  createMatDialogMock,
+  createMatDialogRefMock,
+  TestTranslateModule,
+} from 'src/app/test';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { ELocalStorageKey } from 'src/app/app.consts';
 
 describe('CardCodeViewerComponent', () => {
   let fixture: ComponentFixture<CardCodeViewerComponent>;
@@ -14,7 +27,6 @@ describe('CardCodeViewerComponent', () => {
 
     await TestBed.configureTestingModule({
       providers: [{ provide: MatDialog, useValue: matDialogMock }],
-      imports: [CardCodeViewerComponent],
     }).compileComponents();
   });
 
@@ -74,3 +86,60 @@ describe('CardCodeViewerComponent', () => {
     expect(matDialogMock.open).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('CardCodeViewerDialogComponent', () => {
+  let fixture: ComponentFixture<CardCodeViewerDialogComponent>;
+  let component: CardCodeViewerDialogComponent;
+
+  let matDialogRefMock: ReturnType<typeof createMatDialogRefMock>;
+  let matDialogDataMock: ICardCodeViewerData;
+
+  beforeEach(async () => {
+    matDialogRefMock = createMatDialogRefMock();
+    matDialogDataMock = {
+      card: {
+        code: '0123456789012',
+        code_type: 'ean13',
+      },
+      scale: 3,
+      color: 'black',
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TestTranslateModule],
+      providers: [
+        { provide: MatDialogRef, useValue: matDialogRefMock },
+        { provide: MAT_DIALOG_DATA, useValue: matDialogDataMock },
+      ],
+    }).compileComponents();
+  });
+
+  it('should create', () => {
+    fixture = TestBed.createComponent(CardCodeViewerDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('should preserve color inversion in local storage', () => {
+    const lsGetSpy = spyOn(localStorage, 'getItemJson').and.callFake(
+      () => true as any,
+    );
+    const lsSetSpy = spyOn(localStorage, 'setItemJson').and.callFake(() => {});
+    fixture = TestBed.createComponent(CardCodeViewerDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    expect(lsGetSpy).toHaveBeenCalledTimes(1);
+    expect(component.invert()).toBeTrue();
+
+    component.toggleInvert();
+
+    expect(lsSetSpy).toHaveBeenCalledTimes(1);
+    expect(lsSetSpy).toHaveBeenCalledWith(
+      ELocalStorageKey.CODE_COLOR_INVERSION,
+      false,
+    );
+    expect(component.invert()).toBeFalse();
+  });
+});

frontend/src/app/shared/components/card-code-viewer/card-code-viewer.component.ts

@@ -8,6 +8,7 @@ import {
   OnChanges,
   OnInit,
   Output,
+  signal,
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
@@ -23,6 +24,7 @@ import {
 import { MatIcon } from '@angular/material/icon';
 import Bwip from '@bwip-js/browser';
 import { TranslateModule } from '@ngx-translate/core';
+import { ELocalStorageKey } from 'src/app/app.consts';
 import { ZxingToBwipMap } from 'src/app/entities/cards/cards-const';
 import { ICardBase } from 'src/app/entities/cards/cards-interface';
 
@@ -148,11 +150,11 @@ export class CardCodeViewerComponent
     <h2 mat-dialog-title>{{ card.name }}</h2>
     <mat-dialog-content
       class="mat-dialog-content"
-      [class.invert]="invert">
+      [class.invert]="invert()">
       <canvas
         class="canvas"
         #canvas
-        (click)="invert = !invert">
+        (click)="toggleInvert()">
       </canvas>
       @if (card.description) {
         <pre class="desc" [innerHTML]="card.description"></pre>
@@ -161,7 +163,7 @@ export class CardCodeViewerComponent
     <mat-dialog-actions class="mat-dialog-actions">
       <button
         mat-button
-        (click)="invert = !invert">
+        (click)="toggleInvert()">
         <mat-icon>touch_app</mat-icon>
         {{ 'CARDS.VIEWER.INVERT' | translate }}
       </button>
@@ -204,14 +206,22 @@ export class CardCodeViewerDialogComponent extends CardCodeViewerComponent {
   private readonly matDialogRef = inject(MatDialogRef);
   private readonly data: ICardCodeViewerData = inject(MAT_DIALOG_DATA);
 
-  public invert: boolean = false;
+  public readonly invert = signal<boolean>(
+    localStorage.getItemJson(ELocalStorageKey.CODE_COLOR_INVERSION),
+  );
 
   constructor() {
     super();
     Object.assign(this, this.data);
   }
 
-  public close() {
+  public toggleInvert(): void {
+    const invert = !this.invert();
+    this.invert.set(invert);
+    localStorage.setItemJson(ELocalStorageKey.CODE_COLOR_INVERSION, invert);
+  }
+
+  public close(): void {
     this.matDialogRef.close();
   }
 }