From a9adeee11f0717cb7e371a9585dcab6a03eb141d Mon Sep 17 00:00:00 2001
From: Karin Hendrikse <30577427+khendrikse@users.noreply.github.com>
Date: Mon, 7 Oct 2019 22:01:59 +0200
Subject: [PATCH] [SPEC] Add tests for sidebarUser component (#4301) [ci skip]

---
 .../__snapshots__/sidebarUser.test.jsx.snap   | 28 ++++++++++
 .../__tests__/sidebarUser.test.jsx            | 52 +++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 app/javascript/sidebar-widget/__tests__/__snapshots__/sidebarUser.test.jsx.snap
 create mode 100644 app/javascript/sidebar-widget/__tests__/sidebarUser.test.jsx

diff --git a/app/javascript/sidebar-widget/__tests__/__snapshots__/sidebarUser.test.jsx.snap b/app/javascript/sidebar-widget/__tests__/__snapshots__/sidebarUser.test.jsx.snap
new file mode 100644
index 000000000..3428e2202
--- /dev/null
+++ b/app/javascript/sidebar-widget/__tests__/__snapshots__/sidebarUser.test.jsx.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SidebarUser /> renders properly 1`] = `
+<div
+  class="widget-list-item__suggestions"
+>
+  <div
+    class="widget-list-item__content"
+  >
+    <a
+      href="/undefined"
+    >
+      <img
+        class="widget-list-item__profile-pic"
+      />
+    </a>
+    <button
+      class="widget-list-item__follow-button"
+      id="widget-list-item__follow-button-undefined"
+      onClick={[Function]}
+      type="button"
+    >
+      + FOLLOW
+    </button>
+  </div>
+  <hr />
+</div>
+`;
diff --git a/app/javascript/sidebar-widget/__tests__/sidebarUser.test.jsx b/app/javascript/sidebar-widget/__tests__/sidebarUser.test.jsx
new file mode 100644
index 000000000..fab804ee2
--- /dev/null
+++ b/app/javascript/sidebar-widget/__tests__/sidebarUser.test.jsx
@@ -0,0 +1,52 @@
+import { h } from 'preact';
+import { shallow } from 'preact-render-spy';
+import render from 'preact-render-to-json';
+import SidebarUser from '../sidebarUser';
+
+const user = {
+  id: 1234
+}
+const followUser = jest.fn();
+
+const renderedSideBar = props => shallow(
+  <SidebarUser
+    key={user.id}
+    user={user}
+    followUser={followUser}
+    index={0}
+    {...props}
+  />
+)
+
+describe('<SidebarUser />', () => {
+  it('renders properly', () => {
+    const tree = render(
+      <SidebarUser
+        key={user.id}
+        user={user}
+        followUser={followUser}
+        index={0}
+      />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('triggers the onClick', () => {
+    renderedSideBar().find('.widget-list-item__follow-button').simulate('click');
+    expect(followUser).toHaveBeenCalled();
+  });
+
+  it('shows if the user is followed or not', () => {
+    expect(renderedSideBar({ user: { following: true } }).contains('✓ FOLLOWING')).toBe(true);
+    expect(renderedSideBar({ user: { following: false } }).contains('+ FOLLOW')).toBe(true);
+  });
+
+  it('shows a <br /> if the index equals 2', () => {
+    expect(renderedSideBar({ index: 2 }).find(<br />).length > 0).toBe(true);
+    expect(renderedSideBar({ index: 2 }).find(<hr />).length > 0).toBe(false);
+  });
+
+  it('shows a <hr /> if the index differs from 2', () => {
+    expect(renderedSideBar({ index: 1 }).find(<hr />).length > 0).toBe(true);
+    expect(renderedSideBar({ index: 3 }).find(<br />).length > 0).toBe(false);
+  });
+});