More theming cypress tests and some fixes

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

5 files changed, 29 insertions, 15 deletions

diff --git a/apps/theming/src/AdminTheming.vue b/apps/theming/src/AdminTheming.vue
index 4b1877ccf7d..bb26dcc0f30 100644
--- a/apps/theming/src/AdminTheming.vue
+++ b/apps/theming/src/AdminTheming.vue
@@ -24,36 +24,46 @@
 	<section>
 		<NcSettingsSection :title="t('theming', 'Theming')"
 			:description="t('theming', 'Theming makes it possible to easily customize the look and feel of your instance and supported clients. This will be visible for all users.')"
-			:doc-url="docUrl">
+			:doc-url="docUrl"
+			data-admin-theming-settings>
 			<div class="admin-theming">
 				<NcNoteCard v-if="!isThemable"
 					type="error"
 					:show-alert="true">
 					<p>{{ notThemableErrorMessage }}</p>
 				</NcNoteCard>
+
+				<!-- Name, web link, slogan... fields -->
 				<TextField v-for="field in textFields"
 					:key="field.name"
-					:name="field.name"
-					:value.sync="field.value"
+					:data-admin-theming-setting-field="field.name"
 					:default-value="field.defaultValue"
-					:type="field.type"
 					:display-name="field.displayName"
-					:placeholder="field.placeholder"
 					:maxlength="field.maxlength"
+					:name="field.name"
+					:placeholder="field.placeholder"
+					:type="field.type"
+					:value.sync="field.value"
 					@update:theming="$emit('update:theming')" />
+
+				<!-- Primary color picker -->
 				<ColorPickerField :name="colorPickerField.name"
-					:value.sync="colorPickerField.value"
 					:default-value="colorPickerField.defaultValue"
 					:display-name="colorPickerField.displayName"
+					:value.sync="colorPickerField.value"
+					data-admin-theming-setting-primary-color
 					@update:theming="$emit('update:theming')" />
+
+				<!-- Default background picker -->
 				<FileInputField v-for="field in fileInputFields"
 					:key="field.name"
-					:name="field.name"
-					:mime-name="field.mimeName"
-					:mime-value.sync="field.mimeValue"
+					:aria-label="field.ariaLabel"
 					:default-mime-value="field.defaultMimeValue"
 					:display-name="field.displayName"
-					:aria-label="field.ariaLabel"
+					:mime-name="field.mimeName"
+					:mime-value.sync="field.mimeValue"
+					:name="field.name"
+					data-admin-theming-setting-background
 					@update:theming="$emit('update:theming')" />
 				<div class="admin-theming__preview">
 					<div class="admin-theming__preview-logo" />
@@ -87,6 +97,7 @@
 					:display-name="userThemingField.displayName"
 					:label="userThemingField.label"
 					:description="userThemingField.description"
+					data-admin-theming-setting-disable-user-theming
 					@update:theming="$emit('update:theming')" />
 				<a v-if="!canThemeIcons"
 					:href="docUrlIcons"
diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
index 7220820a3c3..0f72e95d9a8 100644
--- a/apps/theming/src/UserThemes.vue
+++ b/apps/theming/src/UserThemes.vue
@@ -63,7 +63,8 @@
 		</NcSettingsSection>
 
 		<NcSettingsSection :title="t('theming', 'Background')"
-			class="background">
+			class="background"
+			data-user-theming-background-disabled>
 			<template v-if="isUserThemingDisabled">
 				<p>{{ t('theming', 'Customization has been disabled by your administrator') }}</p>
 			</template>
diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue
index e1d8b731bc4..97912ae3c9c 100644
--- a/apps/theming/src/components/BackgroundSettings.vue
+++ b/apps/theming/src/components/BackgroundSettings.vue
@@ -99,7 +99,6 @@ import { Palette } from 'node-vibrant/lib/color'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { getCurrentUser } from '@nextcloud/auth'
 
-const backgroundColor = loadState('theming', 'backgroundColor')
 const backgroundImage = loadState('theming', 'backgroundImage')
 const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
 const themingDefaultBackground = loadState('theming', 'themingDefaultBackground')
@@ -132,7 +131,6 @@ export default {
 
 			// User background image and color settings
 			backgroundImage,
-			backgroundColor,
 		}
 	},
 
@@ -210,7 +208,6 @@ export default {
 		async update(data) {
 			// Update state
 			this.backgroundImage = data.backgroundImage
-			this.backgroundColor = data.backgroundColor
 			this.Theming.color = data.backgroundColor
 
 			// Notify parent and reload style
diff --git a/apps/theming/src/components/admin/ColorPickerField.vue b/apps/theming/src/components/admin/ColorPickerField.vue
index 2e6ee99a75d..c9f1a8e4ef5 100644
--- a/apps/theming/src/components/admin/ColorPickerField.vue
+++ b/apps/theming/src/components/admin/ColorPickerField.vue
@@ -30,13 +30,15 @@
 				<NcButton class="field__button"
 					type="primary"
 					:id="id"
-					:aria-label="t('theming', 'Select a custom color')">
+					:aria-label="t('theming', 'Select a custom color')"
+					data-admin-theming-setting-primary-color-picker>
 					{{ value }}
 				</NcButton>
 			</NcColorPicker>
 			<NcButton v-if="value !== defaultValue"
 				type="tertiary"
 				:aria-label="t('theming', 'Reset to default')"
+				data-admin-theming-setting-primary-color-reset
 				@click="undo">
 				<template #icon>
 					<Undo :size="20" />
diff --git a/apps/theming/src/components/admin/FileInputField.vue b/apps/theming/src/components/admin/FileInputField.vue
index 537970cc0cc..ba046ec8b31 100644
--- a/apps/theming/src/components/admin/FileInputField.vue
+++ b/apps/theming/src/components/admin/FileInputField.vue
@@ -27,6 +27,7 @@
 			<NcButton type="secondary"
 				:id="id"
 				:aria-label="ariaLabel"
+				data-admin-theming-setting-background-picker
 				@click="activateLocalFilePicker">
 				<template #icon>
 					<Upload :size="20" />
@@ -36,6 +37,7 @@
 			<NcButton v-if="showReset"
 				type="tertiary"
 				:aria-label="t('theming', 'Reset to default')"
+				data-admin-theming-setting-background-reset
 				@click="undo">
 				<template #icon>
 					<Undo :size="20" />
@@ -44,6 +46,7 @@
 			<NcButton v-if="showRemove"
 				type="tertiary"
 				:aria-label="t('theming', 'Remove background image')"
+				data-admin-theming-setting-background-remove
 				@click="removeBackground">
 				<template #icon>
 					<Delete :size="20" />