update cypress and tests

cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+	video: false,
+	chromeWebSecurity: false,
+	viewportHeight: 800,
+	e2e: {
+		// We've imported your old cypress plugins here.
+		// You may want to clean this up later by importing these.
+		setupNodeEvents(on, config) {
+			return require("./cypress/plugins/index.js")(on, config);
+		},
+		baseUrl: "http://localhost:8787/",
+	},
+});

cypress/integration/collated-text-inputs.spec.ts → cypress/e2e/collated-text-inputs.cy.ts

@@ -9,8 +9,8 @@ describe("collated text inputs", () => {
         cy.initMockWebchat()
             .openWebchat()
             .startConversation();
-        cy.get(".webchat-input-message-input").type("hi").type("{enter}");
-        cy.get(".webchat-input-message-input").type("whats up").type("{enter}");
+        cy.get(".webchat-input-message-input").wait(200).type("hi").type("{enter}");
+        cy.get(".webchat-input-message-input").wait(200).type("whats up").type("{enter}");
 
         cy.contains("hi").should("be.visible").and("have.text", "hi");
         cy.contains("whats up").should("be.visible").and("have.text", "whats up");
@@ -27,8 +27,8 @@ describe("collated text inputs", () => {
             })
             .openWebchat()
             .startConversation();
-        cy.get(".webchat-input-message-input").type("hi").type("{enter}");
-        cy.get(".webchat-input-message-input").type("whats up").type("{enter}");
+        cy.get(".webchat-input-message-input").wait(200).type("hi").type("{enter}");
+        cy.get(".webchat-input-message-input").wait(200).type("whats up").type("{enter}");
 
         cy.contains("hi whats up").should("be.visible");
     });
@@ -59,9 +59,9 @@ describe("collated text inputs", () => {
             .openWebchat()
             .startConversation();
 
-        cy.get(".webchat-input-message-input").type("hi").type("{enter}");
+        cy.get(".webchat-input-message-input").wait(200).type("hi").type("{enter}");
         cy.wait(1100);
-        cy.get(".webchat-input-message-input").type("whats up").type("{enter}");
+        cy.get(".webchat-input-message-input").wait(200).type("whats up").type("{enter}");
 
         cy.contains("hi").should("be.visible").and("have.text", "hi");
         cy.contains("whats up").should("be.visible").and("have.text", "whats up");
@@ -80,9 +80,9 @@ describe("collated text inputs", () => {
             .openWebchat()
             .startConversation();
 
-        cy.get(".webchat-input-message-input").type("hi").type("{enter}");
-        cy.wait(1100);
-        cy.get(".webchat-input-message-input").type("whats up").type("{enter}");
+        cy.get(".webchat-input-message-input").wait(200).type("hi").type("{enter}");
+        cy.wait(500);
+        cy.get(".webchat-input-message-input").wait(200).type("whats up").type("{enter}");
 
         cy.contains("hi whats up").should("be.visible");
     });
@@ -98,10 +98,10 @@ describe("collated text inputs", () => {
             .openWebchat()
             .startConversation();
 
-        cy.get(".webchat-input-message-input").type("hi").type("{enter}");
-        cy.get(".webchat-input-message-input").type("ho").type("{enter}");
+        cy.get(".webchat-input-message-input").wait(100).type("hi").type("{enter}");
+        cy.get(".webchat-input-message-input").wait(100).type("ho").type("{enter}");
         cy.sendMessage("", { containsData: true });
-        cy.get(".webchat-input-message-input").type("whats up").type("{enter}");
+        cy.get(".webchat-input-message-input").wait(1000).type("whats up").type("{enter}");
 
         cy.contains("hi ho").should("be.visible").and("have.text", "hi ho");
         cy.contains("whats up").should("be.visible").and("have.text", "whats up");

cypress/e2e/inputAutogrow.cy.ts

@@ -0,0 +1,69 @@
+describe("Input Autogrow", () => {
+	beforeEach(() => {
+		cy.visitWebchat().initMockWebchat().openWebchat().startConversation();
+	});
+
+	it("should be active by default", () => {
+		cy.get("textarea.webchat-input-message-input").should("be.visible");
+	});
+
+	it('should submit when hitting "return"', () => {
+		cy.get("#webchatInputMessageInputInTextMode").as("input");
+		cy.get("@input").type("hello world{enter}");
+
+		cy.get(".webchat-message-row.user").contains("hello world").should("be.visible");
+	});
+
+	it("should grow when typing long texts", () => {
+		cy.get("#webchatInputMessageInputInTextMode").as("input");
+		cy.get("@input")
+			.invoke("height")
+			.then(initialHeight => {
+				cy.get("@input").type(
+					"this is a long text that will most likely cause the field to grow in height. Let's see if it does!`",
+				);
+				cy.get("@input").invoke("height").should("be.above", initialHeight);
+			});
+	});
+
+	it('should insert a newline when sending "shift+return"', () => {
+		cy.get("#webchatInputMessageInputInTextMode").as("input");
+		cy.get("@input")
+			.invoke("height")
+			.then(initialHeight => {
+				cy.get("@input").type("{shift}{enter}");
+				cy.get("@input").invoke("height").should("be.above", initialHeight);
+			});
+	});
+
+	it('should grow up to "inputAutogrowMaxLines" lines before scrolling', () => {
+		cy.visitWebchat()
+			.initMockWebchat({
+				settings: {
+					layout: {
+						inputAutogrowMaxRows: 3,
+					},
+				},
+			})
+			.openWebchat()
+			.startConversation();
+
+		cy.get("#webchatInputMessageInputInTextMode")
+			.as("input")
+			.invoke("height")
+			.then(initialHeight => {
+				cy.get("@input")
+					.type("{shift}{enter}{enter}")
+					.invoke("height")
+					.then(maxLinesHeight => {
+						expect(initialHeight).to.be.below(maxLinesHeight);
+						cy.get("@input")
+							.type("{shift}{enter}")
+							.invoke("height")
+							.then(aboveMaxLinesHeight => {
+								expect(maxLinesHeight).to.be.equal(aboveMaxLinesHeight - 1);
+							});
+					});
+			});
+	});
+});

cypress/integration/messages/buttons.spec.ts → cypress/e2e/messages/buttons.cy.ts

@@ -27,8 +27,7 @@ describe("Message with Buttons", () => {
 
     it("should post in chat on postback button click", () => {
         cy.withMessageFixture('buttons', () => {
-            cy.get("button:contains('foobar005b1')").focus();
-            cy.get("button:contains('foobar005b1')").click();
+            cy.get("button:contains('foobar005b1')").should("be.visible").click({force: true});
             cy.get(".webchat-message-row.user").contains("foobar005b1");
         })
     })

cypress/e2e/messages/dateTimePicker.cy.ts

@@ -0,0 +1,47 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../support/index.d.ts" />
+
+describe("Date Time Picker", () => {
+	beforeEach(() => {
+		cy.visitWebchat().initMockWebchat().openWebchat().startConversation();
+	});
+
+	xit("should trap focus in 24-Hr format", () => {
+		cy.withMessageFixture("date-time-picker-24Hr", () => {
+			cy.contains("foobar012b1")
+				.realPress("Enter")
+				.get(".flatpickr-calendar ")
+				.should("be.focused")
+				.realPress("Tab")
+				.get(".flatpickr-hour ")
+				.should("be.focused")
+				.realPress("Tab")
+				.get(".flatpickr-minute ")
+				.should("be.focused");
+
+			cy.wait(1000).realPress("Tab").contains("foobar012b3").should("be.focused");
+			cy.wait(1000).realPress("Tab").get(".flatpickr-calendar ").should("be.focused");
+		});
+	});
+
+	xit("should trap focus in 12-Hr format", () => {
+		cy.withMessageFixture("date-time-picker-12Hr", () => {
+			cy.contains("foobar012b1").click().get(".flatpickr-calendar ").should("be.focused");
+			cy.wait(1000)
+				.realPress("Tab")
+				.realPress("Tab")
+				.get(".flatpickr-hour ")
+				.should("be.focused");
+			cy.wait(1000).realPress("Tab").get(".flatpickr-minute ").should("be.focused");
+			// cy
+			//     .realPress("Tab")
+			//     .get(".flatpickr-second ").should("be.focused");
+			cy.wait(1000).realPress("Tab").get(".flatpickr-am-pm ").should("be.focused");
+			// cy
+			//     .realPress("Tab")
+			//     .contains("foobar012b2").should("be.focused");
+			cy.wait(1000).realPress("Tab").contains("foobar012b3").should("be.focused");
+			cy.wait(1000).realPress("Tab").get(".flatpickr-calendar ").should("be.focused");
+		});
+	});
+});

cypress/integration/messages/list.spec.ts → cypress/e2e/messages/list.cy.ts

@@ -43,8 +43,7 @@ describe("Message with List", () => {
 
     it("should post in chat on click on postback button", () => {
         cy.withMessageFixture('list', () => {
-            cy.contains("foobar009l1b1").focus();
-            cy.contains("foobar009l1b1").click();
+            cy.contains("foobar009l1b1").should("be.visible").click({force: true});
             cy.get(".webchat-message-row.user").contains("foobar009l1b1");
         })
     })

cypress/e2e/persistent-history.cy.ts

@@ -0,0 +1,65 @@
+describe("Persistent History", () => {
+	it("restores a persistent history from LocalStorage", () => {
+		cy.session("default1", () => {
+			const localOptions = {
+				userId: `user-1`,
+				sessionId: `session-1`,
+				channel: `channel-1`,
+				URLToken: "fake-url-token",
+			};
+
+			cy.window().then(window => {
+				window.localStorage.clear();
+			});
+
+			cy.visitWebchat();
+			cy.initWebchat(localOptions).openWebchat().startConversation();
+			cy.sendMessage("hello");
+			cy.contains('You said "hello".').should("be.visible");
+
+			cy.reload();
+
+			cy.window().then(window => {
+				expect(window.localStorage.length).to.greaterThan(0);
+				expect(window.sessionStorage.length).to.equal(0);
+			});
+		});
+	});
+
+	it("restores a persisted history from SessionStorage when using useSessionStorage", () => {
+		cy.session("default2", () => {
+			const options = {
+				userId: `user-${Math.floor(Math.random() * Date.now())}`,
+				sessionId: `session-${Math.floor(Math.random() * Date.now())}`,
+				channel: `channel-${Math.floor(Math.random() * Date.now())}`,
+				settings: {
+					embeddingConfiguration: {
+						useSessionStorage: true,
+					},
+				},
+			};
+
+			cy.visitWebchat();
+
+			cy.window().then(window => {
+				window.localStorage.clear();
+			});
+
+			cy.window().then(window => {
+				expect(window.localStorage.length).to.equal(0);
+				expect(window.sessionStorage.length).to.equal(0);
+			});
+			cy.initWebchat(options).openWebchat().startConversation();
+
+			cy.sendMessage("hello");
+
+			cy.contains('You said "hello".').should("be.visible");
+			cy.reload();
+
+			cy.window().then(window => {
+				expect(window.sessionStorage.length).to.greaterThan(0);
+				expect(window.localStorage.length).to.equal(0);
+			});
+		});
+	});
+});