Skip to content

Commit 8666dd9

Browse files
wlsf82wlsf82
committed
Draft mocks-server example implementation
1 parent 2b77539 commit 8666dd9

File tree

10 files changed

+3697
-244
lines changed

10 files changed

+3697
-244
lines changed

‎.github/workflows/pr.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,6 @@ jobs:
3131
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
3232
with:
3333
install: false
34-
start: npm start
34+
start: npm run mocks:ci, npm start
3535
wait-on: 'http://localhost:3000'
3636
command: npm run e2e

‎cypress.config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ module.exports = defineConfig({
1313
},
1414
baseUrl: 'http://localhost:3000',
1515
specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
16-
supportFile: false,
1716
},
1817
component: {
1918
devServer: {

‎cypress/e2e/hackernewsStories.cy.js‎

Lines changed: 59 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
describe('Hackernews Stories App', () => {
22
beforeEach(() => {
3+
cy.mocksRestoreRouteVariants()
4+
cy.mocksSetDelay(0)
5+
36
cy.intercept(
47
'GET',
58
'**/search**'
@@ -14,13 +17,66 @@ describe('Hackernews Stories App', () => {
1417
.clear()
1518
})
1619

17-
it('searches by a term and it returns another 100 results', () => {
20+
it('searching by a term returns 5 results', () => {
21+
cy.get('@searchField')
22+
.type('Software Development Books{enter}')
23+
24+
cy.wait('@getStories')
25+
26+
cy.get('.table-row')
27+
.should('have.length', 5)
28+
})
29+
30+
it('searching by an odd term returns no reuslts', () => {
31+
cy.mocksUseRouteVariant('get-stories:no-stories')
32+
33+
cy.get('@searchField')
34+
.type('Odd term{enter}')
35+
36+
cy.wait('@getStories')
37+
38+
cy.get('.table-row')
39+
.should('not.exist')
40+
})
41+
42+
it('shows a loading fallback while fetching stories', () => {
43+
cy.mocksSetDelay(1000)
44+
1845
cy.get('@searchField')
19-
.type('react{enter}')
46+
.type('Software Development Books{enter}')
47+
48+
cy.contains('Loading ...')
49+
.as('loading')
50+
.should('be.visible')
2051

2152
cy.wait('@getStories')
2253

54+
cy.get('.table-row')
55+
.should('be.visible')
56+
cy.get('@loading')
57+
.should('not.exist')
58+
})
59+
60+
it('shows one less story when dismissing the first one', () => {
61+
cy.contains('button', 'Dismiss')
62+
.click()
63+
64+
cy.get('.table-row')
65+
.should('have.length', 4)
66+
})
67+
68+
it('show five more results when clicking More', () => {
69+
cy.intercept(
70+
'GET',
71+
'**/search?query=redux&page=1**'
72+
).as('getNextStories')
73+
74+
cy.contains('button', 'More')
75+
.click()
76+
77+
cy.wait('@getNextStories')
78+
2379
cy.get('.table-row')
24-
.should('have.length', 100)
80+
.should('have.length', 10)
2581
})
2682
})

‎cypress/support/e2e.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { register } from '@mocks-server/cypress-commands'
2+
3+
register()

‎mocks.config.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// For a detailed explanation regarding each configuration property, visit:
2+
// https://www.mocks-server.org/docs/configuration/how-to-change-settings
3+
// https://www.mocks-server.org/docs/configuration/options
4+
5+
module.exports = {
6+
// Log level. Can be one of silly, debug, verbose, info, warn or error
7+
//log: "info",
8+
config: {
9+
// Allow unknown arguments
10+
//allowUnknownArguments: false,
11+
},
12+
plugins: {
13+
// Plugins to be registered
14+
//register: [],
15+
proxyRoutesHandler: {
16+
},
17+
adminApi: {
18+
// Port number for the admin API server to be listening at
19+
//port: 3110,
20+
// Host for the admin API server
21+
//host: "0.0.0.0",
22+
https: {
23+
// Use https protocol or not
24+
//enabled: false,
25+
// Path to a TLS/SSL certificate
26+
//cert: undefined,
27+
// Path to the certificate private key
28+
//key: undefined,
29+
},
30+
},
31+
inquirerCli: {
32+
// Start interactive CLI or not
33+
//enabled: true,
34+
// Render emojis or not
35+
//emojis: true,
36+
},
37+
openapi: {
38+
collection: {
39+
// Name for the collection created from OpenAPI definitions
40+
//id: "openapi",
41+
// Name of the collection to extend from
42+
//from: undefined,
43+
},
44+
},
45+
},
46+
mock: {
47+
routes: {
48+
// Global delay to apply to routes
49+
//delay: 0,
50+
},
51+
collections: {
52+
// Selected collection
53+
selected: "default",
54+
},
55+
},
56+
server: {
57+
// Port number for the server to be listening at
58+
//port: 3100,
59+
// Host for the server
60+
//host: "0.0.0.0",
61+
cors: {
62+
// Use CORS middleware or not
63+
//enabled: true,
64+
// Options for the CORS middleware. Further information at https://github.com/expressjs/cors#configuration-options
65+
//options: {"preflightContinue":false},
66+
},
67+
jsonBodyParser: {
68+
// Use json body-parser middleware or not
69+
//enabled: true,
70+
// Options for the json body-parser middleware. Further information at https://github.com/expressjs/body-parser
71+
//options: {},
72+
},
73+
urlEncodedBodyParser: {
74+
// Use urlencoded body-parser middleware or not
75+
//enabled: true,
76+
// Options for the urlencoded body-parser middleware. Further information at https://github.com/expressjs/body-parser
77+
//options: {"extended":true},
78+
},
79+
https: {
80+
// Use https protocol or not
81+
//enabled: false,
82+
// Path to a TLS/SSL certificate
83+
//cert: undefined,
84+
// Path to the certificate private key
85+
//key: undefined,
86+
},
87+
},
88+
files: {
89+
// Allows to disable files load
90+
//enabled: true,
91+
// Define folder from where to load collections and routes
92+
//path: "mocks",
93+
// Enable/disable files watcher
94+
//watch: true,
95+
babelRegister: {
96+
// Load @babel/register
97+
//enabled: false,
98+
// Options for @babel/register
99+
//options: {},
100+
},
101+
},
102+
variantHandlers: {
103+
// Variant Handlers to be registered
104+
//register: [],
105+
},
106+
};

‎mocks/collections.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = [
2+
{
3+
'id': 'default',
4+
'routes': ['get-stories:five-stories']
5+
},
6+
]

‎mocks/routes/stories.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
const twoStories = require('../../cypress/fixtures/stories.json')
2+
const threeStories = require('../../cypress/fixtures/incomplete.json')
3+
4+
const fiveStores = {
5+
hits: [
6+
...twoStories.list,
7+
...threeStories.list
8+
]
9+
}
10+
11+
const nextStories = {
12+
hits: [
13+
{
14+
"objectID": "6",
15+
"title": "Clean Agile",
16+
"author": "Robert C. Martin",
17+
"url": "https://example.com/rm4",
18+
"num_comments": 9983,
19+
"points": 424
20+
},
21+
{
22+
"objectID": "7",
23+
"title": "Clean Craftsmanship",
24+
"author": "Robert C. Martin",
25+
"url": "https://example.com/rm5",
26+
"num_comments": 134,
27+
"points": 8487
28+
},
29+
{
30+
"objectID": "8",
31+
"title": "Composing Software",
32+
"author": "Eric Elliott",
33+
"url": "https://example.com/ee",
34+
"num_comments": 99,
35+
"points": 999
36+
},
37+
{
38+
"objectID": "9",
39+
"title": "The Programmer's Brain",
40+
"author": "Felienne Hermans",
41+
"url": "https://example.com/fh",
42+
"num_comments": 349,
43+
"points": 937
44+
},
45+
{
46+
"objectID": "10",
47+
"title": "A Philosophy of Software Design",
48+
"author": "John Ousterhout",
49+
"url": "https://example.com/jo",
50+
"num_comments": 10001,
51+
"points": 1000
52+
},
53+
]
54+
}
55+
56+
module.exports = [
57+
{
58+
id: 'get-stories',
59+
url: '*/search**',
60+
method: 'GET',
61+
variants: [
62+
{
63+
id: 'five-stories',
64+
type: 'middleware',
65+
options: {
66+
middleware: (req, res) => {
67+
res.status(200)
68+
if (req.query.page === '0') {
69+
res.send(fiveStores)
70+
} else {
71+
res.send(nextStories)
72+
}
73+
}
74+
}
75+
},
76+
{
77+
id: 'no-stories',
78+
type: 'json',
79+
options: {
80+
status: 200,
81+
body: { hits: [] }
82+
}
83+
},
84+
]
85+
}
86+
]

0 commit comments

Comments
 (0)