more testing for connect components (forem#1046)

* adding more tests

- covers article.jsx and elements created from its props and state
- added png as static file that needs stubbing

* video + channelDetails test coverage

* chat + channels tests

* channels cc refactor

* yarn install

* update snapshot and string spacing

* chat.jsx test

mostly tests rendering elements
- does not test imported components, as those are already tested separately
- does not imported functions from actions or utils as those will be tested separately as well

* cleaning up

- mocked response with flush promises for state/component to reflect appropriate changes

* snapshot updates

app/javascript/chat/__mocks__/algoliasearchUsers.js

@@ -0,0 +1,42 @@
+global.document.head.innerHTML =
+  "<meta name='algolia-public-id' content='abc123' />" +
+  "<meta name='algolia-public-key' content='abc123' />" +
+  "<meta name='environment' content='test' />";
+
+const mockIndex = {
+  search: query =>
+    new Promise(resolve => {
+      process.nextTick(() => {
+        const searchResults = {
+          ma: {
+            hits: [
+              {
+                name: 'mat',
+                path: 'some_path',
+                title: 'some_title',
+                id: 'some_id',
+              },
+            ],
+            nbHits: 1,
+            page: 0,
+            nbPages: 1,
+            hitsPerPage: 10,
+            processingTimeMS: 1,
+            exhaustiveNbHits: true,
+            query: 'ma',
+            params:
+              'query=ma&hitsPerPage=10&filters=supported%3Atrue&restrictIndices=searchables_development%2CTag_development%2Cordered_articles_development%2Cordered_articles_by_published_at_development%2Cordered_articles_by_positive_reactions_count_development%2Cordered_comments_development',
+          },
+        };
+
+        const results = searchResults[query] || { hits: [] };
+
+        resolve(results);
+      });
+    }),
+};
+const client = {
+  initIndex: index => mockIndex, // eslint-ignore-line
+};
+
+export default jest.fn().mockImplementation((id, key) => client); // eslint-ignore-line

app/javascript/chat/__tests__/__snapshots__/alert.test.jsx.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Alert /> should render and test snapshot 1`] = `
+exports[`<Alert /> with hidden class should render and test snapshot 1`] = `
 <div
-  class="chatalert__default "
+  class="chatalert__default chatalert__default--hidden"
 >
   More new messages below
 </div>
 `;
 
-exports[`<Alert /> should render and test snapshot with hidden class 1`] = `
+exports[`<Alert /> without hidden class should render and test snapshot 1`] = `
 <div
-  class="chatalert__default chatalert__default--hidden"
+  class="chatalert__default "
 >
   More new messages below
 </div>

app/javascript/chat/__tests__/__snapshots__/article.test.jsx.snap

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Article /> should load article 1`] = `
+<div
+  class="activechatchannel__activeArticle"
+>
+  <div
+    class="activechatchannel__activeArticleDetails"
+  >
+    <a
+      href="/princesscarolyn/your-approval-means-nothing-to-me-42640"
+      target="_blank"
+    >
+      <span
+        class="activechatchannel__activeArticleDetailsPath"
+      >
+        /princesscarolyn/your-approval-means-nothing-to-me-42640
+      </span>
+      <img
+        src=""
+      />
+    </a>
+  </div>
+  <div
+    class="container"
+  >
+    <header>
+      <div
+        class="image image-final"
+        style={
+          Object {
+            "backgroundImage": "url(princess_carolyn_is_perfect.png",
+          }
+        }
+      />
+    </header>
+    <div
+      class="title"
+    >
+      <h1>
+        Your Approval Means Nothing to Me
+      </h1>
+      <h3>
+        <a
+          class="author"
+          data-content="/users/00001"
+          href="/princesscarolyn"
+        >
+          <img
+            alt="princesscarolyn"
+            class="profile-pic"
+            src="/princesscarolyn.png"
+          />
+          <span>
+            Princess Carolyn 
+          </span>
+          <span
+            class="published-at"
+          >
+             | July 30, 2014
+          </span>
+        </a>
+      </h3>
+    </div>
+    <div
+      class="body"
+    >
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "That woman can knock a drink back like a Kennedy at a wake for another Kennedy, but I'll be damned if she doesn't get s*** done!",
+          }
+        }
+      />
+    </div>
+  </div>
+  <div
+    class="activechatchannel__activeArticleActions"
+  >
+    <button
+      class="heart-reaction-button "
+      data-category="like"
+      onClick={[Function]}
+    >
+      <img
+        src=""
+      />
+    </button>
+    <button
+      class="unicorn-reaction-button "
+      data-category="unicorn"
+      onClick={[Function]}
+    >
+      <img
+        data-category="unicorn"
+        src=""
+      />
+    </button>
+    <button
+      class="readinglist-reaction-button "
+      data-category="readinglist"
+      onClick={[Function]}
+    >
+      <img
+        data-category="readinglist"
+        src=""
+      />
+    </button>
+  </div>
+</div>
+`;