From eee38f0d25794b4577fefff1856db5c7eb6be767 Mon Sep 17 00:00:00 2001 From: Berthier Date: Mon, 1 Jul 2019 14:36:39 +0200 Subject: [PATCH] add changes of pr 405 --- .../vuejs/cypress/integration/chat.spec.js | 2 +- .../vuejs/cypress/integration/tchat.spec.js | 87 ------------------- .../vuejs/without-vuex/src/App.vue | 82 ++++++++--------- 3 files changed, 42 insertions(+), 129 deletions(-) delete mode 100644 doc/6/getting-started/vuejs/cypress/integration/tchat.spec.js diff --git a/doc/6/getting-started/vuejs/cypress/integration/chat.spec.js b/doc/6/getting-started/vuejs/cypress/integration/chat.spec.js index fb30bce85..8a4dab9bf 100644 --- a/doc/6/getting-started/vuejs/cypress/integration/chat.spec.js +++ b/doc/6/getting-started/vuejs/cypress/integration/chat.spec.js @@ -14,7 +14,7 @@ describe('test realtime chat', () => { .then(() => cy.loadEnvironment(env)); cy.wait(2000); }); - + afterEach(() => { currentIt++; }); diff --git a/doc/6/getting-started/vuejs/cypress/integration/tchat.spec.js b/doc/6/getting-started/vuejs/cypress/integration/tchat.spec.js deleted file mode 100644 index 6d3ad2034..000000000 --- a/doc/6/getting-started/vuejs/cypress/integration/tchat.spec.js +++ /dev/null @@ -1,87 +0,0 @@ -describe('test realtime tchat', () => { - let currentIt = 1; - let env; - - before(() => { - cy.initialisation(); - }); - - beforeEach(() => { - cy.visit('/'); - cy.fixture(`Environment.${currentIt}.json`) - .then((fixtures) => { env = fixtures; }) - .then(() => cy.log(`Environment ${currentIt}: `, env)) - .then(() => cy.loadEnvironment(env)); - cy.wait(2000); - }); - - afterEach(() => { - currentIt++; - }); - - it('should enter a nickname', () => { - cy.get('[placeholder="Enter your message"]') - .should('not.exist'); - - cy.get('[placeholder="Enter your nickname"]') - .type(env.username); - - - cy.contains('Valid') - .click(); - - cy.get('[placeholder="Enter your message"]') - .should('exist'); - cy.get('[placeholder="Enter your nickname"]') - .should('not.exist'); - }); - - it('should fetch and display some messages', () => { - cy.get('[placeholder="Enter your nickname"]') - .type(env.username); - cy.contains('Valid') - .click(); - - env.messages.forEach(message => { - cy.get(message.payload.username === env.username ? '.fromMe': '.fromOthers') - .within(() => { - cy.contains(message.payload.value); - cy.contains(message.payload.username); - }); - }); - }); - - it('should send a message', () => { - cy.get('[placeholder="Enter your nickname"]') - .type(env.username); - cy.contains('Valid') - .click(); - cy.createMessage({ - _id: '1', - payload: env.payload - }); - - cy.get('.fromMe') - .within(() => { - cy.contains(env.payload.value); - cy.contains(env.username); - }); - }); - - it('should receive a message', () => { - cy.get('[placeholder="Enter your nickname"]') - .type(env.username); - cy.contains('Valid') - .click(); - cy.createMessage({ - _id: '1', - payload: env.payload - }); - - cy.get('.fromOthers') - .within(() => { - cy.contains(env.payload.value); - cy.contains(env.payload.username); - }); - }); -}); \ No newline at end of file diff --git a/doc/6/getting-started/vuejs/without-vuex/src/App.vue b/doc/6/getting-started/vuejs/without-vuex/src/App.vue index 7e8480bc7..41fc10c36 100644 --- a/doc/6/getting-started/vuejs/without-vuex/src/App.vue +++ b/doc/6/getting-started/vuejs/without-vuex/src/App.vue @@ -8,7 +8,7 @@ type="text" v-model="username" placeholder="Enter your nickname" - > + /> @@ -20,11 +20,10 @@ v-model="message" v-on:keyup.enter="sendMessage" placeholder="Enter your message" - > + /> -
Pseudo input; true => Message input) + message: "", // String containing the user input + messages: [], // Array containing our messages + roomID: "", // Id of the realtime subscription + username: "", // Nickname of the current user + validate: false // Value that will change the display (false => Pseudo input; true => Message input) }; }, -/* snippet:end */ + /* snippet:end */ methods: { -/* snippet:start:5 */ + /* snippet:start:5 */ // This function return the right formated date depending on the timestamp getDate(timestamp) { const date = new Date(timestamp); - return date.toString().split("GMT")[0]; + return date.toLocaleString().split("GMT")[0]; }, -/* snippet:end */ -/* snippet:start:6 */ + /* snippet:end */ + /* snippet:start:6 */ // This function will create a message object containing the informations we need to display it - getMessage(hit) { + getMessage(document) { const message = { // The unique id of the document containing the message - _id: hit._id, + _id: document._id, // The text of the message - value: hit._source.value, + value: document._source.value, // The creation date - createdAt: hit._source._kuzzle_info.createdAt, + createdAt: document._source._kuzzle_info.createdAt, // The author name - username: hit._source.username + username: document._source.username }; return message; }, -/* snippet:end */ -/* snippet:start:10 */ + /* snippet:end */ + /* snippet:start:10 */ async sendMessage() { if (this.message === "") return; - // Call the create method of the document controller - await kuzzle.document.create("chat", "messages", + // Call the create method of the document controller + await kuzzle.document.create( + "chat", + "messages", // Give as parameter the object that will be store in kuzzle { value: this.message, username: this.username - }); + } + ); // Clear the user input this.message = ""; }, -/* snippet:end */ -/* snippet:start:11 */ - async subscribe_messages() { - // Call the subscribe method of the realtime controller and receive the roomId - // Save the id of our subscription (we could need it to unsubscribe) - this.roomID = await kuzzle.realtime.subscribe( - "chat", // Id of the index - "messages", // Id of the collection - {}, // Options - // Callback for notifications receive - notification => { - // Check if the notification interest us (only document creation) - if ( - notification.type === "document" && - notification.action === "create" - ) { + /* snippet:end */ + /* snippet:start:11 */ + async subscribe_messages() { + // Call the subscribe method of the realtime controller and receive the roomId + // Save the id of our subscription (we could need it to unsubscribe) + this.roomID = await kuzzle.realtime.subscribe( + "chat", // Id of the index + "messages", // Id of the collection + {}, // Filter + // Callback for notifications receive + notification => { + // Check if the notification interest us (only document creation) + if (notification.type !== "document") return; + if (notification.action !== "create") return; // Add the new message to our array this.messages = [ this.getMessage(notification.result), ...this.messages ]; } - }); + ); }, /* snippet:end */ /* snippet:start:7 */