basic e2e tests for stack title edit

Signed-off-by: Simon Hötten <s+git@hoetten.org>

cypress/e2e/stackFeatures.js

@@ -1,30 +1,69 @@
 import { randHash } from '../utils/index.js'
 const randUser = randHash()
 
+const boardTitle = 'TestBoard'
+const testBoardData = {
+	title: boardTitle,
+	stacks: [
+		{ title: 'Existing Stack1' },
+		{ title: 'Existing Stack2' },
+	],
+}
+
 describe('Stack', function() {
-	const board = 'TestBoard'
 	const password = 'pass123'
-	const stack = 'List 1'
 
 	before(function() {
 		cy.nextcloudCreateUser(randUser, password)
-		cy.deckCreateBoard({ user: randUser, password }, board)
+		cy.createExampleBoard({
+			user: randUser,
+			password,
+			board: testBoardData,
+		})
 	})
 
 	beforeEach(function() {
 		cy.logout()
 		cy.login(randUser, password)
+
+		cy.openLeftSidebar()
+		cy.getNavigationEntry(boardTitle)
+			.click({ force: true })
 	})
 
 	it('Can create a stack', function() {
-		cy.openLeftSidebar()
-		cy.getNavigationEntry(board)
-			.click({ force: true })
-
 		cy.get('#stack-add button').first().click()
-		cy.get('#stack-add form input#new-stack-input-main').type(stack)
+		cy.focused().type('List 1')
 		cy.get('#stack-add form input[type=submit]').first().click()
 
-		cy.get('.board .stack').eq(0).contains(stack).should('be.visible')
+		cy.contains('List 1').should('be.visible')
+	})
+
+	it('Can edit a stack title', function() {
+		cy.get('[data-cy-stack="Existing Stack1"]').within(() => {
+			cy.contains('Existing Stack1').click()
+			cy.focused().type(' with a new title')
+			cy.get('[data-cy="editStackTitleForm"] input[type="submit"]').click()
+
+			cy.contains('Existing Stack1 with a new title').should('be.visible')
+		})
+	})
+
+	it('Can abort a stack title edit via esc', function() {
+		cy.contains('Existing Stack2').click()
+		cy.focused().type(' with a new title, maybe?')
+		cy.focused().type('{esc}')
+
+		cy.contains('Existing Stack2').should('be.visible')
+		cy.contains('Existing Stack2 with a new title, maybe?').should('not.exist')
+	})
+
+	it('Can abort a stack title edit via click outside', function() {
+		cy.contains('Existing Stack2').click()
+		cy.focused().type(' with a new title, maybe?')
+		cy.get('[data-cy-stack="Existing Stack2"]').click('bottom')
+
+		cy.contains('Existing Stack2').should('be.visible')
+		cy.contains('Existing Stack2 with a new title, maybe?').should('not.exist')
 	})
 })

src/components/board/Stack.vue

@@ -22,7 +22,7 @@
   -->
 
 <template>
-	<div class="stack">
+	<div class="stack" :data-cy-stack="stack.title">
 		<div v-click-outside="stopCardCreation"
 			class="stack__header"
 			:class="{'stack__header--add': showAddCard}"
@@ -43,6 +43,7 @@
 				</h3>
 				<form v-else-if="editing"
 					v-click-outside="cancelEdit"
+					data-cy="editStackTitleForm"
 					@submit.prevent="finishedEdit(stack)"
 					@keyup.esc="cancelEdit">
 					<input v-model="copiedStack.title"