refactor(MatchChoiceItem): Convert to standalone (2nd try)

src/assets/wise5/components/match/delete-choice-button/delete-choice-button.component.spec.ts

@@ -1,28 +1,32 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DeleteChoiceButtonComponent } from './delete-choice-button.component';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
 
 let component: DeleteChoiceButtonComponent;
 let fixture: ComponentFixture<DeleteChoiceButtonComponent>;
-
+let loader: HarnessLoader;
 describe('DeleteChoiceButtonComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DeleteChoiceButtonComponent],
-      providers: []
+      imports: [DeleteChoiceButtonComponent]
     });
     fixture = TestBed.createComponent(DeleteChoiceButtonComponent);
     component = fixture.componentInstance;
     component.buckets = [{ items: [{ id: 1 }, { id: 2 }] }, { items: [{ id: 3 }] }];
     component.item = { id: 2 };
+    loader = TestbedHarnessEnvironment.loader(fixture);
   });
   deleteChoice();
 });
 
 function deleteChoice() {
-  describe('deleteChoice', () => {
-    it('should delete a choice', () => {
+  describe('clicking on the button', () => {
+    it('should delete a choice', async () => {
+      expect(component.buckets[0].items.length).toEqual(2);
       spyOn(window, 'confirm').and.returnValue(true);
-      component.deleteChoice();
+      await (await loader.getHarness(MatButtonHarness)).click();
       expect(component.buckets[0].items.length).toEqual(1);
     });
   });

src/assets/wise5/components/match/delete-choice-button/delete-choice-button.component.ts

@@ -28,14 +28,11 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 })
 export class DeleteChoiceButtonComponent {
   @Input() buckets: any;
-
   @Input() isDisabled: boolean;
-
   @Input() item: any;
-
   @Output() onItemDeleted = new EventEmitter<void>();
 
-  deleteChoice(): void {
+  protected deleteChoice(): void {
     if (confirm($localize`Are you sure you want to delete this item?`)) {
       this.buckets.forEach((bucket) => {
         let i = 0;

src/assets/wise5/components/match/match-choice-item/match-choice-item.component.html

@@ -1,29 +1,37 @@
 <mat-card appearance="outlined" class="match-item">
-  <div fxLayout="row" fxLayoutGap="4px" fxLayoutAlign="start center">
-    <mat-icon *ngIf="!isDisabled" class="text-disabled">drag_indicator</mat-icon>
+  <div fxLayout="row" fxLayoutGap="4px">
+    @if (!isDisabled) {
+      <mat-icon class="text-disabled">drag_indicator</mat-icon>
+    }
     <div class="item-content" [innerHTML]="item.value"></div>
-    <span fxFlex *ngIf="item.studentCreated"></span>
-    <delete-choice-button
-      *ngIf="item.studentCreated"
-      [buckets]="buckets"
-      [isDisabled]="isDisabled"
-      [item]="item"
-      (onItemDeleted)="onStudentDataChanged.next()"
-    />
-  </div>
-  <div
-    *ngIf="item.feedback"
-    class="feedback mat-small text-secondary-bg"
-    fxLayout="row"
-    fxLayoutAlign="start center"
-    fxLayoutGap="4px"
-    [ngClass]="{
-      'success-bg': item.status === 'correct',
-      'info-bg': item.status === 'warn',
-      'warn-bg': item.status === 'incorrect'
-    }"
-  >
-    <match-status-icon *ngIf="item.status" [status]="item.status" />
-    <div [innerHTML]="item.feedback"></div>
+    @if (item.studentCreated) {
+      <span fxFlex></span>
+    }
+    @if (item.studentCreated) {
+      <delete-choice-button
+        [buckets]="buckets"
+        [isDisabled]="isDisabled"
+        [item]="item"
+        (onItemDeleted)="onStudentDataChanged.next()"
+      />
+    }
   </div>
+  @if (item.feedback) {
+    <div
+      class="feedback mat-small text-secondary-bg"
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      fxLayoutGap="4px"
+      [ngClass]="{
+        'success-bg': item.status === 'correct',
+        'info-bg': item.status === 'warn',
+        'warn-bg': item.status === 'incorrect'
+      }"
+    >
+      @if (item.status) {
+        <match-status-icon [status]="item.status" />
+      }
+      <div [innerHTML]="item.feedback"></div>
+    </div>
+  }
 </mat-card>

src/assets/wise5/components/match/match-choice-item/match-choice-item.component.ts

@@ -1,24 +1,30 @@
 import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { DeleteChoiceButtonComponent } from '../delete-choice-button/delete-choice-button.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatchStatusIconComponent } from '../match-status-icon/match-status-icon.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { CommonModule } from '@angular/common';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    CommonModule,
+    DeleteChoiceButtonComponent,
+    FlexLayoutModule,
+    MatCardModule,
+    MatchStatusIconComponent,
+    MatIconModule
+  ],
   selector: 'match-choice-item',
-  templateUrl: 'match-choice-item.component.html',
-  styleUrls: ['match-choice-item.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  standalone: true,
+  styleUrl: 'match-choice-item.component.scss',
+  templateUrl: 'match-choice-item.component.html'
 })
-export class MatchChoiceItem {
-  @Input()
-  buckets: any;
-
-  @Input()
-  hasCorrectAnswer: boolean;
-
-  @Input()
-  isDisabled: boolean;
-
-  @Input()
-  item: any;
-
-  @Output()
-  onStudentDataChanged = new EventEmitter();
+export class MatchChoiceItemComponent {
+  @Input() buckets: any;
+  @Input() hasCorrectAnswer: boolean;
+  @Input() isDisabled: boolean;
+  @Input() item: any;
+  @Output() onStudentDataChanged = new EventEmitter();
 }

src/assets/wise5/components/match/match-common.module.ts

@@ -5,25 +5,23 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatchChoiceItemComponent } from './match-choice-item/match-choice-item.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { DeleteChoiceButtonComponent } from './delete-choice-button/delete-choice-button.component';
-import { MatchChoiceItem } from './match-choice-item/match-choice-item.component';
 import { MatchStatusIconComponent } from './match-status-icon/match-status-icon.component';
 import { MatchFeedbackSectionComponent } from './match-student/match-feedback-section/match-feedback-section.component';
 
 @NgModule({
-  declarations: [MatchChoiceItem],
   imports: [
     CommonModule,
-    DeleteChoiceButtonComponent,
     DragDropModule,
     FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
+    MatchChoiceItemComponent,
     MatchFeedbackSectionComponent,
     MatchStatusIconComponent,
     MatDialogModule,
@@ -35,13 +33,12 @@ import { MatchFeedbackSectionComponent } from './match-student/match-feedback-se
   ],
   exports: [
     CommonModule,
-    DeleteChoiceButtonComponent,
     DragDropModule,
     FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatDialogModule,
-    MatchChoiceItem,
+    MatchChoiceItemComponent,
     MatchFeedbackSectionComponent,
     MatchStatusIconComponent,
     MatFormFieldModule,

src/assets/wise5/components/match/match-show-work/match-show-work.component.html

@@ -29,7 +29,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="sourceBucket.value"></h3>
               [item]="item"
               [hasCorrectAnswer]="hasCorrectAnswer"
               [isDisabled]="true"
-            ></match-choice-item>
+            />
           </li>
         </ul>
       </div>
@@ -68,7 +68,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
                 [item]="item"
                 [hasCorrectAnswer]="hasCorrectAnswer"
                 [isDisabled]="true"
-              ></match-choice-item>
+              />
             </li>
           </ul>
         </div>

src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.html

@@ -40,7 +40,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="buckets[0].value"></h3>
             [hasCorrectAnswer]="hasCorrectAnswer"
             [isDisabled]="isDisabled"
             (onStudentDataChanged)="studentDataChanged()"
-          ></match-choice-item>
+          />
         </li>
       </ul>
     </div>
@@ -91,7 +91,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
               [hasCorrectAnswer]="hasCorrectAnswer"
               [isDisabled]="isDisabled"
               (onStudentDataChanged)="studentDataChanged()"
-            ></match-choice-item>
+            />
           </li>
         </ul>
       </div>

src/messages.xlf

@@ -19228,7 +19228,7 @@ Category Name: <x id="PH_1" equiv-text="categoryName"/></source>
         <source>Are you sure you want to delete this item?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/delete-choice-button/delete-choice-button.component.ts</context>
-          <context context-type="linenumber">39</context>
+          <context context-type="linenumber">36</context>
         </context-group>
       </trans-unit>
       <trans-unit id="43e2291ad2f3e8419aeefcc82006a294d86e3445" datatype="html">