Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

/と/diariesにテストを追加する #5

Merged
merged 10 commits into from Nov 5, 2019
@@ -0,0 +1,5 @@
root = true

[*.{ts,tsx}]
quote_type = single
max_line_length = 120
@@ -4,3 +4,4 @@

/node_modules
/static
/.vscode
@@ -0,0 +1,14 @@
module.exports = {
preset: "ts-jest",
verbose: true,
roots: ["<rootDir>/ui/src"],
transform: {
"^.+\\.tsx?$": "ts-jest"
},
setupFilesAfterEnv: ["<rootDir>/ui/src/setupTests.ts"],
globals: {
"ts-jest": {
tsConfig: "ui/tsconfig.json"
}
}
};
@@ -26,13 +26,19 @@
"react-router-dom": "^5.1.2"
},
"devDependencies": {
"@types/jest": "^24.0.19",
"@apollo/react-testing": "^3.1.3",
"@testing-library/react": "^9.3.2",
"@types/enzyme": "^3.10.3",
"@types/enzyme-adapter-react-16": "^1.0.5",
"@types/jest": "^24.0.21",
"@types/react": "^16.9.9",
"@types/react-dom": "^16.0.6",
"@types/react-router": "^5.1.2",
"@types/react-router-dom": "^5.1.0",
"apollo": "^2.20.0",
"css-loader": "^3.2.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"file-loader": "^4.2.0",
"jest": "^24.9.0",
"mini-css-extract-plugin": "^0.8.0",
@@ -41,25 +47,8 @@
"ts-jest": "^24.1.0",
"ts-loader": "^6.2.0",
"typescript": "^3.6.4",
"waait": "^1.0.5",
"webpack": "^4.16.1",
"webpack-cli": "^3.0.8"
},
"jest": {
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(ts|tsx)$": "ts-jest"
},
"globals": {
"ts-jest": {
"tsConfigFile": "ui/tsconfig.json"
}
},
"testMatch": [
"**/*.(test|spec).+(ts|tsx|js)"
]
}
}
@@ -0,0 +1,59 @@
import React from 'react';
import wait from 'waait';
import { mount } from 'enzyme';
import { getMyDiariesQuery, Diaries } from '../diaries';
import { MockedProvider } from '@apollo/react-testing';
import { act } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';

describe('<Diaries />', () => {
it('正常にレンダリングできる', async () => {
const mocks = [
{
request: {
query: getMyDiariesQuery
},
result: {
data: {
visitor: {
id: '1',
name: 'shibayu36',
diaries: [
{
id: '2',
name: 'shibayu36の日記'
},
{
id: '3',
name: 'shibayu36のブログ'
}
]
}
}
}
}
];

const wrapper = mount(
<MockedProvider mocks={mocks} addTypename={false}>
<Router>
<Diaries />
</Router>
</MockedProvider>
);

await act(async () => {
await wait(0);
});
wrapper.update();

expect(wrapper.find('h1').text()).toBe('shibayu36のダイアリー一覧');

const diaries = wrapper.find('Link');
expect(diaries).toHaveLength(3);
expect(diaries.at(0).prop('to')).toBe('/diaries/2');
expect(diaries.at(0).find('p').text()).toBe('shibayu36の日記');
expect(diaries.at(1).prop('to')).toBe('/diaries/3');
expect(diaries.at(1).find('p').text()).toBe("shibayu36のブログ");
});
});
@@ -0,0 +1,10 @@
import React from "react";
import { shallow } from 'enzyme';
import { Index } from "../index";

describe('<Index />', () => {
it('renders correctly', () => {
const wrapper = shallow(<Index />);
expect(wrapper.find('[className="Index"]').text()).toBe('トップページ');
});
});
@@ -1,10 +1,10 @@
import React from "react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import { GetMyDiaries } from "./__generated__/GetMyDiaries"
import { Link } from "react-router-dom";
import React from 'react';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
import { GetMyDiaries } from './__generated__/GetMyDiaries';
import { Link } from 'react-router-dom';

const getMyDiariesQuery = gql`
export const getMyDiariesQuery = gql`
query GetMyDiaries {
visitor {
id
@@ -15,7 +15,7 @@ const getMyDiariesQuery = gql`
}
}
}
`
`;

export const Diaries: React.FunctionComponent = () => {
const { loading, error, data } = useQuery<GetMyDiaries>(getMyDiariesQuery);
@@ -25,18 +25,20 @@ export const Diaries: React.FunctionComponent = () => {

const diaries = data!.visitor.diaries;

return <div className="Diaries">
<h1>{data!.visitor.name}のダイアリー一覧</h1>
{diaries.map((diary: any) => (
<Link to={`/diaries/${diary.id}`}>
<div>
<p>{diary.name}</p>
</div>
</Link>
))}
return (
<div className="Diaries">
<h1>{data!.visitor.name}のダイアリー一覧</h1>
{diaries.map((diary: any) => (
<Link key={diary.id} to={`/diaries/${diary.id}`}>
<div>
<p>{diary.name}</p>
</div>
</Link>
))}

<div>
<Link to="/diaries/create">新しいダイアリーを作成</Link>
<div>
<Link to="/diaries/create">新しいダイアリーを作成</Link>
</div>
</div>
</div>;
}
);
};
@@ -2,6 +2,6 @@ import React from "react";

export const Index: React.FunctionComponent = () => (
<div className="Index">
aiu
トップページ
</div>
);
@@ -0,0 +1,4 @@
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

configure({ adapter: new Adapter() });
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.