Initial new tests for components
This commit is contained in:
parent
1f172b8173
commit
0c80f84794
24
__tests__/components/search/Form.test.tsx
Normal file
24
__tests__/components/search/Form.test.tsx
Normal 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();
|
||||
});
|
||||
@ -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()
|
||||
})
|
||||
15
__tests__/components/search/Item.test.tsx
Normal file
15
__tests__/components/search/Item.test.tsx
Normal 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();
|
||||
});
|
||||
@ -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()
|
||||
})
|
||||
@ -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()
|
||||
})
|
||||
@ -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();
|
||||
});
|
||||
133
__tests__/components/search/__snapshots__/Form.test.tsx.snap
Normal file
133
__tests__/components/search/__snapshots__/Form.test.tsx.snap
Normal 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>
|
||||
`;
|
||||
31
__tests__/components/search/__snapshots__/Item.test.tsx.snap
Normal file
31
__tests__/components/search/__snapshots__/Item.test.tsx.snap
Normal 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>
|
||||
`;
|
||||
@ -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();
|
||||
});
|
||||
@ -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>
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user