tests(systemtags): Add cypress e2e tests for systemtags admin settings

apps/systemtags/src/admin.ts

@@ -28,5 +28,7 @@ import SystemTagsSection from './views/SystemTagsSection.vue'
 // @ts-expect-error __webpack_nonce__ is injected by webpack
 __webpack_nonce__ = btoa(getRequestToken())
 
-const SystemTagsSectionView = Vue.extend(SystemTagsSection)
-new SystemTagsSectionView().$mount('#vue-admin-systemtags')
+export default new Vue({
+	el: '#vue-admin-systemtags',
+	render: (h) => h(SystemTagsSection),
+})

apps/systemtags/src/components/SystemTagForm.vue

@@ -66,25 +66,22 @@
 		</div>
 
 		<div class="system-tag-form__row">
-			<NcButton v-if="isCreating"
+			<NcButton type="primary"
 				native-type="submit"
 				:disabled="isCreateDisabled || loading">
-				{{ t('systemtags', 'Create') }}
+				{{ isCreating ? t('systemtags', 'Create') : t('systemtags', 'Update') }}
 			</NcButton>
-			<template v-else>
-				<NcButton native-type="submit"
-					:disabled="isUpdateDisabled || loading">
-					{{ t('systemtags', 'Update') }}
-				</NcButton>
-				<NcButton :disabled="loading"
-					@click="handleDelete">
-					{{ t('systemtags', 'Delete') }}
-				</NcButton>
-			</template>
-			<NcButton native-type="reset"
+			<NcButton type="tertiary"
+				native-type="reset"
 				:disabled="isResetDisabled || loading">
 				{{ t('systemtags', 'Reset') }}
 			</NcButton>
+			<NcButton v-show="!isCreating"
+				type="error"
+				:disabled="loading"
+				@click="handleDelete">
+				{{ t('systemtags', 'Delete') }}
+			</NcButton>
 			<NcLoadingIcon v-if="loading"
 				:name="t('systemtags', 'Loading …')"
 				:size="32" />
@@ -320,7 +317,8 @@ export default Vue.extend({
 	&__row {
 		margin-top: 8px;
 		display: flex;
-		gap: 0 4px;
+		flex-wrap: wrap;
+		gap: 8px;
 	}
 }
 </style>

apps/systemtags/src/views/SystemTagsSection.vue

@@ -21,7 +21,8 @@
 -->
 
 <template>
-	<NcSettingsSection :name="t('systemtags', 'Collaborative tags')"
+	<NcSettingsSection data-cy-systemtags-section
+		:name="t('systemtags', 'Collaborative tags')"
 		:description="t('systemtags', 'Collaborative tags are available for all users. Restricted tags are visible to users but cannot be assigned by them. Invisible tags are for internal use, since users cannot see or assign them.')">
 		<NcLoadingIcon v-if="loadingTags"
 			:name="t('systemtags', 'Loading collaborative tags …')"
@@ -36,22 +37,17 @@
 </template>
 
 <script lang="ts">
-/* eslint-disable */
-import Vue from 'vue'
-
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
-
+import type { TagWithId } from '../types.js'
 import { translate as t } from '@nextcloud/l10n'
 import { showError } from '@nextcloud/dialogs'
-
-import SystemTagForm from '../components/SystemTagForm.vue'
-
+import { defineComponent } from 'vue'
 import { fetchTags } from '../services/api.js'
 
-import type { TagWithId } from '../types.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import SystemTagForm from '../components/SystemTagForm.vue'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'SystemTagsSection',
 
 	components: {

apps/systemtags/templates/admin.php

@@ -2,7 +2,7 @@
 /**
  * @copyright Copyright (c) 2016 Joas Schilling <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @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

apps/systemtags/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../../tsconfig.json",
+	"include": ["./src/**/*.ts", "./src/**/*.vue"],
+	"vueCompilerOptions": {
+		"target": 2.7
+	}
+}

cypress/e2e/systemtags/settings.cy.ts

@@ -0,0 +1,105 @@
+import { User } from '@nextcloud/cypress'
+
+const admin = new User('admin', 'admin')
+
+describe('System Tags: Admin settings', { testIsolation: true }, () => {
+	beforeEach(() => {
+		// TODO: clean state - remove all tags
+		cy.login(admin)
+		cy.visit('/settings/admin')
+		const url = new URL('/remote.php/dav/systemtags/', Cypress.config('baseUrl'))
+		cy.intercept(url.href).as('getTags')
+	})
+
+	it('Can create a tag', () => {
+		const tag = `${Date.now() * Math.random()}`
+		cy.get('[data-cy-systemtags-section]').within(() => {
+			cy.get('h2').should('contain.text', 'Collaborative tags').scrollIntoView()
+
+			// create button exists but is disabled
+			cy.contains('button', 'Create').should('exist').and('be.disabled')
+			// Input tag
+			cy.get('#system-tag-name').type(tag)
+			cy.contains('button', 'Create').should('not.be.disabled').click({ force: true })
+		})
+		// See success
+		cy.get('.toast-success').should(($el) => expect($el.text()).to.contain('Created tag'))
+		// See tag in list
+		cy.get('#system-tags-input').type(tag)
+		cy.get('ul').contains(tag)
+
+		// survives after reload
+		cy.reload().wait('@getTags')
+		cy.get('[data-cy-systemtags-section]').scrollIntoView()
+		// get tag
+		cy.get('#system-tags-input').type(`{selectAll}${tag}`)
+		cy.get('ul').contains(tag)
+	})
+
+	it('Edit a tag', () => {
+		const tag = `${Date.now() * Math.random()}`
+		createRandomTag().then((oldName) => {
+			cy.get('[data-cy-systemtags-section]').scrollIntoView()
+			// get old tag
+			cy.get('#system-tags-input').type(oldName)
+			cy.get('ul').contains(oldName).click({ force: true })
+			// Input should be the tag name
+			cy.get('#system-tag-name').should('have.value', oldName)
+			// type new name
+			cy.get('#system-tag-name').type(`{selectAll}${tag}`)
+			cy.contains('button', 'Update').click()
+			// See success
+			cy.get('.toast-success').should(($el) => expect($el.text()).contain('Updated tag'))
+			// See tag in list
+			cy.get('#system-tags-input').type(`{selectAll}${tag}`)
+			cy.get('ul').contains(tag)
+
+			// survives after reload
+			cy.reload().wait('@getTags')
+			cy.get('[data-cy-systemtags-section]').scrollIntoView()
+			// get tag
+			cy.get('#system-tags-input').type(tag)
+			cy.get('ul').contains(tag)
+		})
+	})
+
+	it('Delete a tag', () => {
+		createRandomTag().then((oldName) => {
+			cy.get('[data-cy-systemtags-section]').scrollIntoView()
+			// get old tag
+			cy.get('#system-tags-input').type(oldName)
+			cy.get('ul').contains(oldName).click({ force: true })
+			// Input should be the tag name
+			cy.get('#system-tag-name').should('have.value', oldName)
+			cy.contains('button', 'Delete').click()
+			// See success
+			cy.get('.toast-success').should(($el) => expect($el.text()).contain('Deleted tag'))
+			// See tag is no longer in list
+			cy.get('#system-tags-input').type(`{selectAll}${oldName}`)
+			cy.get('ul').contains(oldName).should('not.exist')
+
+			// survives after reload
+			cy.reload().wait('@getTags')
+			cy.get('[data-cy-systemtags-section]').scrollIntoView()
+			// get tag
+			cy.get('#system-tags-input').type(oldName)
+			cy.get('ul').contains(oldName).should('not.exist')
+			cy.get('ul').contains('No tags to select').should('exist')
+		})
+	})
+})
+
+// TODO: This should be some kind of non failing occ api call
+const createRandomTag = () => {
+	const tag = `${Date.now() * Math.random()}`
+	cy.get('[data-cy-systemtags-section]').within(() => {
+		cy.get('h2').should('contain.text', 'Collaborative tags').scrollIntoView()
+
+		// create button exists but is disabled
+		cy.contains('button', 'Create').should('exist').and('be.disabled')
+		// Input tag
+		cy.get('#system-tag-name').type(tag)
+		cy.contains('button', 'Create').should('not.be.disabled').click({ force: true })
+	})
+	return cy.then(() => tag)
+}