From 9e41cb162de805677f50dff34874ef0430db47de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 14 Nov 2023 18:47:20 +0100
Subject: [PATCH] test: Add test selectors and label multiselect cypress test
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 cypress/e2e/cardFeatures.js                | 33 ++++++++++++++++++++++
 src/components/card/AssignmentSelector.vue |  2 +-
 src/components/card/Description.vue        |  2 +-
 src/components/card/DueDateSelector.vue    |  2 +-
 src/components/card/TagSelector.vue        |  4 +--
 5 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index fc85cff11..ee5de838f 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -217,6 +217,39 @@ describe('Card', function() {
 			cy.get(`.card:contains("${newCardTitle}")`).find('[data-due-state]').should('not.exist')
 		})
 
+		it('Add a label', function() {
+			const newCardTitle = 'Card with labels'
+
+			cy.get('.button-vue[aria-label*="Add card"]')
+				.first().click()
+			cy.get('.stack__card-add form input#new-stack-input-main')
+				.type(newCardTitle)
+			cy.get('.stack__card-add form input[type=submit]')
+				.first().click()
+			cy.get(`.card:contains("${newCardTitle}")`).should('be.visible').click()
+
+			cy.get('#app-sidebar-vue [data-test="tag-selector"]').should('be.visible').click()
+			cy.get('.multiselect__option:contains("Action needed")').should('be.visible').click()
+
+			cy.get('[data-test="tag-selector"] .selector-wrapper--icon').click()
+			cy.get('.multiselect__option:contains("Action needed")').should('not.be.visible')
+
+			cy.get('[data-test="tag-selector"] .multiselect__tags .tag:contains("Action needed")')
+				.should('be.visible')
+
+			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Action needed")')
+				.should('be.visible')
+
+			cy.get('#app-sidebar-vue [data-test="tag-selector"]').should('be.visible').click()
+			cy.get('.multiselect__option:contains("Later")').should('be.visible').click()
+			cy.get('.multiselect__option:contains("Action needed")').should('be.visible').click()
+
+			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Later")')
+				.should('be.visible')
+			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Action needed")')
+				.should('not.exist')
+		})
+
 	})
 
 })
diff --git a/src/components/card/AssignmentSelector.vue b/src/components/card/AssignmentSelector.vue
index bfebfe3e4..6b9287b6c 100644
--- a/src/components/card/AssignmentSelector.vue
+++ b/src/components/card/AssignmentSelector.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="selector-wrapper" :aria-label="t('deck', 'Assign to users/groups/circles')">
+	<div class="selector-wrapper" :aria-label="t('deck', 'Assign to users/groups/circles')" data-test="assignment-selector">
 		<div class="selector-wrapper--icon">
 			<AccountMultiple :size="20" />
 		</div>
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index 76c5fbdfe..a804de325 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div>
+	<div data-test="description">
 		<h5>
 			{{ t('deck', 'Description') }}
 			<span v-if="descriptionLastEdit && !descriptionSaving">{{ t('deck', '(Unsaved)') }}</span>
diff --git a/src/components/card/DueDateSelector.vue b/src/components/card/DueDateSelector.vue
index e04055406..1bfb8bd88 100644
--- a/src/components/card/DueDateSelector.vue
+++ b/src/components/card/DueDateSelector.vue
@@ -1,5 +1,5 @@
 <template>
-	<CardDetailEntry :label="t('deck', 'Assign a due date to this card…')">
+	<CardDetailEntry :label="t('deck', 'Assign a due date to this card…')" data-test="due-date-selector">
 		<Calendar v-if="!card.done" slot="icon" :size="20" />
 		<CalendarCheck v-else slot="icon" :size="20" />
 		<template v-if="!card.done && !card.archived">
diff --git a/src/components/card/TagSelector.vue b/src/components/card/TagSelector.vue
index b71b21423..45c68fb1f 100644
--- a/src/components/card/TagSelector.vue
+++ b/src/components/card/TagSelector.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="selector-wrapper" :aria-label="t('deck', 'Assign a tag to this card…')">
+	<div class="selector-wrapper" :aria-label="t('deck', 'Assign a tag to this card…')" data-test="tag-selector">
 		<div class="selector-wrapper--icon">
 			<TagMultiple :size="20" />
 		</div>
-		<NcMultiselect v-model="assignedLabels"
+		<NcMultiselect :value="assignedLabels"
 			class="selector-wrapper--selector"
 			:multiple="true"
 			:disabled="disabled"