Skip to content

Commit fe9186e

Browse files
modularcodermodularcoder
committed
Setup mirage mocks framework
1 parent 510d7b5 commit fe9186e

9 files changed

Lines changed: 504 additions & 10 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"eslint-plugin-prettier": "^3.1.1",
5858
"fork-ts-checker-webpack-plugin": "^3.1.1",
5959
"gh-pages": "^2.2.0",
60+
"miragejs": "^0.1.38",
6061
"msw": "^0.15.4",
6162
"prettier": "1.18.2",
6263
"react-app-rewired": "^2.1.5",

‎src/_api/_mocks/_ref/organizationsMocksAxios.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { AxiosInstance } from 'axios'
22
import MockAdapter from 'axios-mock-adapter'
3-
import organizationsData from './../_data/organizationsData'
3+
import organizationsData from '../_data/organizationsData'
44

55
export default {
66
init(mock: MockAdapter, instance: AxiosInstance) {

‎src/_api/_mocksMirage/_data/notificationsData.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const notificationsData = {}
2+
3+
export default notificationsData

‎src/_api/_mocksMirage/_data/organizationsData.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import _keyBy from 'lodash/keyBy'
2+
import Organization from '../../_types/Organization'
3+
// import organizationsToUsersData from './organizationsToUsersData'
4+
5+
const list: Organization[] = [
6+
{
7+
id: 1,
8+
name: 'ModularCode',
9+
plan: {
10+
id: 'silver',
11+
name: 'Silver',
12+
},
13+
},
14+
{
15+
id: 2,
16+
name: 'Cool LLC',
17+
plan: {
18+
id: 'gold',
19+
name: 'Gold',
20+
},
21+
// organizationToUsers: organizationsToUsersData.byOrganizationId[2],
22+
},
23+
{
24+
id: 3,
25+
name: 'Other LLC',
26+
plan: {
27+
id: 'trial',
28+
name: 'Trial',
29+
},
30+
// organizationToUsers: organizationsToUsersData.byOrganizationId[3],
31+
},
32+
]
33+
34+
const byId: { [key: number]: Organization } = _keyBy(list, 'id')
35+
36+
const organizationsData = {
37+
list,
38+
byId,
39+
}
40+
41+
export default organizationsData

‎src/_api/_mocksMirage/_data/organizationsToUsersData.ts‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import _groupBy from 'lodash/groupBy'
2+
import OrganizationToUser from '../../_types/OrganizationToUser'
3+
4+
// import organizationsData from './organizationsData'
5+
// import usersData from './usersData'
6+
7+
const list: OrganizationToUser[] = [
8+
{
9+
id: 1,
10+
organizationId: 1,
11+
userId: 1,
12+
role: 'owner',
13+
// organization: organizationsData.byId[1],
14+
// user: usersData.byId[1],
15+
},
16+
{
17+
id: 2,
18+
organizationId: 1,
19+
userId: 2,
20+
role: 'admin',
21+
// organization: organizationsData.byId[1],
22+
// user: usersData.byId[2],
23+
},
24+
{
25+
id: 3,
26+
organizationId: 1,
27+
userId: 2,
28+
role: 'member',
29+
// organization: organizationsData.byId[1],
30+
// user: usersData.byId[2],
31+
},
32+
{
33+
id: 4,
34+
organizationId: 2,
35+
userId: 2,
36+
role: 'owner',
37+
// organization: organizationsData.byId[2],
38+
// user: usersData.byId[2],
39+
},
40+
{
41+
id: 5,
42+
organizationId: 3,
43+
userId: 3,
44+
role: 'owner',
45+
// organization: organizationsData.byId[3],
46+
// user: usersData.byId[3],
47+
},
48+
{
49+
id: 6,
50+
organizationId: 3,
51+
userId: 2,
52+
role: 'member',
53+
// organization: organizationsData.byId[3],
54+
// user: usersData.byId[2],
55+
},
56+
]
57+
58+
const byUserId = _groupBy(list, 'userId')
59+
const byOrganizationId = _groupBy(list, 'organizationId')
60+
61+
export default {
62+
list,
63+
byUserId,
64+
byOrganizationId,
65+
}

‎src/_api/_mocksMirage/_data/usersData.ts‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import _keyBy from 'lodash/keyBy'
2+
import moment from 'moment'
3+
import User from '../../_types/User'
4+
import organizationsToUsersData from './organizationsToUsersData'
5+
6+
const list: User[] = [
7+
{
8+
id: 1,
9+
firstName: 'Gevorg',
10+
lastName: 'H',
11+
username: 'johndoe1',
12+
email: 'john@doe.com',
13+
avatarUrl: 'https://avatars3.githubusercontent.com/u/3959008?v=3&s=40',
14+
userToOrganizations: organizationsToUsersData.byUserId[1],
15+
globalRole: 'admin',
16+
},
17+
{
18+
id: 2,
19+
firstName: 'Jay',
20+
lastName: 'Nickolson',
21+
username: null,
22+
email: 'example@gmail.com',
23+
avatarUrl:
24+
'https://tinyfac.es/data/avatars/475605E3-69C5-4D2B-8727-61B7BB8C4699-500w.jpeg',
25+
userToOrganizations: organizationsToUsersData.byUserId[2],
26+
},
27+
{
28+
id: 3,
29+
firstName: 'Ana',
30+
lastName: 'De Armas',
31+
username: null,
32+
email: 'Ana+De+Armas@example.com',
33+
avatarUrl:
34+
'https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NjYzMzE1MV5BMl5BanBnXkFtZTgwNTA4NDY4OTE@._V1_UX172_CR0,0,172,256_AL_.jpg',
35+
userToOrganizations: organizationsToUsersData.byUserId[3],
36+
},
37+
{
38+
id: 4,
39+
firstName: 'Armas',
40+
lastName: 'De Ana',
41+
username: null,
42+
email: 'Ana+De+Armas@example.com',
43+
avatarUrl:
44+
'https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NjYzMzE1MV5BMl5BanBnXkFtZTgwNTA4NDY4OTE@._V1_UX172_CR0,0,172,256_AL_.jpg',
45+
userToOrganizations: organizationsToUsersData.byUserId[4],
46+
},
47+
{
48+
id: 5,
49+
firstName: 'Sonequa',
50+
lastName: 'Martin-Green',
51+
email: 'Sonequa+Martin+Green@example.com',
52+
avatarUrl:
53+
'https://images-na.ssl-images-amazon.com/images/M/MV5BMTgxMTc1MTYzM15BMl5BanBnXkFtZTgwNzI5NjMwOTE@._V1_UY256_CR16,0,172,256_AL_.jpg',
54+
userToOrganizations: organizationsToUsersData.byUserId[5],
55+
},
56+
{
57+
id: 6,
58+
firstName: 'Gevorg',
59+
lastName: 'H',
60+
username: 'johndoe1',
61+
email: 'john@doe.com',
62+
avatarUrl: 'https://avatars3.githubusercontent.com/u/3959008?v=3&s=40',
63+
userToOrganizations: organizationsToUsersData.byUserId[1],
64+
globalRole: 'admin',
65+
},
66+
{
67+
id: 7,
68+
firstName: 'Jay',
69+
lastName: 'Nickolson',
70+
username: null,
71+
email: 'example@gmail.com',
72+
avatarUrl:
73+
'https://tinyfac.es/data/avatars/475605E3-69C5-4D2B-8727-61B7BB8C4699-500w.jpeg',
74+
userToOrganizations: organizationsToUsersData.byUserId[2],
75+
},
76+
{
77+
id: 8,
78+
firstName: 'Ana',
79+
lastName: 'De Armas',
80+
username: null,
81+
email: 'Ana+De+Armas@example.com',
82+
avatarUrl:
83+
'https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NjYzMzE1MV5BMl5BanBnXkFtZTgwNTA4NDY4OTE@._V1_UX172_CR0,0,172,256_AL_.jpg',
84+
userToOrganizations: organizationsToUsersData.byUserId[3],
85+
},
86+
{
87+
id: 9,
88+
firstName: 'Armas',
89+
lastName: 'De Ana',
90+
username: null,
91+
email: 'Ana+De+Armas@example.com',
92+
avatarUrl:
93+
'https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NjYzMzE1MV5BMl5BanBnXkFtZTgwNTA4NDY4OTE@._V1_UX172_CR0,0,172,256_AL_.jpg',
94+
userToOrganizations: organizationsToUsersData.byUserId[4],
95+
},
96+
{
97+
id: 10,
98+
firstName: 'Sonequa',
99+
lastName: 'Martin-Green',
100+
email: 'Sonequa+Martin+Green@example.com',
101+
avatarUrl:
102+
'https://images-na.ssl-images-amazon.com/images/M/MV5BMTgxMTc1MTYzM15BMl5BanBnXkFtZTgwNzI5NjMwOTE@._V1_UY256_CR16,0,172,256_AL_.jpg',
103+
userToOrganizations: organizationsToUsersData.byUserId[5],
104+
},
105+
{
106+
id: 11,
107+
firstName: 'Gevorg',
108+
lastName: 'H',
109+
username: 'johndoe1',
110+
email: 'john@doe.com',
111+
avatarUrl: 'https://avatars3.githubusercontent.com/u/3959008?v=3&s=40',
112+
userToOrganizations: organizationsToUsersData.byUserId[1],
113+
globalRole: 'admin',
114+
},
115+
{
116+
id: 12,
117+
firstName: 'Jay',
118+
lastName: 'Nickolson',
119+
username: null,
120+
email: 'example@gmail.com',
121+
avatarUrl:
122+
'https://tinyfac.es/data/avatars/475605E3-69C5-4D2B-8727-61B7BB8C4699-500w.jpeg',
123+
userToOrganizations: organizationsToUsersData.byUserId[2],
124+
},
125+
{
126+
id: 13,
127+
firstName: 'Ana',
128+
lastName: 'De Armas',
129+
username: null,
130+
email: 'Ana+De+Armas@example.com',
131+
avatarUrl:
132+
'https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NjYzMzE1MV5BMl5BanBnXkFtZTgwNTA4NDY4OTE@._V1_UX172_CR0,0,172,256_AL_.jpg',
133+
userToOrganizations: organizationsToUsersData.byUserId[3],
134+
},
135+
{
136+
id: 14,
137+
firstName: 'Armas',
138+
lastName: 'De Ana',
139+
username: null,
140+
email: 'Ana+De+Armas@example.com',
141+
avatarUrl:
142+
'https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NjYzMzE1MV5BMl5BanBnXkFtZTgwNTA4NDY4OTE@._V1_UX172_CR0,0,172,256_AL_.jpg',
143+
userToOrganizations: organizationsToUsersData.byUserId[4],
144+
},
145+
{
146+
id: 15,
147+
firstName: 'Sonequa',
148+
lastName: 'Martin-Green',
149+
email: 'Sonequa+Martin+Green@example.com',
150+
avatarUrl:
151+
'https://images-na.ssl-images-amazon.com/images/M/MV5BMTgxMTc1MTYzM15BMl5BanBnXkFtZTgwNzI5NjMwOTE@._V1_UY256_CR16,0,172,256_AL_.jpg',
152+
userToOrganizations: organizationsToUsersData.byUserId[5],
153+
},
154+
].map(item => {
155+
return {
156+
...item,
157+
createdAt: moment()
158+
.subtract(item.id, 'days')
159+
.format(),
160+
}
161+
})
162+
163+
const byId: { [key: number]: User } = _keyBy(list, 'id')
164+
165+
const usersData = {
166+
list,
167+
byId,
168+
current: byId[1],
169+
}
170+
171+
export default usersData

‎src/_api/_mocksMirage/index.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Server, Model } from 'miragejs'
2+
import config from '_config'
3+
import usersData from './_data/usersData'
4+
import organizationsData from './_data/organizationsData'
5+
6+
export function init({ environment }: { environment: 'development' }) {
7+
return new Server({
8+
environment,
9+
10+
models: {
11+
user: Model,
12+
organization: Model,
13+
},
14+
15+
routes() {
16+
this.urlPrefix = config.api.url
17+
18+
// this.resource("movie")
19+
},
20+
seeds(server) {
21+
server.db.loadData({
22+
movies: [{ title: 'Interstellar' }, { title: 'Inception' }, { title: 'Dunkirk' }],
23+
})
24+
},
25+
})
26+
}
27+
28+
export default init
29+
30+
// new Server({
31+
// routes() {
32+
// this.namespace = 'api'
33+
34+
// this.get('/movies', () => {
35+
// return {
36+
// movies: [
37+
// { id: 1, name: 'Inception', year: 2010 },
38+
// { id: 2, name: 'Interstellar', year: 2014 },
39+
// { id: 3, name: 'Dunkirk', year: 2017 },
40+
// ],
41+
// }
42+
// })
43+
// },
44+
// })

‎src/_api/index.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,19 @@ import organizations from './organizations'
33
import users from './users'
44
import config from '_config'
55

6-
let apiMocks: any
6+
let mockServer: any
7+
8+
if (process.env.NODE_ENV === 'development') {
9+
mockServer = require('./_mocksMirage')
10+
}
711

812
if (config.api.useMocks) {
9-
apiMocks = require('./_mocks/')
13+
// apiMocks = require('./_mocks/')
1014
}
1115

1216
const init = async () => {
13-
if (apiMocks) {
14-
// Remove all SW caches
15-
const cachesNames = await caches.keys()
16-
17-
await Promise.all(cachesNames.map(name => caches.delete(name)))
18-
19-
await apiMocks.default.init()
17+
if (config.api.useMocks) {
18+
await mockServer.default.init({ environment: 'development' })
2019
}
2120

2221
return instance

0 commit comments

Comments
 (0)