feat(toolbar): add tests

patternfly · Apr 29, 2024 · ac359ec · ac359ec
1 parent c507409
commit ac359ec
Showing 1 changed file with 58 additions and 0 deletions.
diff --git a/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx
@@ -9,6 +9,7 @@ import { ToolbarContent } from '../ToolbarContent';
 import { ToolbarFilter } from '../ToolbarFilter';
 import { ToolbarGroup } from '../ToolbarGroup';
 import { Button } from '../../Button/Button';
+import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 
 describe('Toolbar', () => {
   it('should render inset', () => {
@@ -105,4 +106,61 @@ describe('Toolbar', () => {
     expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(1);
     expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(1);
   });
+
+  it('Renders with class ${styles.modifiers.noBackground} when colorVariant="no-background"', () => {
+    const items = (
+      <React.Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" colorVariant="no-background" data-testid="Toolbar-test-no-background-id">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-no-background-id')).toHaveClass(styles.modifiers.noBackground);
+  });
+
+  it('Renders with class ${styles.modifiers.primary} when colorVariant="primary"', () => {
+    const items = (
+      <React.Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" colorVariant="primary" data-testid="Toolbar-test-primary-id">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-primary-id')).toHaveClass(styles.modifiers.primary);
+  });
+
+  it('Renders with class ${styles.modifiers.secondary} when colorVariant="secondary"', () => {
+    const items = (
+      <React.Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" colorVariant="secondary" data-testid="Toolbar-test-secondary-id">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-secondary-id')).toHaveClass(styles.modifiers.secondary);
+  });
 });