fix(code-examples): move spec that uses SkyConfirmTestingController t…

…o another code example (#2227)

apps/code-examples/src/app/code-examples/modals/confirm/basic-with-controller/demo.component.spec.ts

@@ -0,0 +1,57 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  SkyConfirmTestingController,
+  SkyConfirmTestingModule,
+} from '@skyux/modals/testing';
+
+import { DemoComponent } from './demo.component';
+
+describe('Testing with SkyConfirmTestingController', () => {
+  async function setupTest(): Promise<{
+    confirmController: SkyConfirmTestingController;
+    fixture: ComponentFixture<DemoComponent>;
+  }> {
+    const confirmController = TestBed.inject(SkyConfirmTestingController);
+    const fixture = TestBed.createComponent(DemoComponent);
+
+    return { confirmController, fixture };
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [SkyConfirmTestingModule, DemoComponent],
+    });
+  });
+
+  it('should click "OK" on a confirmation dialog', async () => {
+    const { confirmController, fixture } = await setupTest();
+
+    fixture.componentInstance.launchConfirm();
+    fixture.detectChanges();
+
+    confirmController.expectOpen({
+      message: 'Are you sure?',
+    });
+
+    confirmController.ok();
+    confirmController.expectNone();
+
+    expect(fixture.componentInstance.selectedAction).toEqual('ok');
+  });
+
+  it('should cancel the confirmation dialog', async () => {
+    const { confirmController, fixture } = await setupTest();
+
+    fixture.componentInstance.launchConfirm();
+    fixture.detectChanges();
+
+    confirmController.expectOpen({
+      message: 'Are you sure?',
+    });
+
+    confirmController.cancel();
+    confirmController.expectNone();
+
+    expect(fixture.componentInstance.selectedAction).toEqual('cancel');
+  });
+});

apps/code-examples/src/app/code-examples/modals/confirm/basic-with-controller/demo.component.ts

@@ -0,0 +1,30 @@
+import { Component, inject } from '@angular/core';
+import { SkyConfirmService } from '@skyux/modals';
+
+@Component({
+  imports: [],
+  standalone: true,
+  template: `<button
+    aria-haspopup="dialog"
+    class="sky-btn sky-btn-default"
+    type="button"
+    (click)="launchConfirm()"
+  >
+    Open confirm
+  </button>`,
+})
+export class DemoComponent {
+  public selectedAction: string | undefined;
+
+  readonly #confirmSvc = inject(SkyConfirmService);
+
+  public launchConfirm(): void {
+    const dialog = this.#confirmSvc.open({
+      message: 'Are you sure?',
+    });
+
+    dialog.closed.subscribe((args) => {
+      this.selectedAction = args.action;
+    });
+  }
+}

apps/code-examples/src/app/code-examples/modals/confirm/demo.component.html → apps/code-examples/src/app/code-examples/modals/confirm/basic-with-harness/demo.component.html

@@ -39,6 +39,7 @@
     selectedAction
   }}."
 </p>
+
 <p *ngIf="selectedAction && !selectedText" class="displayed-text">
   You selected the "{{ selectedAction }}" action.
 </p>

apps/code-examples/src/app/code-examples/modals/confirm/demo.component.spec.ts → apps/code-examples/src/app/code-examples/modals/confirm/basic-with-harness/demo.component.spec.ts

@@ -1,11 +1,10 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { SkyConfirmHarness } from '@skyux/modals/testing';
 
 import { DemoComponent } from './demo.component';
 
-describe('Confirm demo', () => {
+describe('Testing with SkyConfirmHarness', () => {
   async function setupTest(confirmBtnClass: string): Promise<{
     confirmHarness: SkyConfirmHarness;
     fixture: ComponentFixture<DemoComponent>;
@@ -16,14 +15,23 @@ describe('Confirm demo', () => {
     openBtn.click();
 
     const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
-
     const confirmHarness = await rootLoader.getHarness(SkyConfirmHarness);
+
     return { confirmHarness, fixture };
   }
 
+  function expectDisplayedText(
+    fixture: ComponentFixture<DemoComponent>,
+    expectedText: string,
+  ): void {
+    expect(
+      fixture.nativeElement.querySelector('.displayed-text')?.innerText,
+    ).toEqual(expectedText);
+  }
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DemoComponent, RouterTestingModule],
+      imports: [DemoComponent],
     });
   });
 
@@ -32,10 +40,8 @@ describe('Confirm demo', () => {
 
     await confirmHarness.clickOkButton();
 
-    const displayedTextEl: HTMLElement =
-      fixture.nativeElement.querySelector('.displayed-text');
+    expectDisplayedText(fixture, 'You selected the "ok" action.');
 
-    expect(displayedTextEl.innerText).toEqual('You selected the "ok" action.');
     await expectAsync(confirmHarness.getMessageText()).toBeResolvedTo(
       'Cannot delete invoice because it has vendor, credit memo, or purchase order activity.',
     );
@@ -48,15 +54,15 @@ describe('Confirm demo', () => {
 
     await confirmHarness.clickCustomButton({ text: 'Finalize' });
 
-    const displayedTextEl: HTMLElement =
-      fixture.nativeElement.querySelector('.displayed-text');
-
-    expect(displayedTextEl.innerText).toEqual(
+    expectDisplayedText(
+      fixture,
       'You selected the "Finalize" button, which has an action of "save."',
     );
+
     await expectAsync(confirmHarness.getMessageText()).toBeResolvedTo(
       'Finalize report cards?',
     );
+
     await expectAsync(confirmHarness.getBodyText()).toBeResolvedTo(
       'Grades cannot be changed once the report cards are finalized.',
     );

apps/code-examples/src/app/code-examples/modals/confirm/demo.component.ts → apps/code-examples/src/app/code-examples/modals/confirm/basic-with-harness/demo.component.ts

@@ -8,10 +8,10 @@ import {
 } from '@skyux/modals';
 
 @Component({
-  standalone: true,
+  imports: [CommonModule],
   selector: 'app-demo',
+  standalone: true,
   templateUrl: './demo.component.html',
-  imports: [CommonModule],
 })
 export class DemoComponent {
   protected selectedAction: string | undefined;
@@ -23,7 +23,6 @@ export class DemoComponent {
     const dialog: SkyConfirmInstance = this.#confirmSvc.open({
       message:
         'Cannot delete invoice because it has vendor, credit memo, or purchase order activity.',
-      type: SkyConfirmType.OK,
     });
 
     dialog.closed.subscribe((result) => {
@@ -64,7 +63,7 @@ export class DemoComponent {
       { text: 'Keep working', action: 'cancel', styleType: 'link' },
     ];
 
-    const dialog: SkyConfirmInstance = this.#confirmSvc.open({
+    const dialog = this.#confirmSvc.open({
       message: 'Save your changes before leaving?',
       type: SkyConfirmType.Custom,
       buttons,
@@ -88,7 +87,7 @@ export class DemoComponent {
       { text: 'Cancel', action: 'cancel', styleType: 'link' },
     ];
 
-    const dialog: SkyConfirmInstance = this.#confirmSvc.open({
+    const dialog = this.#confirmSvc.open({
       message: 'Delete this account?',
       body: 'Deleting this account may affect processes that are currently running.',
       type: SkyConfirmType.Custom,

apps/code-examples/src/app/features/modals.module.ts

@@ -3,11 +3,18 @@ import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {
-    path: 'confirm',
+    path: 'confirm-with-controller',
     loadComponent: () =>
-      import('../code-examples/modals/confirm/demo.component').then(
-        (c) => c.DemoComponent,
-      ),
+      import(
+        '../code-examples/modals/confirm/basic-with-controller/demo.component'
+      ).then((c) => c.DemoComponent),
+  },
+  {
+    path: 'confirm-with-harness',
+    loadComponent: () =>
+      import(
+        '../code-examples/modals/confirm/basic-with-harness/demo.component'
+      ).then((c) => c.DemoComponent),
   },
   {
     path: 'modal',

apps/code-examples/src/app/home/home.component.html

@@ -524,7 +524,16 @@
   <li>
     Modals
     <ul>
-      <li><a routerLink="modals/confirm">Confirm</a></li>
+      <li>
+        <a routerLink="modals/confirm-with-controller"
+          >Confirm (tested with controller)</a
+        >
+      </li>
+      <li>
+        <a routerLink="modals/confirm-with-harness"
+          >Confirm (tested with harness)</a
+        >
+      </li>
       <li><a routerLink="modals/modal">Modal</a></li>
       <li><a routerLink="modals/inline-help">Modal (inline-help)</a></li>
       <li><a routerLink="modals/modal-with-error">Modal with form error</a></li>