Chat improvements, more e2e tests

Author: TowhidKashem

TODO.txt

@@ -6,16 +6,10 @@ cross browser compatability / mobile
         npm i on windows
 
 
-destination path 'jeelizFaceFilter' already exists and is not an empty directory.
-
-easy way to set up CI?
-
-brief avatar flash in header
-
-block geo location request, see error when open snapmap
-
 toolbar layout breaks in e2e browser
 
+showDrawer -> openDrawer
+
 
 --
 

cypress.json

@@ -1 +1,5 @@
-{}
+{
+  "viewportWidth": 414,
+  "viewportHeight": 736,
+  "waitForAnimations": true
+}

cypress/fixtures/example.json

@@ -0,0 +1,4 @@
+{
+  "author": "Lisa",
+  "message": "Soooo, how was it!?"
+}

cypress/fixtures/message.json

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+
+describe('Archive', () => {
+  beforeEach(() => {
+    cy.loadApp();
+    cy.get('[data-test=archive-btn]').click();
+    cy.get('[data-test=archive-drawer]').as('archiveDrawer');
+  });
+
+  it('loads default set of items', () => {
+    cy.get('@archiveDrawer').find('[data-test=month]').should('have.length', 3);
+    cy.get('@archiveDrawer').find('[data-test=snap-image]').should('have.length', 6);
+  });
+});

cypress/fixtures/profile.json

@@ -0,0 +1,43 @@
+/// <reference types="cypress" />
+
+describe('Chat', () => {
+  beforeEach(() => {
+    cy.loadApp();
+    cy.get('[data-test=btn-chat]').click();
+    cy.get('[data-test=chat-drawer]').as('chatDrawer');
+    cy.get('@chatDrawer').find('[data-test=input-field]').as('chatField');
+    cy.wait(1000); // Default message is received after 1 second
+  });
+
+  it('recieves default message on opening drawer', () => {
+    cy.fixture('message').then(({ author, message }) => {
+      cy.getLastMessage(true).should('equal', author);
+      cy.getLastMessage().should('equal', message);
+    });
+  });
+
+  it("can't send empty message", () => {
+    cy.get('@chatField').type('{enter}');
+    cy.getLastMessage().should('not.have.length', 0);
+  });
+
+  it('can send message', () => {
+    const msg = 'abc';
+    cy.get('@chatField').type(msg).type('{enter}');
+    cy.getLastMessage().should('equal', msg);
+  });
+
+  it('receives a message for every message sent', () => {
+    const msg = 'abc';
+    cy.get('@chatField').type(msg).type('{enter}');
+    cy.wait(5000);
+    cy.getLastMessage(true).should('equal', 'Lisa');
+    cy.get('@chatField').type(msg).type('{enter}');
+    cy.get('@chatField').type(msg).type('{enter}');
+    cy.wait(5000);
+    cy.getLastMessage(true).should('equal', 'Lisa');
+    cy.wait(5000);
+    cy.get('@chatDrawer').find('[data-test=message]').last().prev().as('lastMessage');
+    cy.get('@lastMessage').find('header').invoke('text').should('equal', 'Lisa');
+  });
+});

cypress/fixtures/users.json

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+
+describe('Discover', () => {
+  beforeEach(() => {
+    cy.loadApp();
+    cy.get('[data-test=discover-btn]').click();
+    cy.get('[data-test=discover-drawer]').as('discoverDrawer');
+  });
+
+  it('loads default set of items', () => {
+    cy.get('@discoverDrawer').find('[data-test=discover-item]').should('have.length', 8);
+  });
+
+  it('infinite scroll works', () => {
+    cy.get('@discoverDrawer').find('[data-test=drawer-content]').scrollTo('bottom');
+    cy.get('@discoverDrawer').find('[data-test=discover-item]').should('have.length', 16);
+    cy.get('@discoverDrawer').find('[data-test=drawer-content]').scrollTo('bottom');
+    cy.get('@discoverDrawer').find('[data-test=discover-item]').should('have.length', 24);
+  });
+});

cypress/integration/archive.spec.ts

@@ -25,7 +25,7 @@ describe('Snap Map', () => {
     cy.get('@snapMapDrawer').find('[data-test=marker]').first().click();
     cy.get('[data-test=snap-drawer]').as('snapDrawer');
     cy.get('@snapDrawer').find('[data-test=snap]').click();
-    cy.wait(300);
+    // cy.wait(300);
     cy.get('@snapDrawer').should('not.be.visible');
   });
 

cypress/integration/chat.spec.ts

@@ -28,5 +28,12 @@
 
 Cypress.Commands.add('loadApp', () => {
   cy.visit('https://localhost:3000/');
-  cy.viewport(414, 840);
+});
+
+Cypress.Commands.add('getLastMessage', (getAuthor) => {
+  cy.get('[data-test=chat-drawer]').find('[data-test=message]').last().as('lastMessage');
+  const elem = getAuthor
+    ? cy.get('@lastMessage').find('header')
+    : cy.get('@lastMessage').find('blockquote');
+  return elem.invoke('text');
 });

cypress/integration/discover.spec.ts

@@ -3,5 +3,6 @@
 declare namespace Cypress {
   interface Chainable {
     loadApp(): Chainable<void>;
+    getLastMessage(getAuthor?: boolean): Chainable<Element>;
   }
 }

cypress/integration/snap-map.spec.ts

@@ -33,8 +33,8 @@
     "test": "react-scripts test",
     "e2e": "cypress open",
     "eject": "react-scripts eject",
-    "postinstall": "cd public/filters && npm i && git clone [email protected]:jeeliz/jeelizFaceFilter.git && cd jeelizFaceFilter && git reset --hard bd3cdcd0ca01ced09d836c55af82c36047d82dac && cd .. && npm run gulp",
-    "cleanup": "rm -rf node_modules && cd public/filters && rm -rf node_modules jeelizFaceFilter build",
+    "postinstall": "if [ ! -d 'public/filters/jeelizFaceFilter' ]; then cd public/filters && npm i && git clone [email protected]:jeeliz/jeelizFaceFilter.git && cd jeelizFaceFilter && git reset --hard bd3cdcd0ca01ced09d836c55af82c36047d82dac && cd .. && npm run gulp; fi",
+    "cleanup": "rm -rf node_modules && cd public/filters && rm -rf node_modules jeelizFaceFilter build coverage",
     "precommit": "pretty-quick --staged && react-scripts test --watchAll=false",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",