BC-7909 POC for tldraw test

cypress.config.js

@@ -99,6 +99,6 @@ module.exports = defineConfig({
 		setupNodeEvents,
 		// testIsolation is set to false because when testIsolation is set to true or in v12 its anyway by default enabled, then it clears the page again that might be redundant.
 		// we are using cy.session() in login custom command, which is inheriting the testIsolation properties by default as true and clearing the page (cookies, local storage..etc.) in the test.
-		testIsolation: false,
+		testIsolation: true,
 	},
 });

cypress/e2e/tldraw/testTldraw.feature

@@ -0,0 +1,49 @@
+@regression_test
+@stable_test
+Feature: Test tldraw on board
+
+    Scenario: I can create a whiteboard element and draw on it
+        # pre-condition: creating accounts
+        Given I am logged in as a '<student>' at '<namespace>'
+        Given I am logged in as a '<teacher>' at '<namespace>'
+        Given I am logged in as a '<admin>' at '<namespace>'
+
+        # admin creates a course
+        Given a course with name '<course_name>' exists with '<teacher_fullname>' as teacher and '<student_fullname>' as student
+
+        # teacher a board with a whiteboard element and draws on it
+        Given I am logged in as a '<teacher>' at '<namespace>'
+        Given a board exists in course '<course_name>'
+        Given the board has a column with a card
+        When I click on plus icon to add content into card
+        When I select whiteboard from the menu
+        When I click on the whiteboard element
+        When I click on the pencil tool
+        When I draw a line on the canvas
+        When I click on the text tool
+        When I type text on the canvas
+        Then I should see the line drawn
+        Then I should see the text drawn
+
+        # student can access the whiteboard element and see the drawing
+        Given I am logged in as a '<student>' at '<namespace>'
+        When I go to courses overview
+        When I go to course '<course_name>'
+        When I click on the board
+        When I click on the whiteboard element
+        Then I should see the line drawn
+        Then I should see the text drawn
+
+        # post-condition: clean up the created course
+        Given I am logged in as a '<teacher>' at '<namespace>'
+        Given course with name '<course_name>' is deleted
+
+        @school_api_test
+        Examples:
+		    | namespace | admin      | teacher      | teacher_fullname  | student      | student_fullname  | course_name              | board_name              |
+		    | dbc       | admin1_dbc | teacher1_dbc | cypress teacher_1 | student1_dbc | cypress student_1 | CypressAut TLDraw Course | CypressAut TLDraw Board |
+
+        @staging_test
+        Examples:
+		    | namespace | admin      | teacher      | teacher_fullname  | student      | student_fullname  | course_name              | board_name              |
+		    | brb       | admin1_brb | teacher1_brb | Karl Herzog       | student1_brb | Herbert Kraft     | CypressAut TLDraw Course | CypressAut TLDraw Board |

cypress/support/pages/course/pageCourses.js

@@ -297,7 +297,7 @@ class Courses {
 		cy.get(Courses.#courseOverviewNavigationButton).click();
 	}
 
-	navigateToCourseBoard(courseName) {
+	navigateToCoursePage(courseName) {
 		cy.contains(Courses.#courseTitleInCourseoverview, courseName)
 			.should("be.visible")
 			.then((title) => {

cypress/support/pages/course_board/pageBoard.js

@@ -21,7 +21,8 @@ class Board {
 	static #columnPlaceholder = '[placeholder="Spalte 1"]';
 	static #newColumnBoardFABInCourseDetail = '[data-testid="fab_button_add_board"]';
 	static #threeDotInCourseBoardTitle = '[data-testid="board-menu-icon"]';
-	static #editOptionInThreeDotCourseBoardTitle = '[data-testid="board-menu-action-edit"]';
+	static #editOptionInThreeDotCourseBoardTitle =
+		'[data-testid="board-menu-action-edit"]';
 	static #draftChipInCourseBoardName = '[data-testid="board-draft-chip"]';
 	static #addCardInColumnButton = '[data-testid="column-0-add-card-btn"]';
 	static #addContentIntoCardButton = '[data-testid="add-element-btn"]';
@@ -37,8 +38,8 @@ class Board {
 	static #singleColumnBoardOptionInDialogBox =
 		'[data-testid="dialog-add-single-column-board"]';
 	static #editButtonInThreeDotMenu = '[data-testid="board-menu-action"]';
-	static #externalToolElementAlert = '[data-testid="board-external-tool-element-alert"]';
-
+	static #externalToolElementAlert =
+		'[data-testid="board-external-tool-element-alert"]';
 
 	clickPlusIconToAddCardInColumn() {
 		cy.get(Board.#addCardInColumnButton).click();
@@ -53,7 +54,7 @@ class Board {
 	}
 
 	seeWhiteboardOnPage() {
-		cy.get(Board.#drawingElement).should('exist');
+		cy.get(Board.#drawingElement).should("exist");
 	}
 
 	selectExternalToolsFromMenu() {
@@ -124,6 +125,10 @@ class Board {
 		cy.get(Board.#addColumnTitleInput).should("not.exist");
 	}
 
+	clickOnWhiteboardElement() {
+		cy.get(Board.#drawingElement).invoke("removeAttr", "target").click();
+	}
+
 	clickOnOpenTldrawDrawingElement() {
 		let clickSpy;
 
@@ -240,18 +245,19 @@ class Board {
 	}
 
 	seePreferredExternalToolInMenu(toolName) {
-		cy.get(`[data-testid="create-element-preferred-element-${toolName}"]`)
-			.should("be.visible");
+		cy.get(`[data-testid="create-element-preferred-element-${toolName}"]`).should(
+			"be.visible"
+		);
 	}
 
 	selectPreferredExternalToolFromMenu(toolName) {
-		cy.get(`[data-testid="create-element-preferred-element-${toolName}"]`)
-			.click();
+		cy.get(`[data-testid="create-element-preferred-element-${toolName}"]`).click();
 	}
 
 	preferredExternalToolIsNotVisibleInMenu(toolName) {
-		cy.get(`[data-testid="create-element-preferred-element-${toolName}"]`)
-			.should("not.exist")
+		cy.get(`[data-testid="create-element-preferred-element-${toolName}"]`).should(
+			"not.exist"
+		);
 	}
 
 	clickThreeDotMenuOnExternalToolElementWithTool(toolName) {
@@ -260,92 +266,90 @@ class Board {
 			.click();
 	}
 
-	clickEditButtonInThreeDotMenu(){
+	clickEditButtonInThreeDotMenu() {
 		cy.get(Board.#editButtonInThreeDotMenu).click();
 	}
 
-	clickDeleteButtonInThreeDotMenu(){
+	clickDeleteButtonInThreeDotMenu() {
 		cy.get(Board.#deleteOptionThreeDot).click();
 	}
 
-	seeToolIsNotMarkedAsIncomplete(toolName){
+	seeToolIsNotMarkedAsIncomplete(toolName) {
 		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`)
 			.find(Board.#externalToolElementAlert)
 			.children()
-			.should('have.length', 0);
+			.should("have.length", 0);
 	}
 
-
-	seeToolIsMarkedAsIncomplete(toolName){
-		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`)
-			.within(() => {
-				cy.get(Board.#externalToolElementAlert)
-					.children(".v-alert.v-theme--light.text-warning")
-					.should("have.class", "text-warning");
-			});
+	seeToolIsMarkedAsIncomplete(toolName) {
+		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`).within(() => {
+			cy.get(Board.#externalToolElementAlert)
+				.children(".v-alert.v-theme--light.text-warning")
+				.should("have.class", "text-warning");
+		});
 	}
 
-	seeToolIsMarkedAsIncompleteOperational(toolName){
-		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`)
-			.within(() => {
-				cy.get(Board.#externalToolElementAlert)
-					.children(".v-alert.v-theme--light.text-info")
-					.should("have.class", "text-info");
-			});
+	seeToolIsMarkedAsIncompleteOperational(toolName) {
+		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`).within(() => {
+			cy.get(Board.#externalToolElementAlert)
+				.children(".v-alert.v-theme--light.text-info")
+				.should("have.class", "text-info");
+		});
 	}
 
-	seeToolIsNotMarkedAsIncompleteOperational(toolName){
+	seeToolIsNotMarkedAsIncompleteOperational(toolName) {
 		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`)
 			.find(Board.#externalToolElementAlert)
 			.children()
-			.should('have.length', 0);
+			.should("have.length", 0);
 	}
 
-	clickExternalToolElementWithTool(toolName){
-		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`).click()
+	clickExternalToolElementWithTool(toolName) {
+		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`).click();
 	}
 
-	clickOnThreeDotMenuInBoardHeader(){
+	clickOnThreeDotMenuInBoardHeader() {
 		cy.get(Board.#draftChipInCourseBoardName)
 			.siblings()
 			.find(Board.#threeDotInCourseBoardTitle)
 			.click();
 	}
 
-	seeToolIsMarkedAsDeactivated(toolName){
-		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`)
-			.within(() => {
-				cy.get(Board.#externalToolElementAlert)
-					.children(".v-alert.v-theme--light.text-warning")
-					.should("have.class", "text-warning");
-			});
+	seeToolIsMarkedAsDeactivated(toolName) {
+		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`).within(() => {
+			cy.get(Board.#externalToolElementAlert)
+				.children(".v-alert.v-theme--light.text-warning")
+				.should("have.class", "text-warning");
+		});
 	}
 
-	seeToolIsNotMarkedAsDeactivated(toolName){
+	seeToolIsNotMarkedAsDeactivated(toolName) {
 		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`)
 			.find(Board.#externalToolElementAlert)
 			.children()
-			.should('have.length', 0);
+			.should("have.length", 0);
 	}
 
 	launchTool(toolName, toolURL) {
-		const launchedTool =  { toolName: toolName, isLaunched: false };
+		const launchedTool = { toolName: toolName, isLaunched: false };
 
 		cy.window().then((win) => {
-			cy.stub(win, "open").as("openStub").callsFake((url) => {
-				expect(url).to.contain(toolURL);
-				launchedTool.isLaunched = true;
-			});
+			cy.stub(win, "open")
+				.as("openStub")
+				.callsFake((url) => {
+					expect(url).to.contain(toolURL);
+					launchedTool.isLaunched = true;
+				});
 		});
 
 		cy.wrap(launchedTool).as("launchedTool");
 
-		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`).click()
+		cy.get(`[data-testid="board-external-tool-element-${toolName}"]`).click();
 
-		cy.get("@openStub").invoke("restore")
+		cy.get("@openStub").invoke("restore");
 	}
 
-	toolWasLaunched(toolName){
+	toolWasLaunched(toolName) {
 		cy.get("@launchedTool").then((launchedTool) => {
 			expect(launchedTool.toolName).to.equal(toolName);
 			expect(launchedTool.isLaunched).to.be.true;
@@ -354,20 +358,20 @@ class Board {
 		cy.wrap({ toolName: "", isLaunched: false }).as("launchedTool");
 	}
 
-	enterTextToTextFieldInCard(textContent){
+	enterTextToTextFieldInCard(textContent) {
 		cy.get('[data-testid="ckeditor"]').then((el) => {
 			const editor = el[0].ckeditorInstance;
 			editor.setData(textContent);
-			});
-			cy.get('[data-testid="ckeditor"]').then((el) => {
+		});
+		cy.get('[data-testid="ckeditor"]').then((el) => {
 			const editor = el[0].ckeditorInstance;
 			const editorContent = editor.getData();
 			const plainText = editorContent.replace(/<\/?[^>]+(>|$)/g, "");
 			expect(plainText).to.equal(textContent);
-			});
+		});
 	}
 
-	seeTextInTextFieldInCard(textContent){
+	seeTextInTextFieldInCard(textContent) {
 		cy.contains(textContent);
 	}
 

cypress/support/pages/tldraw/pageTldraw.js

@@ -0,0 +1,34 @@
+export class Tldraw {
+	static #canvas = "#canvas";
+	static #pencilButton = "#TD-PrimaryTools-Pencil";
+	static #textButton = "#TD-PrimaryTools-Text";
+	static drawShape = '[data-shape="draw"]';
+	static textShape = '[data-shape="text"]';
+
+	selectPencilTool() {
+		cy.get(Tldraw.#pencilButton).click();
+	}
+
+	selectTextTool() {
+		cy.get(Tldraw.#textButton).click();
+	}
+
+	drawLine(startX, startY, endX, endY) {
+		cy.get(Tldraw.#canvas)
+			.realMouseDown({ button: "left", x: startX, y: startY })
+			.realMouseMove(endX, endY)
+			.realMouseUp({ button: "left", x: endX, y: endY });
+	}
+
+	typeText(text, x, y) {
+		cy.get(Tldraw.#canvas).realClick({ x: x, y: y }).realType(text);
+	}
+
+	checkLine() {
+		cy.get(Tldraw.drawShape).should("be.visible");
+	}
+
+	checkText(text) {
+		cy.get(Tldraw.textShape).should("be.visible").should("contain", text);
+	}
+}