From 986cc8ce6f5a6ba421f469ffe206314ea8cae061 Mon Sep 17 00:00:00 2001
From: grnd-alt <salimbelakkaf@outlook.de>
Date: Thu, 28 Mar 2024 12:10:41 +0100
Subject: [PATCH] add cypress test for PreviewOptions

Signed-off-by: grnd-alt <salimbelakkaf@outlook.de>
---
 cypress/e2e/nodes/PreviewOptions.spec.js | 64 ++++++++++++++++++++++++
 src/components/Editor/PreviewOptions.vue | 59 +++++++++++-----------
 2 files changed, 95 insertions(+), 28 deletions(-)
 create mode 100644 cypress/e2e/nodes/PreviewOptions.spec.js

diff --git a/cypress/e2e/nodes/PreviewOptions.spec.js b/cypress/e2e/nodes/PreviewOptions.spec.js
new file mode 100644
index 00000000000..a101a752be1
--- /dev/null
+++ b/cypress/e2e/nodes/PreviewOptions.spec.js
@@ -0,0 +1,64 @@
+/**
+ * @copyright Copyright (c) 2022
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { initUserAndFiles, randUser } from '../../utils/index.js'
+
+const user = randUser()
+
+describe('Preview Options', function() {
+	before(function() {
+		initUserAndFiles(user, 'codeblock.md', 'empty.md')
+	})
+	beforeEach(function() {
+		cy.login(user)
+		cy.isolateTest({ sourceFile: 'empty.md' })
+		cy.openFile('empty.md')
+		cy.get('.entry-action__insert-link').click()
+		cy.get('li').get('[data-text-action-entry="insert-link-website"]').click()
+		cy.get('.input-field__input--trailing-icon').type('nextcloud.com')
+		cy.get('.input-field__trailing-button').click()
+		cy.get('.preview-options').click()
+	})
+
+	it('should render previewOptions correctly', function() {
+		cy.get('.action-button__text').contains('Remove link').should('be.visible')
+		cy.get('.action-radio__label').each(el => {
+			cy.wrap(el).invoke('text').should('match', /Text only|Show link preview/)
+		})
+	})
+
+	it('should toggle to Link Preview', function() {
+		cy.get('.preview').should('not.exist')
+		cy.get('.action-radio__label').each(el => {
+			cy.wrap(el).invoke('text').then(text => {
+				if (text === 'Show link preview') {
+					cy.wrap(el).click()
+				}
+			})
+		})
+		cy.get('.preview').should('be.visible')
+	})
+
+	it('should Remove link', function() {
+		cy.get('.paragraph-content').should('have.text', 'nextcloud.com')
+		cy.get('.action-button__text').contains('Remove link').click()
+		cy.get('.paragraph-content').should('not.have.text', 'nextcloud.com')
+	})
+})
diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index cc2ed5a0f55..150212de733 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -20,36 +20,39 @@
   -
   -->
 <template>
-	<NcActions data-text-preview-options="select"
-		@open="$emit('open')">
-		<template #icon>
-			<DotsVerticalIcon :size="20" />
-		</template>
-		<NcActionCaption :name="t('text', 'Preview options')" />
-		<NcActionRadio data-text-preview-option="text-only"
-			close-after-click
-			name="preview-option"
-			value="text-only"
-			:checked="value === 'text-only'"
-			@change="e => $emit('update:value', e.currentTarget.value)">
-			{{ t('text', 'Text only') }}
-		</NcActionRadio>
-		<NcActionRadio data-text-preview-option="link-preview"
-			close-after-click
-			name="preview-option"
-			value="link-preview"
-			:checked="value === 'link-preview'"
-			@change="e => $emit('update:value', e.currentTarget.value)">
-			{{ t('text', 'Show link preview') }}
-		</NcActionRadio>
-		<NcActionSeparator />
-		<NcActionButton @click="e => $emit('update:value', 'delete-preview')">
+	<div>
+		<NcActions data-text-preview-options="select"
+			class="preview-options"
+			@open="$emit('open')">
 			<template #icon>
-				<DeleteIcon :size="20" />
+				<DotsVerticalIcon :size="20" />
 			</template>
-			{{ t('text','Remove link') }}
-		</NcActionButton>
-	</NcActions>
+			<NcActionCaption :name="t('text', 'Preview options')" />
+			<NcActionRadio data-text-preview-option="text-only"
+				close-after-click
+				name="preview-option"
+				value="text-only"
+				:checked="value === 'text-only'"
+				@change="e => $emit('update:value', e.currentTarget.value)">
+				{{ t('text', 'Text only') }}
+			</NcActionRadio>
+			<NcActionRadio data-text-preview-option="link-preview"
+				close-after-click
+				name="preview-option"
+				value="link-preview"
+				:checked="value === 'link-preview'"
+				@change="e => $emit('update:value', e.currentTarget.value)">
+				{{ t('text', 'Show link preview') }}
+			</NcActionRadio>
+			<NcActionSeparator />
+			<NcActionButton @click="e => $emit('update:value', 'delete-preview')">
+				<template #icon>
+					<DeleteIcon :size="20" />
+				</template>
+				{{ t('text','Remove link') }}
+			</NcActionButton>
+		</NcActions>
+	</div>
 </template>
 
 <script>