Initial new tests for components

This commit is contained in:
Abhishek Gahlot 2020-07-27 14:09:33 +05:30
parent 1f172b8173
commit 0c80f84794
12 changed files with 1215 additions and 101 deletions

View File

@ -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();
});

View File

@ -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()
})

View File

@ -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();
});

View File

@ -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()
})

View File

@ -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()
})

View File

@ -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();
});

View File

@ -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>
`;

View File

@ -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>
`;

View File

@ -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();
});

View File

@ -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>

View File

@ -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",

1032
yarn.lock

File diff suppressed because it is too large Load Diff