Skip to content

Commit e8e77d2

Browse files
berthierestebanscottinet
berthieresteban
authored and
scottinet
committed
Add getting started React (#436)
## What does this PR do? Add Kuzzle React getting-started. This getting-started have been merge in the last doc [#291](kuzzleio/documentation#291) The last getting started app was builted progressively and some code was rewrite during the reading. I had to rewrite lot of parts to remove that because it implicated some untested lines. I avoid hard snippets written in the readme too. I removed the tested snippets and add cypress to test the app globally. The app use the current 6-dev sdk version with the ugly post-install line in `doc/6/getting-started/.react/package.json` ### How should this be manually tested? - Step 0 : Kuzzle running stack - Step 1 : cd doc/6/getting-started/.react - Step 2 : yarn install - Step 3 : yarn start & (if error add `SKIP_PREFLIGHT_CHECK=true`) - Step 4 : npm run test ### Other changes / ### Boyscout /
1 parent 9760f95 commit e8e77d2

36 files changed

+11677
-4
lines changed

‎.gitignore‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,9 @@ coverage/
1717

1818
doc/framework
1919
dead_links.json
20-
doc/6/getting-started/.vuejs/cypress/screenshots/
21-
doc/6/getting-started/.vuejs/cypress/videos/
20+
21+
# Cypress debug
22+
doc/6/getting-started/.react/cypress/screenshots
23+
doc/6/getting-started/.react/cypress/videos
24+
doc/6/getting-started/.vuejs/cypress/screenshots
25+
doc/6/getting-started/.vuejs/cypress/videos

‎doc/6/getting-started/.react/.eslintrc.json‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"rules": {
3+
"consistent-return": 0,
4+
"curly": 2,
5+
"dot-notation": 2,
6+
"eqeqeq": 2,
7+
"guard-for-in": 2,
8+
"indent": [2, 2, {"SwitchCase": 1}],
9+
"linebreak-style": [2, "unix"],
10+
"new-cap": 1,
11+
"no-caller": 2,
12+
"no-catch-shadow": 2,
13+
"no-else-return": 2,
14+
"no-extend-native": 2,
15+
"no-extra-bind": 2,
16+
"no-eval": 2,
17+
"no-implicit-coercion": 2,
18+
"no-implied-eval": 2,
19+
"no-invalid-this": 2,
20+
"no-irregular-whitespace": 2,
21+
"no-labels": 2,
22+
"no-lone-blocks": 2,
23+
"no-lonely-if": 1,
24+
"no-loop-func": 2,
25+
"no-multi-spaces": 1,
26+
"no-multiple-empty-lines": 1,
27+
"no-native-reassign": 2,
28+
"no-nested-ternary": 2,
29+
"no-new": 2,
30+
"no-new-func": 2,
31+
"no-new-require": 2,
32+
"no-new-wrappers": 2,
33+
"no-return-assign": 2,
34+
"no-self-compare": 2,
35+
"no-sequences": 2,
36+
"no-shadow": 2,
37+
"no-shadow-restricted-names": 2,
38+
"no-throw-literal": 2,
39+
"no-undef": 0,
40+
"no-undef-init": 1,
41+
"no-unreachable": 2,
42+
"no-unused-expressions": [2, {"allowShortCircuit": true}],
43+
"no-useless-call": 2,
44+
"no-with": 2,
45+
"quotes": [2, "single"],
46+
"semi": [2, "always"],
47+
"keyword-spacing": 2,
48+
"space-before-blocks": 2,
49+
"space-in-parens": [2, "never"],
50+
"vars-on-top": 2,
51+
"yoda": [2, "never"]
52+
},
53+
"parserOptions": {
54+
"ecmaVersion": 2018
55+
},
56+
"extends": "eslint:recommended"
57+
}

‎doc/6/getting-started/.react/.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎doc/6/getting-started/.react/cypress.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"baseUrl": "http://localhost:3000",
3+
"projectId": "ce9wca",
4+
"videoUploadOnPasses": false,
5+
"viewportWidth": 1400,
6+
"viewportHeight": 900,
7+
"defaultCommandTimeout": 5000,
8+
"env": {
9+
"kuzzle": {
10+
"host": "localhost",
11+
"port": "7512",
12+
"index": "chat",
13+
"collection": "messages"
14+
}
15+
}
16+
}

‎doc/6/getting-started/.react/cypress/fixtures/Legolas.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"messages": [
3+
{
4+
"body": {
5+
"text": "It still only counts as one!"
6+
}
7+
},
8+
{
9+
"body": {
10+
"text": "What do your elf eyes see?"
11+
}
12+
},
13+
{
14+
"body": {
15+
"text": "What about side by side with a friend?"
16+
}
17+
}
18+
]
19+
}

‎doc/6/getting-started/.react/cypress/fixtures/Sam.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"body": {
3+
"text": "I can't carry it for you, But I can carry you!"
4+
}
5+
}

‎doc/6/getting-started/.react/cypress/fixtures/Sauron.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"body": {
3+
"text": "I am no man"
4+
}
5+
}

‎doc/6/getting-started/.react/cypress/integration/chat.spec.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
describe('test realtime chat', () => {
2+
3+
// beforeEach(() => {
4+
// cy.initialisation();
5+
// });
6+
7+
it('should fetch and display some messages', function () {
8+
cy.fixture('Legolas.json').as('fixt')
9+
.then(() => cy.loadEnvironment(this.fixt))
10+
.then(() => cy.wait(2000))
11+
.then(() => {
12+
cy.log(this.fixt);
13+
cy.visit('/');
14+
for (const message of this.fixt.messages) {
15+
cy.contains(message.body.text);
16+
}
17+
});
18+
});
19+
20+
it('should send a message', function () {
21+
cy.fixture('Sam.json').as('fixt')
22+
.then(() => cy.loadEnvironment(this.fixt))
23+
.then(() => cy.wait(2000))
24+
.then(() => {
25+
cy.visit('/');
26+
cy.wait(2000);
27+
cy.get('#message')
28+
.type(this.fixt.body.text);
29+
cy.contains('Envoyer')
30+
.click();
31+
cy.contains(this.fixt.body.text);
32+
});
33+
});
34+
35+
it('should receive a message', function () {
36+
cy.fixture('Sauron.json').as('fixt')
37+
.then(() => cy.loadEnvironment(this.fixt))
38+
.then(() => cy.wait(2000))
39+
.then(() => {
40+
cy.visit('/');
41+
cy.wait(2000);
42+
cy.createMessage(this.fixt.body);
43+
cy.wait(2000)
44+
cy.contains(this.fixt.body.text);
45+
});
46+
});
47+
});

‎doc/6/getting-started/.react/cypress/plugins/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// ***********************************************************
2+
// This example plugins/index.js can be used to load plugins
3+
//
4+
// You can change the location of this file or turn off loading
5+
// the plugins file with the 'pluginsFile' configuration option.
6+
//
7+
// You can read more here:
8+
// https://on.cypress.io/plugins-guide
9+
// ***********************************************************
10+
11+
// This function is called when a project is opened or re-opened (e.g. due to
12+
// the project's config changing)
13+
14+
module.exports = (on, config) => {
15+
// `on` is used to hook into various events Cypress emits
16+
// `config` is the resolved Cypress config
17+
}

‎doc/6/getting-started/.react/cypress/support/commands.js‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
//
11+
//
12+
// -- This is a parent command --
13+
// Cypress.Commands.add("login", (email, password) => { ... })
14+
//
15+
//
16+
// -- This is a child command --
17+
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18+
//
19+
//
20+
// -- This is a dual command --
21+
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22+
//
23+
//
24+
// -- This is will overwrite an existing command --
25+
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26+
27+
async function reinitialisation() {
28+
const kuzzle = Cypress.env('kuzzle');
29+
30+
return cy
31+
.request({
32+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}`,
33+
method: 'DELETE',
34+
failOnStatusCode: false
35+
})
36+
.then(createIndexResponse => {
37+
cy.log(`Request : create ${kuzzle.index} status : ${createIndexResponse.status}`);
38+
cy.wait(500);
39+
});
40+
}
41+
42+
Cypress.Commands.add('createMessage', (body) => {
43+
const kuzzle = Cypress.env('kuzzle');
44+
return cy
45+
.request({
46+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_create`,
47+
method: 'POST',
48+
body: body,
49+
})
50+
.its('body')
51+
.then(response => {
52+
cy.log(`Create status : ${response.status} {${body.text}}`);
53+
cy.wait(500);
54+
return cy
55+
.request({
56+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_refresh`,
57+
method: 'POST',
58+
});
59+
})
60+
.then(refreshResponse => {
61+
cy.log(`Request : refresh ; status : ${refreshResponse.status}`);
62+
cy.wait(1000);
63+
});
64+
});
65+
66+
67+
Cypress.Commands.add('initialisation', () => {
68+
const kuzzle = Cypress.env('kuzzle');
69+
return cy
70+
.request({
71+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}`,
72+
method: 'DELETE',
73+
failOnStatusCode: false
74+
})
75+
.then(deleteResponse => {
76+
cy.log(`Request : delete ${kuzzle.index} status : ${deleteResponse.status}`);
77+
cy.wait(2000);
78+
// Create index
79+
return cy
80+
.request({
81+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_create`,
82+
method: 'POST',
83+
});
84+
})
85+
.then(createIndexResponse => {
86+
cy.log(`Request : create ${kuzzle.index} status : ${createIndexResponse.status}`);
87+
cy.wait(500);
88+
// Create collection
89+
return cy.request({
90+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}`,
91+
method: 'PUT',
92+
body: {}
93+
});
94+
}).then(createCollectionResponse => {
95+
cy.log(`Request : create ${kuzzle.collection} status : ${createCollectionResponse.status}`);
96+
cy.wait(500);
97+
});
98+
});
99+
100+
Cypress.Commands.add('loadEnvironment', (env) => {
101+
const kuzzle = Cypress.env('kuzzle');
102+
if (!env.messages) {
103+
reinitialisation();
104+
} else {
105+
cy.initialisation()
106+
.then(() => {
107+
return cy
108+
.request({
109+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_mCreate`,
110+
method: 'POST',
111+
body: { 'documents': env.messages },
112+
});
113+
})
114+
.then(response => {
115+
cy.log(`mCreate status : ${response.status}`);
116+
cy.wait(500);
117+
return cy.request({
118+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_refresh`,
119+
method: 'POST',
120+
});
121+
})
122+
.then((response) => {
123+
cy.log(`refresh status : ${response.status}`);
124+
cy.wait(500);
125+
});
126+
}
127+
});

0 commit comments

Comments
 (0)