test: Add test selectors and label multiselect cypress test

Signed-off-by: Julius Härtl <jus@bitgrid.net>

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')
+		})
+
 	})
 
 })

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>

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>

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">

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"