Add tests for Feedback component

Author: timngyn-amzn

jest.setup.js

@@ -0,0 +1,2 @@
+// Setup file to extend jest-dom, referenced in packages.json under "jest"
+import '@testing-library/jest-dom/extend-expect';

package.json

@@ -55,6 +55,9 @@
     "@stencil/eslint-plugin": "^0.2.1",
     "@stencil/router": "^1.0.1",
     "@stencil/sass": "^1.3.1",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
     "@types/fs-extra": "^9.0.1",
     "@types/jest": "^26.0.19",
     "@types/node": "^12.12.9",
@@ -94,12 +97,22 @@
       "<rootDir>/src"
     ],
     "transform": {
-      "^.+\\.(ts|tsx)$": "ts-jest"
+      "^.+\\.(ts|tsx|js)$": [
+        "babel-jest",
+        {
+          "presets": [
+            "next/babel"
+          ]
+        }
+      ]
     },
     "testPathIgnorePatterns": [
       "capi",
       ".next",
       "client"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
     ]
   },
   "scripts": {

src/components/Feedback/__tests__/index.test.tsx

@@ -0,0 +1,74 @@
+import Feedback from '../index';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
+
+jest.mock('@aws-amplify/api', () => ({
+  API: {
+    post: (apiName, path, init) => {
+      return Promise.resolve('success');
+    }
+  }
+}));
+
+describe('Feedback', () => {
+  it('should render component with thumbs up and thumbs down button', () => {
+    const component = <Feedback />;
+
+    render(component);
+
+    const thumbsUp = screen.getByText('Yes');
+    const thumbsDown = screen.getByText('No');
+
+    expect(thumbsUp).toBeInTheDocument();
+    expect(thumbsDown).toBeInTheDocument();
+  });
+
+  it('should hide buttons after user clicks Yes button', async () => {
+    const component = <Feedback />;
+
+    render(component);
+
+    const thumbsUp = screen.getByText('Yes');
+    const thumbsDown = screen.getByText('No');
+
+    expect(thumbsUp).toBeInTheDocument();
+    expect(thumbsDown).toBeInTheDocument();
+
+    await userEvent.click(thumbsUp);
+
+    await waitFor(() => {
+      expect(thumbsUp).not.toBeInTheDocument();
+      expect(thumbsDown).not.toBeInTheDocument();
+    });
+  });
+
+  it('should hide buttons after user clicks No button', async () => {
+    const component = <Feedback/>;
+
+    render(component);
+
+    const thumbsUp = screen.getByText('Yes');
+    const thumbsDown = screen.getByText('No');
+
+    expect(thumbsUp).toBeInTheDocument();
+    expect(thumbsDown).toBeInTheDocument();
+
+    await userEvent.click(thumbsDown);
+
+    await waitFor(() => {
+      expect(thumbsUp).not.toBeInTheDocument();
+      expect(thumbsDown).not.toBeInTheDocument();
+    });
+  });
+});

src/components/Feedback/index.tsx

@@ -1,4 +1,5 @@
-import Amplify, { API } from 'aws-amplify';
+import Amplify from '@aws-amplify/core';
+import { API } from '@aws-amplify/api';
 import { useState } from 'react';
 import { FeedbackStyle, VoteButtonStyle, VoteButtonDivStyle } from './styles';
 import { useRouter } from 'next/router';
@@ -23,6 +24,8 @@ export default function Feedback() {
   const [state, setState] = useState<FeedbackState>(FeedbackState.START);
   const [feedbackId, setFeedbackId] = useState(undefined);
   const router = useRouter();
+  const feedbackQuestion = 'Was this page helpful?';
+  const feedbackAppreciation = 'Thank you for your feedback!';
 
   useEffect(() => {
     // UUID of feedback if it exists.
@@ -73,7 +76,7 @@ export default function Feedback() {
     <FeedbackStyle>
       {state === FeedbackState.START ? (
         <>
-          <p>Was this page helpful?</p>
+          <p>{feedbackQuestion}</p>
           <VoteButtonDivStyle>
             <VoteButtonStyle onClick={() => submitVote(true)}>
               <img src="/assets/thumbs-up.svg" alt="Thumbs up" />
@@ -86,7 +89,7 @@ export default function Feedback() {
           </VoteButtonDivStyle>
         </>
       ) : (
-        <p>Thank you for your feedback!</p>
+        <p>{feedbackAppreciation}</p>
       )}
     </FeedbackStyle>
   );