fix sonarlint issues

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:4200",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

.vscode/settings.json

@@ -8,5 +8,6 @@
   "sonarlint.connectedMode.project": {
     "connectionId": "plageoj",
     "projectKey": "plageoj_fukagawa-coffee"
-  }
+  },
+  "simplecov-vscode.enabled": false
 }

package.json

@@ -49,6 +49,7 @@
     "eslint-config-prettier": "^9.1.0",
     "inquirer-autocomplete-prompt": "^3.0.1",
     "jasmine-core": "~5.4.0",
+    "jasmine-marbles": "^0.9.2",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",

src/app/app.component.ts

@@ -10,29 +10,32 @@ import { MatIcon } from '@angular/material/icon';
 import { MatToolbar } from '@angular/material/toolbar';
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
-    standalone: true,
-    imports: [
-        MatToolbar,
-        MatIcon,
-        NgIf,
-        MatIconButton,
-        MatSidenavContainer,
-        MatSidenav,
-        MatNavList,
-        MatListItem,
-        RouterLink,
-        MatSidenavContent,
-        RouterOutlet,
-    ],
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    MatToolbar,
+    MatIcon,
+    NgIf,
+    MatIconButton,
+    MatSidenavContainer,
+    MatSidenav,
+    MatNavList,
+    MatListItem,
+    RouterLink,
+    MatSidenavContent,
+    RouterOutlet,
+  ],
 })
 export class AppComponent {
   user: User | null = null;
   siteName = environment.siteName;
 
-  constructor(private auth: Auth, private router: Router) {
+  constructor(
+    private readonly auth: Auth,
+    private readonly router: Router,
+  ) {
     onAuthStateChanged(this.auth, (user) => {
       this.user = user;
     });

src/app/components/item-selector/item-selector.component.ts

@@ -1,33 +1,25 @@
+import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common';
 import { Component, EventEmitter, Output } from '@angular/core';
+import { MatGridList, MatGridTile } from '@angular/material/grid-list';
+import { MatIcon } from '@angular/material/icon';
 import { Observable } from 'rxjs';
 import { ItemService } from 'src/app/services/item.service';
 import { Item } from 'src/models/item.model';
-import { MatIcon } from '@angular/material/icon';
-import { MatGridList, MatGridTile } from '@angular/material/grid-list';
-import { NgIf, NgFor, NgClass, AsyncPipe } from '@angular/common';
 
 @Component({
-    selector: 'app-item-selector',
-    templateUrl: './item-selector.component.html',
-    styleUrls: ['./item-selector.component.scss'],
-    standalone: true,
-    imports: [
-        NgIf,
-        MatGridList,
-        NgFor,
-        MatGridTile,
-        NgClass,
-        MatIcon,
-        AsyncPipe,
-    ],
+  selector: 'app-item-selector',
+  templateUrl: './item-selector.component.html',
+  styleUrls: ['./item-selector.component.scss'],
+  standalone: true,
+  imports: [NgIf, MatGridList, NgFor, MatGridTile, NgClass, MatIcon, AsyncPipe],
 })
 export class ItemSelectorComponent {
   columns = Math.floor(window.innerWidth / 170).toString();
   items: Observable<Item[]>;
 
   @Output() choose = new EventEmitter<Item>();
 
-  constructor(private is: ItemService) {
+  constructor(private readonly is: ItemService) {
     this.items = this.is.list();
   }
 

src/app/customer/add-customer/add-customer.component.ts

@@ -35,7 +35,7 @@ import { CustomerDialogData } from 'src/models/customer.model';
 export class AddCustomerComponent {
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: CustomerDialogData,
-    private cs: CustomerService,
+    private readonly cs: CustomerService,
   ) {
     if (typeof data.customer.id === 'undefined') {
       data.customer = {

src/app/customer/associate-item/associate-item.component.ts

@@ -1,29 +1,35 @@
+import { CdkScrollable } from '@angular/cdk/scrolling';
 import { Component } from '@angular/core';
-import { MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
-import { Item } from 'src/models/item.model';
-import { MatIcon } from '@angular/material/icon';
 import { MatButton } from '@angular/material/button';
+import {
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { Item } from 'src/models/item.model';
 import { ItemSelectorComponent } from '../../components/item-selector/item-selector.component';
-import { CdkScrollable } from '@angular/cdk/scrolling';
 
 @Component({
-    selector: 'app-associate-item',
-    templateUrl: './associate-item.component.html',
-    styleUrls: ['./associate-item.component.scss'],
-    standalone: true,
-    imports: [
-        MatDialogTitle,
-        CdkScrollable,
-        MatDialogContent,
-        ItemSelectorComponent,
-        MatDialogActions,
-        MatButton,
-        MatDialogClose,
-        MatIcon,
-    ],
+  selector: 'app-associate-item',
+  templateUrl: './associate-item.component.html',
+  styleUrls: ['./associate-item.component.scss'],
+  standalone: true,
+  imports: [
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    ItemSelectorComponent,
+    MatDialogActions,
+    MatButton,
+    MatDialogClose,
+    MatIcon,
+  ],
 })
 export class AssociateItemComponent {
-  constructor(private ref: MatDialogRef<AssociateItemComponent>) {}
+  constructor(private readonly ref: MatDialogRef<AssociateItemComponent>) {}
 
   associateItem(item: Item) {
     this.ref.close(item);

src/app/customer/customer-detail/customer-detail.component.spec.ts

@@ -1,32 +1,163 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CustomerDetailComponent } from './customer-detail.component';
-import { FirebaseTestingModule } from 'src/app/firebase-testing.module';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, convertToParamMap } from '@angular/router';
+import { cold } from 'jasmine-marbles';
+import { FirebaseTestingModule } from 'src/app/firebase-testing.module';
+import { CustomerService } from 'src/app/services/customer.service';
+import { ItemService } from 'src/app/services/item.service';
+import { Customer } from 'src/models/customer.model';
+import { Item } from 'src/models/item.model';
+import { CustomerDetailComponent } from './customer-detail.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 describe('CustomerDetailComponent', () => {
   let component: CustomerDetailComponent;
   let fixture: ComponentFixture<CustomerDetailComponent>;
+  let loader: HarnessLoader;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FirebaseTestingModule, CustomerDetailComponent],
+      imports: [
+        FirebaseTestingModule,
+        CustomerDetailComponent,
+        NoopAnimationsModule,
+      ],
       providers: [
         {
           provide: ActivatedRoute,
-          useValue: { snapshot: { paramMap: convertToParamMap({}) } },
+          useValue: {
+            snapshot: {
+              paramMap: convertToParamMap({
+                id: 'test-id',
+              }),
+            },
+          },
         },
       ],
     }).compileComponents();
+
+    const customerService = TestBed.inject(CustomerService);
+    spyOn(customerService, 'load').and.returnValue(
+      cold('c|', {
+        c: {
+          id: 'test-id',
+          name: 'Test Customer',
+          address: '123 Main Street',
+          items: {
+            test: true,
+          },
+        } as Customer,
+      }),
+    );
+
+    const itemService = TestBed.inject(ItemService);
+    spyOn(itemService, 'list').and.returnValue(
+      cold('i|', {
+        i: [
+          {
+            id: 'test',
+            name: 'Test Item',
+          } as Item,
+        ],
+      }),
+    );
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CustomerDetailComponent);
     component = fixture.componentInstance;
+    loader = TestbedHarnessEnvironment.loader(fixture);
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('associate item', async () => {
+    const dialogSpy = (
+      spyOn(TestBed.inject(MatDialog), 'open') as jasmine.Spy
+    ).and.returnValue({
+      afterClosed: () =>
+        of({
+          id: 'test',
+          name: 'Test Item',
+        }),
+    });
+    const button = await loader.getHarness(
+      MatButtonHarness.with({ text: /品目を追加する/ }),
+    );
+    await button.click();
+
+    expect(dialogSpy).toHaveBeenCalled();
+  });
+
+  it('edit customer', async () => {
+    const dialogSpy = spyOn(
+      TestBed.inject(MatDialog),
+      'open',
+    ).and.callThrough();
+    const button = await loader.getHarness(
+      MatButtonHarness.with({ text: /編集/ }),
+    );
+    await button.click();
+
+    expect(dialogSpy).not.toHaveBeenCalled();
+
+    component.customer = {
+      id: 'test-id',
+      name: 'Test Customer',
+      address: '123 Main Street',
+      items: {
+        test: true,
+      },
+    };
+
+    fixture.detectChanges();
+    await button.click();
+    expect(dialogSpy).toHaveBeenCalled();
+  });
+
+  it('delete customer', async () => {
+    const dialogSpy = (
+      spyOn(TestBed.inject(MatSnackBar), 'open') as jasmine.Spy
+    ).and.returnValue({
+      afterDismissed: () => of({ dismissedByAction: false }),
+    });
+    const button = await loader.getHarness(
+      MatButtonHarness.with({ text: /削除/ }),
+    );
+    await button.click();
+    expect(dialogSpy).not.toHaveBeenCalled();
+    component.customer = {
+      id: 'test-id',
+      name: 'Test Customer',
+      address: '123 Main Street',
+      items: {
+        test: true,
+      },
+    };
+    fixture.detectChanges();
+    await button.click();
+    expect(dialogSpy).toHaveBeenCalled();
+  });
+
+  it('delete item', () => {
+    component.customer = {
+      id: 'test-id',
+      name: 'Test Customer',
+      address: '123 Main Street',
+      items: {
+        test: true,
+      },
+    };
+    component.deleteItem('test');
+    expect(component.customer?.items).toEqual({});
+  });
 });