test rowWrap for all breakpoints

Author: mfrances17

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

@@ -148,27 +148,32 @@ describe('Toolbar', () => {
     expect(screen.getByTestId('Toolbar-test-secondary-id')).toHaveClass(styles.modifiers.secondary);
   });
 
-  it('should render ToolbarContent with pf-m-wrap when rowWrap is set to wrap', () => {
-    render(
-      <Toolbar>
-        <ToolbarContent data-testid="toolbarcontent" rowWrap={{ default: 'wrap' }}>
-          Test
-        </ToolbarContent>
-      </Toolbar>
-    );
-
-    expect(screen.getByTestId('toolbarcontent').querySelector('div')).toHaveClass('pf-m-wrap');
-  });
-
-  it('should render ToolbarContent with pf-m-nowrap when rowWrap is set to nowrap', () => {
-    render(
-      <Toolbar>
-        <ToolbarContent data-testid="toolbarcontent" rowWrap={{ default: 'nowrap' }}>
-          Test
-        </ToolbarContent>
-      </Toolbar>
-    );
-
-    expect(screen.getByTestId('toolbarcontent').querySelector('div')).toHaveClass('pf-m-nowrap');
+  describe('ToobarContent rowWrap', () => {
+    const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+    describe.each(bps)(`rowWrap at various breakpoints`, (bp) => {
+      it(`should render with pf-m-wrap when rowWrap is set to wrap at ${bp}`, () => {
+        render(
+          <Toolbar>
+            <ToolbarContent data-testid="toolbarconent" rowWrap={{ [bp]: 'wrap' }}>
+              Test
+            </ToolbarContent>
+          </Toolbar>
+        );
+        const bpWrapClass = bp === 'default' ? 'pf-m-wrap' : `pf-m-wrap-on-${bp}`;
+
+        expect(screen.getByTestId('toolbarconent').querySelector('div')).toHaveClass(bpWrapClass);
+      });
+
+      it(`should render with pf-m-nowrap when rowWrap is set to nowrap at ${bp}`, () => {
+        render(
+          <ToolbarContent data-testid="toolbarconent" rowWrap={{ [bp]: 'nowrap' }}>
+            Test
+          </ToolbarContent>
+        );
+        const bpNoWrapClass = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`;
+        expect(screen.getByTestId('toolbarconent').querySelector('div')).toHaveClass(bpNoWrapClass);
+      });
+    });
   });
 });

packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { ToolbarGroup } from '../ToolbarGroup';
 
-describe('ToolbarItem', () => {
+describe('ToolbarGroup', () => {
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
     render(
       <ToolbarGroup data-testid="toolbargroup" isOverflowContainer>
@@ -10,20 +10,31 @@ describe('ToolbarItem', () => {
     );
     expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container');
   });
-  it('should render with pf-m-wrap when rowWrap is set to wrap', () => {
-    render(
-      <ToolbarGroup data-testid="toolbargroup" rowWrap={{ default: 'wrap' }}>
-        Test
-      </ToolbarGroup>
-    );
-    expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-wrap');
-  });
-  it('should render with pf-m-nowrap when rowWrap is set to nowrap', () => {
-    render(
-      <ToolbarGroup data-testid="toolbargroup" rowWrap={{ default: 'nowrap' }}>
-        Test
-      </ToolbarGroup>
-    );
-    expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-nowrap');
+
+  describe('ToobarGroup rowWrap', () => {
+    const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+    describe.each(bps)(`rowWrap at various breakpoints`, (bp) => {
+      it(`should render with pf-m-wrap when rowWrap is set to wrap at ${bp}`, () => {
+        render(
+          <ToolbarGroup data-testid="toolbargroup" rowWrap={{ [bp]: 'wrap' }}>
+            Test
+          </ToolbarGroup>
+        );
+        const bpWrapClass = bp === 'default' ? 'pf-m-wrap' : `pf-m-wrap-on-${bp}`;
+
+        expect(screen.getByTestId('toolbargroup')).toHaveClass(bpWrapClass);
+      });
+
+      it(`should render with pf-m-nowrap when rowWrap is set to nowrap at ${bp}`, () => {
+        render(
+          <ToolbarGroup data-testid="toolbargroup" rowWrap={{ [bp]: 'nowrap' }}>
+            Test
+          </ToolbarGroup>
+        );
+        const bpNoWrapClass = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`;
+        expect(screen.getByTestId('toolbargroup')).toHaveClass(bpNoWrapClass);
+      });
+    });
   });
 });

packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -10,20 +10,31 @@ describe('ToolbarItem', () => {
     );
     expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container');
   });
-  it('should render with pf-m-wrap when rowWrap is set to wrap', () => {
-    render(
-      <ToolbarItem data-testid="toolbaritem" rowWrap={{ default: 'wrap' }}>
-        Test
-      </ToolbarItem>
-    );
-    expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-wrap');
-  });
-  it('should render with pf-m-nowrap when rowWrap is set to nowrap', () => {
-    render(
-      <ToolbarItem data-testid="toolbaritem" rowWrap={{ default: 'nowrap' }}>
-        Test
-      </ToolbarItem>
-    );
-    expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-nowrap');
+
+  describe('ToobarItem rowWrap', () => {
+    const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+    describe.each(bps)(`rowWrap at various breakpoints`, (bp) => {
+      it(`should render with pf-m-wrap when rowWrap is set to wrap at ${bp}`, () => {
+        render(
+          <ToolbarItem data-testid="toolbaritem" rowWrap={{ [bp]: 'wrap' }}>
+            Test
+          </ToolbarItem>
+        );
+        const bpWrapClass = bp === 'default' ? 'pf-m-wrap' : `pf-m-wrap-on-${bp}`;
+
+        expect(screen.getByTestId('toolbaritem')).toHaveClass(bpWrapClass);
+      });
+
+      it(`should render with pf-m-nowrap when rowWrap is set to nowrap at ${bp}`, () => {
+        render(
+          <ToolbarItem data-testid="toolbaritem" rowWrap={{ [bp]: 'nowrap' }}>
+            Test
+          </ToolbarItem>
+        );
+        const bpNoWrapClass = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`;
+        expect(screen.getByTestId('toolbaritem')).toHaveClass(bpNoWrapClass);
+      });
+    });
   });
 });