Add specs for remaining experimental components

src/ui-kit/experimental/actions-list/actions-list.spec.ts

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { SimpleChanges } from "@angular/core";
+import { SamActionsListComponent, ToolbarItem } from "./actions-list.component";
+import { SamActionDropdownModule } from "../../components/actions/actions-dropdown";
+
+describe("The Sam Actions List component", () => {
+  let component: SamActionsListComponent;
+  let fixture: ComponentFixture<SamActionsListComponent>;
+
+  const contentModel: ToolbarItem[] = [
+    { label: "Download", icon: "fa-download" as const },
+    { label: "Share", icon: "fa-share-alt" as const },
+    { label: "Filter", icon: "fa-filter" as const, disabled: true },
+    {
+      label: "More Item",
+      icon: "fa-chevron-circle-left" as const,
+      showMore: true,
+    },
+  ];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SamActionsListComponent],
+      imports: [SamActionDropdownModule],
+    });
+    fixture = TestBed.createComponent(SamActionsListComponent);
+    component = fixture.componentInstance;
+  });
+
+  it("should render a button for each non-showMore content item", () => {
+    component.contentModel = contentModel;
+    fixture.detectChanges();
+    const buttons = fixture.debugElement.queryAll(By.css("button"));
+    expect(buttons.length).toBe(3);
+  });
+
+  it("should emit action when a non-disabled item is clicked", () => {
+    component.contentModel = contentModel;
+    fixture.detectChanges();
+    const emitted: ToolbarItem[] = [];
+    component.action.subscribe((item: ToolbarItem) => emitted.push(item));
+    component.actionClick(contentModel[0]);
+    expect(emitted).toEqual([contentModel[0]]);
+  });
+
+  it("should not emit action when a disabled item is clicked", () => {
+    component.contentModel = contentModel;
+    fixture.detectChanges();
+    const emitted: ToolbarItem[] = [];
+    component.action.subscribe((item: ToolbarItem) => emitted.push(item));
+    component.actionClick(contentModel[2]);
+    expect(emitted.length).toBe(0);
+  });
+
+  it("should collect showMore items into showMoreActions on ngOnChanges", () => {
+    component.contentModel = contentModel;
+    component.ngOnChanges({ contentModel: true } as unknown as SimpleChanges);
+    expect(component.showMoreActions.length).toBe(1);
+    expect(component.showMoreActions[0]).toEqual({
+      name: "More Item",
+      label: "More Item",
+      icon: "fa fa-chevron-circle-left",
+    });
+  });
+
+  it("should trigger actionClick for the matching item when the dropdown emits", () => {
+    component.contentModel = contentModel;
+    component.ngOnChanges({ contentModel: true } as unknown as SimpleChanges);
+    const emitted: ToolbarItem[] = [];
+    component.action.subscribe((item: ToolbarItem) => emitted.push(item));
+    component.dropdownClick({ label: "More Item" });
+    expect(emitted).toEqual([contentModel[3]]);
+  });
+
+  it("should not emit anything when the dropdown emits a non-matching item", () => {
+    component.contentModel = contentModel;
+    component.ngOnChanges({ contentModel: true } as unknown as SimpleChanges);
+    const emitted: ToolbarItem[] = [];
+    component.action.subscribe((item: ToolbarItem) => emitted.push(item));
+    component.dropdownClick({ label: "Unknown" });
+    expect(emitted.length).toBe(0);
+  });
+});

src/ui-kit/experimental/alert/alert.spec.ts

@@ -1,59 +1,53 @@
-// import { TestBed } from '@angular/core/testing';
-// import { RouterTestingModule } from '@angular/router/testing';
-// import { By } from '@angular/platform-browser';
-// import { SimpleChanges } from '@angular/core';
-// import { SamIconsModule } from '../icon/icon.module';
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { SamAlertNextComponent } from "./alert.component";
+import { SamIconsModule } from "../icon/icon.module";
 
-// // Load the implementations that should be tested
-// import { SamAlertNextComponent } from './alert.component';
+describe("The Sam Alert component", () => {
+  let component: SamAlertNextComponent;
+  let fixture: ComponentFixture<SamAlertNextComponent>;
 
-// const defaultConfig = {
-//   description: 'i-am-a-description',
-//   title: 'i-am-a-title',
-//   type: 'success',
-// };
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SamAlertNextComponent],
+      imports: [SamIconsModule],
+    });
+    fixture = TestBed.createComponent(SamAlertNextComponent);
+    component = fixture.componentInstance;
+  });
 
-// describe.skip('The Sam Alert component', () => {
-//   describe('isolated tests', () => {
-//     let component: SamAlertNextComponent;
-//     beforeEach(() => {
-//       component = new SamAlertNextComponent();
-//     });
-//     it('should check if type is defined', () => {
-//       component.type = 'notAValidType';
-//       expect(component.typeNotDefined()).toBe(true);
-//       component.type = 'success';
-//       expect(component.typeNotDefined()).toBe(false);
-//       component.ngOnInit();
-//       expect(component.selectedType).toBe('sam-alert-success');
-//     });
-//   });
-//   describe('rendered tests', () => {
-//     let component: SamAlertNextComponent;
-//     let fixture: any;
+  it("should default to the success type when no type is set", () => {
+    component.type = undefined;
+    fixture.detectChanges();
+    expect(component.selectedType).toBe("sam-alert-success");
+    expect(component.selectedIcon).toBe(component.selectedIconTypes.success);
+  });
 
-//     beforeEach(() => {
-//       TestBed.configureTestingModule({
-//         declarations: [SamAlertNextComponent],
-//         imports: [RouterTestingModule, SamIconsModule],
-//       });
+  it("should apply the matching class and icon for a known type", () => {
+    component.type = "error";
+    fixture.detectChanges();
+    expect(component.selectedType).toBe("sam-alert-error");
+    expect(component.selectedIcon).toBe(component.selectedIconTypes.error);
+    const wrapper = fixture.debugElement.query(By.css(".sam-alert-error"));
+    expect(wrapper).not.toBeNull();
+  });
 
-//       fixture = TestBed.createComponent(SamAlertNextComponent);
-//       component = fixture.componentInstance;
-//       component.type = defaultConfig.type;
-//       fixture.detectChanges();
+  it("should keep the default success type when given an unknown type", () => {
+    component.type = "notAValidType";
+    fixture.detectChanges();
+    expect(component.typeNotDefined()).toBe(true);
+    expect(component.selectedType).toBe("sam-alert-success");
+  });
 
-//     });
-//     it('type check', () => {
-//       fixture.detectChanges();
-//       fixture.whenStable().then(() => {
-//         expect(
-//           fixture.debugElement.query(
-//             By.css('.sam-alert')
-//           ).nativeElement.className
-//         )
-//         .toContain('sam-alert-success');
-//       });
-//     });
-//   });
-// });
+  it("should treat an empty string type as not defined", () => {
+    component.type = "";
+    expect(component.typeNotDefined()).toBe(true);
+  });
+
+  it("should render the screen-reader text for the current type", () => {
+    component.type = "warning";
+    fixture.detectChanges();
+    const srText = fixture.debugElement.query(By.css(".sr-only"));
+    expect(srText.nativeElement.textContent.trim()).toBe("warning alert");
+  });
+});

src/ui-kit/experimental/box/box.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { SamBoxComponent } from "./box.component";
+
+describe("The Sam Box component", () => {
+  let component: SamBoxComponent;
+  let fixture: ComponentFixture<SamBoxComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SamBoxComponent],
+    });
+    fixture = TestBed.createComponent(SamBoxComponent);
+    component = fixture.componentInstance;
+  });
+
+  it("should apply the base sam box class with no inputs set", () => {
+    fixture.detectChanges();
+    expect(component.css_classes).toBe("sam box");
+  });
+
+  it("should append the type and padded classes when both inputs are set", () => {
+    component.type = "success";
+    component.padded = "large";
+    fixture.detectChanges();
+    expect(component.css_classes).toBe("sam box success large padded");
+  });
+});

src/ui-kit/experimental/button-next/button.spec.ts

@@ -1,13 +1,11 @@
-import { TestBed, waitForAsync } from "@angular/core/testing";
-
-import { By } from "@angular/platform-browser";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 // Load the implementations that should be tested
 import { SamButtonNextComponent } from "./button.component";
 
 describe("The Sam Button Next component", () => {
   let component: SamButtonNextComponent;
-  let fixture: any;
+  let fixture: ComponentFixture<SamButtonNextComponent>;
 
   const primaryBtnConfig = {
     buttonType: "primary",
@@ -70,4 +68,53 @@ describe("The Sam Button Next component", () => {
     expect(component.btnClass).toContain("secondary");
     expect(component.isDisabled).toBe(false);
   });
+
+  it("should append a size class when size matches a known size key", function () {
+    component.action = "primary";
+    component.size = "small";
+    fixture.detectChanges();
+    expect(component.btnClass).toBe("primary small");
+  });
+
+  it("should append the inverted class when theme is dark", function () {
+    component.action = "primary";
+    component.theme = "dark";
+    fixture.detectChanges();
+    expect(component.btnClass).toBe("primary inverted");
+  });
+
+  it("should append the disabled class when isDisabled is true", function () {
+    component.action = "primary";
+    component.isDisabled = true;
+    fixture.detectChanges();
+    expect(component.btnClass).toBe("primary disabled");
+  });
+
+  it("should emit onClick when clicked and not disabled", function () {
+    component.action = "primary";
+    fixture.detectChanges();
+    const emitted: Event[] = [];
+    component.onClick.subscribe((event: Event) => emitted.push(event));
+    const clickEvent = new Event("click");
+    component.click(clickEvent);
+    expect(emitted).toEqual([clickEvent]);
+  });
+
+  it("should not emit onClick when clicked while disabled", function () {
+    component.action = "primary";
+    component.isDisabled = true;
+    fixture.detectChanges();
+    const emitted: Event[] = [];
+    component.onClick.subscribe((event: Event) => emitted.push(event));
+    component.click(new Event("click"));
+    expect(emitted.length).toBe(0);
+  });
+
+  it("should render a submit-type button when action is submit", function () {
+    component.action = "submit";
+    component.id = "submitBtn";
+    fixture.detectChanges();
+    const button = fixture.nativeElement.querySelector("button");
+    expect(button.getAttribute("type")).toBe("submit");
+  });
 });

src/ui-kit/experimental/container/container.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { SamContainerComponent } from "./container.component";
+
+describe("The Sam Container component", () => {
+  let component: SamContainerComponent;
+  let fixture: ComponentFixture<SamContainerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SamContainerComponent],
+    });
+    fixture = TestBed.createComponent(SamContainerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it("should apply the base sam container class with no inputs set", () => {
+    fixture.detectChanges();
+    expect(component.css_classes).toBe("sam container");
+  });
+
+  it("should append the size and weight classes when both inputs are set", () => {
+    component.size = "small";
+    component.weight = "bold";
+    fixture.detectChanges();
+    expect(component.css_classes).toBe("sam container small bold");
+  });
+});

src/ui-kit/experimental/date-range-v2/datepicker/picker.component.ts

@@ -129,7 +129,7 @@ export class DatepickerComponent
   _focusableString: string =
     'a[href], area, button, select, textarea, *[tabindex], \
   input:not([type="hidden"])';
-  @ViewChild("calendarpopup", { static: true }) calendarpopup: ElementRef;
+  @ViewChild("calendarpopup") calendarpopup: ElementRef;
   @ViewChild("calendarButton", { static: true }) calendarButton: ElementRef;
 
   static dateValidation() {