From 5ffd10d516656c5865818b8e056459a59bd37e2a Mon Sep 17 00:00:00 2001
From: Kalin Krustev <kalin.krustev@gmail.com>
Date: Fri, 4 Nov 2022 19:58:51 +0200
Subject: [PATCH] test: switch to snapshot tests

---
 components/lib/divider/Divider.spec.js        |  92 ++------------
 .../__snapshots__/Divider.spec.js.snap        | 118 ++++++++++++++++++
 2 files changed, 131 insertions(+), 79 deletions(-)
 create mode 100644 components/lib/divider/__snapshots__/Divider.spec.js.snap

diff --git a/components/lib/divider/Divider.spec.js b/components/lib/divider/Divider.spec.js
index 574e374f3f..406bbb3628 100644
--- a/components/lib/divider/Divider.spec.js
+++ b/components/lib/divider/Divider.spec.js
@@ -2,84 +2,18 @@ import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { Divider } from './Divider';
 
-describe('Divider', () => {
-    test('when component has no properties it returns with default class', () => {
-        // Arrange
-        const { container } = render(<Divider />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-solid p-divider-left').length).toBe(1);
-    });
-    test('when layout and align as property it returns with class', () => {
-        // Arrange
-        const { container } = render(<Divider layout={'horizontal'} align={'left'} />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-left').length).toBe(1);
-    });
-    test('when layout and align as property it returns with class', () => {
-        // Arrange
-        const { container } = render(<Divider layout={'horizontal'} align={'right'} />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-right').length).toBe(1);
-    });
-    test('when layout and align as property it returns with class', () => {
-        // Arrange
-        const { container } = render(<Divider layout={'horizontal'} align={'center'} />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-center').length).toBe(1);
-    });
-
-    test('when tpe has not any property it returns with default class', () => {
-        // Arrange
-        const { container } = render(<Divider />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-solid').length).toBe(1);
-    });
-    test('when layout and align as property it returns with class', () => {
-        // Arrange
-        const { container } = render(<Divider layout={'vertical'} align={'center'} />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-vertical p-divider-center').length).toBe(1);
-    });
-    test('when layout and align as property it returns with class', () => {
-        // Arrange
-        const { container } = render(<Divider layout={'vertical'} align={'top'} />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-vertical p-divider-top').length).toBe(1);
-    });
-    test('when layout and align as property it returns with class', () => {
-        // Arrange
-        const { container } = render(<Divider layout={'vertical'} align={'bottom'} />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-vertical p-divider-bottom').length).toBe(1);
-    });
-
-    test('when type has no property it returns with the default class', () => {
-        // Arrange
-        const { container } = render(<Divider />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-solid').length).toBe(1);
-    });
-    test('when type is dashed it is styled as a dashed line', () => {
-        // Arrange
-        const { container } = render(<Divider type={'dashed'} />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-dashed').length).toBe(1);
-    });
-    test('when type is dotted is is styled as a dotted line', () => {
-        // Arrange
-        const { container } = render(<Divider type={'dotted'} />);
-
-        // Act + Assert
-        expect(container.getElementsByClassName('p-divider p-component p-divider-dotted').length).toBe(1);
+const snapshot = (props, name) => expect(render(<Divider {...props} />).container).toMatchSnapshot(name);
+
+describe('Divider Snapshot', () => {
+    test('check snapshots', () => {
+        snapshot({}, 'default');
+        snapshot({ layout: 'horizontal', align: 'left' }, 'horizontal left');
+        snapshot({ layout: 'horizontal', align: 'right' }, 'horizontal right');
+        snapshot({ layout: 'horizontal', align: 'center' }, 'horizontal center');
+        snapshot({ layout: 'vertical', align: 'center' }, 'vertical center');
+        snapshot({ layout: 'vertical', align: 'top' }, 'vertical top');
+        snapshot({ layout: 'vertical', align: 'bottom' }, 'vertical bottom');
+        snapshot({ type: 'dashed' }, 'dashed');
+        snapshot({ type: 'dotted' }, 'dotted');
     });
 });
diff --git a/components/lib/divider/__snapshots__/Divider.spec.js.snap b/components/lib/divider/__snapshots__/Divider.spec.js.snap
new file mode 100644
index 0000000000..7e148fb5ed
--- /dev/null
+++ b/components/lib/divider/__snapshots__/Divider.spec.js.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider Snapshot check snapshots: dashed 1`] = `
+<div>
+  <div
+    class="p-divider p-component p-divider-horizontal p-divider-dashed p-divider-left"
+    role="separator"
+  >
+    <div
+      class="p-divider-content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider Snapshot check snapshots: default 1`] = `
+<div>
+  <div
+    class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-left"
+    role="separator"
+  >
+    <div
+      class="p-divider-content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider Snapshot check snapshots: dotted 1`] = `
+<div>
+  <div
+    class="p-divider p-component p-divider-horizontal p-divider-dotted p-divider-left"
+    role="separator"
+  >
+    <div
+      class="p-divider-content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider Snapshot check snapshots: horizontal center 1`] = `
+<div>
+  <div
+    class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-center"
+    role="separator"
+  >
+    <div
+      class="p-divider-content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider Snapshot check snapshots: horizontal left 1`] = `
+<div>
+  <div
+    class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-left"
+    role="separator"
+  >
+    <div
+      class="p-divider-content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider Snapshot check snapshots: horizontal right 1`] = `
+<div>
+  <div
+    class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-right"
+    role="separator"
+  >
+    <div
+      class="p-divider-content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider Snapshot check snapshots: vertical bottom 1`] = `
+<div>
+  <div
+    class="p-divider p-component p-divider-vertical p-divider-solid p-divider-bottom"
+    role="separator"
+  >
+    <div
+      class="p-divider-content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider Snapshot check snapshots: vertical center 1`] = `
+<div>
+  <div
+    class="p-divider p-component p-divider-vertical p-divider-solid p-divider-center"
+    role="separator"
+  >
+    <div
+      class="p-divider-content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider Snapshot check snapshots: vertical top 1`] = `
+<div>
+  <div
+    class="p-divider p-component p-divider-vertical p-divider-solid p-divider-top"
+    role="separator"
+  >
+    <div
+      class="p-divider-content"
+    />
+  </div>
+</div>
+`;