Initial new tests for components

__tests__/components/search/Form.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import Form from '../../../components/search/Form';
+
+const useRouter = jest.spyOn(require('next/router'), 'useRouter');
+
+test('📸 of Form component with empty', () => {
+  useRouter.mockImplementationOnce(() => ({
+    query: { search: '', sort: '' },
+  }));
+
+  const { container } = render(<Form />);
+  expect(container).toMatchSnapshot();
+});
+
+test('📸 of Form component with query', () => {
+  useRouter.mockImplementationOnce(() => ({
+    query: { search: 'gdp', sort: '' },
+  }));
+
+  const { container } = render(<Form />);
+  expect(container).toMatchSnapshot();
+});

__tests__/components/search/Input.test.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import renderer from 'react-test-renderer'
-import Input from '../../../components/search/Input'
-
-test('📸 of Input component with empty', ()  => {
-  const query = {}
-  const tree = renderer.create(<Input query={query} />).toJSON()
-  expect(tree).toMatchSnapshot()
-})
-
-test('📸 of Input component with query', ()  => {
-  const query = {
-    q: 'gdp'
-  }
-  const tree = renderer.create(<Input query={query} />).toJSON()
-  expect(tree).toMatchSnapshot()
-})

__tests__/components/search/Item.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import Item from '../../../components/search/Item';
+
+test('📸 of Input component with empty', () => {
+  const fixture = {
+    name: 'qw',
+    title: '12',
+    organization: null,
+    __typename: 'Package',
+  };
+  const tree = renderer.create(<Item datapackage={fixture} key={0} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

__tests__/components/search/List.test.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import renderer from 'react-test-renderer'
-import List from '../../../components/search/List'
-
-test('📸 of Input component with empty', ()  => {
-  const datapackages = [
-    {
-      name: 'test',
-      title: 'Title',
-      description: 'A description.',
-      organization: {
-        title: 'test org',
-        name: 'test-org'
-      }
-    }
-  ]
-  const tree = renderer.create(<List datapackages={datapackages} />).toJSON()
-  expect(tree).toMatchSnapshot()
-})

__tests__/components/search/Sort.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import renderer from 'react-test-renderer'
-import Sort from '../../../components/search/Sort'
-
-test('📸 of Input component with empty', ()  => {
-  const tree = renderer.create(<Sort />).toJSON()
-  expect(tree).toMatchSnapshot()
-})

__tests__/components/search/Total.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import renderer from 'react-test-renderer';
-import Total from '../../../components/search/Total';
-
-test('📸 of Total component', () => {
-  const tree = renderer.create(<Total total={2} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});

__tests__/components/search/__snapshots__/Form.test.tsx.snap

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`📸 of Form component with empty 1`] = `
+<div>
+  <form
+    class="items-center"
+  >
+    <div
+      class="flex"
+    >
+      <input
+        aria-label="Search"
+        class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
+        name="q"
+        placeholder="Search"
+        type="text"
+        value=""
+      />
+      <button
+        class="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
+      >
+        Search
+      </button>
+    </div>
+    <div
+      class="inline-block my-6 float-right"
+    >
+      <label
+        for="field-order-by"
+      >
+        Order by:
+      </label>
+      <select
+        class="bg-white"
+        id="field-order-by"
+        name="sort"
+      >
+        <option
+          value="score:desc"
+        >
+          Relevance
+        </option>
+        <option
+          value="title_string:asc"
+        >
+          Name Ascending
+        </option>
+        <option
+          value="title_string:desc"
+        >
+          Name Descending
+        </option>
+        <option
+          value="metadata_modified:desc"
+        >
+          Last Modified
+        </option>
+        <option
+          value="views_recent:desc"
+        >
+          Popular
+        </option>
+      </select>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`📸 of Form component with query 1`] = `
+<div>
+  <form
+    class="items-center"
+  >
+    <div
+      class="flex"
+    >
+      <input
+        aria-label="Search"
+        class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
+        name="q"
+        placeholder="Search"
+        type="text"
+        value=""
+      />
+      <button
+        class="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
+      >
+        Search
+      </button>
+    </div>
+    <div
+      class="inline-block my-6 float-right"
+    >
+      <label
+        for="field-order-by"
+      >
+        Order by:
+      </label>
+      <select
+        class="bg-white"
+        id="field-order-by"
+        name="sort"
+      >
+        <option
+          value="score:desc"
+        >
+          Relevance
+        </option>
+        <option
+          value="title_string:asc"
+        >
+          Name Ascending
+        </option>
+        <option
+          value="title_string:desc"
+        >
+          Name Descending
+        </option>
+        <option
+          value="metadata_modified:desc"
+        >
+          Last Modified
+        </option>
+        <option
+          value="views_recent:desc"
+        >
+          Popular
+        </option>
+      </select>
+    </div>
+  </form>
+</div>
+`;

__tests__/components/search/__snapshots__/Item.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`📸 of Input component with empty 1`] = `
+<div
+  className="mb-6"
+>
+  <h3
+    className="text-xl font-semibold"
+  >
+    <a
+      className="text-primary"
+      href="/@dataset/qw"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+    >
+      12
+    </a>
+  </h3>
+  <a
+    className="text-gray-500 block mt-1"
+    href="/@dataset"
+    onClick={[Function]}
+    onMouseEnter={[Function]}
+  >
+    dataset
+  </a>
+  <div
+    className="leading-relaxed mt-2"
+  />
+</div>
+`;

__tests__/pages/index.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import renderer from 'react-test-renderer';
-import Index from '../../pages/index';
-
-test('📸 of Home page', () => {
-  const tree = renderer.create(<Index />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-
-test('renders text from hero section', () => {
-  const { getByText } = render(<Index />);
-  const linkElement = getByText(/Find, Share and Publish/);
-  expect(linkElement).toBeInTheDocument();
-});

components/search/List.tsx

@@ -32,7 +32,6 @@ export default function List({ variables }) {
 
   if (error) return <ErrorMessage message="Error loading search results." />;
   if (loading) return <div>Loading</div>;
-
   const { result } = data.search;
   return (
     <ul>

package.json

@@ -16,12 +16,16 @@
     "pre-commit": "echo 'formating your changes.....' && prettier --single-quote --write"
   },
   "dependencies": {
+    "@apollo/client": "^3.0.2",
     "@apollo/react-hooks": "^3.1.5",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
     "apollo-link-rest": "0.7.3",
+    "apollo-server-testing": "^2.16.0",
     "bytes": "^3.1.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-15": "^1.4.1",
     "graphql": "^15.1.0",
     "graphql-anywhere": "^4.2.7",
     "graphql-tag": "^2.10.3",
@@ -30,7 +34,8 @@
     "next": "9.4.2",
     "qs": "^6.9.4",
     "react": "^16.13.1",
-    "react-dom": "16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router": "^5.2.0",
     "slugify": "^1.4.0"
   },
   "devDependencies": {
@@ -42,7 +47,7 @@
     "babel-plugin-graphql-tag": "^2.5.0",
     "cypress": "^4.8.0",
     "husky": ">=4",
-    "jest": "^26.0.1",
+    "jest": "^26.1.0",
     "lint-staged": ">=10",
     "nock": "^12.0.3",
     "npm-run-all": "^4.1.5",