add basic e2e tests for stack title

.gitignore

@@ -3,6 +3,7 @@ js/
 build/
 css/style.css
 css/vendor.css
+cypress/videos/
 tests/integration/vendor/
 tests/integration/composer.lock
 tests/.phpunit.result.cache

cypress.config.js

@@ -11,7 +11,6 @@ module.exports = defineConfig({
 			return require('./cypress/plugins/index.js')(on, config)
 		},
 		baseUrl: 'http://nextcloud.local/index.php',
-		experimentalSessionAndOrigin: true,
 		specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
 	},
 })

cypress/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	extends: [
+		'plugin:cypress/recommended',
+	],
+}

cypress/e2e/boardFeatures.js

@@ -1,15 +1,15 @@
-import { randHash } from '../utils'
-const randUser = randHash()
+import { randUser } from '../utils/index.js'
+const user = randUser()
 
 describe('Board', function() {
-	const password = 'pass123'
 
 	before(function() {
-		cy.nextcloudCreateUser(randUser, password)
+		cy.createUser(user)
 	})
 
 	beforeEach(function() {
-		cy.login(randUser, password)
+		cy.login(user)
+		cy.visit('/apps/deck')
 	})
 
 	it('Can create a board', function() {

cypress/e2e/cardFeatures.js

@@ -1,5 +1,5 @@
-import { randHash } from '../utils'
-const randUser = randHash()
+import { randUser } from '../utils/index.js'
+const user = randUser()
 
 const testBoardData = {
 	title: 'MyBoardTest',
@@ -18,16 +18,18 @@ const testBoardData = {
 
 describe('Card', function() {
 	before(function() {
-		cy.nextcloudCreateUser(randUser, randUser)
+		cy.createUser(user)
+		cy.login(user)
 		cy.createExampleBoard({
-			user: randUser,
-			password: randUser,
+			user: user.userId,
+			password: user.password,
 			board: testBoardData,
 		})
 	})
 
 	beforeEach(function() {
-		cy.login(randUser, randUser)
+		cy.login(user)
+		cy.visit('/apps/deck')
 	})
 
 	it('Can show card details modal', function() {

cypress/e2e/deckDashboard.js

@@ -1,21 +1,20 @@
-import { randHash } from '../utils'
-const randUser = randHash()
+import { randUser } from '../utils/index.js'
+const user = randUser()
 
 describe('Deck dashboard', function() {
-	const password = 'pass123'
-
 	before(function() {
-		cy.nextcloudCreateUser(randUser, password)
+		cy.createUser(user)
 	})
 
 	beforeEach(function() {
-		cy.login(randUser, password)
+		cy.login(user)
+		cy.visit('/apps/deck')
 	})
 
 	it('Can show the right title on the dashboard', function() {
 		cy.get('.board-title h2')
-        	.should('have.length', 1).first()
-        	.should('have.text', 'Upcoming cards')
+			.should('have.length', 1).first()
+			.should('have.text', 'Upcoming cards')
 	})
 
 	it('Can see the default "Personal Board" created for user by default', function() {

cypress/e2e/stackFeatures.js

@@ -1,30 +1,69 @@
-import { randHash } from '../utils'
-const randUser = randHash()
+import { randUser } from '../utils/index.js'
+const user = randUser()
+
+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.createUser(user)
+		cy.login(user)
+		cy.createExampleBoard({
+			user: user.userId,
+			password: user.password,
+			board: testBoardData,
+		})
 	})
 
 	beforeEach(function() {
-		cy.logout()
-		cy.login(randUser, password)
-	})
+		cy.login(user)
+		cy.visit('/apps/deck')
 
-	it('Can create a stack', function() {
 		cy.openLeftSidebar()
-		cy.getNavigationEntry(board)
+		cy.getNavigationEntry(boardTitle)
 			.click({ force: true })
+	})
 
+	it('Can create a stack', function() {
 		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.contains('Existing Stack1')
+		cy.get('[data-cy-stack="Existing Stack1"]').within(() => {
+			cy.contains('Existing Stack1').click()
+			cy.focused().type(' renamed')
+			cy.get('[data-cy="editStackTitleForm"] input[type="submit"]').click()
+		})
+		cy.contains('Existing Stack1 renamed').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')
 	})
 })

cypress/support/commands.js

@@ -20,60 +20,12 @@
  *
  */
 
-const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
-Cypress.env('baseUrl', url)
-
-Cypress.Commands.add('login', (user, password, route = '/apps/deck/') => {
-	const session = `${user}-${Date.now()}`
-	cy.session(session, function() {
-		cy.visit(route)
-		cy.get('input[name=user]').type(user)
-		cy.get('input[name=password]').type(password)
-		cy.get('form[name=login] [type=submit]').click()
-		cy.url().should('include', route)
-	})
-	cy.visit(route)
-})
+import { addCommands } from '@nextcloud/cypress'
 
-Cypress.Commands.add('logout', (route = '/') => {
-	cy.session('_guest', function() {})
-})
-
-Cypress.Commands.add('nextcloudCreateUser', (user, password) => {
-	cy.clearCookies()
-	cy.request({
-		method: 'POST',
-		url: `${Cypress.env('baseUrl')}/ocs/v1.php/cloud/users?format=json`,
-		form: true,
-		body: {
-			userid: user,
-			password,
-		},
-		auth: { user: 'admin', pass: 'admin' },
-		headers: {
-			'OCS-ApiRequest': 'true',
-			'Content-Type': 'application/x-www-form-urlencoded',
-		},
-	}).then((response) => {
-		cy.log(`Created user ${user}`, response.status)
-	})
-})
+addCommands()
 
-Cypress.Commands.add('nextcloudUpdateUser', (user, password, key, value) => {
-	cy.request({
-		method: 'PUT',
-		url: `${Cypress.env('baseUrl')}/ocs/v2.php/cloud/users/${user}`,
-		form: true,
-		body: { key, value },
-		auth: { user, pass: password },
-		headers: {
-			'OCS-ApiRequest': 'true',
-			'Content-Type': 'application/x-www-form-urlencoded',
-		},
-	}).then((response) => {
-		cy.log(`Updated user ${user} ${key} to ${value}`, response.status)
-	})
-})
+const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
+Cypress.env('baseUrl', url)
 
 Cypress.Commands.add('openLeftSidebar', () => {
 	cy.get('.app-navigation button.app-navigation-toggle').click()

cypress/support/e2e.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands.js'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

cypress/utils/index.js

@@ -1 +1,4 @@
+import { User } from '@nextcloud/cypress'
+
 export const randHash = () => Math.random().toString(36).replace(/[^a-z]+/g, '').slice(0, 10)
+export const randUser = () => new User(randHash(), randHash())

package.json

@@ -22,6 +22,7 @@
     "watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
     "lint": "eslint --ext .js,.vue src",
     "lint:fix": "eslint --ext .js,.vue src --fix",
+    "lint:cypress": "eslint --ext .js cypress",
     "stylelint": "stylelint src",
     "stylelint:fix": "stylelint src --fix",
     "test": "jest",
@@ -73,12 +74,14 @@
   "devDependencies": {
     "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^2.3.0",
+    "@nextcloud/cypress": "^1.0.0-beta.2",
     "@nextcloud/eslint-config": "^8.1.4",
     "@nextcloud/stylelint-config": "^2.3.0",
     "@nextcloud/webpack-vue-config": "^5.4.0",
     "@relative-ci/agent": "^4.1.3",
     "@vue/test-utils": "^1.3.3",
     "cypress": "^12.2.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-webpack-plugin": "^3.2.0",
     "jest": "^29.3.1",
     "jest-serializer-vue": "^3.1.0",