Skip to content

Commit 9760f95

Browse files
berthierestebanscottinet
berthieresteban
authored and
scottinet
committed
Add getting started Vue.js (#431)
## What does this PR do? This getting-started has been added to the documentation before but removed because vuepress can't build with it. It was approved in those PR : #405 and #406 Add VueJS getting started without vuex to SDK JS6 documentation. Resolve the build problem of the vuepress doc (Vuepress tried to build .vue files of the getting-started and crash) by adding symlink. ![image](https://user-images.githubusercontent.com/44427849/62125816-7b1cc180-b2ce-11e9-83e2-df65d7dbcbd4.png) :warning: need to add following line in doc/6/getting-started/vuejs/standalone/index.md line 14 after merge: ``` You can find the full code of this guide [here](https://github.com/kuzzleio/sdk-javascript/tree/6-dev/doc/6/getting-started/vuejs/standalone).```:warning: ### How should this be manually tested? See documentation: - Step 1 : npm run doc prepare - Step 2 : npm run doc-dev Test getting started project (You'll need the CYPRESS_RECORD_KEY as environment variable) - Step 1 : Get a Kuzzle running without anonymous restrictions - Step 2 : cd doc/6/getting-started/vuejs && npm ci - Step 3 : npm run serve-standalone - Step 4 : npm run test ### Other changes / ### Boyscout /
1 parent a59ce2d commit 9760f95

File tree

24 files changed

+13460
-1
lines changed

24 files changed

+13460
-1
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,6 @@ examples/node_modules/
1616
coverage/
1717

1818
doc/framework
19-
dead_links.json
19+
dead_links.json
20+
doc/6/getting-started/.vuejs/cypress/screenshots/
21+
doc/6/getting-started/.vuejs/cypress/videos/

‎doc/6/getting-started/.vuejs/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:8080",
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/.vuejs/cypress/fixtures/Elrond.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"username": "Elrond"
3+
}

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

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

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

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

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

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

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
describe('test realtime chat', () => {
2+
3+
it('should enter a nickname', function () {
4+
cy.fixture(`Elrond.json`).as('fixt')
5+
.then(() => cy.loadEnvironment(this.fixt))
6+
.then(() => cy.wait(2000))
7+
.then(() => {
8+
cy.visit('/');
9+
cy.get('[placeholder="Enter your message"]')
10+
.should('not.exist');
11+
12+
cy.get('[placeholder="Enter your nickname"]')
13+
.type(this.fixt.username);
14+
15+
cy.contains('Valid')
16+
.click();
17+
18+
cy.get('[placeholder="Enter your message"]')
19+
.should('exist');
20+
cy.get('[placeholder="Enter your nickname"]')
21+
.should('not.exist');
22+
});
23+
});
24+
25+
it('should fetch and display some messages', function () {
26+
cy.fixture(`Legolas.json`).as('fixt')
27+
.then(() => cy.loadEnvironment(this.fixt))
28+
.then(() => cy.wait(2000))
29+
.then(() => {
30+
cy.visit('/');
31+
cy.get('[placeholder="Enter your nickname"]')
32+
.type(this.fixt.username);
33+
cy.contains('Valid')
34+
.click();
35+
for (const message of this.fixt.messages) {
36+
cy.get(message.body.username === this.fixt.username ? '.fromMe' : '.fromOthers')
37+
.within(() => {
38+
cy.contains(message.body.username);
39+
cy.contains(message.body.value);
40+
});
41+
}
42+
});
43+
});
44+
45+
it('should send a message', function () {
46+
cy.fixture(`Sam.json`).as('fixt')
47+
.then(() => cy.loadEnvironment(this.fixt))
48+
.then(() => cy.wait(2000))
49+
.then(() => {
50+
cy.visit('/');
51+
cy.get('[placeholder="Enter your nickname"]')
52+
.type(this.fixt.username);
53+
cy.contains('Valid')
54+
.click();
55+
cy.get('[placeholder="Enter your message"]')
56+
.type(this.fixt.body.value);
57+
cy.contains('Send')
58+
.click();
59+
cy.get('.fromMe')
60+
.within(() => {
61+
cy.contains(this.fixt.body.value);
62+
cy.contains(this.fixt.body.username);
63+
});
64+
});
65+
});
66+
67+
it('should receive a message', function () {
68+
cy.fixture(`Sauron.json`).as('fixt')
69+
.then(() => cy.loadEnvironment(this.fixt))
70+
.then(() => cy.wait(2000))
71+
.then(() => {
72+
cy.visit('/');
73+
cy.get('[placeholder="Enter your nickname"]')
74+
.type(this.fixt.username);
75+
cy.contains('Valid')
76+
.click();
77+
cy.wait(2000)
78+
cy.createMessage(this.fixt.body);
79+
cy.get('.fromOthers')
80+
.within(() => {
81+
cy.contains(this.fixt.body.value);
82+
cy.contains(this.fixt.body.username);
83+
});
84+
});
85+
});
86+
});

‎doc/6/getting-started/.vuejs/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/.vuejs/cypress/support/commands.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
function reinitialisation() {
2+
const kuzzle = Cypress.env('kuzzle');
3+
// Clear collection
4+
return cy
5+
.request({
6+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}`,
7+
method: 'DELETE',
8+
failOnStatusCode: false
9+
})
10+
.then(deleteResponse => {
11+
cy.log(`Request : delete ${kuzzle.index} status : ${deleteResponse.status}`);
12+
cy.wait(2000);
13+
// Create index
14+
});
15+
}
16+
17+
Cypress.Commands.add('createMessage', (body) => {
18+
const kuzzle = Cypress.env('kuzzle');
19+
return cy
20+
.request({
21+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_create`,
22+
method: 'POST',
23+
body: body,
24+
})
25+
.its('body')
26+
.then(response => {
27+
cy.log(`Create status : ${response.status} {${body.username} / ${body.value}}`);
28+
cy.wait(500);
29+
});
30+
});
31+
32+
Cypress.Commands.add('initialisation', () => {
33+
const kuzzle = Cypress.env('kuzzle');
34+
// Delete index if exists
35+
return cy
36+
.request({
37+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}`,
38+
method: 'DELETE',
39+
failOnStatusCode: false
40+
})
41+
.then(deleteResponse => {
42+
cy.log(`Request : delete ${kuzzle.index} status : ${deleteResponse.status}`);
43+
// Create index
44+
return cy
45+
.request({
46+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_create`,
47+
method: 'POST',
48+
})
49+
})
50+
.then(createIndexResponse => {
51+
cy.log(`Request : create ${kuzzle.index} status : ${createIndexResponse.status}`);
52+
cy.wait(500);
53+
// Create collection
54+
return cy
55+
.request({
56+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}`,
57+
method: 'PUT',
58+
body: {}
59+
})
60+
})
61+
.then(createCollectionResponse => {
62+
cy.log(`Request : create ${kuzzle.collection} status : ${createCollectionResponse.status}`);
63+
cy.wait(500);
64+
});
65+
});
66+
67+
Cypress.Commands.add('loadEnvironment', (env) => {
68+
const kuzzle = Cypress.env('kuzzle');
69+
if (!env.messages) {
70+
return reinitialisation();
71+
} else {
72+
return cy
73+
.initialisation()
74+
.then(() => {
75+
return cy
76+
.request({
77+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_mCreate`,
78+
method: 'POST',
79+
body: { "documents": env.messages },
80+
})
81+
})
82+
.then(response => {
83+
cy.log(`mCreate status : ${response.status}`);
84+
cy.wait(500);
85+
return cy
86+
.request({
87+
url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_refresh`,
88+
method: 'POST',
89+
})
90+
})
91+
.then((response) => {
92+
cy.log(`refresh status : ${response.status}`);
93+
cy.wait(500);
94+
});
95+
}
96+
});

‎doc/6/getting-started/.vuejs/cypress/support/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './commands'

0 commit comments

Comments
 (0)