enh(Cypress): improve some selectors

Signed-off-by: Cleopatra Enjeck M. <patrathewhiz@gmail.com>

cypress/e2e/column-selection.cy.js

@@ -18,9 +18,6 @@ describe('Test column ' + columnTitle, () => {
 	beforeEach(function() {
 		cy.login(localUser)
 		cy.visit('apps/tables')
-	})
-
-	it('Table and column setup', () => {
 		cy.createTable(tableTitle)
 	})
 
@@ -29,52 +26,46 @@ describe('Test column ' + columnTitle, () => {
 		cy.createSelectionColumn(columnTitle, ['first option', 'second option', '👋 third option', '🤷🏻 fifths'], 'second option', true)
 
 		// check if default value is set on row creation
-		cy.get('button').contains('Create row').click()
-		cy.get('.modal-container__content h2').contains('Create row').should('be.visible')
-		cy.get('.modal__content .title').contains(columnTitle).should('be.visible')
-		cy.get('.modal__content .title').click()
+		cy.get('[data-cy="createRowBtn"]').click()
+		cy.get('[data-cy="createRowModal"]').should('be.visible')
+		cy.get('[data-cy="createRowModal"] .title').should('be.visible')
+		cy.get('[data-cy="createRowModal"] .title').click()
 		cy.get('.vs__dropdown-toggle .vs__selected span[title="second option"]').should('exist')
-		cy.get('button').contains('Save').click()
-		cy.get('.custom-table table tr td div').contains('second option').should('be.visible')
+		cy.get('[data-cy="createRowSaveButton"]').click()
+		cy.get('[data-cy="ncTable"] tr td div').contains('second option').should('be.visible')
 
 		// create a row and select non default value
 		cy.get('button').contains('Create row').click()
-		cy.get('.modal__content .slot input').first().click()
+		cy.get('[data-cy="createRowModal"] .slot input').first().click()
 		cy.get('ul.vs__dropdown-menu li span[title="👋 third option"]').click()
-		cy.get('button').contains('Save').click()
-		cy.get('.custom-table table tr td div').contains('third option').should('be.visible')
+		cy.get('[data-cy="createRowSaveButton"]').click()
+		cy.get('[data-cy="ncTable"] tr td div').contains('third option').should('be.visible')
 
-		// delete first row
-		cy.get('.NcTable tr td button').first().click()
-		cy.get('button').contains('Delete').click()
-		cy.get('button').contains('I really').click()
-		cy.get('.custom-table table tr td div').contains('second').should('not.exist')
+		cy.deleteRow(0)
+		cy.get('[data-cy="ncTable"] tr td div').contains('second').should('not.exist')
 
 		// edit second row
-		cy.get('.NcTable tr td button').first().click()
-		cy.get('.modal__content .slot input').first().click()
+		cy.get('[data-cy="ncTable"] [data-cy="editRowBtn"]').first().click()
+		cy.get('[data-cy="editRowModal"] .slot input').first().click()
 		cy.get('ul.vs__dropdown-menu li span[title="first option"]').click()
-		cy.get('button').contains('Save').click()
-		cy.get('.custom-table table tr td div').contains('first option').should('be.visible')
+		cy.get('[data-cy="editRowSaveButton"]').click()
+		cy.get('[data-cy="ncTable"] tr td div').contains('first option').should('be.visible')
 
-		// delete first row
-		cy.get('.NcTable tr td button').first().click()
-		cy.get('button').contains('Delete').click()
-		cy.get('button').contains('I really').click()
+		cy.deleteRow(0)
 
-		cy.removeColumn(columnTitle)
+		cy.deleteTable(tableTitle)
 	})
 
 	it('Test empty selection', () => {
 		cy.loadTable(tableTitle)
 		cy.createSelectionColumn(columnTitle, ['first option', 'second option', '👋 third option', '🤷🏻 fifths'], null, true)
 
 		// check if default value is set on row creation
-		cy.get('button').contains('Create row').click()
-		cy.get('.modal-container__content h2').contains('Create row').should('be.visible')
-		cy.get('button').contains('Save').click()
-		cy.get('.custom-table table tr td div').should('exist')
-		cy.get('.NcTable tr td button').should('exist')
+		cy.get('[data-cy="createRowBtn"]').click()
+		cy.get('[data-cy="createRowModal"]').should('be.visible')
+		cy.get('[data-cy="createRowSaveButton"]').click()
+		cy.get('[data-cy="ncTable"] tr td div').should('exist')
+		cy.get('[data-cy="ncTable"] [data-cy="editRowBtn"]').should('exist')
 	})
 
 })

cypress/e2e/context.cy.js

@@ -112,6 +112,7 @@ describe('Manage a context', () => {
 
         // verify that context was deleted from current user
         cy.get(`[data-cy="navigationContextItem"]:contains("${contextTitle}")`).find('button').click({ force: true })
+        cy.wait(1000)
         cy.get('[data-cy="navigationContextDeleteBtn"]').contains('Delete application').click({ force: true })
         cy.get('[data-cy="deleteContextModal"]').should('be.visible')
         cy.get('[data-cy="deleteContextModal"] button').contains('Delete').click()
@@ -196,7 +197,7 @@ describe('Manage a context', () => {
         cy.get('[data-cy="ncTable"] table').contains('first row').should('exist')
         cy.get('[data-cy="ncTable"] table').contains('first row').parent().parent().find('[aria-label="Edit row"]').click()
 		cy.get('[data-cy="editRowDeleteButton"]').click()
-		cy.get('[data-cy="editRowEditConfirmButton"]').click()
+		cy.get('[data-cy="editRowDeleteConfirmButton"]').click()
         cy.get('[data-cy="ncTable"] table').contains('first row').should('not.exist')
     })
 })

cypress/e2e/tables-share.cy.js

@@ -4,6 +4,7 @@
  */
 let localUser
 let localUser2
+let tableTitle = 'Shared todo'
 
 describe('Manage a table', () => {
 
@@ -16,32 +17,25 @@ describe('Manage a table', () => {
 		})
 	})
 
-	beforeEach(function() {
-	})
 
 	it('Share table', () => {
 		cy.login(localUser)
 		cy.visit('apps/tables')
 
-		// create table to share
-		cy.get('.icon-loading').should('not.exist')
 		cy.get('[data-cy="navigationCreateTableIcon"]').click({ force: true })
 		cy.get('.tile').contains('ToDo').click({ force: true })
-		cy.get('.modal__content input[type="text"]').clear().type('Shared todo')
-		cy.contains('button', 'Create table').click()
-
-		cy.get('.app-navigation-entry-link').contains('Shared todo').click({ force: true })
-		cy.get('.NcTable table tr th').last().find('button').click({ force: true })
-		cy.get('.v-popper__popper.v-popper--theme-dropdown.action-item__popper.v-popper__popper--shown').contains('Share').click({ force: true })
-		cy.get('.sharing input').type(localUser2.userId)
-		cy.wait(1000).get('.sharing input').type('{enter}')
-
-		cy.get('h3').contains('Shares').parent().find('ul').contains(localUser2.userId).should('exist')
-	})
+		cy.get('.modal__content input[type="text"]').clear().type(tableTitle)
+		cy.get('[data-cy="createTableSubmitBtn"]').scrollIntoView().click()
+		cy.loadTable(tableTitle)
+		cy.get('[data-cy="customTableAction"] button').click()
+		cy.get('[data-cy="dataTableShareBtn"]').click()
+		cy.get('[data-cy="shareFormSelect"] input').type(localUser2.userId)
+		cy.get(`.vs__dropdown-menu [user="${localUser2.userId}"]`).click()
+		cy.wait(1000)
+		cy.get('[data-cy="sharedWithList"]').contains(localUser2.userId).should('exist')
 
-	it('Check for shared table', () => {
 		cy.login(localUser2)
 		cy.visit('apps/tables')
-		cy.get('.app-navigation-entry-link').contains('Shared todo').should('exist')
+		cy.get('[data-cy="navigationTableItem"]').contains(tableTitle).should('exist')
 	})
 })

cypress/e2e/tables-table.cy.js

@@ -75,22 +75,14 @@ describe('Manage a table', () => {
 	})
 
 	it('Delete', () => {
-		cy.get('.app-navigation__list').contains('ToDo list').click({ force: true })
-		cy.get('[data-cy="customTableAction"] button').click()
-		cy.get('.action-button__text').contains('Edit table').click()
-
-		cy.get('.modal-container button').contains('Delete').click()
-		cy.get('.modal-container button').contains('I really want to delete this table!').click()
-
-		cy.wait(10).get('.toastify.toast-success').should('be.visible')
-		cy.get('.app-navigation__list').contains('to do list').should('not.exist')
+		cy.deleteTable('ToDo list')
 	})
 
 	it('Transfer', () => {
 		cy.get('.icon-loading').should('not.exist')
 		cy.get('[data-cy="navigationCreateTableIcon"]').click({ force: true })
 		cy.get('.tile').contains('ToDo').click({ force: true })
-		cy.get('.modal__content input[type="text"]').clear().type('test table')
+		cy.get('[data-cy="createTableModal"] input[type="text"]').clear().type('test table')
 		cy.contains('button', 'Create table').click()
 
 		cy.get('.app-navigation__list').contains('test table').click({ force: true })

cypress/e2e/view.cy.js

@@ -126,7 +126,7 @@ describe('Interact with views', () => {
 		// Delete rows in the view
 		cy.get('[data-cy="customTableRow"]').contains('first row').parent().parent().find('[data-cy="editRowBtn"]').click()
 		cy.get('[data-cy="editRowModal"] [data-cy="editRowDeleteButton"]').contains('Delete').click()
-		cy.get('[data-cy="editRowModal"] [data-cy="editRowEditConfirmButton"]').contains('I really want to delete this row!').click()
+		cy.get('[data-cy="editRowModal"] [data-cy="editRowDeleteConfirmButton"]').contains('I really want to delete this row!').click()
 
 		cy.get('[data-cy="editRowModal"]').should('not.exist')
 		cy.get('[data-cy="customTableRow"]').contains('first row').should('not.exist')

cypress/support/commands.js

@@ -86,6 +86,23 @@ Cypress.Commands.add('createTable', (title) => {
 	cy.contains('h1', title).should('be.visible')
 })
 
+Cypress.Commands.add('deleteTable', (title) => {
+	cy.get('[data-cy="navigationTableItem"]').contains(title).click({ force: true })
+	cy.get('[data-cy="customTableAction"] button').click()
+	cy.get('[data-cy="dataTableEditTableBtn"]').click()
+	cy.get('[data-cy="editTableModal"] [data-cy="editTableDeleteBtn"]').click()
+	cy.get('[data-cy="editTableModal"] [data-cy="editTableConfirmDeleteBtn"]').click()
+	cy.wait(10).get('.toastify.toast-success').should('be.visible')
+	cy.get('[data-cy="navigationTableItem"]').contains('to do list').should('not.exist')
+})
+
+
+Cypress.Commands.add('deleteRow', (rowIndex) => {
+	cy.get('[data-cy="ncTable"] [data-cy="editRowBtn"]').eq(rowIndex).click()
+	cy.get('[data-cy="editRowDeleteButton"]').click({ force: true })
+	cy.get('[data-cy="editRowDeleteConfirmButton"]').click({ force: true })
+})
+
 Cypress.Commands.add('createView', (title) => {
 	cy.get('[data-cy="customTableAction"] button').click()
 	cy.get('[data-cy="dataTableCreateViewBtn"]').contains('Create view').click({ force: true })
@@ -123,6 +140,7 @@ Cypress.Commands.add('createContext', (title) => {
 
 Cypress.Commands.add('openContextEditModal', (title) => {
 	cy.get(`[data-cy="navigationContextItem"]:contains("${title}")`).find('button').click({ force: true })
+	cy.wait(1000)
 	cy.get('[data-cy="navigationContextEditBtn"]').contains('Edit application').click({ force: true })
 	cy.get('[data-cy="editContextModal"]').should('be.visible')
 })
@@ -142,7 +160,7 @@ Cypress.Commands.add('sortTableColumn', (columnTitle, mode = 'ASC') => {
 })
 
 Cypress.Commands.add('loadTable', (name) => {
-	cy.get('[data-cy="navigationTableItem"] a[title="' + name + '"]').click({ force: true })
+	cy.get('[data-cy="navigationTableItem"] a[title="' + name + '"]').last().click({ force: true })
 })
 
 Cypress.Commands.add('getTutorialTableName', () => {

src/modules/main/sections/DataTable.vue

@@ -13,7 +13,8 @@
 							<IconTool :size="20" />
 						</template>
 						<NcActionCaption v-if="canManageElement(table)" :name="t('tables', 'Manage table')" />
-						<NcActionButton v-if="canManageElement(table) "
+						<NcActionButton v-if="canManageElement(table)"
+							data-cy="dataTableEditTableBtn"
 							:close-after-click="true"
 							@click="emit('tables:table:edit', table.id)">
 							<template #icon>
@@ -122,10 +123,11 @@
 						</NcActionButton>
 						<NcActionButton v-if="canReadData(table)" :close-after-click="true"
 							icon="icon-download"
-							data-cy="dataTableExportBtn" @click="$emit('download-csv')">
+							data-cy="dataTableDownloadCSVBtn" @click="$emit('download-csv')">
 							{{ t('tables', 'Export as CSV') }}
 						</NcActionButton>
 						<NcActionButton v-if="canShareElement(table)"
+							data-cy="dataTableShareBtn"
 							:close-after-click="true"
 							icon="icon-share"
 							@click="$emit('toggle-share')">

src/modules/modals/CreateTable.vue

@@ -74,7 +74,7 @@
 			</div>
 			<div class="row space-R">
 				<div class="fix-col-4 end">
-					<NcButton type="primary" :aria-label="t('tables', 'Create table')" @click="submit">
+					<NcButton type="primary" :aria-label="t('tables', 'Create table')" data-cy="createTableSubmitBtn" @click="submit">
 						{{ t('tables', 'Create table') }}
 					</NcButton>
 				</div>

src/modules/modals/EditRow.vue

@@ -24,7 +24,7 @@
 							{{ t('tables', 'Delete') }}
 						</NcButton>
 						<NcButton v-if="prepareDeleteRow"
-							data-cy="editRowEditConfirmButton"
+							data-cy="editRowDeleteConfirmButton"
 							:wide="true"
 							:aria-label="t('tables', 'I really want to delete this row!')"
 							type="error"

src/modules/modals/EditTable.vue

@@ -48,12 +48,13 @@
 				</div>
 				<div class="row">
 					<div class="fix-col-4 space-T justify-between">
-						<NcButton v-if="!prepareDeleteTable" type="error" @click="prepareDeleteTable = true">
+						<NcButton v-if="!prepareDeleteTable" type="error" data-cy="editTableDeleteBtn" @click="prepareDeleteTable = true">
 							{{ t('tables', 'Delete') }}
 						</NcButton>
 						<NcButton v-if="prepareDeleteTable"
 							:wide="true"
 							type="error"
+							data-cy="editTableConfirmDeleteBtn"
 							@click="actionDeleteTable">
 							{{ t('tables', 'I really want to delete this table!') }}
 						</NcButton>

src/modules/modals/TransferContext.vue

@@ -6,8 +6,9 @@
 	<NcDialog v-if="showModal"
 		:name="t('tables', 'Transfer application')"
 		size="normal"
+		data-cy="transferContextModal"
 		@closing="actionCancel">
-		<div class="modal__content" data-cy="transferContextModal">
+		<div class="modal__content">
 			<div class="row">
 				<h3>{{ t('tables', 'Transfer the application "{context}" to another user', { context: context.name }) }}</h3>
 				<NcUserPicker :select-users="true" :select-groups="false" :selected-user-id.sync="newOwnerId" />

src/modules/modals/TransferTable.vue

@@ -5,9 +5,10 @@
 <template>
 	<NcDialog v-if="showModal"
 		:name="t('tables', 'Transfer table')"
+		data-cy="transferTableModal"
 		size="normal"
 		@closing="actionCancel">
-		<div class="modal__content" data-cy="transferTableModal">
+		<div class="modal__content">
 			<div class="row">
 				<h3>{{ t('tables', 'Transfer this table to another user') }}</h3>
 				<NcUserPicker :select-users="true" :select-groups="false" :selected-user-id.sync="selectedUserId" />

src/modules/sidebar/partials/ShareForm.vue

@@ -5,7 +5,8 @@
 <template>
 	<div class="row space-B">
 		<h3>{{ shareHeading }}</h3>
-		<NcSelect id="ajax" style="width: 100%;" :clear-on-select="true" :hide-selected="true" :internal-search="false"
+		<NcSelect id="ajax" style="width: 100%;" :clear-on-select="true"
+			data-cy="shareFormSelect" :hide-selected="true" :internal-search="false"
 			:loading="loading" :options="options" :placeholder="selectPlaceholder" :preselect-first="true"
 			:preserve-search="true" :searchable="true" :user-select="true" :get-option-key="(option) => option.key"
 			:aria-label-combobox="selectPlaceholder" label="displayName" @search="asyncFind" @input="addShare">

src/modules/sidebar/partials/ShareList.vue

@@ -6,7 +6,7 @@
 	<div>
 		<h3>{{ t('tables', 'Shares') }}</h3>
 		<div v-if="loading" class="icon-loading" />
-		<ul v-if="getShares && getShares.length > 0" class="sharedWithList">
+		<ul v-if="getShares && getShares.length > 0" data-cy="sharedWithList" class="sharedWithList">
 			<div v-for="share in getShares"
 				:key="share.id"
 				class="row">