Added tests, updated props

Author: thatblindgeye

packages/react-core/src/components/Button/__tests__/Button.test.tsx

@@ -555,6 +555,28 @@ describe('Favorite button', () => {
   });
 });
 
+describe('Dock variant', () => {
+  test(`Renders with class ${styles.modifiers.dock} when isDock = true`, () => {
+    render(<Button isDock>Dock Button</Button>);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.dock);
+  });
+
+  test(`Does not render with class ${styles.modifiers.dock} when isDock is not passed`, () => {
+    render(<Button>Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.dock);
+  });
+
+  test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded = true`, () => {
+    render(<Button isTextExpanded>Text Expanded Button</Button>);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+    render(<Button>Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+  });
+});
+
 test(`Renders basic button`, () => {
   const { asFragment } = render(<Button aria-label="basic button">Basic Button</Button>);
   expect(asFragment()).toMatchSnapshot();

packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx

@@ -127,6 +127,29 @@ describe('MastheadLogo', () => {
 
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test(`Renders with ${styles.modifiers.compact} class when isCompact is true`, () => {
+    render(
+      <MastheadLogo isCompact data-testid="compact-logo">
+        test
+      </MastheadLogo>
+    );
+    expect(screen.getByTestId('compact-logo')).toHaveClass(styles.modifiers.compact);
+  });
+
+  test(`Does not render with ${styles.modifiers.compact} class when isCompact is false`, () => {
+    render(
+      <MastheadLogo isCompact={false} data-testid="logo">
+        test
+      </MastheadLogo>
+    );
+    expect(screen.getByTestId('logo')).not.toHaveClass(styles.modifiers.compact);
+  });
+
+  test(`Does not render with ${styles.modifiers.compact} class when isCompact is not passed`, () => {
+    render(<MastheadLogo data-testid="logo">test</MastheadLogo>);
+    expect(screen.getByTestId('logo')).not.toHaveClass(styles.modifiers.compact);
+  });
 });
 
 describe('MastheadContent', () => {

packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx

@@ -138,3 +138,23 @@ test('Does not render custom icon when icon prop and isSettings are passed', ()
   );
   expect(screen.queryByText('Custom icon')).not.toBeInTheDocument();
 });
+
+test(`Renders with class ${styles.modifiers.dock} when isDock is passed`, () => {
+  render(<MenuToggle isDock>Dock Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.dock);
+});
+
+test(`Does not render with class ${styles.modifiers.dock} when isDock is not passed`, () => {
+  render(<MenuToggle>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.dock);
+});
+
+test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded is passed`, () => {
+  render(<MenuToggle isTextExpanded>Text Expanded Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+});
+
+test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+  render(<MenuToggle>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+});

packages/react-core/src/components/Nav/__tests__/Nav.test.tsx

@@ -274,4 +274,34 @@ describe('Nav', () => {
     );
     expect(screen.getByTestId('docked-nav')).toHaveClass(styles.modifiers.docked);
   });
+
+  test(`Renders with ${styles.modifiers.textExpanded} class when isTextExpanded is true`, () => {
+    renderNav(
+      <Nav isTextExpanded data-testid="text-expanded-nav">
+        <NavList>
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getByTestId('text-expanded-nav')).toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Does not render with ${styles.modifiers.textExpanded} class when isTextExpanded is not passed`, () => {
+    renderNav(
+      <Nav data-testid="nav">
+        <NavList>
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.textExpanded);
+  });
 });

packages/react-core/src/components/Page/Page.tsx

@@ -21,14 +21,15 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the page layout */
   className?: string;
   /** @beta Indicates the layout variant */
-  variant?: 'default' | 'docked';
-  /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked. */
+  variant?: 'default' | 'dock';
+  /** @beta Flag indicating the dock nav is expanded on mobile. Only applies when variant is dock. */
   isDockExpanded?: boolean;
-  /** @beta Flag indicating the docked nav should display text. Only applies when variant is docked. */
+  /** @beta Flag indicating the dock nav should display text. Only applies when variant is dock. */
   isDockTextExpanded?: boolean;
-  /** Masthead component (e.g. <Masthead />) */
+  /** The horizontal masthead content (e.g. <Masthead />). When using the dock variant, this content will only render at mobile viewports. */
   masthead?: React.ReactNode;
-  dockedMasthead?: React.ReactNode;
+  /** @beta Content to render in the vertical dock when variant of dock is used. At mobile viewports, this content will be replaced with the content passed to masthead. */
+  dockContent?: React.ReactNode;
   /** Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout
    * will render without a sidebar.
    */
@@ -240,7 +241,7 @@ class Page extends Component<PageProps, PageState> {
       isDockExpanded = false,
       isDockTextExpanded = false,
       masthead,
-      dockedMasthead,
+      dockContent,
       sidebar,
       notificationDrawer,
       isNotificationDrawerExpanded,
@@ -347,7 +348,7 @@ class Page extends Component<PageProps, PageState> {
           {...rest}
           className={css(
             styles.page,
-            variant === 'docked' && styles.modifiers.dock,
+            variant === 'dock' && styles.modifiers.dock,
             width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
@@ -356,7 +357,7 @@ class Page extends Component<PageProps, PageState> {
           )}
         >
           {skipToContent}
-          {variant === 'docked' ? (
+          {variant === 'dock' ? (
             <>
               {masthead}
               <div
@@ -366,7 +367,7 @@ class Page extends Component<PageProps, PageState> {
                   isDockTextExpanded && styles.modifiers.textExpanded
                 )}
               >
-                <div className={css(styles.pageDockMain)}>{dockedMasthead}</div>
+                <div className={css(styles.pageDockMain)}>{dockContent}</div>
               </div>
             </>
           ) : (

packages/react-core/src/components/Page/__tests__/Page.test.tsx

@@ -389,28 +389,102 @@ describe('Page', () => {
 
     expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
   });
+});
+
+describe('Page dock variant', () => {
+  test(`Does not render with dock classes when variant is default`, () => {
+    render(<Page {...props} variant="default" data-testid="page"></Page>);
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.dock);
+    expect(page.querySelector(styles.pageDock)).not.toBeInTheDocument();
+    expect(page.querySelector(styles.pageDockMain)).not.toBeInTheDocument();
+  });
+
+  test(`Does not render with dock classes when variant is not passed`, () => {
+    render(<Page data-testid="page"></Page>);
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.dock);
+    expect(page.querySelector(styles.pageDock)).not.toBeInTheDocument();
+    expect(page.querySelector(styles.pageDockMain)).not.toBeInTheDocument();
+  });
 
-  test(`Renders with ${styles.modifiers.dock} class when variant is docked`, () => {
-    render(<Page {...props} variant="docked" data-testid="page"></Page>);
+  test(`Renders with ${styles.modifiers.dock} class when variant is dock`, () => {
+    render(<Page {...props} variant="dock" data-testid="page"></Page>);
 
     expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.dock);
   });
 
-  test(`Does not render with ${styles.modifiers.dock} class when variant is default`, () => {
-    render(<Page {...props} variant="default" data-testid="page"></Page>);
+  test('Renders dock content when dockContent and variant="dock" is passed', () => {
+    render(<Page variant="dock" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
 
-    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+    expect(screen.getByText('Dock content')).toBeInTheDocument();
   });
 
-  test(`Does not render with ${styles.modifiers.dock} class when variant is not passed`, () => {
-    render(<Page data-testid="page"></Page>);
-    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+  test('Renders masthead content when masthead and variant="dock" is passed', () => {
+    render(
+      <Page variant="dock" dockContent={<>Dock content</>} masthead={<>Masthead content</>} data-testid="page"></Page>
+    );
+
+    expect(screen.getByText('Masthead content')).toBeInTheDocument();
+  });
+
+  test(`Renders with ${styles.pageDock} wrapper when variant is dock`, () => {
+    render(<Page variant="dock" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).toBeInTheDocument();
+  });
+
+  test(`Does not render with ${styles.modifiers.expanded} by default when variant is dock`, () => {
+    render(<Page variant="dock" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).not.toHaveClass(styles.modifiers.expanded);
+  });
+
+  test(`Does not render with ${styles.modifiers.textExpanded} by default when variant is dock`, () => {
+    render(<Page variant="dock" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).not.toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Renders with ${styles.modifiers.expanded} when isDockExpanded is true and variant is dock`, () => {
+    render(
+      <Page
+        variant="dock"
+        isDockExpanded
+        dockContent={<>Dock content</>}
+        masthead={<>Masthead</>}
+        data-testid="page"
+      ></Page>
+    );
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).toHaveClass(styles.modifiers.expanded);
+  });
+
+  test(`Renders with ${styles.modifiers.textExpanded} when isDockTextExpanded is true and variant is dock`, () => {
+    render(
+      <Page
+        variant="dock"
+        isDockTextExpanded
+        dockContent={<>Dock content</>}
+        masthead={<>Masthead</>}
+        data-testid="page"
+      ></Page>
+    );
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).toHaveClass(styles.modifiers.textExpanded);
   });
 
-  test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => {
-    render(<Page variant="docked" masthead={<>Masthead</>} data-testid="page"></Page>);
+  test(`Renders with ${styles.pageDockMain} wrapper when variant is dock`, () => {
+    render(<Page variant="dock" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
 
-    const pageDockMain = screen.getByText('Masthead').closest(`.${styles.pageDockMain}`);
+    const pageDockMain = screen.getByText('Dock content').closest(`.${styles.pageDockMain}`);
     expect(pageDockMain).toBeInTheDocument();
   });
 });