@patternfly/react-core 5.2.0-prerelease.9 → 5.3.0-prerelease.1

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.2.0-prerelease.8","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.3.0-prerelease.0","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.2.0-prerelease.8","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.3.0-prerelease.0","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.2.0-prerelease.8","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.3.0-prerelease.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.2.0-prerelease.9",
+  "version": "5.3.0-prerelease.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -42,18 +42,19 @@
     "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
     "clean": "rimraf dist components layouts helpers next deprecated node_modules",
     "generate": "node scripts/copyStyles.js",
-    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
+    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json",
+    "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.2.0-prerelease.3",
-    "@patternfly/react-styles": "^5.2.0-prerelease.2",
-    "@patternfly/react-tokens": "^5.2.0-prerelease.3",
+    "@patternfly/react-icons": "^5.3.0-prerelease.0",
+    "@patternfly/react-styles": "^5.3.0-prerelease.0",
+    "@patternfly/react-tokens": "^5.3.0-prerelease.0",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.2.0-prerelease.2",
+    "@patternfly/patternfly": "5.2.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -71,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ca857bc68e1333a3cdaa4be0a82f42654aef5f60"
+  "gitHead": "9bb6a230ddff7d6177053198bbc7d72aaee40c90"
 }

package/scripts/cleanDistExports.js

@@ -0,0 +1,14 @@
+const fs = require('fs');
+const path = require('path');
+
+const distIndexFiles = ['esm', 'js'].map((dir) => path.join(process.cwd(), 'dist', dir, 'index.js'));
+const distIndexDeclarationFiles = ['esm', 'js'].map((dir) => path.join(process.cwd(), 'dist', dir, 'index.d.ts'));
+
+[...distIndexFiles, ...distIndexDeclarationFiles].forEach((file) => {
+  const fileContents = fs.readFileSync(file, 'utf8');
+  const newFileContents = fileContents
+    .split('\n')
+    .filter((line) => !line.includes('demos'))
+    .join('\n');
+  fs.writeFileSync(file, newFileContents);
+});

package/single-packages.config.json

@@ -1,5 +1,5 @@
 {
-    "packageName": "@patternfly/react-core",
-    "moduleGlob": ["/dist/esm/helpers/**/*.js", "/dist/esm/*/*/**/index.js"],
-    "exclude": ["/dist/esm/helpers/Popper/thirdparty"]
-}
+  "packageName": "@patternfly/react-core",
+  "moduleGlob": ["/dist/esm/helpers/**/*.js", "/dist/esm/styles/**/index.js", "/dist/esm/*/*/**/index.js"],
+  "exclude": ["/dist/esm/helpers/Popper/thirdparty"]
+}

package/src/components/AboutModal/__tests__/AboutModalBox.test.tsx

@@ -3,10 +3,6 @@ import { render } from '@testing-library/react';
 import { AboutModalBox } from '../AboutModalBox';
 
 test('AboutModalBox Test', () => {
-  const { asFragment } = render(
-    <AboutModalBox aria-labelledby="id">
-      This is a AboutModalBox
-    </AboutModalBox>
-  );
+  const { asFragment } = render(<AboutModalBox aria-labelledby="id">This is a AboutModalBox</AboutModalBox>);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Accordion/Accordion.tsx

@@ -18,6 +18,8 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   isBordered?: boolean;
   /** Display size variant. */
   displaySize?: 'default' | 'lg';
+  /** Sets the toggle icon position for all accordion toggles. */
+  togglePosition?: 'start' | 'end';
 }
 
 export const Accordion: React.FunctionComponent<AccordionProps> = ({
@@ -28,6 +30,7 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
   asDefinitionList = true,
   isBordered = false,
   displaySize = 'default',
+  togglePosition = 'end',
   ...props
 }: AccordionProps) => {
   const AccordionList: any = asDefinitionList ? 'dl' : 'div';
@@ -36,6 +39,7 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
       className={css(
         styles.accordion,
         isBordered && styles.modifiers.bordered,
+        togglePosition === 'start' && styles.modifiers.toggleStart,
         displaySize === 'lg' && styles.modifiers.displayLg,
         className
       )}
@@ -46,7 +50,8 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
       <AccordionContext.Provider
         value={{
           ContentContainer: asDefinitionList ? 'dd' : 'div',
-          ToggleContainer: asDefinitionList ? 'dt' : headingLevel
+          ToggleContainer: asDefinitionList ? 'dt' : headingLevel,
+          togglePosition
         }}
       >
         {children}

package/src/components/Accordion/AccordionContext.ts

@@ -3,6 +3,7 @@ import * as React from 'react';
 interface AccordionContextProps {
   ContentContainer: React.ElementType;
   ToggleContainer: React.ElementType;
+  togglePosition: 'start' | 'end';
 }
 
 export const AccordionContext = React.createContext<Partial<AccordionContextProps>>({});

package/src/components/Accordion/AccordionToggle.tsx

@@ -25,27 +25,36 @@ export const AccordionToggle: React.FunctionComponent<AccordionToggleProps> = ({
   children = null,
   component,
   ...props
-}: AccordionToggleProps) => (
-  <AccordionContext.Consumer>
-    {({ ToggleContainer }) => {
-      const Container = component || ToggleContainer;
-      return (
-        <Container>
-          <button
-            id={id}
-            className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
-            aria-expanded={isExpanded}
-            type="button"
-            {...props}
-          >
-            <span className={css(styles.accordionToggleText)}>{children}</span>
-            <span className={css(styles.accordionToggleIcon)}>
-              <AngleRightIcon />
-            </span>
-          </button>
-        </Container>
-      );
-    }}
-  </AccordionContext.Consumer>
-);
+}: AccordionToggleProps) => {
+  const renderToggleIcon = () => (
+    <span className={css(styles.accordionToggleIcon)}>
+      <AngleRightIcon />
+    </span>
+  );
+
+  return (
+    <AccordionContext.Consumer>
+      {({ ToggleContainer, togglePosition }) => {
+        const Container = component || ToggleContainer;
+        const isToggleStartPositioned = togglePosition === 'start';
+
+        return (
+          <Container>
+            <button
+              id={id}
+              className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
+              aria-expanded={isExpanded}
+              type="button"
+              {...props}
+            >
+              {isToggleStartPositioned && renderToggleIcon()}
+              <span className={css(styles.accordionToggleText)}>{children}</span>
+              {!isToggleStartPositioned && renderToggleIcon()}
+            </button>
+          </Container>
+        );
+      }}
+    </AccordionContext.Consumer>
+  );
+};
 AccordionToggle.displayName = 'AccordionToggle';

package/src/components/Accordion/__tests__/Accordion.test.tsx

@@ -135,6 +135,18 @@ test('Renders with pf-m-display-lg when displaySize="lg"', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-display-lg');
 });
 
+test(`Renders without class ${styles.modifiers.toggleStart} by default`, () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.toggleStart);
+});
+
+test(`Renders with class ${styles.modifiers.toggleStart} when togglePosition='start'`, () => {
+  render(<Accordion togglePosition="start">Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.toggleStart);
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Accordion aria-label="this is a simple accordion" />);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Accordion/__tests__/AccordionItem.test.tsx

@@ -11,8 +11,6 @@ test('Renders children', () => {
 });
 
 test('Matches the snapshot', () => {
-  const { asFragment } = render(
-    <AccordionItem>Test</AccordionItem>
-  );
+  const { asFragment } = render(<AccordionItem>Test</AccordionItem>);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Accordion/__tests__/AccordionToggle.test.tsx

@@ -155,6 +155,34 @@ test('Renders the toggle with pf-m-expanded and aria-expanded=true when isExpand
   expect(toggle).toHaveAttribute('aria-expanded', 'true');
 });
 
+test('Renders toggle text before toggle icon by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleText);
+});
+
+test('Renders toggle icon before toggle text when togglePosition from context = "start"', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3', togglePosition: 'start' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>

package/src/components/Accordion/examples/Accordion.md

@@ -28,3 +28,8 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 
 ```ts file="./AccordionBordered.tsx"
 ```
+
+### Toggle icon at start
+
+```ts file="./AccordionToggleIconAtStart.tsx"
+```

package/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
+
+export const AccordionToggleIconAtStart: React.FunctionComponent = () => {
+  const [expanded, setExpanded] = React.useState('start-toggle-toggle2');
+
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded('');
+    } else {
+      setExpanded(id);
+    }
+  };
+
+  return (
+    <Accordion togglePosition="start">
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle1');
+          }}
+          isExpanded={expanded === 'start-toggle-toggle1'}
+          id="start-toggle-toggle1"
+        >
+          Item one
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand1" isHidden={expanded !== 'start-toggle-toggle1'}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle2');
+          }}
+          isExpanded={expanded === 'start-toggle-toggle2'}
+          id="start-toggle-toggle2"
+        >
+          Item two
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand2" isHidden={expanded !== 'start-toggle-toggle2'}>
+          <p>
+            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+            ultrices, faucibus erat id, maximus nunc.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle3');
+          }}
+          isExpanded={expanded === 'start-toggle-toggle3'}
+          id="start-toggle-toggle3"
+        >
+          Item three
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand3" isHidden={expanded !== 'start-toggle-toggle3'}>
+          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle4');
+          }}
+          isExpanded={expanded === 'start-toggle-toggle4'}
+          id="start-toggle-toggle4"
+        >
+          Item four
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand4" isHidden={expanded !== 'start-toggle-toggle4'}>
+          <p>
+            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
+            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
+            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle5');
+          }}
+          isExpanded={expanded === 'start-toggle-toggle5'}
+          id="start-toggle-toggle5"
+        >
+          Item five
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand5" isHidden={expanded !== 'start-toggle-toggle5'}>
+          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};

package/src/components/Alert/__tests__/AlertGroup.test.tsx

@@ -19,7 +19,7 @@ test('Alert Group renders without children', () => {
 });
 
 test('Alert Group works with n children', () => {
-  const { asFragment } = render(
+  render(
     <AlertGroup data-testid="container">
       <Alert variant="success" title="alert title" />
       <Alert variant="warning" title="another alert title" />

package/src/components/BackToTop/__tests__/BackToTop.test.tsx

@@ -115,10 +115,11 @@ test('Clicking backToTop scrolls back to top of the element passed via scrollabl
   const user = userEvent.setup();
   const wrapper = document.getElementById('backToTopWrapper');
   fireEvent.scroll(wrapper as HTMLElement, { target: { scrollY: 401 } });
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   wrapper!.scrollTo = jest.fn();
   await user.click(screen.getByRole(`button`).parentElement as Element);
 
-  expect(wrapper?.scrollTo).toBeCalledTimes(1);
+  expect(wrapper?.scrollTo).toHaveBeenCalledTimes(1);
 });
 
 test('Passes correct text content to button child component', () => {

package/src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
-import { useOUIAProps, OUIAProps } from '../../helpers';
+import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
 
 export enum ButtonVariant {

package/src/components/Button/__tests__/Button.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import CartArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/cart-arrow-down-icon';
 import { Button, ButtonVariant } from '../Button';
 
 Object.values(ButtonVariant).forEach((variant) => {

package/src/components/Button/examples/ButtonVariations.tsx

@@ -10,6 +10,9 @@ export const ButtonVariations: React.FunctionComponent = () => (
     <Button variant="primary" ouiaId="Primary">
       Primary
     </Button>{' '}
+    <Button variant="primary" icon={<ExternalLinkSquareAltIcon />} ouiaId="PrimaryWithIcon">
+      Primary with icon
+    </Button>{' '}
     <Button variant="secondary" ouiaId="Secondary">
       Secondary
     </Button>{' '}

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -154,12 +154,13 @@ export const CalendarMonth = ({
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
 
   const getInitialDate = () => {
-    const initDate = new Date(dateProp);
-    if (isValidDate(initDate)) {
-      return initDate;
-    } else {
-      return isValidDate(rangeStart) ? rangeStart : today;
+    if (isValidDate(dateProp)) {
+      return dateProp;
     }
+    if (isValidDate(rangeStart)) {
+      return rangeStart;
+    }
+    return today;
   };
   const initialDate = getInitialDate();
   const [focusedDate, setFocusedDate] = React.useState(initialDate);
@@ -211,43 +212,25 @@ export const CalendarMonth = ({
     }
   };
 
-  const changeMonth = (month: number) => {
-    const newDate = new Date(focusedDate);
-    const desiredDay = newDate.getDate();
-    const monthDays = new Date(newDate.getFullYear(), (month + 1) % 12, 0).getDate(); // Setting day 0 of the next month returns the last day of current month
-
-    if (monthDays < desiredDay) {
-      newDate.setDate(monthDays);
-    }
-
-    newDate.setMonth(month);
-
-    if (initialDate.getDate() > desiredDay && monthDays > desiredDay) {
-      newDate.setDate(initialDate.getDate());
-    }
+  const changeYear = (newYear: number) => changeMonth(focusedDate.getMonth(), newYear);
 
-    return newDate;
-  };
+  const changeMonth = (newMonth: number, newYear?: number) =>
+    new Date(newYear ?? focusedDate.getFullYear(), newMonth, 1);
 
   const addMonth = (toAdd: -1 | 1) => {
-    let newMonth = new Date(focusedDate).getMonth() + toAdd;
+    let newMonth = focusedDate.getMonth() + toAdd;
+    let newYear = focusedDate.getFullYear();
+
     if (newMonth === -1) {
       newMonth = 11;
+      newYear--;
     } else if (newMonth === 12) {
       newMonth = 0;
+      newYear++;
     }
-    const newDate = changeMonth(newMonth);
-    if (toAdd === 1 && newMonth === 0) {
-      newDate.setFullYear(newDate.getFullYear() + 1);
-    }
-    if (toAdd === -1 && newMonth === 11) {
-      newDate.setFullYear(newDate.getFullYear() - 1);
-    }
-    return newDate;
-  };
 
-  const yearHasFebruary29th = (year: number) => new Date(year, 1, 29).getMonth() === 1;
-  const dateIsFebruary29th = (date: Date) => date.getMonth() === 1 && date.getDate() === 29;
+    return changeMonth(newMonth, newYear);
+  };
 
   const prevMonth = addMonth(-1);
   const nextMonth = addMonth(1);
@@ -340,19 +323,11 @@ export const CalendarMonth = ({
                 type="number"
                 value={yearFormatted}
                 onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                  const newDate = new Date(focusedDate);
-                  if (dateIsFebruary29th(newDate) && !yearHasFebruary29th(+year)) {
-                    newDate.setDate(28);
-                    newDate.setMonth(1);
-                  }
-                  if (dateIsFebruary29th(initialDate) && yearHasFebruary29th(+year)) {
-                    newDate.setFullYear(+year);
-                    newDate.setDate(29);
-                  }
-                  newDate.setFullYear(+year);
+                  const newDate = changeYear(Number(year));
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
+                  focusRef.current?.blur(); // will unfocus a date when changing year via up/down arrows
                   onMonthChange(ev, newDate);
                 }}
               />

package/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx

@@ -57,7 +57,9 @@ test('Next year dates have correct year in aria label', () => {
 });
 
 test('InlineProps render correct wrapper component and attributes', () => {
-  render(<CalendarMonth inlineProps={{component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: "hi"}} />);
+  render(
+    <CalendarMonth inlineProps={{ component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: 'hi' }} />
+  );
 
   const article = screen.getByRole('article');
   expect(article).toHaveAttribute('aria-labelledby', 'hi');

package/src/components/Card/__tests__/CardBody.test.tsx

@@ -30,7 +30,7 @@ describe('CardBody', () => {
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
 
-    render(<CardBody component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardBody component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 

package/src/components/Card/__tests__/CardFooter.test.tsx

@@ -27,7 +27,7 @@ describe('CardFooter', () => {
 
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
-    render(<CardFooter component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardFooter component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 });