Skip to content

Commit 8699dde

Browse files
sharifme04sharifme04
committed
personal
0 parents  commit 8699dde

40 files changed

+12908
-0
lines changed

‎.env.local

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
REACT_APP_TEMPLATES_API=https://private-anon-bba4a694a2-myego.apiary-mock.com/partner/59c25c00-78cd-11ea-ac9b-bf680aaa6d4b/template

‎.gitignore

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
17+
npm-debug.log*
18+
yarn-debug.log*
19+
yarn-error.log*

‎README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
`Here are the templates Overview and details page`
2+
3+
# Technologies I have used
4+
5+
React js, redux, redux-saga, axios and jest enzyme for testing.
6+
7+
To run this app, First install `node_modules` inside project directory by
8+
9+
### `yarn install`
10+
11+
Then run the app by following command
12+
13+
### `yarn start`
14+
15+
It will start on port 3000
16+
17+
Then Run the test by
18+
19+
### `yarn test`
20+
21+
Please see the `screenshot` to see the view
22+
![screenshot](screenshots/overview.PNG)
23+
![screenshot](screenshots/details.PNG)
24+
![screenshot](screenshots/error.PNG)

‎package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "myego",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^4.2.4",
7+
"@testing-library/react": "^9.3.2",
8+
"@testing-library/user-event": "^7.1.2",
9+
"axios": "^0.20.0",
10+
"bootstrap": "^4.5.2",
11+
"enzyme": "^3.11.0",
12+
"enzyme-adapter-react-16": "^1.15.3",
13+
"jest-enzyme": "^7.1.2",
14+
"prop-types": "^15.7.2",
15+
"react": "^16.13.1",
16+
"react-dom": "^16.13.1",
17+
"react-redux": "^7.2.1",
18+
"react-router-dom": "^5.2.0",
19+
"react-scripts": "3.4.3",
20+
"react-test-renderer": "^16.13.1",
21+
"redux": "^4.0.5",
22+
"redux-mock-store": "^1.5.4",
23+
"redux-saga": "^1.1.3"
24+
},
25+
"scripts": {
26+
"start": "react-scripts start",
27+
"build": "react-scripts build",
28+
"test": "react-scripts test",
29+
"eject": "react-scripts eject"
30+
},
31+
"eslintConfig": {
32+
"extends": "react-app"
33+
},
34+
"browserslist": {
35+
"production": [
36+
">0.2%",
37+
"not dead",
38+
"not op_mini all"
39+
],
40+
"development": [
41+
"last 1 chrome version",
42+
"last 1 firefox version",
43+
"last 1 safari version"
44+
]
45+
}
46+
}

‎public/favicon.ico

3.08 KB
Binary file not shown.

‎public/index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16+
-->
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>React App</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎public/logo192.png

5.22 KB
Loading

‎public/logo512.png

9.44 KB
Loading

‎public/manifest.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎public/robots.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎screenshots/details.PNG

31.6 KB
Loading

‎screenshots/error.PNG

9.34 KB
Loading

‎screenshots/overview.PNG

19.3 KB
Loading

‎src/App.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.spin-size {
2+
width: 7rem;
3+
height: 7rem;
4+
}

‎src/App.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { useEffect } from "react";
2+
import { useDispatch, useSelector } from "react-redux";
3+
import { Switch, Route } from "react-router-dom";
4+
import { templatesRequested } from "./app/actions/templates";
5+
import TemplateOverview from "./app/components/TemplateOverview";
6+
import TemplateDetails from "./app/components/TemplateDetails";
7+
import "./App.css";
8+
9+
function App() {
10+
const dispatch = useDispatch();
11+
const templates = useSelector((state) => state.templates);
12+
useEffect(() => {
13+
dispatch(templatesRequested());
14+
}, [dispatch]);
15+
16+
return (
17+
<div className="container mt-2">
18+
{templates?.error ? (
19+
<div className="alert alert-danger">
20+
<strong>Error!Reload again!! </strong>
21+
{templates?.error?.message}
22+
</div>
23+
) : (
24+
<Switch>
25+
<Route
26+
exact
27+
path="/"
28+
render={(props) => <TemplateOverview {...templates} {...props} />}
29+
/>
30+
<Route
31+
path="/:templateId"
32+
render={(props) => <TemplateDetails {...templates} {...props} />}
33+
/>
34+
</Switch>
35+
)}
36+
</div>
37+
);
38+
}
39+
40+
export default App;

‎src/App.test.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from "react";
2+
import { MemoryRouter } from "react-router-dom";
3+
import { Provider } from "react-redux";
4+
import configureMockStore from "redux-mock-store";
5+
import renderer from "react-test-renderer";
6+
import { shallow } from "enzyme";
7+
import App from "./App";
8+
9+
const mockStore = configureMockStore();
10+
const store = mockStore({});
11+
12+
const fakeTemplates = {
13+
isLoading: false,
14+
templates: {
15+
message: "get_templates_success",
16+
status: 0,
17+
_data: [
18+
{
19+
conditions: null,
20+
name: "basic_user",
21+
optionalDocuments: {
22+
assetType: {
23+
conditions: { topLevelDomain: ".edu" },
24+
values: { emailAddress: true },
25+
},
26+
},
27+
partnerId: "59c25c00-78cd-11ea-ac9b-bf680aaa6d4b",
28+
requiredDocuments: {
29+
assetType: {
30+
conditions: { topLevelDomain: ".edu" },
31+
values: { emailAddress: true },
32+
},
33+
},
34+
templateId: "487c5b70-9516-11ea-bbfa-ed3b490e43f0",
35+
type: "basic",
36+
validFrom: "04-05-2020",
37+
validTo: "21-05-2020",
38+
version: 2,
39+
},
40+
],
41+
},
42+
};
43+
44+
test("should render initial layout", () => {
45+
const component = shallow(
46+
<Provider store={store}>
47+
<MemoryRouter initialEntries={["/"]}>
48+
<App />
49+
</MemoryRouter>
50+
</Provider>
51+
);
52+
expect(component.exists()).toBe(true);
53+
});
54+
55+
test("snapshot renders", () => {
56+
const component = renderer.create(
57+
<Provider store={store}>
58+
<MemoryRouter initialEntries={["/"]}>
59+
<App />
60+
</MemoryRouter>
61+
</Provider>
62+
);
63+
let tree = component.toJSON();
64+
expect(tree).toMatchSnapshot();
65+
});
66+
67+
test("snapshot data renders", () => {
68+
const component = renderer.create(
69+
<Provider store={store}>
70+
<MemoryRouter initialEntries={["/"]}>
71+
<App {...fakeTemplates} />
72+
</MemoryRouter>
73+
</Provider>
74+
);
75+
let tree = component.toJSON();
76+
expect(tree).toMatchSnapshot();
77+
});

‎src/__snapshots__/App.test.js.snap

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`snapshot data renders 1`] = `
4+
<div
5+
className="container mt-2"
6+
>
7+
<div
8+
className="container"
9+
>
10+
<h2>
11+
Template Overview
12+
</h2>
13+
<hr />
14+
<div
15+
className="text-center"
16+
>
17+
ohh!!! no template available !!
18+
</div>
19+
</div>
20+
</div>
21+
`;
22+
23+
exports[`snapshot renders 1`] = `
24+
<div
25+
className="container mt-2"
26+
>
27+
<div
28+
className="container"
29+
>
30+
<h2>
31+
Template Overview
32+
</h2>
33+
<hr />
34+
<div
35+
className="text-center"
36+
>
37+
ohh!!! no template available !!
38+
</div>
39+
</div>
40+
</div>
41+
`;

‎src/app/actionType/templatesType.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const FETCH_TEMPLATES_REQUESTED = "FETCH_TEMPLATES_REQUESTED";
2+
export const FETCH_TEMPLATES_SUCCESS = "FETCH_TEMPLATES_SUCCESS";
3+
export const FETCH_TEMPLATES_FAILURE = "FETCH_TEMPLATES_FAILURE";
4+
5+
export const DELETE_TEMPLATE_REQUESTED = "DELETE_TEMPLATE_REQUESTED";
6+
export const DELETE_TEMPLATE_SUCCESS = "DELETE_TEMPLATE_SUCCESS";
7+
export const DELETE_TEMPLATE_FAILURE = "DELETE_TEMPLATE_FAILURE";

‎src/app/actions/__test__/templates.test.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { templatesSuccess } from "../templates";
2+
import { FETCH_TEMPLATES_SUCCESS } from "../../actionType/templatesType";
3+
4+
const templates = {
5+
isLoading: false,
6+
templates: {
7+
message: "get_templates_success",
8+
status: 0,
9+
_data: [
10+
{
11+
conditions: null,
12+
name: "basic_user",
13+
optionalDocuments: {
14+
assetType: {
15+
conditions: { topLevelDomain: ".edu" },
16+
values: { emailAddress: true },
17+
},
18+
},
19+
partnerId: "59c25c00-78cd-11ea-ac9b-bf680aaa6d4b",
20+
requiredDocuments: {
21+
assetType: {
22+
conditions: { topLevelDomain: ".edu" },
23+
values: { emailAddress: true },
24+
},
25+
},
26+
templateId: "487c5b70-9516-11ea-bbfa-ed3b490e43f0",
27+
type: "basic",
28+
validFrom: "04-05-2020",
29+
validTo: "21-05-2020",
30+
version: 2,
31+
},
32+
],
33+
},
34+
};
35+
describe("actions", () => {
36+
it("should create an action to add templates", () => {
37+
const expectedAction = {
38+
type: FETCH_TEMPLATES_SUCCESS,
39+
templates,
40+
};
41+
expect(templatesSuccess(templates)).toEqual(expectedAction);
42+
});
43+
});

0 commit comments

Comments
 (0)