fix(tests): add cypress tests for file picker

Signed-off-by: Elizabeth Danzberger <[email protected]>

cypress/e2e/integration.spec.js

@@ -121,11 +121,47 @@ describe('Nextcloud integration', function() {
 		cy.get('.modal-container__content').should('be.visible')
 	})
 
-	it('Smart picker', function() {
-		cy.get('@loleafletframe').within(() => {
-			cy.get('#Insert-tab-label').click()
-			cy.get('#insert-insert-remote-link-button').click()
+	describe('Smart picker', function() {
+		describe('Link to office document section', function() {
+			beforeEach(function() {
+				// Proc the smart picker from Collabora
+				cy.get('@loleafletframe').within(() => {
+					cy.get('#Insert-tab-label').click()
+					cy.get('#insert-insert-remote-link-button').click()
+				})
+
+				// Wait for the reference picker to show
+				cy.get('.reference-picker-modal--content')
+					.should('be.visible')
+					.as('referencePickerContent')
+
+				// Select "Link to office document section"
+				cy.get('@referencePickerContent')
+					.find('input[id="provider-select-input"]')
+					.as('smartPickerDropdown')
+				cy.get('@smartPickerDropdown').click()
+				cy.get('@referencePickerContent')
+					.contains('Link to office document section')
+					.click()
+
+				// Pick the fixture document
+				cy.pickFile('document.odt')
+			})
+
+			it('Can link to heading', function() {
+				cy.get('[data-cy-section-label="Headings"]').children().first().click()
+				cy.get('[data-cy-link-to-section=""]').click()
+			})
+
+			it('Can link to section', function() {
+				cy.get('[data-cy-section-label="Sections"]').children().first().click()
+				cy.get('[data-cy-link-to-section=""]').click()
+			})
+
+			it('Can link to image', function() {
+				cy.get('[data-cy-section-label="Images"]').children().first().click()
+				cy.get('[data-cy-link-to-section=""]').click()
+			})
 		})
-		cy.get('.reference-picker-modal--content').should('be.visible')
 	})
 })

cypress/support/commands.js

@@ -365,3 +365,12 @@ Cypress.Commands.add('verifyTemplateFields', (fields, fileId) => {
 		})
 	})
 })
+
+Cypress.Commands.add('pickFile', (filename) => {
+  cy.get('.office-target-picker')
+    .find(`tr[data-filename="${filename}"]`)
+    .click()
+  cy.get('.office-target-picker')
+    .find('button[aria-label="Select file"]')
+    .click()
+})

src/view/DocumentTargetPicker.vue

@@ -24,7 +24,7 @@
 			<template v-else>
 				<div v-for="section in sections" :key="section.label">
 					<h3>{{ section.label }}</h3>
-					<ul>
+					<ul :data-cy-section-label="section.label">
 						<NcListItem v-for="entry in section.entries"
 							:key="entry.id"
 							:name="entry.name"
@@ -38,7 +38,10 @@
 				</div>
 			</template>
 			<div v-if="sections.length !== 0" class="office-target-picker__buttons">
-				<NcButton type="primary" :disabled="!target" @click="submit()">
+				<NcButton data-cy-link-to-section=""
+					type="primary"
+					:disabled="!target"
+					@click="submit()">
 					{{ t('richdocuments', 'Link to office document section') }}
 				</NcButton>
 			</div>