Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 63c1c63

Browse files
Made use of json schema faker, jsf, to generate test data based on a schema file and referenced the generated data in the users page
1 parent 234abba commit 63c1c63

File tree

8 files changed

+137
-6
lines changed

8 files changed

+137
-6
lines changed

‎README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -906,6 +906,49 @@ getUsers().then(result => {
906906
});
907907
```
908908

909+
### Selective Polyfilling with Pollyfill.io
910+
911+
For example, we can use Polyfill.io to *only* polyfill FetchAPI:
912+
913+
```html
914+
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=fetch"></script>
915+
```
916+
917+
### Mocking HTTP
918+
919+
- Unit Testing
920+
- Instant Response
921+
- Keep working when service are down
922+
- Rapid prototyping
923+
- avoid inter-team bottlenecks
924+
- Work offline
925+
926+
#### Mocking Libraries
927+
928+
- ##### Nock
929+
930+
- ##### Static JSON
931+
932+
- ##### Create development webserver
933+
934+
- ###### api-mock
935+
936+
- ###### JSON Server
937+
938+
- ###### JSON Schema Faker (author's choice)
939+
940+
- ###### Browsersync or Express
941+
942+
#### Plan
943+
944+
- Declare our schema via JSON Schema Faker
945+
- Generate Random Data
946+
- faker.js
947+
- chance.js
948+
- randexp.js
949+
- Serve Data via API
950+
- JSON Server
951+
909952

910953

911954
## Bibliography

‎buildScripts/generateMockData.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import jsf from 'json-schema-faker';
2+
import {schema} from './mockDataSchema.js';
3+
import fs from 'fs';
4+
import chalk from 'chalk';
5+
6+
/* eslint-disable no-console */
7+
8+
const json = JSON.stringify(jsf(schema));
9+
10+
fs.writeFile("./src/api/db.json", json, function(error) {
11+
if(error) {
12+
return console.log(chalk.red(error));
13+
} else {
14+
console.log(chalk.green("Mock data generated."));
15+
}
16+
});

‎buildScripts/mockDataSchema.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export const schema = {
2+
"type": "object",
3+
"properties": {
4+
"users": {
5+
"type": "array",
6+
"minItems": 3,
7+
"maxItems": 5,
8+
"items": {
9+
"type": "object",
10+
"properties": {
11+
"id": {
12+
"type": "number",
13+
"unique": true,
14+
"minimum": 1
15+
},
16+
"firstName": {
17+
"type": "string",
18+
"faker": "name.firstName"
19+
},
20+
"lastName": {
21+
"type": "string",
22+
"faker": "name.lastName"
23+
},
24+
"email": {
25+
"type": "string",
26+
"faker": "internet.email"
27+
}
28+
},
29+
required: ['id', 'firstName', 'lastName', 'email']
30+
}
31+
}
32+
},
33+
required: ['users']
34+
};

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@
44
"description": "JavaScript development environment Pluralsight course by Cory House",
55
"scripts": {
66
"prestart": "babel-node buildScripts/startMessage.js",
7-
"start":"npm-run-all --parallel security-check open:src lint:watch test:watch",
7+
"start":"npm-run-all --parallel security-check open:src lint:watch test:watch start-mockapi",
88
"open:src": "babel-node buildScripts/srcServer.js",
99
"lint": "esw webpack.config.* src buildScripts --color",
1010
"lint:watch": "npm run lint -- --watch",
1111
"security-check": "nsp check",
1212
"localtunnel": "lt --port 3000 --subdomain kevin",
1313
"share": "npm-run-all --parallel open:src localtunnel",
1414
"test": "mocha --reporter progress buildScripts/testSetup.js \"src/**/*.test.js\"",
15-
"test:watch": "npm test -- --watch"
15+
"test:watch": "npm test -- --watch",
16+
"generate-mock-data": "babel-node buildScripts/generateMockData",
17+
"prestart-mockapi": "npm run generate-mock-data",
18+
"start-mockapi": "json-server --watch src/api/db.json --port 3001"
1619
},
1720
"author": "Cory House",
1821
"license": "MIT",

‎src/api/baseUrl.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default function getBaseUrl() {
2+
const inDevelopment = window.location.hostname === 'localhost';
3+
4+
return inDevelopment ? 'http://localhost:3001/' : '/';
5+
}

‎src/api/db.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"users":[{"id":26945688,"firstName":"Darien","lastName":"Powlowski","email":"Marques_Mohr@hotmail.com"},{"id":20204492,"firstName":"Kendra","lastName":"Ratke","email":"Vivianne.Eichmann48@hotmail.com"},{"id":11114930,"firstName":"Bertha","lastName":"Schulist","email":"Jessika25@gmail.com"},{"id":86531869,"firstName":"Araceli","lastName":"Koss","email":"Ricardo60@yahoo.com"}]}

‎src/api/userApi.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
11
import 'whatwg-fetch';
2+
import getBaseUrl from './baseUrl';
3+
4+
const baseUrl = getBaseUrl();
25

36
/* eslint-disable no-console */
47

58
export function getUsers() {
69
return get('users');
710
}
811

12+
export function deleteUser(id) {
13+
return del(`users/${id}`);
14+
}
15+
916
function get(url) {
10-
return fetch(url).then(onSuccess, onError);
17+
return fetch(baseUrl + url).then(onSuccess, onError);
18+
}
19+
20+
function del(url) {
21+
const request = new Request(baseUrl + url, {
22+
method: 'DELETE'
23+
});
24+
25+
return fetch(request).then(onSuccess, onError);
1126
}
1227

1328
function onSuccess(response) {

‎src/index.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import './index.css';
2-
import { getUsers } from './api/userApi';
2+
import { getUsers,deleteUser } from './api/userApi';
33

44
getUsers().then(result => {
55
let usersBody = "";
@@ -12,7 +12,21 @@ getUsers().then(result => {
1212
<div id="lastName">${user.lastName}</div>
1313
<div id="email">${user.email}</div>
1414
</div>`
15-
});
15+
});
1616

17-
global.document.getElementById('users').outerHTML = usersBody;
17+
global.document.getElementById('users').outerHTML = usersBody;
18+
19+
const deleteLinks = global.document.getElementsByClassName('deleteUser');
20+
21+
Array.from(deleteLinks, link => {
22+
link.onclick = function (event) {
23+
event.preventDefault();
24+
25+
const element = event.target;
26+
deleteUser(element.attributes["data-id"].value);
27+
28+
const row = element.parentNode.parentNode;
29+
row.parentNode.removeChild(row);
30+
};
31+
});
1832
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /