Skip to content

Commit d51e060

Browse files
jsagardoyjsagardoy
committed
new versión for starting with base 12 test ctions with jest. Added Enzime configuration and identify-object-proxy to suport static assets (in this case image) for jest.
1 parent 734d1de commit d51e060

134 files changed

Lines changed: 1589 additions & 5050 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎13 TestAction/.babelrc‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"presets": [
3+
[
4+
"env",
5+
{
6+
"modules": false
7+
}
8+
]
9+
],
10+
"plugins": [
11+
"emotion"
12+
]
13+
}

‎13 TestAction/config/test/jest.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"rootDir": "../../",
3+
"testRegex": "\\.spec\\.tsx?$",
4+
"moduleFileExtensions": [
5+
"js",
6+
"jsx",
7+
"json",
8+
"ts",
9+
"tsx"
10+
],
11+
"setupFiles": [
12+
"<rootDir>/config/test/polyfills.js",
13+
"<rootDir>/config/test/setupTest.js"
14+
],
15+
"testURL": "http://localhost/",
16+
"transform": {
17+
".tsx?": "<rootDir>/node_modules/ts-jest/preprocessor.js"
18+
},
19+
"restoreMocks": true,
20+
"snapshotSerializers": [
21+
"enzyme-to-json/serializer"
22+
],
23+
"moduleNameMapper": {
24+
"\\.(jpg|jpeg|png|gif)$": "identity-obj-proxy"
25+
}
26+
27+
}

‎13 TestAction/config/test/polyfills.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Polyfill requestAnimationFrame required by React >=16.0.0
2+
require('raf/polyfill');
3+
global.fetch = require('jest-fetch-mock');

‎13 TestAction/config/test/setupTest.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const enzyme = require('enzyme');
2+
const Adapter = require('enzyme-adapter-react-16');
3+
4+
// Setup enzyme's react adapter
5+
enzyme.configure({ adapter: new Adapter() });

‎13 TestAction/package.json‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
{
2+
"name": "react-typescript-samples",
3+
"version": "1.0.0",
4+
"description": "Sample working with React,TypeScript and Webpack)",
5+
"main": "index.js",
6+
"jest": {
7+
"automock": false,
8+
"setupFiles": [
9+
"./config/test/polyfills.js"
10+
]
11+
},
12+
"scripts": {
13+
"start": "webpack-dev-server --mode development --inline --hot --open",
14+
"build": "webpack --mode development",
15+
"build:prod": "rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --config ./config/webpack/app/prod.js",
16+
"test": "jest -c ./config/test/jest.json --verbose",
17+
"test:watch": "jest -c ./config/test/jest.json --verbose --watchAll -i"
18+
},
19+
"author": "",
20+
"license": "ISC",
21+
"devDependencies": {
22+
"@types/deep-freeze": "^0.1.1",
23+
"@types/enzyme": "^3.1.13",
24+
"@types/jest": "^23.3.1",
25+
"@types/react": "^16.4.7",
26+
"@types/react-dom": "^16.0.6",
27+
"@types/react-redux": "^6.0.5",
28+
"@types/react-router-dom": "^4.3.0",
29+
"@types/redux-mock-store": "^1.0.0",
30+
"@types/toastr": "^2.1.35",
31+
"@types/typescript": "^2.0.0",
32+
"awesome-typescript-loader": "^5.2.0",
33+
"babel-core": "^6.26.3",
34+
"babel-preset-env": "^1.7.0",
35+
"css-loader": "^1.0.0",
36+
"deep-freeze": "0.0.1",
37+
"enzyme": "^3.3.0",
38+
"enzyme-adapter-react-16": "^1.1.1",
39+
"enzyme-to-json": "^3.3.4",
40+
"file-loader": "^1.1.11",
41+
"html-webpack-plugin": "^3.2.0",
42+
"identity-obj-proxy": "^3.0.0",
43+
"jest": "^23.4.2",
44+
"jest-fetch-mock": "^1.6.5",
45+
"mini-css-extract-plugin": "^0.4.1",
46+
"raf": "^3.4.0",
47+
"redux-mock-store": "1.4.0",
48+
"style-loader": "^0.21.0",
49+
"ts-jest": "^23.1.2",
50+
"url-loader": "^1.0.1",
51+
"webpack": "^4.16.2",
52+
"webpack-cli": "^3.1.0",
53+
"webpack-dev-server": "^3.1.5"
54+
},
55+
"dependencies": {
56+
"bootstrap": "^4.1.2",
57+
"lc-form-validation": "^1.0.0",
58+
"react": "^16.4.1",
59+
"react-dom": "^16.4.1",
60+
"react-promise-tracker": "^1.0.2",
61+
"react-redux": "^5.0.7",
62+
"react-router-dom": "^4.2.2",
63+
"react-router-redux": "^4.0.8",
64+
"react-spinners": "^0.3.3",
65+
"redux": "^4.0.0",
66+
"redux-thunk": "^2.3.0",
67+
"toastr": "^2.1.4",
68+
"typescript": "^3.0.1"
69+
}
70+
}

‎13 TestAction/src/api/member/index.ts‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { MemberEntity } from '../../model';
2+
import { members } from './mockData';
3+
4+
const baseURL = 'https://api.github.com/orgs/lemoncode';
5+
const userURL = 'https://api.github.com/user';
6+
let mockMembers = members;
7+
8+
const fetchMembers = (): Promise<MemberEntity[]> => {
9+
return Promise.resolve(mockMembers);
10+
};
11+
12+
const fetchMembersAsync = (): Promise<MemberEntity[]> => {
13+
const membersURL = `${baseURL}/members`;
14+
15+
return fetch(membersURL)
16+
.then((response) => (response.json()))
17+
.then(mapToMembers);
18+
};
19+
20+
const mapToMembers = (githubMembers: any[]): MemberEntity[] => {
21+
return githubMembers.map(mapToMember);
22+
};
23+
24+
const mapToMember = (githubMember): MemberEntity => {
25+
return {
26+
id: githubMember.id,
27+
login: githubMember.login,
28+
avatar_url: githubMember.avatar_url,
29+
};
30+
};
31+
32+
const saveMember = (member: MemberEntity): Promise<boolean> => {
33+
const index = mockMembers.findIndex(m => m.id === member.id);
34+
35+
index >= 0 ?
36+
updateMember(member, index) :
37+
insertMember(member);
38+
39+
return Promise.resolve(true);
40+
};
41+
42+
const updateMember = (member: MemberEntity, index: number) => {
43+
mockMembers = [
44+
...mockMembers.slice(0, index),
45+
member,
46+
...mockMembers.slice(index + 1),
47+
];
48+
};
49+
50+
const insertMember = (member: MemberEntity) => {
51+
member.id = mockMembers.length;
52+
53+
mockMembers = [
54+
...mockMembers,
55+
member,
56+
];
57+
};
58+
59+
const fetchMemberById = (id: number): Promise<MemberEntity> => {
60+
const member = mockMembers.find(m => m.id === id);
61+
62+
return Promise.resolve(member);
63+
}
64+
65+
const fetchMemberByIdAsync = (id: number): Promise<MemberEntity> => {
66+
const membersURL = `${userURL}/${id}`;
67+
return fetch(membersURL)
68+
.then((response) => (response.json()))
69+
.then(mapToMember);
70+
}
71+
72+
export const memberAPI = {
73+
fetchMembers,
74+
fetchMembersAsync,
75+
saveMember,
76+
fetchMemberById,
77+
fetchMemberByIdAsync,
78+
79+
};

13 TestComponent/src/api/memberMockData.ts renamed to 13 TestAction/src/api/member/mockData.ts

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import MemberEntity from './memberEntity'
1+
import { MemberEntity } from '../../model';
22

3-
var MembersMockData : Array<MemberEntity> =
4-
[
5-
{
3+
export const members: MemberEntity[] =
4+
[
5+
{
66
id: 1457912,
77
login: "brauliodiez",
88
avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3"
9-
},
9+
},
1010
{
1111
id: 4374977,
1212
login: "Nasdan",
1313
avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3"
1414
}
15-
];
16-
17-
export default MembersMockData;
15+
];

‎13 TestAction/src/app.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react';
2+
import { Header } from './components';
3+
import {LoadingSpinnerComponent} from '../src/common/components/spinner/loadingSpinner';
4+
5+
export const App: React.StatelessComponent<{}> = (props) => {
6+
return (
7+
<>
8+
<LoadingSpinnerComponent />
9+
<Header />
10+
</>
11+
12+
);
13+
}

‎13 TestAction/src/common/components/form/button.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from 'react';
2+
3+
interface Props {
4+
label: string;
5+
className: string;
6+
onClick: () => void;
7+
}
8+
9+
export const Button: React.StatelessComponent<Props> = (props) => {
10+
11+
return (
12+
<button type="button"
13+
className={props.className}
14+
onClick={props.onClick}
15+
>
16+
{props.label}
17+
</button>
18+
);
19+
};

‎13 TestAction/src/common/components/form/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './input';
2+
export * from './button';

0 commit comments

Comments
 (0)