N21-2089 placeholder element media shelf

cypress/e2e/mediashelf/useMediaShelf.feature

@@ -37,7 +37,7 @@ Feature: Media Shelf - To show media shelf with respective functionality
     Then I see the available media line is collapsed
     When I click on collapse available media line button
     Then I see the available media line is not collapsed
-    When I click on tree dot menu button on available media line
+    When I click on three dot menu button on available media line
     Then I see the available media line menu
     When I click on color picker button
     Then I see the available background colors
@@ -53,18 +53,18 @@ Feature: Media Shelf - To show media shelf with respective functionality
     Then I see the first media line is collapsed
     When I click the collapse button on the first media line
     Then I see the first media line is not collapsed
-    When I click the tree dot menu button on the first media line
+    When I click the three dot menu button on the first media line
     Then I see the media line menu
     When I click on edit title button
     When I edit the title of the first median line to 'Favoriten'
     Then I see the first media line with title 'Favoriten'
-    When I click the tree dot menu button on the first media line
+    When I click the three dot menu button on the first media line
     Then I see the media line menu
     When I click on color picker button
     Then I see the available background colors
     When I select the background color
     Then I see the first media line has background color 'rgb(251, 233, 231)'
-    When I click the tree dot menu button on the first media line
+    When I click the three dot menu button on the first media line
     Then I see the media line menu
     When I click on delete media line button
     Then I see the first media line has been deleted
@@ -73,6 +73,39 @@ Feature: Media Shelf - To show media shelf with respective functionality
       | teacher1_nbc | nbc       |
       | student2_nbc | nbc       |
 
+#  This test is not complete. There are missing steps that depend on the ticket N21-2043
+  @unstable_test
+  Scenario: Teacher deletes tool
+      Given I am logged in as a 'teacher1_nbc' at 'nbc'
+      When I go to media shelf
+      Then I see the thumbnail, title and description of media element 'CY Test Tool 1'
+      When I click the three dot menu button on media element 'CY Test Tool 1'
+      When I click on delete media element button
+      Then I see delete media element dialog
+      When I click confirm delete media element button
+      Then I see tool 'CY Test Tool 1' in the available media line
+
+#  This test is not complete. There are missing steps that depend on the ticket N21-2043
+  @unstable_test
+  Scenario: Deleting a tool from another location
+#     Admin deletes tool from school admin page
+      Given I am logged in as a 'admin1_nbc' at 'nbc'
+      When I click on administration in menu
+      When I click on sub menu school
+      When I click on external tools panel
+      Then I see the external tools table
+      When I click on delete button of tool 'CY Test Tool 2'
+      When I confirm deletion on deletion dialog
+#    Teachers removes deleted media element placeholder
+      Given I am logged in as a 'teacher1_nbc' at 'nbc'
+      When I go to media shelf
+      Then I see the deleted placeholder element of media element 'CY Test Tool 2'
+      When I click the three dot menu button on media element 'CY Test Tool 2'
+      When I click on delete media element button
+      Then I see delete media element dialog
+      When I click confirm delete media element button
+      Then I do not see tool 'CY Test Tool 2' in the available media line
+
   @unstable_test
   Scenario: Post-test: Admin deletes external tools
     Given I am logged in as a 'admin1_nbc' at 'nbc'

cypress/support/pages/mediashelf/pageMediaShelf.js

@@ -31,6 +31,11 @@ class MediaShelf {
 	static #mediaElementDeactivatedChip = '[data-testid="warning-chip-deactivated"]';
 	static #mediaElementNotLicensedChip = '[data-testid="warning-chip-not-licensed"]';
 	static #mediaElementIncompleteChip = '[data-testid="warning-chip-incomplete"]';
+	static #mediaElementNoLongerAvailableChip = '[data-testid="warning-chip-no-longer-available"]';
+	static #threeDotMenuOnMediaElement = '[data-testid="board-menu-icon"]';
+	static #deleteMediaElementButton = '[data-testid="board-menu-action-delete"]';
+	static #deleteMediaElementDialog = '[data-testid="delete-dialog-item"]';
+	static #confirmDeletionDialogButton = '[data-testid="dialog-confirm"]';
 	static #createLineButton = '[data-testid="create-line-button"]';
 
 	navigateToMediaShelf() {
@@ -167,6 +172,12 @@ class MediaShelf {
 			.should("exist")
 	}
 
+	seeDeletedMediaElementPlaceholder(toolName) {
+		const element = cy.get('[data-testid="media-element-' + toolName + '"]');
+		element.find(MediaShelf.#mediaElementNoLongerAvailableChip)
+			.should("exist")
+	}
+
 	mediaElementIsVisibleInAvailableMediaLine(toolName) {
 		const line = cy.get(MediaShelf.#availableMediaLineSpace)
 		line.find('[data-testid="media-element-' + toolName + '"]').should("exist")
@@ -246,6 +257,28 @@ class MediaShelf {
 	clickMediaElement(tool) {
 		cy.get('[data-testid="media-element-' + tool + '"]').click();
 	}
+
+	clickThreeDotMenuButtonOnMediaElement(toolName) {
+		cy.get('[data-testid="media-element-' + toolName + '"]')
+			.find(MediaShelf.#threeDotMenuOnMediaElement)
+			.click()
+	}
+
+	clickDeleteMediaElementButton() {
+		cy.get(MediaShelf.#deleteMediaElementButton)
+			.click()
+	}
+
+	seeDeleteMediaDialog() {
+		cy.get(MediaShelf.#deleteMediaElementDialog)
+			.should("exist")
+	}
+
+	clickConfirmDeleteDialog() {
+		cy.get(MediaShelf.#confirmDeletionDialogButton)
+			.click()
+	}
+
 }
 
 export default MediaShelf;

cypress/support/step_definition/mediashelf/commonMediaShelfSteps.spec.js

@@ -15,7 +15,7 @@ When("I click on collapse available media line button", () => {
 	mediaShelf.clickCollapseAvailableMediaLineButton();
 });
 
-When("I click on tree dot menu button on available media line", () => {
+When("I click on three dot menu button on available media line", () => {
 	mediaShelf.clickThreeDotMenuButtonOnAvailableMediaLine();
 });
 
@@ -35,7 +35,7 @@ When("I click add media line button", () => {
 	mediaShelf.clickAddMediaLineButton()
 })
 
-When("I click the tree dot menu button on the first media line", () => {
+When("I click the three dot menu button on the first media line", () => {
 	mediaShelf.clickThreeDotMenuButtonOnMediaLine()
 })
 
@@ -161,3 +161,22 @@ Then("I do not see tool {string} in the available media line", (toolName) => {
 	mediaShelf.mediaElementIsNotVisibleInAvailableMediaLine(toolName);
 });
 
+When("I click the three dot menu button on media element {string}", (toolName) => {
+	mediaShelf.clickThreeDotMenuButtonOnMediaElement(toolName)
+});
+
+When("I click on delete media element button", () => {
+	mediaShelf.clickDeleteMediaElementButton()
+});
+
+Then("I see the deleted placeholder element of media element {string}", (toolName) => {
+	mediaShelf.seeDeletedMediaElementPlaceholder(toolName)
+});
+
+Then("I see delete media element dialog", () => {
+	mediaShelf.seeDeleteMediaDialog()
+});
+
+When("I click confirm delete media element button", () => {
+	mediaShelf.clickConfirmDeleteDialog()
+});