chore(systemtags): add inline tag color tests

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

2 files changed, 108 insertions, 3 deletions

diff --git a/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
index e4df7f40e42..3bf910149f7 100644
--- a/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
+++ b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
@@ -8,7 +8,6 @@ import { emit, subscribe } from '@nextcloud/event-bus'
 import { File, Permission, View, FileAction } from '@nextcloud/files'
 import { setNodeSystemTags } from '../utils'
 import * as serviceTagApi from '../services/api'
-import { set } from 'lodash'
 
 const view = {
 	id: 'files',
@@ -192,3 +191,109 @@ describe('Inline system tags action render tests', () => {
 		)
 	})
 })
+
+describe('Inline system tags action colors', () => {
+
+	const tag = {
+		id: 1,
+		displayName: 'Confidential',
+		color: '000000',
+		etag: '123',
+		userVisible: true,
+		userAssignable: true,
+		canAssign: true,
+	}
+
+	beforeEach(() => {
+		document.body.innerHTML = ''
+		vi.spyOn(serviceTagApi, 'fetchTags').mockImplementation(async () => {
+			return [tag]
+		})
+	})
+
+	test('Render a single system tag', async () => {
+		const file = new File({
+			id: 1,
+			source: 'http://localhost/remote.php/dav/files/admin/foobar.txt',
+			owner: 'admin',
+			mime: 'text/plain',
+			permissions: Permission.ALL,
+			attributes: {
+				'system-tags': {
+					'system-tag': 'Confidential',
+				},
+			},
+		})
+
+		const result = await action.renderInline!(file, view)
+		expect(result).toBeInstanceOf(HTMLElement)
+		expect(result!.outerHTML).toMatchInlineSnapshot(
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag" data-systemtag-name="Confidential" style="--systemtag-color: #000000;" data-systemtag-color="true">Confidential</li></ul>"',
+		)
+	})
+
+	test('Render a single system tag with invalid WCAG color', async () => {
+		const file = new File({
+			id: 1,
+			source: 'http://localhost/remote.php/dav/files/admin/foobar.txt',
+			owner: 'admin',
+			mime: 'text/plain',
+			permissions: Permission.ALL,
+			attributes: {
+				'system-tags': {
+					'system-tag': 'Confidential',
+				},
+			},
+		})
+
+		document.body.setAttribute('data-themes', 'theme-dark')
+
+		const result = await action.renderInline!(file, view)
+		expect(result).toBeInstanceOf(HTMLElement)
+		expect(result!.outerHTML).toMatchInlineSnapshot(
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag" data-systemtag-name="Confidential" style="--systemtag-color: #646464;" data-systemtag-color="true">Confidential</li></ul>"',
+		)
+
+		document.body.removeAttribute('data-themes')
+	})
+
+	test('Rendered color gets updated on system tag change', async () => {
+		const file = new File({
+			id: 1,
+			source: 'http://localhost/remote.php/dav/files/admin/foobar.txt',
+			owner: 'admin',
+			mime: 'text/plain',
+			permissions: Permission.ALL,
+			attributes: {
+				'system-tags': {
+					'system-tag': 'Confidential',
+				},
+			},
+		})
+
+		const result = await action.renderInline!(file, view) as HTMLElement
+		document.body.appendChild(result)
+		expect(result).toBeInstanceOf(HTMLElement)
+		expect(document.body.innerHTML).toMatchInlineSnapshot(
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag" data-systemtag-name="Confidential" style="--systemtag-color: #000000;" data-systemtag-color="true">Confidential</li></ul>"',
+		)
+
+		// Subscribe to the event
+		const eventPromise = new Promise((resolve) => {
+			subscribe('systemtags:tag:updated', () => {
+				setTimeout(resolve, 100)
+			})
+		})
+
+		// Change tag color
+		tag.color = '456789'
+		emit('systemtags:tag:updated', tag)
+
+		// Wait for the event to be processed
+		await eventPromise
+
+		expect(document.body.innerHTML).toMatchInlineSnapshot(
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag" data-systemtag-name="Confidential" style="--systemtag-color: #456789;" data-systemtag-color="true">Confidential</li></ul>"',
+		)
+	})
+})
diff --git a/apps/systemtags/src/utils/colorUtils.ts b/apps/systemtags/src/utils/colorUtils.ts
index 24d981054d4..0c80510be6e 100644
--- a/apps/systemtags/src/utils/colorUtils.ts
+++ b/apps/systemtags/src/utils/colorUtils.ts
@@ -13,7 +13,7 @@ type hexColor = `#${string & (
  * Is the current theme dark?
  */
 export function isDarkModeEnabled() {
-	const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches
+	const darkModePreference = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches
 	const darkModeSetting = document.body.getAttribute('data-themes')?.includes('dark')
 	return darkModeSetting || darkModePreference || false
 }
@@ -22,7 +22,7 @@ export function isDarkModeEnabled() {
  * Is the current theme high contrast?
  */
 export function isHighContrastModeEnabled() {
-	const highContrastPreference = window.matchMedia('(forced-colors: active)').matches
+	const highContrastPreference = window?.matchMedia?.('(forced-colors: active)')?.matches
 	const highContrastSetting = document.body.getAttribute('data-themes')?.includes('highcontrast')
 	return highContrastSetting || highContrastPreference || false
 }