@windstream/react-shared-components 0.2.80 → 0.2.81

package/dist/index.d.ts

@@ -67,11 +67,11 @@ type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
 
 declare const InputField: ForwardRefRenderFunction<HTMLInputElement, InputFieldProps>;
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    state?: "error" | "default" | "focus" | "active" | "hover" | "filled" | undefined;
-    size?: "medium" | "slim" | "large" | undefined;
+    state?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
+    size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "search" | "location_on" | undefined;
+    prefixIconName?: "location_on" | "search" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.80",
+  "version": "0.2.81",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/contentful/blocks/address-input-banner/index.test.tsx

@@ -14,6 +14,19 @@ describe("AddressInputBanner", () => {
     expect(screen.getByText("Check availability")).toBeInTheDocument();
   });
 
+  it("spreads title fieldProps onto the title element", () => {
+    render(
+      <AddressInputBanner
+        {...defaultProps}
+        fieldProps={{ title: { "data-contentful-field-id": "title" } }}
+      />
+    );
+    expect(screen.getByText("Check availability")).toHaveAttribute(
+      "data-contentful-field-id",
+      "title"
+    );
+  });
+
   it("returns null when isVisible is false", () => {
     const { container } = render(
       <AddressInputBanner {...defaultProps} isVisible={false} />

package/src/contentful/blocks/address-input-banner/index.tsx

@@ -19,6 +19,7 @@ export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
     navHeight,
     isVisible,
     renderCheckPlans,
+    fieldProps,
   } = props;
 
   const style = variantStyles[variant?.toLowerCase()] || variantStyles.yellow;
@@ -43,7 +44,10 @@ export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
         "flex flex-col items-center justify-center gap-3 p-[10px] lg:flex-row lg:gap-8 lg:px-6 lg:py-[10px]"
       )}
     >
-      <Text className="label3 w-full text-center md:label1 lg:w-auto lg:text-left">
+      <Text
+        className="label3 w-full text-center md:label1 lg:w-auto lg:text-left"
+        {...fieldProps?.title}
+      >
         {title}
       </Text>
       {renderedCheckPlans ? <div>{renderedCheckPlans}</div> : null}

package/src/contentful/blocks/address-input-banner/types.ts

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { ButtonProps } from "@shared/contentful/blocks/button/types";
+import type { FieldProps } from "@shared/types/field-props";
 import { CheckPlansProps } from "@shared/types/micro-components";
 
 export interface AddressInputBannerProps {
@@ -11,4 +12,6 @@ export interface AddressInputBannerProps {
   navHeight?: number;
   isVisible?: boolean;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<"title">;
 }

package/src/contentful/blocks/button/index.test.tsx

@@ -5,6 +5,10 @@ import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import "@testing-library/jest-dom/jest-globals";
 import { fireEvent, render, screen } from "@testing-library/react";
 
+// Keeps mocked DOM elements free of non-DOM props while still surfacing data-* attributes.
+const dataAttrs = (rest: Record<string, unknown>) =>
+  Object.fromEntries(Object.entries(rest).filter(([k]) => k.startsWith("data-")));
+
 jest.mock("@shared/components/brand-button", () => ({
   BrandButton: ({
     as,
@@ -37,6 +41,7 @@ jest.mock("@shared/components/brand-button", () => ({
         data-icon-fill={iconFill}
         className={buttonClassName}
         onClick={onClick}
+        {...dataAttrs(rest)}
       >
         {label} {text}
       </Tag>
@@ -45,9 +50,13 @@ jest.mock("@shared/components/brand-button", () => ({
 }));
 
 jest.mock("@shared/components/button", () => ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   Button: ({ onClick, className, children, ...rest }: any) => (
-    <button data-testid="core-button" className={className} onClick={onClick}>
+    <button
+      data-testid="core-button"
+      className={className}
+      onClick={onClick}
+      {...dataAttrs(rest)}
+    >
       {children}
     </button>
   ),
@@ -63,6 +72,7 @@ jest.mock("@shared/components/link", () => ({
     className,
     title,
     onClick,
+    ...rest
   }: any) => (
     <a
       data-testid="link"
@@ -71,6 +81,7 @@ jest.mock("@shared/components/link", () => ({
       className={className}
       title={title}
       onClick={onClick}
+      {...dataAttrs(rest)}
     >
       {children}
     </a>
@@ -97,6 +108,38 @@ describe("Button", () => {
     jest.clearAllMocks();
   });
 
+  describe("fieldProps", () => {
+    const fieldProps = {
+      "data-contentful-entry-id": "entry-1",
+      "data-contentful-field-id": "title",
+    };
+
+    it.each([
+      ["solid", "brand-button"],
+      ["text", "link"],
+      ["unstyled", "core-button"],
+    ] as const)("spreads fieldProps onto the %s variant", (variant, testId) => {
+      render(
+        <Button
+          buttonLabel="Go"
+          href="/page"
+          showButtonAs={variant}
+          fieldProps={fieldProps}
+        />
+      );
+      const el = screen.getByTestId(testId);
+      expect(el).toHaveAttribute("data-contentful-entry-id", "entry-1");
+      expect(el).toHaveAttribute("data-contentful-field-id", "title");
+    });
+
+    it("renders no tagging attributes when fieldProps is omitted", () => {
+      render(<Button buttonLabel="Go" href="/page" showButtonAs="text" />);
+      expect(screen.getByTestId("link")).not.toHaveAttribute(
+        "data-contentful-entry-id"
+      );
+    });
+  });
+
   describe("showButtonAs='solid' (default)", () => {
     it("renders BrandButton as anchor when href is provided", () => {
       render(<Button buttonLabel="Click" href="/page" />);

package/src/contentful/blocks/button/index.tsx

@@ -50,6 +50,7 @@ export const Button: React.FC<ButtonProps> = props => {
     preserveQueryParameters,
     disableAnimation,
     animationType = DEFAULT_BUTTON_ANIMATION_TYPE,
+    fieldProps,
     ...rest
   } = props;
 
@@ -143,7 +144,12 @@ export const Button: React.FC<ButtonProps> = props => {
       ? buildPreservedQueryHref(href, currentSearch)
       : href;
   let CTA = (
-    <CoreButton onClick={buttonClick} className={buttonClassName} {...rest} />
+    <CoreButton
+      onClick={buttonClick}
+      className={buttonClassName}
+      {...rest}
+      {...fieldProps}
+    />
   );
 
   switch (showButtonAs) {
@@ -166,6 +172,7 @@ export const Button: React.FC<ButtonProps> = props => {
           iconFill={iconFill}
           disableAnimation={disableAnimation}
           animationType={animationType}
+          {...fieldProps}
         />
       ) : (
         <BrandButton
@@ -183,6 +190,7 @@ export const Button: React.FC<ButtonProps> = props => {
           buttonClassName={brandButtonClassName}
           disableAnimation={disableAnimation}
           animationType={animationType}
+          {...fieldProps}
         />
       );
       break;
@@ -199,6 +207,7 @@ export const Button: React.FC<ButtonProps> = props => {
             linkClassName
           )}
           onClick={linkClick}
+          {...fieldProps}
         >
           {matIconName ? (
             <>
@@ -242,6 +251,7 @@ export const Button: React.FC<ButtonProps> = props => {
           iconFill={iconFill}
           disableAnimation={disableAnimation}
           animationType={animationType}
+          {...fieldProps}
         />
       ) : (
         <BrandButton
@@ -258,6 +268,7 @@ export const Button: React.FC<ButtonProps> = props => {
           iconFill={iconFill}
           disableAnimation={disableAnimation}
           animationType={animationType}
+          {...fieldProps}
         />
       );
       break;
@@ -287,6 +298,7 @@ export const Button: React.FC<ButtonProps> = props => {
             buttonClassName
           )}
           aria-label={buttonLabel}
+          {...fieldProps}
         >
           {isLeftIcon && matIconName ? (
             <MaterialIcon

package/src/contentful/blocks/button/types.ts

@@ -45,4 +45,6 @@ export type ButtonProps = {
   iconSize?: Size;
   disableAnimation?: boolean;
   animationType?: AnimationType | AnimationType[];
+  /** Extra DOM attribute props, spread onto the rendered link/button element. */
+  fieldProps?: Record<string, unknown>;
 };

package/src/contentful/blocks/footer/index.test.tsx

@@ -12,8 +12,15 @@ jest.mock("@shared/components/divider", () => ({
 }));
 
 jest.mock("@shared/components/text", () => ({
-  Text: ({ as: Tag = "span", children, className }: any) => (
-    <Tag className={className}>{children}</Tag>
+  Text: ({ as: Tag = "span", children, className, ...rest }: any) => (
+    <Tag
+      className={className}
+      {...Object.fromEntries(
+        Object.entries(rest).filter(([k]) => k.startsWith("data-"))
+      )}
+    >
+      {children}
+    </Tag>
   ),
 }));
 
@@ -74,6 +81,62 @@ const defaultProps: FooterProps = {
 };
 
 describe("Footer", () => {
+  describe("fieldProps", () => {
+    const tag = (field: string) => ({
+      "data-contentful-field-id": field,
+    });
+
+    it("spreads body, terms and copyrights fieldProps onto their elements", () => {
+      const { container } = render(
+        <Footer
+          {...defaultProps}
+          fieldProps={{
+            body: tag("body"),
+            terms: tag("termsText"),
+            copyrights: tag("copyrightText"),
+          }}
+        />
+      );
+      expect(
+        screen.getByLabelText("Promotions and disclaimers")
+      ).toHaveAttribute("data-contentful-field-id", "body");
+      expect(container.querySelector(".terms-text")).toHaveAttribute(
+        "data-contentful-field-id",
+        "termsText"
+      );
+      expect(container.querySelector(".copy-rights")).toHaveAttribute(
+        "data-contentful-field-id",
+        "copyrightText"
+      );
+    });
+
+    it("spreads a link group's title fieldProps onto the group title", () => {
+      render(
+        <Footer
+          {...defaultProps}
+          links={[
+            { ...mockLinks[0], fieldProps: { title: tag("title") } },
+            mockLinks[1],
+          ]}
+        />
+      );
+      expect(screen.getByText("Products")).toHaveAttribute(
+        "data-contentful-field-id",
+        "title"
+      );
+      expect(screen.getByText("Support")).not.toHaveAttribute(
+        "data-contentful-field-id"
+      );
+    });
+
+    it("renders no tagging attributes when fieldProps is omitted", () => {
+      const { container } = render(<Footer {...defaultProps} />);
+      expect(
+        container.querySelector("[data-contentful-field-id]")
+      ).toBeNull();
+    });
+  });
+
   describe("Rendering", () => {
     it("renders with all props", () => {
       render(<Footer {...defaultProps} />);

package/src/contentful/blocks/footer/index.tsx

@@ -13,6 +13,7 @@ export const Footer: React.FC<FooterProps> = ({
   terms,
   maxWidth = true,
   onClick,
+  fieldProps,
 }) => {
   function footerClick(
     event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
@@ -23,7 +24,11 @@ export const Footer: React.FC<FooterProps> = ({
   return (
     <div className="component-container bg-bg-inverse text-white">
       <div className={` ${maxWidth ? "mx-auto max-w-120" : ""} px-5 py-8`}>
-        <aside className="break-words" aria-label="Promotions and disclaimers">
+        <aside
+          className="break-words"
+          aria-label="Promotions and disclaimers"
+          {...fieldProps?.body}
+        >
           {body}
         </aside>
         <Divider className="my-8 border-border-inverse lg:my-16" />
@@ -36,7 +41,7 @@ export const Footer: React.FC<FooterProps> = ({
                   className="site-links-group"
                   key={`link-group-${index}`}
                 >
-                  <Text as="div" className="label3">
+                  <Text as="div" className="label3" {...link?.fieldProps?.title}>
                     {link?.title}
                   </Text>
                   <ul className="flex flex-col">
@@ -61,10 +66,15 @@ export const Footer: React.FC<FooterProps> = ({
         <div className="py-8">
           <Divider className="my-8 hidden border-border-inverse md:my-8 md:block" />
 
-          <p className="terms-text footnote text-white">
+          <p className="terms-text footnote text-white" {...fieldProps?.terms}>
             &copy; {new Date().getFullYear()} {terms}
           </p>
-          <div className="copy-rights whitespace-pre-line">{copyrights}</div>
+          <div
+            className="copy-rights whitespace-pre-line"
+            {...fieldProps?.copyrights}
+          >
+            {copyrights}
+          </div>
           <nav aria-label="Footer legal">
             <ul className="bottom-links list-none">
               {bottomLinks?.map((link: any, index: number) => (

package/src/contentful/blocks/footer/types.ts

@@ -1,5 +1,7 @@
 import React from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export type FooterProps = {
   body: React.ReactNode;
   links?: Array<any>;
@@ -10,4 +12,6 @@ export type FooterProps = {
   onClick?: (
     event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
   ) => void;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<"body" | "terms" | "copyrights">;
 };

package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.test.tsx

@@ -12,8 +12,15 @@ jest.mock("@shared/components/material-icon", () => ({
 }));
 
 jest.mock("@shared/components/text", () => ({
-  Text: ({ as: Tag = "span", children, className }: any) => (
-    <Tag className={className}>{children}</Tag>
+  Text: ({ as: Tag = "span", children, className, ...rest }: any) => (
+    <Tag
+      className={className}
+      {...Object.fromEntries(
+        Object.entries(rest).filter(([k]) => k.startsWith("data-"))
+      )}
+    >
+      {children}
+    </Tag>
   ),
 }));
 
@@ -50,6 +57,23 @@ jest.mock("@shared/utils", () => ({
 }));
 
 describe("DesktopLinkGroups", () => {
+  it("spreads the group's title fieldProps onto the title element", () => {
+    render(
+      <DesktopLinkGroups
+        anchorName="test"
+        link={{
+          title: "Shop",
+          items: { items: [] },
+          fieldProps: { title: { "data-contentful-field-id": "title" } },
+        }}
+      />
+    );
+    expect(screen.getByText("Shop")).toHaveAttribute(
+      "data-contentful-field-id",
+      "title"
+    );
+  });
+
   it("renders nothing when link is undefined", () => {
     const { container } = render(
       <DesktopLinkGroups anchorName="test" link={undefined} />

package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx

@@ -5,12 +5,14 @@ import { Text } from "@shared/components/text";
 import { Button } from "@shared/contentful/blocks/button";
 import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
 import { useOutsideClick } from "@shared/hooks/use-outside-click";
+import type { FieldProps } from "@shared/types/field-props";
 import { cx } from "@shared/utils";
 
 type ComponentButtonGroup = {
   anchorId?: string | null;
   title?: string | null;
   items?: { items?: ContentfulButtonProps[] | null } | null;
+  fieldProps?: FieldProps<"title">;
 };
 
 type Link = ContentfulButtonProps | ComponentButtonGroup;
@@ -61,7 +63,7 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
   }
 
   // Group
-  const { anchorId, title, items } = link;
+  const { anchorId, title, items, fieldProps } = link;
   const subMenu = Array.isArray(items?.items) ? items!.items! : [];
   const fullAnchorName = `--link-anchor-${anchorName}`;
 
@@ -81,7 +83,11 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
         key={anchorId}
         showButtonAs="unstyled"
       >
-        <Text as="span" className="group-hover:underline">
+        <Text
+          as="span"
+          className="group-hover:underline"
+          {...fieldProps?.title}
+        >
           {title ?? null}
         </Text>
         <MaterialIcon

package/src/contentful/blocks/navigation/index.test.tsx

@@ -84,9 +84,16 @@ jest.mock("@shared/components/material-icon", () => ({
 }));
 
 jest.mock("@shared/components/next-image", () => ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   NextImage: ({ src, alt, onClick, ...rest }: any) => (
-    <img data-testid="next-image" src={src} alt={alt} onClick={onClick} />
+    <img
+      data-testid="next-image"
+      src={src}
+      alt={alt}
+      onClick={onClick}
+      {...Object.fromEntries(
+        Object.entries(rest).filter(([k]) => k.startsWith("data-"))
+      )}
+    />
   ),
 }));
 
@@ -149,6 +156,37 @@ const mobileMenuProps: NavigationProps = {
 describe("Navigation", () => {
   beforeEach(() => jest.clearAllMocks());
 
+  describe("fieldProps", () => {
+    const tag = (field: string) => ({ "data-contentful-field-id": field });
+
+    it("spreads logo fieldProps onto the desktop and mobile logo links", () => {
+      const { container } = render(
+        <Navigation {...defaultProps} fieldProps={{ logo: tag("logo") }} />
+      );
+      const tagged = container.querySelectorAll(
+        'a[data-contentful-field-id="logo"]'
+      );
+      expect(tagged).toHaveLength(2);
+    });
+
+    it("spreads searchBarIcon fieldProps onto the desktop search icon", () => {
+      const { container } = render(
+        <Navigation
+          {...defaultProps}
+          fieldProps={{ searchBarIcon: tag("searchBarIcon") }}
+        />
+      );
+      expect(
+        container.querySelector('img[data-contentful-field-id="searchBarIcon"]')
+      ).not.toBeNull();
+    });
+
+    it("renders no tagging attributes when fieldProps is omitted", () => {
+      const { container } = render(<Navigation {...defaultProps} />);
+      expect(container.querySelector("[data-contentful-field-id]")).toBeNull();
+    });
+  });
+
   describe("enableHamburgerNavigationOnDesktop (desktop hamburger A/B variant)", () => {
     it("keeps current behavior when the flag is off", () => {
       const { container } = render(<Navigation {...defaultProps} />);

package/src/contentful/blocks/navigation/index.tsx

@@ -46,6 +46,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
     callNowCtaIcon,
     navigationBackgroundColor,
     navigationLinkColor,
+    fieldProps,
   } = props;
 
   const logoUrl =
@@ -94,6 +95,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
           width={24}
           height={24}
           className="mr-2 self-center rounded-full"
+          {...fieldProps?.callNowCtaIcon}
         />
       ) : null}
       <Text as="span" className="text-secondary-navy500 footnote">
@@ -159,7 +161,18 @@ export const Navigation: React.FC<NavigationProps> = props => {
                   <CallButton
                     className="border-none"
                     href={invocaPhoneNumberLink}
-                    prefix={callNowCtaText}
+                    prefix={
+                      callNowCtaText ? (
+                        <span
+                          className="text-sm font-normal text-text"
+                          {...fieldProps?.callNowCtaText}
+                        >
+                          {callNowCtaText}
+                        </span>
+                      ) : (
+                        callNowCtaText
+                      )
+                    }
                     onClick={onCallClickDesktop}
                   >
                     <Text className="body3 text-text">
@@ -210,7 +223,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
           >
             <div>
               {logoUrl ? (
-                <Link href="/" className="flex">
+                <Link href="/" className="flex" {...fieldProps?.logo}>
                   <NextImage
                     src={logoUrl}
                     alt="Kinetic business logo"
@@ -265,7 +278,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
             <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
               <div className="flex h-full">
                 {logoUrl ? (
-                  <Link href="/" className="flex">
+                  <Link href="/" className="flex" {...fieldProps?.logo}>
                     <NextImage
                       src={logoUrl}
                       alt="Kinetic business logo"
@@ -302,6 +315,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
                         : searchBarIcon?.url || ""
                     }
                     onSearch={onSearch}
+                    iconFieldProps={fieldProps?.searchBarIcon}
                   />
                 ) : null}
                 {supportNavigationLinks?.map((links, index) => {
@@ -448,6 +462,7 @@ const MobileMenu = (props: NavigationProps) => {
                   : props.searchBarIcon?.url || ""
               }
               onSearch={props.onSearch || (() => {})}
+              iconFieldProps={props.fieldProps?.searchBarIcon}
             />
           ) : null}
           <div
@@ -510,8 +525,10 @@ const MobileSearchInput = (props: {
   onSearch: (query: string) => void;
   isMenuOpen: boolean;
   searchBarIconURL: string;
+  iconFieldProps?: Record<string, unknown>;
 }) => {
-  const { closeMenu, onSearch, isMenuOpen, searchBarIconURL } = props;
+  const { closeMenu, onSearch, isMenuOpen, searchBarIconURL, iconFieldProps } =
+    props;
   const [searchValue, setSearchValue] = React.useState("");
   const searchInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -541,6 +558,7 @@ const MobileSearchInput = (props: {
         alt="Search icon"
         role="button"
         onClick={redirectToSearchResults}
+        {...iconFieldProps}
       />
       <div className="flex-grow">
         <Input
@@ -561,8 +579,9 @@ const MobileSearchInput = (props: {
 const DesktopSearchInput = (props: {
   searchBarIconURL: string;
   onSearch: (query: string) => void;
+  iconFieldProps?: Record<string, unknown>;
 }) => {
-  const { searchBarIconURL, onSearch } = props;
+  const { searchBarIconURL, onSearch, iconFieldProps } = props;
   const [searchValue, setSearchValue] = React.useState("");
   const searchInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -585,6 +604,7 @@ const DesktopSearchInput = (props: {
         alt="Search icon"
         role="button"
         onClick={redirectToSearchResults}
+        {...iconFieldProps}
       />
       {/* Input */}
       <Input

package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.test.tsx

@@ -28,6 +28,7 @@ jest.mock("@shared/contentful/blocks/button", () => ({
       className={buttonClassName || linkClassName}
       onClick={onClick}
       aria-expanded={rest["aria-expanded"]}
+      data-field-props={JSON.stringify(rest.fieldProps ?? null)}
     >
       {children || rest.buttonLabel}
     </button>
@@ -35,6 +36,19 @@ jest.mock("@shared/contentful/blocks/button", () => ({
 }));
 
 describe("MobileLinkGroups", () => {
+  it("passes the group's title fieldProps to the toggle button", () => {
+    const link = {
+      title: "Shop",
+      items: { items: [] },
+      fieldProps: { title: { "data-contentful-field-id": "title" } },
+    };
+    render(<MobileLinkGroups link={link as any} />);
+    expect(screen.getByTestId("button")).toHaveAttribute(
+      "data-field-props",
+      JSON.stringify({ "data-contentful-field-id": "title" })
+    );
+  });
+
   it("renders nothing when link is undefined", () => {
     const { container } = render(<MobileLinkGroups link={undefined} />);
     expect(container.innerHTML).toBe("");