diff --git a/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx b/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
index 6b940d6841c..aa2b7b3e5a9 100644
--- a/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
+++ b/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
@@ -1,34 +1,109 @@
-import { Divider } from '../Divider';
-import { Flex, FlexItem } from '../../../layouts/Flex';
import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { Divider } from '../Divider';
+import styles from '@patternfly/react-styles/css/components/Divider/divider';
-test('divider using hr', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
+test(`Renders with only the class name ${styles.divider} by default`, () => {
+ render();
+ expect(screen.getByRole('separator')).toHaveClass(styles.divider, { exact: true });
});
-test('divider using li', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
+test('Renders with horizontal rule by default', () => {
+ render();
+ expect(screen.getByRole('separator')).toContainHTML('
');
});
-test('divider using div', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
+test('Renders with element passed to component prop', () => {
+ render();
+ expect(screen.getByRole('separator')?.tagName).toBe('LI');
+});
+
+test('Test default orientation (vertical divider)', () => {
+ render();
+ expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical');
+});
+
+test('Test sm orientation', () => {
+ render();
+ expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-sm');
+});
+
+test('Test md orientation', () => {
+ render();
+ expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical-on-md');
+});
+
+test('Test lg orientation', () => {
+ render();
+ expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-lg');
});
-test('vertical divider', () => {
- const { asFragment } = render(
-
- first item
+test('Test xl orientation', () => {
+ render();
+ expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical-on-xl');
+});
+
+test('Test 2xl orientation', () => {
+ render();
+ expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-2xl');
+});
+
+test('Test default inset', () => {
+ render();
+ expect(screen.getByRole('separator')).toHaveClass('pf-m-inset-none');
+});
+
+test(`Test all insets`, () => {
+ const insetValues = Object.values([
+ 'insetNone',
+ 'insetXs',
+ 'insetSm',
+ 'insetMd',
+ 'insetLg',
+ 'insetXl',
+ 'inset2xl',
+ 'inset3xl'
+ ] as ['insetNone', 'insetXs', 'insetSm', 'insetMd', 'insetLg', 'insetXl', 'inset2xl', 'inset3xl']);
+
+ insetValues.forEach((insetValue) => {
+
+ const modifiers = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
+
+ const classValue = modifiers.forEach((modifier, index) => {
+ const smClass = `pf-m-inset-${modifier}-on-sm`;
+ const mdClass = `pf-m-inset-${modifier}-on-md`;
+ const lgClass = `pf-m-inset-${modifier}-on-lg`;
+ const xlClass = `pf-m-inset-${modifier}-on-xl`;
+ const xl2Class = `pf-m-inset-${modifier}-on-2xl`;
+ });
+
+ render(
- second item
-
- );
+ );
+ });
+ const modifiers = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
+
+ const classValue = modifiers.forEach((modifier, index) => {
+ const smClass = `pf-m-inset-${modifier}-on-sm`;
+ const mdClass = `pf-m-inset-${modifier}-on-md`;
+ const lgClass = `pf-m-inset-${modifier}-on-lg`;
+ const xlClass = `pf-m-inset-${modifier}-on-xl`;
+ const xl2Class = `pf-m-inset-${modifier}-on-2xl`;
+
+ expect(screen.getAllByRole('separator')[index]).toHaveClass(smClass, mdClass, lgClass, xlClass, xl2Class);
+ });
+});
+
+test('Matches the snapshot', () => {
+ const { asFragment } = render();
expect(asFragment()).toMatchSnapshot();
});
diff --git a/packages/react-core/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap b/packages/react-core/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap
index 03b490d6b5b..1821213154b 100644
--- a/packages/react-core/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap
+++ b/packages/react-core/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap
@@ -1,49 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`divider using div 1`] = `
-
-
-
-`;
-
-exports[`divider using hr 1`] = `
+exports[`Matches the snapshot 1`] = `
`;
-
-exports[`divider using li 1`] = `
-
-
-
-`;
-
-exports[`vertical divider 1`] = `
-
-
-
- first item
-
-
-
- second item
-
-
-
-`;