Merge pull request #8 from alexanderjaye/test/client

Test/client
alexanderjshall · Jan 23, 2021 · 23fe542 · 23fe542
2 parents a7e7619 + e627b44
commit 23fe542
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 7 deletions.
diff --git a/client/techlog/src/Components/Search/SearchTags.js b/client/techlog/src/Components/Search/SearchTags.js
@@ -6,8 +6,8 @@ const SearchTags = ({tag, deleteTagHandler}) => {
 
   return (
     <div className="searchtag__frag">
-      <li className="searchtag__tag">#{tag}</li>
-      <button className="searchtag__btn" onClick={deleteTagHandler}></button>
+      <li className="searchtag__tag" onClick={deleteTagHandler}>#{tag}</li>
+      {/* <button className="searchtag__btn" onClick={deleteTagHandler}></button> */}
     </div>
   )
 }

diff --git a/client/techlog/src/Form/Form.js b/client/techlog/src/Form/Form.js
@@ -86,7 +86,6 @@ const Form = ( { formSubmit, formPatch, form, history } ) => {
   }
 
   const customTagHandler = (event) => {
-    console.log("tagInputRef: ",tagInputRef);
     if (tagInputRef.current.value < 1) return;
     event.preventDefault();
     if (formContent.searchTags) {
@@ -174,7 +173,7 @@ const Form = ( { formSubmit, formPatch, form, history } ) => {
       </div>
 
       <div className="report__steps">
-        <label>Steps</label>
+        <label htmlFor="add__step">Steps</label>
         <div className="report__steps__input">
           <input ref={stepInputRef} id="add__step" type="text"></input>
           <button onClick={addStepHandler}>ADD STEP</button>

diff --git a/client/techlog/src/Form/FormSearchTags.js b/client/techlog/src/Form/FormSearchTags.js
@@ -102,6 +102,7 @@ const FormSearchTags = (props) => {
 
       </ul>
       <div className="report__search-tags__input">
+        <label hidden={true} htmlFor="custom__tag__input">custom__tag__input</label>
         <input ref={tagInputRef} id="custom__tag__input" name="custom__tag" type="text"></input>
         <button onClick={customTagHandler}>ADD TAG</button>
       </div>

diff --git a/client/techlog/src/__tests__/NewReport.test.js b/client/techlog/src/__tests__/NewReport.test.js
@@ -9,11 +9,59 @@ import '@testing-library/jest-dom';
 
 describe ('New Report', () => {
 
-  it('Should render submit button on ‘new’ page', async () => {
+  beforeEach(() => {
     render(<MemoryRouter><NewReport/></MemoryRouter>);
-    // await screen.findByRole('button' { name: 'formSubmit' });
+  });
+
+  it('Should render submit button on ‘new’ page', async () => {
     expect(screen.getByRole('button', {name: 'SUBMIT'})).toBeInTheDocument();
   });
 
-})
+  it('Should render a tag to tag list', () => {
+    const testTag = 'testTag'
+    fireEvent.change(screen.getByLabelText('custom__tag__input'), {
+      target: { value: testTag }
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'ADD TAG'}));
+    expect(screen.getByText('#' + testTag)).toBeInTheDocument();
+  });
+
+  it('Should remove tag when clicked on', () => {
+    const testTag = 'removableTag'
+    fireEvent.change(screen.getByLabelText('custom__tag__input'), {
+      target: { value: testTag }
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'ADD TAG'}));
+    const screenTag = screen.getByText('#' + testTag)
+    fireEvent.click(screenTag);
+    expect(screenTag).not.toBeInTheDocument();
+  });
+
+  it('Should render a step to step list', () => {
+    const testStep = 'testStep'
+    fireEvent.change(screen.getByLabelText('Steps'), {
+      target: { value: testStep }
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'ADD STEP'}));
+    fireEvent.change(screen.getByLabelText('Steps'), {
+      target: { value: '' }
+    });
+    expect(screen.getByText(testStep)).toBeInTheDocument();
+  });
 
+  it('Should remove step from step list when clicked on', () => {
+    const testStep = 'removableStep';
+    fireEvent.change(screen.getByLabelText('Steps'), {
+      target: { value: testStep }
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'ADD STEP'}));
+    fireEvent.change(screen.getByLabelText('Steps'), {
+      target: { value: '' }
+    });
+    const screenStep = screen.getByText(testStep);
+    fireEvent.click(screenStep);
+    expect(screenStep).not.toBeInTheDocument();
+  });
+
+
+})
diff --git a/client/techlog/src/__tests__/SearchReport.test.js b/client/techlog/src/__tests__/SearchReport.test.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { screen, getByLabelText, render, fireEvent, getByRole, waitFor, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SearchList from '../Components/Search/SearchList';
+import SearchBar from '../Components/Search/SearchBar';
+
+describe('Search Reports', () => {
+
+  it('should render dummy data to item list', async () => {
+    const dummyReports = [
+      {
+        title: 'Report 1',
+        description: 'test test test',
+        tags: ['tag1', 'tag2'],
+        steps: ['step1', 'step2'],
+        images: [],
+        reportId: 12345678,
+        _id: '2345'
+      },
+      {
+        title: 'Report 2',
+        description: 'test test test',
+        tags: ['tag3', 'tag4'],
+        steps: ['step3', 'step4'],
+        images: [],
+        reportId: 12345679,
+        _id: '2346'
+      },
+    ];
+
+    jest.spyOn(global, "fetch").mockImplementation(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(dummyReports)
+      })
+    );
+
+    await act(async () => {
+      render(<MemoryRouter><SearchList/></MemoryRouter>);
+    });
+
+    expect(screen.getByText(dummyReports[0].title)).toBeInTheDocument();
+    expect(screen.getByText(dummyReports[1].title)).toBeInTheDocument();
+  });
+
+  it('Should render input search tag to tag list', async () => {
+    const dummyReports = [];
+
+    jest.spyOn(global, "fetch").mockImplementation(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(dummyReports)
+      })
+    );
+
+    await act(async () => {
+      render(<MemoryRouter><SearchList/></MemoryRouter>);
+    });
+
+    const testTag = 'testTag';
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: testTag }
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'ADD TAG'}));
+    expect(screen.getByText('#' + testTag)).toBeInTheDocument();
+
+  });
+
+
+  it('Should remove a tag when clicked on', async () => {
+    const dummyReports = [];
+
+    jest.spyOn(window, "fetch").mockImplementation(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(dummyReports)
+      })
+    );
+
+    await act(async () => {
+      render(<MemoryRouter><SearchList/></MemoryRouter>);
+    });
+
+    const testTag = 'testTag';
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: testTag }
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'ADD TAG'}));
+    const renderedTag = screen.getByText(/testTag/i);
+    fireEvent.click(renderedTag);
+    expect(renderedTag).not.toBeInTheDocument();
+
+  });
+
+});
+