Add cypress tests

README.md

@@ -31,3 +31,16 @@ Assuming that the build output (inside `/target`) is hosted at `<root>` (eg: cha
 	</script>
 	<script src="<root>/assets/parent.js" type="module" id="chatterbox-script"></script>
 ```
+
+## Testing
+
+Chatterbox comes with a suite of integration tests, using cypress.
+
+You can run them by doing
+```sh
+yarn cypress install
+yarn cypress open
+``` 
+
+Ensure you copy the `cypress/fixtures/demoInstance.sample.json` file to `cypress/fixtures/demoInstance.json` and edit 
+the keys accordingly.
\ No newline at end of file

cypress.config.ts

+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/1-demo/demo.ts

+/// <reference types="cypress" />
+import demoInstance from '../../fixtures/demoInstance.json'
+
+describe('chatterbox-staging.element.io test', () => {
+  beforeEach(() => {
+    cy.fixture('demoInstance').then(({url}) => {
+      cy.visit(url)
+    });
+  });
+
+  it('displays the chatterbox icon', () => {
+    cy.get('.start').should('have.length', 1);
+  });
+
+  it('opens the chatterbox privacy window', () => {
+    cy.get('.start > button').click();
+    cy.frameLoaded('.chatterbox-iframe');
+    cy.enter('.chatterbox-iframe').then(frame => {
+      frame().find('.PolicyAgreementView_next').should('have.length', 1);
+      frame().find('.PolicyAgreementView_cancel').should('have.length', 1);
+    })
+  });
+
+  it('open the main chat window and sends a message', () => {
+    cy.get('.start > button').click();
+    cy.frameLoaded('.chatterbox-iframe');
+    cy.enter('.chatterbox-iframe').then(frame => {
+      frame().find('.PolicyAgreementView_next').click();
+      cy.fixture('demoInstance').then(({headerName}) => {
+        frame().find('.RoomHeaderView_name').should('have.text', headerName);
+      });
+      frame().find('.MessageComposer').should('have.length', 1);
+      // Operator can take a long time to join
+      frame().find('.Timeline .AnnouncementView', { timeout: 120000 }).should('have.text', 'operator joined the room');
+      frame().find('.MessageComposer textarea').type('Hello world!{enter}');
+      frame().find('.Timeline .Timeline_messageBody').should('contain.text', 'Hello world!');
+      frame().find('.Timeline .Timeline_messageSender').should('text', 'me');
+    })
+  });
+})

cypress/fixtures/.gitignore

+demoInstance.json
\ No newline at end of file

cypress/fixtures/demoInstance.sample.json

+{
+	"url": "https://localhost/my-demo-page.html",
+	"headerName": "MyChatterboxIntegration"
+}
\ No newline at end of file

cypress/support/e2e.ts

+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import 'cypress-iframe';
\ No newline at end of file

package.json

@@ -7,6 +7,8 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "cypress": "^10.3.0",
+    "cypress-iframe": "^1.0.1",
     "typescript": "^4.4.4",
     "vite": "^2.9.13"
   },