test: Adding Cypress integration testcase for Sensitive input (#143)

cypress/e2e/tests.cy.ts

@@ -17,6 +17,15 @@ describe("Chat Bot Test Suite", () => {
 	it("Sends name and verifies bot reply", () => {
 		cy.get(".rcb-chat-input-textarea").type("Tan Jin{enter}");
 		cy.get(".rcb-bot-message").contains("Hey Tan Jin!").should("be.visible");
+		cy.get(".rcb-bot-message").contains("Before we processed").should("be.visible");
+	});
+
+	it("Senstive input should be masked", () => {
+		cy.get(".rcb-chat-input-textarea").type("123456");
+		cy.get('input[type="password"]').should('exist');
+		cy.get(".rcb-chat-input-textarea").should('have.value',"123456");
+		cy.get(".rcb-send-button").click();
+		cy.get(".rcb-user-message").contains("******").should("be.visible");
 	});
 
 	it("Disabled chat input", () => {
@@ -86,19 +95,17 @@ describe("Chat Bot Test Suite", () => {
 		cy.get(".rcb-emoji-button-enabled").click();
 		cy.get(".rcb-emoji").should('exist').should('be.visible').first().click();
 		cy.get(".rcb-send-button").click();
-		cy.get(".rcb-bot-message")
-			.eq(9)
-			.contains("Your answer is incorrect, try again!")
-			.should("be.visible");
+		cy.get(".rcb-chat-body-container").scrollTo('bottom', { duration: 1000 });
+		cy.get(".rcb-bot-message").contains("Your answer is incorrect, try again!");
 	});
 
 	it("Sends correct color guess and verifies bot reply", () => {
-		cy.get(".rcb-chat-input-textarea").should("be.visible");
+		cy.get(".rcb-chat-input-textarea").scrollIntoView().should("be.visible");
 		cy.get(".rcb-chat-input-textarea").type("black{enter}");
 	});
 
 	it("Closes chat window and verifies bot reply", () => {
-		cy.get(".rcb-window-close").should("exist");
+		cy.get(".rcb-button-show").should("exist");
 	});
 
 	it("Reopens chat window and verifies bot reply", () => {
@@ -108,6 +115,8 @@ describe("Chat Bot Test Suite", () => {
 	});
 
 	it("Send food and verifies bot reply", () => {
+		cy.get(".bold").should('have.css', 'font-weight')
+		.then((fontWeight) => +fontWeight).and('be.gte', 700)
 		cy.get(".rcb-chat-input-textarea")
 			.should("be.visible")
 			.type("pasta{enter}");

src/App.tsx

@@ -1,18 +1,38 @@
+import { useState } from "react";
 import ChatBot from "./components/ChatBot";
 import { Flow } from "./types/Flow";
 import { Params } from "./types/Params";
 
 function App() {
+	const [name, setName] = useState("")
 
 	// Serves as an example flow used during the development phase - covers all possible attributes in a block.
 	// restore to default state before running selenium tests (or update the test cases if necessary)!
 	const flow: Flow = {
 		start: {
 			message: "Hello! What is your name?",
-			path: "ask_age_group",
+			path: "show_name",
+		},
+		show_name : {
+			message: (params: Params) => `Hey ${params.userInput}! Nice to meet you.`,
+			function: (params: Params) => setName(params.userInput),
+			transition: {duration: 1000},
+			path: "ask_token",
+		},
+		ask_token: {
+			message: () => "Before we processed, we need to verify your profile id, "
+			+ "Enter your 6 digit profile id",
+			isSensitive: true,
+			path: (params: Params) => {
+				if (params.userInput.length !== 6) {
+					return "incorrect_answer"
+				} else {
+					return "ask_age_group";
+				}
+			},
 		},
 		ask_age_group: {
-			message: (params: Params) => `Hey ${params.userInput}! Nice to meet you, what is your age group?`,
+			message: () => `Hey ${name}!, Your account got verified, May i know your age group?`,
 			options: ["child", "teen", "adult"],
 			chatDisabled: true,
 			path: () => "ask_math_question",
@@ -85,7 +105,8 @@ function App() {
 			},
 		},
 		close_chat: {
-			message: "I went into hiding but you found me! Ok tell me, what's your favourite food?",
+			message: "I went into hiding but you found me! Ok tell me, "+
+			"<b class='bold'>what's your favourite food?</b>",
 			path: "ask_image"
 		},
 		ask_image: {
@@ -123,9 +144,10 @@ function App() {
 						settings={{
 							audio: {disabled: false},
 							chatInput: {botDelay: 1000},
-							userBubble: {showAvatar: true},
-							botBubble: {showAvatar: true},
+							userBubble: {showAvatar: true, dangerouslySetInnerHtml: true},
+							botBubble: {showAvatar: true, dangerouslySetInnerHtml: true},
 							voice: {disabled: false},
+							sensitiveInput: {asterisksCount: 6},
 						}}
 					></ChatBot>
 				</div>