MirageJS - How to spin up a Mock API in minutes

I will be showing you an awesome tool, MirageJS, that will allow you to spin up a mock API in minutes. Its more than just returning dummy JSON, Mirage allows to build relationships between your [mock] models.

Transcript

1. Fabian Buentello MirageJS How to spin up a Mock API in minutes
2. • Fabian Buentello (@initFabian) • Senior FE Engineer at Dragos Introduction
3. • Fabian Buentello (@initFabian) • Senior FE Engineer at Dragos • Houston React Developers Organizer Introduction
4. Why? UI Layer Data Layer Service Layer
5. UI Layer Data Layer Service Layer Why?
7. • Author by Sam Seliko ff • Created: 2015 as Ember Add-on • Converted to Standalone library in 2019 Side note: Awwwesome documentation!
8. UI Layer Data Layer Service Layer `/api/posts` Why?
9. Demo
10. import axios from "axios"; export const getAllPosts = async () => { const { data } = await axios.get(`/api/posts`); return data.posts; }; export const getPost = async ({ queryKey }) = > { const [, id] = queryKey; const { data } = await axios.get(`/api/posts/${id}`); return data.post; }; export const updatePost = async ({ id, . .. changes }) => { const { data } = await axios.patch(`/api/posts/${id}`, changes); return data; }; export const createPost = async ({ . .. post }) = > { const { data } = await axios.post(`/api/posts`, post); return data; }; export const createComment = async ({ postId, comment }) => { const { data } = await axios.post(`/api/posts/${postId}/comments`, comment); return data; }; export const removePost = async (id) => { const { data } = await axios.delete(`/api/posts/${id}`); return data; }; / / App.jsx import { NavBar } from "./shared/NavBar"; import { Switch, Route } from "react - router - dom"; import { Posts } from "./pages/Posts"; import { CreatePost } from "./pages/CreatePost"; import { UpdatePost } from "./pages/UpdatePost"; import { PostDetailView } from "./pages/PostDetailView"; function App() { return ( <div style={{ margin: 0 }}> <NavBar / > <Switch> <Route path="/create - post"> <CreatePost / > < / Route> <Route path="/post/:id/update"> <UpdatePost / > < / Route> <Route path="/post/:id"> <PostDetailView / > < / Route> <Route path="/"> <Posts /> < / Route> < / Switch> </ div> ); } export default App;
11. / / App.jsx import { NavBar } from "./shared/NavBar"; import { Switch, Route } from "react - router - dom"; import { Posts } from "./pages/Posts"; import { CreatePost } from "./pages/CreatePost"; import { UpdatePost } from "./pages/UpdatePost"; import { PostDetailView } from "./pages/PostDetailView"; function App() { return ( <div style={{ margin: 0 }}> <NavBar / > <Switch> <Route path="/create - post"> <CreatePost / > < / Route> <Route path="/post/:id/update"> <UpdatePost / > < / Route> <Route path="/post/:id"> <PostDetailView / > < / Route> <Route path="/"> <Posts /> < / Route> < / Switch> </ div> ); } export default App;
12. / / App.jsx import { NavBar } from "./shared/NavBar"; import { Switch, Route } from "react - router - dom"; import { Posts } from "./pages/Posts"; import { CreatePost } from "./pages/CreatePost"; import { UpdatePost } from "./pages/UpdatePost"; import { PostDetailView } from "./pages/PostDetailView"; function App() { return ( <div style={{ margin: 0 }}> <NavBar / > <Switch> <Route path="/create - post"> <CreatePost / > < / Route> <Route path="/post/:id/update"> <UpdatePost / > < / Route> <Route path="/post/:id"> <PostDetailView / > < / Route> <Route path="/"> <Posts /> < / Route> < / Switch> </ div> ); } export default App; / / mirage/mirage - server.js import { createServer } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ environment, routes() { / / routes here ... this.passthrough(); }, }); }
13. / / App.jsx import { NavBar } from "./shared/NavBar"; import { Switch, Route } from "react - router - dom"; import { Posts } from "./pages/Posts"; import { CreatePost } from "./pages/CreatePost"; import { UpdatePost } from "./pages/UpdatePost"; import { PostDetailView } from "./pages/PostDetailView"; import { makeServer } from "./mirage/mirage - server"; if (process.env.NODE_ENV == = "development") { makeServer({ environment: "development" }); } function App() { return ( <div style={{ margin: 0 }}> <NavBar / > <Switch> <Route path="/create - post"> <CreatePost / > < / Route> <Route path="/post/:id/update"> <UpdatePost / > < / Route> <Route path="/post/:id"> <PostDetailView / > < / Route> <Route path="/"> <Posts /> < / Route> < / Switch> </ div> ); } export default App;
15. / / mirage/mirage - server.js import { createServer } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ environment, routes() { / / routes here ... this.passthrough(); } }); }
16. / / mirage/mirage - server.js import { createServer } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ environment, routes() { / / routes here ... this.passthrough(); } }); }
17. / / mirage/mirage - server.js import { createServer } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ environment, routes() { / / routes here ... this.passthrough(); } }); }
18. / / mirage/mirage - server.js import { createServer, Model } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ environment, models: { post: Model, }, routes() { / / routes here ... this.passthrough(); }, }); }
19. / / mirage/mirage - server.js import { createServer, Model } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ environment, models: { post: Model, }, routes() { / / routes here ... this.get("/api/posts", function (schema, request) { return { posts: [ { id: "1", title: "Post title 1", content: "Maecenas ut molestie ante. Ut a nisi nec dolor lacinia .. . ", }, { id: "2", title: "Post title 2", content: "Nam eget leo eget turpis mattis dignissim eget elementum ipsum ... ", }, ], }; }); this.passthrough(); }, }); }
20. / / mirage/mirage - server.js . .. export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { / / routes here ... this.get("/api/posts", function (schema, request) { return { posts: [ { id: "1", title: "Post title 1", content: "Maecenas ut molestie ante. Ut a nisi nec dolor lacinia .. . ", }, { id: "2", title: "Post title 2", content: "Nam eget leo eget turpis mattis dignissim eget elementum ipsum ... ", }, ], }; }); this.passthrough(); }, }); }
21. / / mirage/mirage - server.js . .. export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { / / routes here ... this.get("/api/posts", function (schema, request) { return { posts: [ { id: "1", title: "Post title 1", content: "Maecenas ut molestie ante. Ut a nisi nec dolor lacinia .. . ", }, { id: "2", title: "Post title 2", content: "Nam eget leo eget turpis mattis dignissim eget elementum ipsum ... ", }, ], }; }); this.passthrough(); }, }); }
22. / / mirage/mirage - server.js . .. export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { / / routes here ... this.get("/api/posts", function (schema, request) { }); this.passthrough(); }, }); } / / mirage/fixtures/posts.js export default [ { id: "1", title: "Post title 1", content: "Maecenas ut molestie ante. Ut a nisi nec dolor lacinia . . . ", }, { id: "2", title: "Post title 2", content: "Nam eget leo eget turpis mattis dignissim eget elementum . .. ", }, { id: "3", title: "Post title 3", content: "Vestibulum imperdiet ante sed metus aliquet consectetur . . . ", }, { id: "4", title: "Post title 4", content: "Mauris fringilla pellentesque mattis. Phasellus et ... ", }, { id: "5", title: "Post title 5", content: "Quisque dictum massa non sagittis ultricies. Curabitur . . . ", }, ... ]
23. / / mirage/mirage - server.js . .. import posts from "./fixtures/posts"; export function makeServer({ environment = "test" }) { return createServer({ .. . fixtures: { posts, }, routes() { / / routes here ... this.get("/api/posts", function (schema, request) { }); this.passthrough(); }, }); } / / mirage/fixtures/posts.js export default [ { id: "1", title: "Post title 1", content: "Maecenas ut molestie ante. Ut a nisi nec dolor lacinia . . . ", }, { id: "2", title: "Post title 2", content: "Nam eget leo eget turpis mattis dignissim eget elementum . .. ", }, { id: "3", title: "Post title 3", content: "Vestibulum imperdiet ante sed metus aliquet consectetur . . . ", }, { id: "4", title: "Post title 4", content: "Mauris fringilla pellentesque mattis. Phasellus et ... ", }, { id: "5", title: "Post title 5", content: "Quisque dictum massa non sagittis ultricies. Curabitur . . . ", }, ... ]
24. Querying
25. Querying / / Schema this.get("/api/posts", function (schema, request) { let posts = schema.posts.all(); let posts = schema.posts.where({ type: "video" }); let posts = schema.posts.where((post) => post.type = == “video"); return posts; }); / / Database this.get("/api/posts", function (schema, request) { let posts = schema.db.posts; let posts = schema.db.posts.where({ type: "video" }); return posts; });
26. Schema vs DB?
27. Schema vs DB?
28. / / mirage/mirage - server.js . .. import posts from "./fixtures/posts"; export function makeServer({ environment = "test" }) { return createServer({ .. . fixtures: { posts, }, routes() { / / routes here ... this.get("/api/posts", function (schema, request) { }); this.passthrough(); }, }); }
29. / / mirage/mirage - server.js . .. import posts from "./fixtures/posts"; export function makeServer({ environment = "test" }) { return createServer({ .. . fixtures: { posts, }, routes() { / / routes here ... this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.passthrough(); }, }); }
30. / / mirage/mirage - server.js . .. import posts from "./fixtures/posts"; export function makeServer({ environment = "test" }) { return createServer({ .. . fixtures: { posts, }, routes() { / / routes here ... this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.passthrough(); }, }); }
31. / / mirage/mirage - server.js . .. import posts from "./fixtures/posts"; export function makeServer({ environment = "test" }) { return createServer({ .. . fixtures: { posts, }, routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.passthrough(); }, }); } / / mirage/fixtures/posts.js export default [ { id: "1", title: "Post title 1", content: "Maecenas ut molestie ante. Ut a nisi nec dolor lacinia.", }, { id: "2", title: "Post title 2", content: "Nam eget leo eget turpis mattis dignissim eget elementum", }, { id: "3", title: "Post title 3", content: "Vestibulum imperdiet ante sed metus aliquet consectetur", }, { id: "4", title: "Post title 4", content: "Mauris fringilla pellentesque mattis. Phasellus et", }, { id: "5", title: "Post title 5", content: "Quisque dictum massa non sagittis ultricies. Curabitur", }, … ]
32. / / mirage/mirage - server.js import { createServer } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { . .. }, }); }
33. / / mirage/mirage - server.js import { createServer, Factory } from "miragejs"; import faker from "faker"; export function makeServer({ environment = "test" }) { return createServer({ .. . factories: { post: Factory.extend({ title() { return faker.lorem.words(4); }, content() { return faker.lorem.paragraph(1); }, createdAt() { return faker.date.recent(); }, }), }, routes() { . .. }, }); }
34. / / mirage/mirage - server.js import { createServer, Factory } from "miragejs"; import faker from "faker"; export function makeServer({ environment = "test" }) { return createServer({ .. . factories: { post: Factory.extend({ title() { return faker.lorem.words(4); }, content() { return faker.lorem.paragraph(1); }, createdAt() { return faker.date.recent(); }, }), }, seeds(server) { server.createList("post", 200); }, routes() { . .. }, }); }
35. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.passthrough(); }, }); }
36. Query single record / / Schema this.get("/api/posts/:id", function (schema, request) { // Schema:find let post = schema.posts.find(request.params.id); // Schema:findBy let post = schema.posts.findBy({ title: "First Post" }); let post = schema.posts.findBy({ authorId: 1, type: "video" }); // Schema:first let post = schema.posts.first(); return post; }); / / Database this.get("/api/posts/:id", function (schema, request) { // Database:find let post = schema.posts.find(request.params.id); // Database:findBy let post = schema.posts.findBy({ title: "First Post" }); let post = schema.posts.findBy({ authorId: 1, type: "video" }); return post; });
37. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.get("/api/posts/:id", function (schema, request) { }); this.passthrough(); }, }); }
38. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.get("/api/posts/:id", function (schema, request) { let post = schema.posts.find(request.params.id); return post; }); this.passthrough(); }, }); }
39. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.get("/api/posts/:id", function (schema, request) { let post = schema.posts.find(request.params.id); return post; }); this.passthrough(); }, }); }
40. Update Record / / Schema this.patch("/api/posts/:id", function (schema, request) { let id = request.params.id; let changes = JSON.parse(request.requestBody); let updatedPost = schema.posts.find(id); updatedPost.title = changes.title; updatedPost.content = changes.content; updatedPost.save(); return updatedPost; });
41. Update Record / / Database:update this.patch("/api/posts/:id", function (schema, request) { // updates all posts const updatedPost = schema.db.posts.update({title: 'Updated title'}) // updates post where id = == 1 const updatedPost = schema.db.posts.update(1, { title: 'First Title', content: 'some content' }); // updates post where title === 'foobar' const updatedPost = schema.db.posts.update({ title: 'foobar' }, { title: 'First Title', content: 'some content' }); return updatedPost; });
42. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.get("/api/posts/:id", function (schema, request) { let post = schema.posts.find(request.params.id); return post; }); this.patch("/api/posts/:id", function (schema, request) { }); this.passthrough(); }, }); }
43. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.get("/api/posts/:id", function (schema, request) { let post = schema.posts.find(request.params.id); return post; }); this.patch("/api/posts/:id", function (schema, request) { let id = request.params.id; let changes = JSON.parse(request.requestBody); const data = schema.db.posts.update(id, changes); return data; }); this.passthrough(); }, }); }
44. Create Record / / Schema this.post("/api/posts", (schema, request) = > { let newPost = schema.posts.new({ title: 'Some Title', content: 'foobar' }); newPost.save(); return newPost; }); / / Database this.post("/api/posts", (schema, request) = > { let newPost = schema.db.posts.insert({ title: "Some Title", content: "foobar", }); return newPost; });
45. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.get("/api/posts/:id", function (schema, request) { let post = schema.posts.find(request.params.id); return post; }); this.patch("/api/posts/:id", function (schema, request) { let id = request.params.id; let changes = JSON.parse(request.requestBody); const data = schema.db.posts.update(id, changes); return data; }); this.post("/api/posts", (schema, request) = > { }); this.passthrough(); }, }); }
46. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.get("/api/posts/:id", function (schema, request) { let post = schema.posts.find(request.params.id); return post; }); this.patch("/api/posts/:id", function (schema, request) { let id = request.params.id; let changes = JSON.parse(request.requestBody); const data = schema.db.posts.update(id, changes); return data; }); this.post("/api/posts", (schema, request) = > { let newPost = JSON.parse(request.requestBody); return schema.db.posts.insert(newPost); }); this.passthrough(); }, }); }
47. Delete Record / / Database this.delete("/api/posts/:id", (schema, request) = > { schema.db.posts.remove(1); schema.db.posts.remove({ authorId: 1 }); return {}; }); / / Schema (Model) this.delete("/api/posts/:id", (schema, request) = > { schema.posts.find(1).destroy(); return {}; });
48. export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.get("/api/posts/:id", function (schema, request) { let post = schema.posts.find(request.params.id); return post; }); this.patch("/api/posts/:id", function (schema, request) { let id = request.params.id; let changes = JSON.parse(request.requestBody); const data = schema.db.posts.update(id, changes); return data; }); this.post("/api/posts", (schema, request) = > { let newPost = JSON.parse(request.requestBody); return schema.db.posts.insert(newPost); }); this.delete("/api/posts/:id", (schema, request) => { }); this.passthrough(); }, }); }
49. export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.get("/api/posts/:id", function (schema, request) { let post = schema.posts.find(request.params.id); return post; }); this.patch("/api/posts/:id", function (schema, request) { let id = request.params.id; let changes = JSON.parse(request.requestBody); const data = schema.db.posts.update(id, changes); return data; }); this.post("/api/posts", (schema, request) = > { let newPost = JSON.parse(request.requestBody); return schema.db.posts.insert(newPost); }); this.delete("/api/posts/:id", (schema, request) => { const id = request.params.id; return schema.db.posts.remove(id); }); this.passthrough(); }, }); }
50. Relationships
51. / / mirage/mirage - server.js import { . . . } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ models: { post: Model, }, factories: { .. . }, seeds(server) { server.createList("post", 2); }, .. . }); } / / GET /api/posts { posts: [ { createdAt: "2021-06-12T21 : 17 : 25.718Z", content: "Aut dolorem quis. Enim nesciunt cum veritatis totam sit .. . ", title: "minus porro explicabo nam", id: "1", }, { createdAt: "2021-06-12T19 : 33 : 57.636Z", content: "Est enim temporibus ipsum ea impedit molestiae . . . ", title: "dicta aut quia deleniti", id: "2", }, ]; }
52. / / mirage/mirage - server.js import { . . . , RestSerializer } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ models: { post: Model, comment: Model, }, serializers: { post: RestSerializer.extend({}), }, factories: { .. . }, seeds(server) { server.createList("post", 2); }, .. . }); } / / GET /api/posts { posts: [ { createdAt: "2021-06-12T21 : 17 : 25.718Z", content: "Aut dolorem quis. Enim nesciunt cum veritatis totam sit .. . ", title: "minus porro explicabo nam", id: "1", }, { createdAt: "2021-06-12T19 : 33 : 57.636Z", content: "Est enim temporibus ipsum ea impedit molestiae . . . ", title: "dicta aut quia deleniti", id: "2", }, ]; }
53. / / mirage/mirage - server.js import { . . . , RestSerializer, hasMany, belongsTo } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ models: { post: Model.extend({ comments: hasMany(), }), comment: Model.extend({ post: belongsTo(), }), }, serializers: { post: RestSerializer.extend({}), }, factories: { .. . }, seeds(server) { server.createList("post", 2); }, .. . }); } / / GET /api/posts { posts: [ { createdAt: "2021-06-12T21 : 17 : 25.718Z", content: "Aut dolorem quis. Enim nesciunt cum veritatis totam sit .. . ", title: "minus porro explicabo nam", id: "1", }, { createdAt: "2021-06-12T19 : 33 : 57.636Z", content: "Est enim temporibus ipsum ea impedit molestiae . . . ", title: "dicta aut quia deleniti", id: "2", }, ]; }
54. / / mirage/mirage - server.js import { . . . , RestSerializer, hasMany, belongsTo } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ models: { post: Model.extend({ comments: hasMany(), }), comment: Model.extend({ post: belongsTo(), }), }, serializers: { post: RestSerializer.extend({}), }, factories: { .. . }, seeds(server) { server.createList("post", 2); }, .. . }); } / / GET /api/posts { posts: [ { comments: [], createdAt: "2021-06-12T21 : 17 : 25.718Z", content: "Aut dolorem quis. Enim nesciunt cum veritatis totam sit .. . ", title: "minus porro explicabo nam", id: "1", }, { comments: [], createdAt: "2021-06-12T19 : 33 : 57.636Z", content: "Est enim temporibus ipsum ea impedit molestiae . . . ", title: "dicta aut quia deleniti", id: "2", }, ]; }
55. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . factories: { post: Factory.extend({ title() { return faker.lorem.words(4); }, content() { return faker.lorem.paragraph(1); }, createdAt() { return faker.date.recent(); }, }), }, seeds(server) { server.createList("post", 2); }, .. . }); }
56. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . factories: { comment: Factory.extend({ text() { return faker.lorem.sentences(1); }, createdAt() { return faker.date.recent(); }, }), post: Factory.extend({ title() { return faker.lorem.words(4); }, content() { return faker.lorem.paragraph(1); }, createdAt() { return faker.date.recent(); }, }), }, seeds(server) { server.createList("post", 2); }, .. . }); }
57. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . factories: { comment: Factory.extend({ text() { return faker.lorem.sentences(1); }, createdAt() { return faker.date.recent(); }, }), post: Factory.extend({ title() { return faker.lorem.words(4); }, content() { return faker.lorem.paragraph(1); }, createdAt() { return faker.date.recent(); }, afterCreate(post, server) { }, }), }, seeds(server) { server.createList("post", 2); }, .. . }); }
58. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . factories: { comment: Factory.extend({ text() { return faker.lorem.sentences(1); }, createdAt() { return faker.date.recent(); }, }), post: Factory.extend({ title() { return faker.lorem.words(4); }, content() { return faker.lorem.paragraph(1); }, createdAt() { return faker.date.recent(); }, afterCreate(post, server) { server.createList("comment", 3, { postId: post.id }); }, }), }, seeds(server) { server.createList("post", 2); }, .. . }); } / / GET /api/posts { posts: [ { comments: ["1", "2", "3"], createdAt: "2021-06-12T21 : 17 : 25.718Z", content: "Aut dolorem quis. Enim nesciunt cum veritatis totam sit .. . ", title: "minus porro explicabo nam", id: "1", }, { comments: ["4", "5", "6"], createdAt: "2021-06-12T19 : 33 : 57.636Z", content: "Est enim temporibus ipsum ea impedit molestiae . . . ", title: "dicta aut quia deleniti", id: "2", }, ]; }
59. server.createList("comment", 3, { postId: post.id }); server.createList("comment", 3, { post }); const comments = server.createList("comment", 3); post.comments = comments; post.save(); post.commentIds = [2, 3]; post.save();
60. serializers / / GET /api/posts { posts: [ { comments: ["1", "2", "3"], createdAt: "2021-06-12T21 : 17 : 25.718Z", content: "Aut dolorem quis. Enim nesciunt cum veritatis totam sit .. . ", title: "minus porro explicabo nam", id: "1", }, { comments: ["4", "5", "6"], createdAt: "2021-06-12T19 : 33 : 57.636Z", content: "Est enim temporibus ipsum ea impedit molestiae . . . ", title: "dicta aut quia deleniti", id: "2", }, ]; }
61. / / mirage/mirage - server.js import { . . . , RestSerializer, hasMany, belongsTo } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ models: { . .. }, serializers: { post: RestSerializer.extend({ }), }, factories: { .. . }, .. . }); }
62. / / mirage/mirage - server.js import { . . . , RestSerializer, hasMany, belongsTo } from "miragejs"; export function makeServer({ environment = "test" }) { return createServer({ models: { . .. }, serializers: { post: RestSerializer.extend({ include: ["comments"], embed: true, }), }, factories: { .. . }, .. . }); } / / GET /api/posts { posts: [ { comments: [{ ... }, { . . . }, { .. . }], createdAt: "2021-06-12T21 : 17 : 25.718Z", content: "Aut dolorem quis. Enim nesciunt cum veritatis totam sit .. . ", title: "minus porro explicabo nam", id: "1", }, { comments: [{ ... }, { . . . }, { .. . }], createdAt: "2021-06-12T19 : 33 : 57.636Z", content: "Est enim temporibus ipsum ea impedit molestiae . . . ", title: "dicta aut quia deleniti", id: "2", }, ]; }
64. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { . .. this.passthrough(); }, }); }
65. / / mirage/mirage - server.js export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { . .. this.post("/api/posts/:id/comments", (schema, request) => { let attrs = { . . . JSON.parse(request.requestBody), createdAt: new Date().toISOString(), }; let post = schema.posts.find(request.params.id); post.createComment(attrs); return post; }); this.passthrough(); }, }); }
66. Almost to the end…
67. export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.get("/api/posts", function (schema, request) { return schema.posts.all(); }); this.get("/api/posts/:id", function (schema, request) { let post = schema.posts.find(request.params.id); return post; }); this.patch("/api/posts/:id", function (schema, request) { let id = request.params.id; let changes = JSON.parse(request.requestBody); const data = schema.db.posts.update(id, changes); return data; }); this.post("/api/posts", (schema, request) = > { let newPost = JSON.parse(request.requestBody); return schema.db.posts.insert(newPost); }); this.delete("/api/posts/:id", (schema, request) => { const id = request.params.id; return schema.db.posts.remove(id); }); ... }, }); } export function makeServer({ environment = "test" }) { return createServer({ .. . routes() { this.namespace = “/api"; this.resource("post"); . .. }, }); }
68. Second thing…
69. Testing / / cypress test let server; beforeEach(() = > { server = makeServer({ environment: "test" }); }); afterEach(() => { server.shutdown(); }); it("shows all the posts", function () { server.createList("post", 10); cy.visit("/"); cy.get("li.post").should("have.length", 10); }); it("shows the post's title on the detail route", function () { let post = this.server.create("post", { title: "Some Title", content: "Some content", }); cy.visit(`/post/${post.id}`); cy.get("h1").should("contain", "Some Title"); });
70. • https://miragejs.com/ • https://www.youtube.com/watch?v=lfDBb0Ar-rc (Awesome video by Mirage Author) • https://embermap.com/topics/mirage-tips-and-tricks • https://www.smashingmagazine.com/2020/04/miraje-js-models- associations/ References
71. References
72. Questions? fabian.buentello@gmail.com