From ec3fdd47ecb95e26e0cfd0ccdf0cae74de92b775 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 12 Dec 2019 22:34:41 +0000
Subject: [PATCH] fix(ui): add tests for CenteredMessage

---
 .../__snapshots__/index.test.js.snap          | 11 +++++
 .../Components/CenteredMessage/index.test.js  | 41 +++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap
 create mode 100644 ui/src/Components/CenteredMessage/index.test.js

diff --git a/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap b/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000..b6ed545f0
--- /dev/null
+++ b/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CenteredMessage /> matches snapshot 1`] = `
+"
+<h1 class=\\"display-1 text-placeholder screen-center\\">
+  <div>
+    Foo
+  </div>
+</h1>
+"
+`;
diff --git a/ui/src/Components/CenteredMessage/index.test.js b/ui/src/Components/CenteredMessage/index.test.js
new file mode 100644
index 000000000..fa3da4341
--- /dev/null
+++ b/ui/src/Components/CenteredMessage/index.test.js
@@ -0,0 +1,41 @@
+import React from "react";
+
+import { shallow } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { CenteredMessage } from ".";
+
+describe("<CenteredMessage />", () => {
+  const Message = () => <div>Foo</div>;
+
+  it("matches snapshot", () => {
+    const tree = shallow(
+      <CenteredMessage>
+        <Message />
+      </CenteredMessage>
+    );
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("uses 'display-1 text-placeholder' className by default", () => {
+    const tree = shallow(
+      <CenteredMessage>
+        <Message />
+      </CenteredMessage>
+    );
+    expect(toDiffableHtml(tree.html())).toMatch(/display-1 text-placeholder/);
+  });
+
+  it("uses custom className if passed", () => {
+    const tree = shallow(
+      <CenteredMessage className="bar-class">
+        <Message />
+      </CenteredMessage>
+    );
+    expect(toDiffableHtml(tree.html())).toMatch(/bar-class/);
+    expect(toDiffableHtml(tree.html())).not.toMatch(
+      /display-1 text-placeholder/
+    );
+  });
+});