Update Chirp spec to mock the HTTP request

buildkite · Apr 26, 2021 · 6a4b385 · 6a4b385
1 parent ce299d4
commit 6a4b385
Show file tree

Hide file tree

Showing 5 changed files with 336 additions and 1 deletion.
diff --git a/app/javascript/components/Chirp.js b/app/javascript/components/Chirp.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import document from 'global/document';
 
 import UserLink from './UserLink';
 import RelativeDateTime from './RelativeDateTime';
@@ -71,7 +72,6 @@ export default class Chirp extends React.PureComponent {
             return response.json();
           }
           this.setState({ liking: false });
-
         })
         .then((chirp) => {
           this.setState({

diff --git a/app/javascript/components/Chirp.spec.js b/app/javascript/components/Chirp.spec.js
@@ -1,12 +1,23 @@
 /* eslint-env jest */
 
+import { enableFetchMocks } from 'jest-fetch-mock'
+
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Chirp from './Chirp';
 
 // RelativeDateTime changes based on the current time,
 // mock it here and we'll test that in its own specs.
 jest.mock('./RelativeDateTime', () => 'RelativeDateTime');
+jest.mock('global/document', () => ({
+  querySelector(selector) {
+    if (selector === 'meta[name="csrf-token"]') {
+      return { content: 'b5bb9d8014a0f9b1d61e21e796d78dccdf1352f23cd32812f4850b878ae4944c' };
+    } else {
+      throw new Error('Unexpected queryselector in mocking area');
+    }
+  }
+}));
 
 describe('mention tracking', () => {
   it('links to mentioned users', () => {
@@ -62,3 +73,88 @@ describe('mention tracking', () => {
     expect(tree).toMatchSnapshot();
   });
 });
+
+describe('Like button', () => {
+  beforeEach(() => {
+    enableFetchMocks();
+  });
+
+  it('sends a like request to the API', () => {
+    fetch.mockResponse((request) => (
+      request.url === '/chirps/1/like.json'
+        ? (
+          Promise.resolve(JSON.stringify({
+            id: 1,
+            author: { id: 1,
+              name: "alice",
+              url: "/users/1" },
+            content: "hey @bob @bob @carol @bob @bob",
+            created_at: "2021-04-22T01:08:10Z",
+            mentions: [
+              { id: 2,
+                name: "bob",
+                url: "/users/2" },
+              { id: 3,
+                name: "carol",
+                url: "/users/3" }
+            ],
+            updated_at: "2021-04-22T01:08:10Z",
+            likes_count: 1,
+            liked: true,
+            like_url: "/chirps/1/like"
+          }))
+        )
+        : Promise.reject(new Error('Unexpected URL'))
+    ));
+
+    const component = renderer.create(
+      <Chirp
+        chirp={{
+          id: 1,
+          author: { id: 1,
+            name: "alice",
+            url: "/users/1" },
+          content: "hey @bob @bob @carol @bob @bob",
+          created_at: "2021-04-22T01:08:10Z",
+          mentions: [
+            { id: 2,
+              name: "bob",
+              url: "/users/2" },
+            { id: 3,
+              name: "carol",
+              url: "/users/3" }
+          ],
+          updated_at: "2021-04-22T01:08:10Z",
+          likes_count: 0,
+          liked: false,
+          like_url: "/chirps/1/like"
+        }}
+      />
+    );
+
+    const treeBefore = component.toJSON();
+    expect(treeBefore).toMatchSnapshot();
+
+    const likeButton = component.root.find((node) => (
+      node.type === 'a' && node.props.href === '/chirps/1/like'
+    ));
+
+    // Simulate a click event
+    likeButton.props.onClick({ preventDefault: jest.fn() });
+
+    expect(fetch.mock.calls.length).toEqual(1);
+    expect(fetch.mock.calls[0][0]).toEqual('/chirps/1/like.json')
+
+    const treeAfter = component.toJSON();
+    expect(treeAfter).toMatchSnapshot();
+
+    // We need to give React a moment to re-render the component
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const treeAfterRefresh = component.toJSON();
+        expect(treeAfterRefresh).toMatchSnapshot();
+        resolve();
+      }, 0);
+    });
+  });
+});
diff --git a/app/javascript/components/__snapshots__/Chirp.spec.js.snap b/app/javascript/components/__snapshots__/Chirp.spec.js.snap
@@ -1,5 +1,197 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Like button sends a like request to the API 1`] = `
+<div>
+  <p>
+    hey 
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+     
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+     
+    <a
+      href="/users/3"
+    >
+      @
+      carol
+    </a>
+     
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+     
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+    
+  </p>
+  -- 
+  <a
+    href="/users/1"
+  >
+    @
+    alice
+  </a>
+  , 
+  <RelativeDateTime
+    value="2021-04-22T01:08:10Z"
+  />
+   • 
+  0 likes
+   • 
+  <a
+    disabled={false}
+    href="/chirps/1/like"
+    onClick={[Function]}
+  >
+    Like
+  </a>
+</div>
+`;
+
+exports[`Like button sends a like request to the API 2`] = `
+<div>
+  <p>
+    hey 
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+     
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+     
+    <a
+      href="/users/3"
+    >
+      @
+      carol
+    </a>
+     
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+     
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+    
+  </p>
+  -- 
+  <a
+    href="/users/1"
+  >
+    @
+    alice
+  </a>
+  , 
+  <RelativeDateTime
+    value="2021-04-22T01:08:10Z"
+  />
+   • 
+  0 likes
+   • 
+  <a
+    disabled={true}
+    href="/chirps/1/like"
+    onClick={[Function]}
+  >
+    Like
+  </a>
+</div>
+`;
+
+exports[`Like button sends a like request to the API 3`] = `
+<div>
+  <p>
+    hey 
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+     
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+     
+    <a
+      href="/users/3"
+    >
+      @
+      carol
+    </a>
+     
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+     
+    <a
+      href="/users/2"
+    >
+      @
+      bob
+    </a>
+    
+  </p>
+  -- 
+  <a
+    href="/users/1"
+  >
+    @
+    alice
+  </a>
+  , 
+  <RelativeDateTime
+    value="2021-04-22T01:08:10Z"
+  />
+   • 
+  1 like
+   • 
+  <a
+    disabled={false}
+    href="/chirps/1/like"
+    onClick={[Function]}
+  >
+    Unlike
+  </a>
+</div>
+`;
+
 exports[`mention tracking avoids things that look like email addresses 1`] = `
 <div>
   <p>

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "^5.0.0",
+    "global": "^4.4.0",
     "luxon": "^1.26.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
@@ -27,6 +28,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-react": "^7.23.2",
     "jest": "^26.6.3",
+    "jest-fetch-mock": "^3.0.3",
     "react-test-renderer": "^17.0.2",
     "webpack-dev-server": "^3.10.3"
   }