fix(#2372): rename prefix GoA for FilterChip to goab

Author: vanessatran-ddi

libs/angular-components/src/lib/components/filter-chip/filter-chip.spec.ts

@@ -0,0 +1,82 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { GoabChipTheme, Spacing } from "@abgov/ui-components-common";
+import { By } from "@angular/platform-browser";
+import { fireEvent } from "@testing-library/dom";
+import { GoabFilterChip } from "./filter-chip";
+
+@Component({
+  template: `
+    <goab-filter-chip
+      [error]="error"
+      [iconTheme]="iconTheme"
+      [content]="content"
+      [testId]="testId"
+      [mt]="mt"
+      [mb]="mb"
+      [ml]="ml"
+      [mr]="mr"
+      (onClick)="onClick()"
+    >
+    </goab-filter-chip>
+  `,
+})
+class TestFilterChipComponent {
+  error?: boolean;
+  content?: string;
+  iconTheme?: GoabChipTheme;
+  testId?: string;
+  mt?: Spacing;
+  mb?: Spacing;
+  ml?: Spacing;
+  mr?: Spacing;
+
+  onClick() {
+    /* do nothing */
+  }
+}
+
+describe("GoabFilterChip", () => {
+  let fixture: ComponentFixture<TestFilterChipComponent>;
+  let component: TestFilterChipComponent;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GoabFilterChip],
+      declarations: [TestFilterChipComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestFilterChipComponent);
+    component = fixture.componentInstance;
+
+    component.error = true;
+    component.content = "some chip";
+    component.testId = "chip-test";
+    component.iconTheme = "filled";
+    component.mt = "s";
+    component.mr = "m";
+    component.mb = "l";
+    component.ml = "xl";
+    fixture.detectChanges();
+  });
+
+  it("should render properties", () => {
+    const chipElement = fixture.debugElement.query(By.css("goa-filter-chip")).nativeElement;
+    expect(chipElement.getAttribute("error")).toBe(`${component.error}`);
+    expect(chipElement.getAttribute("content")).toBe(component.content);
+    expect(chipElement.getAttribute("icontheme")).toBe(`${component.iconTheme}`);
+    expect(chipElement.getAttribute("testid")).toBe(component.testId);
+    expect(chipElement.getAttribute("mt")).toBe(component.mt);
+    expect(chipElement.getAttribute("mr")).toBe(component.mr);
+    expect(chipElement.getAttribute("mb")).toBe(component.mb);
+    expect(chipElement.getAttribute("ml")).toBe(component.ml);
+  });
+
+  it("should allow to handle delete event", async () => {
+    const onClick = jest.spyOn(component, "onClick");
+    const chipElement = fixture.debugElement.query(By.css("goa-filter-chip")).nativeElement;
+    fireEvent(chipElement, new CustomEvent("_click"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+});

libs/angular-components/src/lib/components/filter-chip/filter-chip.ts

@@ -0,0 +1,38 @@
+import { GoabChipTheme, Spacing } from "@abgov/ui-components-common";
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, Output, EventEmitter } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "goab-filter-chip",
+  template: `<goa-filter-chip
+    [attr.error]="error"
+    [attr.icontheme]="iconTheme"
+    [attr.content]="content"
+    [attr.testid]="testId"
+    [attr.mt]="mt"
+    [attr.mb]="mb"
+    [attr.ml]="ml"
+    [attr.mr]="mr"
+    (_click)="_onClick()"
+  >
+    <ng-content />
+  </goa-filter-chip>`,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class GoabFilterChip {
+  @Input() error?: boolean;
+  @Input() deletable?: boolean;
+  @Input() content?: string = "";
+  @Input() testId?: string;
+  @Input() iconTheme?: GoabChipTheme;
+  @Input() mt?: Spacing;
+  @Input() mb?: Spacing;
+  @Input() ml?: Spacing;
+  @Input() mr?: Spacing;
+
+  @Output() onClick = new EventEmitter();
+
+  _onClick() {
+    this.onClick.emit();
+  }
+}

libs/angular-components/src/lib/components/index.ts

@@ -20,7 +20,7 @@ export * from "./dropdown/dropdown";
 export * from "./dropdown-item/dropdown-item";
 export * from "./file-upload-card/file-upload-card";
 export * from "./file-upload-input/file-upload-input";
-export * from "./footer/footer";
+export * from "./filter-chip/filter-chip";
 export * from "./footer/footer";
 export * from "./footer-meta-section/footer-meta-section";
 export * from "./footer-meta-section/footer-meta-section";

libs/react-components/src/lib/filter-chip/filter-chip.spec.tsx

@@ -1,16 +1,16 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { GoAFilterChip } from "./filter-chip";
+import { GoabFilterChip } from "./filter-chip";
 import { describe, it, expect, vi } from "vitest";
 
 describe("GoA FilterChip", () => {
   it("should render", () => {
-    const { container } = render(<GoAFilterChip content="some filter chip" />);
+    const { container } = render(<GoabFilterChip content="some filter chip" />);
     expect(container.innerHTML).toContain("some filter chip");
   });
 
   it("should render with basic props", () => {
-    const { container } = render(<GoAFilterChip content="Some Badge" />);
+    const { container } = render(<GoabFilterChip content="Some Badge" />);
     expect(container.innerHTML).toContain("Some Badge");
     const el = container.querySelector("goa-filter-chip");
     expect(el).not.toBeNull();
@@ -19,7 +19,7 @@ describe("GoA FilterChip", () => {
 
   it("should bind all properties correctly", async () => {
     const { container } = render(
-      <GoAFilterChip
+      <GoabFilterChip
         content="some filter chip"
         mt="s"
         mr="m"
@@ -40,19 +40,19 @@ describe("GoA FilterChip", () => {
     expect(el?.getAttribute("ml")).toBe("xl");
     expect(el?.getAttribute("error")).toBe("true");
     expect(el?.getAttribute("icontheme")).toBe("filled");
-    expect(el?.getAttribute("data-testid")).toBe("test-chip");
+    expect(el?.getAttribute("testid")).toBe("test-chip");
   });
 
   it("should show the chip in the error state", () => {
-    const { container } = render(<GoAFilterChip content="Some Badge" error={true} />);
+    const { container } = render(<GoabFilterChip content="Some Badge" error={true} />);
     const el = container.querySelector("goa-filter-chip");
     expect(el?.getAttribute("error")).toBe("true");
   });
 
   it("should handle the click event", async () => {
     const onClick = vi.fn();
     const { container } = render(
-      <GoAFilterChip content="Some Badge" onClick={onClick} testId="chip" />,
+      <GoabFilterChip content="Some Badge" onClick={onClick} testId="chip" />,
     );
     const el = container.querySelector("goa-filter-chip");
 
@@ -61,15 +61,15 @@ describe("GoA FilterChip", () => {
   });
 
   it("should have an unfilled close icon by default", () => {
-    const { container } = render(<GoAFilterChip content="Test" />);
+    const { container } = render(<GoabFilterChip content="Test" />);
     const el = container.querySelector("goa-filter-chip");
     expect(el?.getAttribute("icontheme")).toBe("outline");
   });
 
   it("should not apply background fill on hover", async () => {
-    render(<GoAFilterChip content="Test" testId="chip" />);
-    const chip = await screen.findByTestId("chip");
-    fireEvent.mouseOver(chip);
+    const { container } = render(<GoabFilterChip content="Test" testId="chip" />);
+    const chip = container.querySelector("goa-filter-chip");
+    fireEvent.mouseOver(chip!);
     expect(chip).not.toHaveStyle("background-color: var(--goa-color-greyscale-200)");
   });
 });

libs/react-components/src/lib/filter-chip/filter-chip.tsx

@@ -6,6 +6,7 @@ interface WCProps extends Margins {
   icontheme: GoabFilterChipTheme;
   error: boolean;
   content: string;
+  testid?: string;
 }
 
 declare global {
@@ -17,15 +18,15 @@ declare global {
   }
 }
 
-export interface GoAFilterChipProps extends Margins {
+export interface GoabFilterChipProps extends Margins {
   onClick?: () => void;
   iconTheme?: GoabFilterChipTheme;
   error?: boolean;
   content: string;
   testId?: string;
 }
 
-export const GoAFilterChip = ({
+export const GoabFilterChip = ({
   iconTheme = "outline",
   error = false,
   content,
@@ -35,7 +36,7 @@ export const GoAFilterChip = ({
   mb,
   ml,
   testId,
-}: GoAFilterChipProps) => {
+}: GoabFilterChipProps) => {
   const el = useRef<HTMLElement>(null);
   useEffect(() => {
     if (!el.current) return;
@@ -59,9 +60,9 @@ export const GoAFilterChip = ({
       mr={mr}
       mb={mb}
       ml={ml}
-      data-testid={testId}
+      testid={testId}
     />
   );
 };
 
-export default GoAFilterChip;
+export default GoabFilterChip;