From 6fd6d7cbb135a1d989f6dce21d94304b2bcb50fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Sat, 16 Mar 2024 21:18:07 -0400
Subject: [PATCH] refactor(components): add `data-testid` attribute to some
 components

---
 components/baseEditor.vue                 | 28 +++++++++++++++++++--
 components/findUser.vue                   |  1 +
 components/story/atoms/bands.vue          |  1 +
 components/story/atoms/characters.vue     |  2 +-
 components/story/atoms/genre.vue          |  2 +-
 components/story/atoms/pairings.vue       |  6 ++---
 components/story/create/singleChapter.vue | 30 ++++++++++++-----------
 components/story/create/uploadOrPaste.vue |  8 +++---
 8 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/components/baseEditor.vue b/components/baseEditor.vue
index c86a695..a8ecf89 100644
--- a/components/baseEditor.vue
+++ b/components/baseEditor.vue
@@ -11,12 +11,26 @@
 		wrapCol?: any;
 	}>();
 	let dark = inject<boolean>("dark");
+	const stop = (e, ed) => {
+		console.log(e.type.toUpperCase(), e, ed);
+		e.preventDefault();
+		e.cancel();
+		e.stopImmediatePropagation();
+		e.stopPropagation();
+	};
 </script>
 <template>
 	<ClientOnly>
-		<vee-field :name="props.name" v-slot="{ errorMessage, field, value }" :model-value="props.val">
-			<a-form-item :validate-status="!!errorMessage ? 'error' : ''" :name="props.name" :label="props.label as any" :help="errorMessage">
+		<vee-field :name="props.name" v-slot="{ errorMessage, field, value, setValue }" :model-value="props.val">
+			<a-form-item
+				:data-testid="$attrs['data-testid']"
+				:validate-status="!!errorMessage ? 'error' : ''"
+				:name="props.name"
+				:label="props.label as any"
+				:help="errorMessage"
+			>
 				<tinymce-editor
+					model-events="drag dragdrop dragend draggesture dragover dragstart drop change"
 					v-bind="field"
 					width="100%"
 					@change="
@@ -27,6 +41,16 @@
 					"
 					:initial-value="value"
 					v-model:model-value="field.value"
+					@drag="stop"
+					@deactivate="(e) => console.log(e)"
+					@dragOver="stop"
+					@dragEnter="stop"
+					@dragEnd="stop"
+					@dragDrop="stop"
+					@draggesture="stop"
+					@dragGesture="stop"
+					@dragstart="stop"
+					@drop="stop"
 					tinymce-script-src="/tinymce/tinymce.min.js"
 					:init="{
 						...props.init,
diff --git a/components/findUser.vue b/components/findUser.vue
index 8a060cd..a5c1d63 100644
--- a/components/findUser.vue
+++ b/components/findUser.vue
@@ -67,6 +67,7 @@
 		:options="state.data"
 		v-model:value="value"
 		:allow-clear="true"
+		v-bind="$attrs"
 	>
 		<template v-if="state.fetching" #notFoundContent>
 			<a-spin size="small" />
diff --git a/components/story/atoms/bands.vue b/components/story/atoms/bands.vue
index 5513118..0b2629e 100644
--- a/components/story/atoms/bands.vue
+++ b/components/story/atoms/bands.vue
@@ -24,6 +24,7 @@
 <template>
 	<a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :help="errorMessage as any" label="Bands">
 		<a-select
+			v-bind="$attrs"
 			:allow-clear="true"
 			mode="multiple"
 			option-filter-prop="label"
diff --git a/components/story/atoms/characters.vue b/components/story/atoms/characters.vue
index 84ec96b..5de4117 100644
--- a/components/story/atoms/characters.vue
+++ b/components/story/atoms/characters.vue
@@ -18,7 +18,7 @@
 </script>
 <template>
 	<a-form-item :help="errorMessage" label="Characters" :name="bandName as string" :validate-status="!!errorMessage ? 'error' : undefined">
-		<a-select mode="multiple" :options="opts" v-model:value="value">
+		<a-select v-bind="$attrs" mode="multiple" :options="opts" v-model:value="value">
 			<template #removeIcon>
 				<i class="far fa-circle-x" />
 			</template>
diff --git a/components/story/atoms/genre.vue b/components/story/atoms/genre.vue
index c66487b..639078d 100644
--- a/components/story/atoms/genre.vue
+++ b/components/story/atoms/genre.vue
@@ -10,7 +10,7 @@
 </script>
 <template>
 	<a-form-item :help="errorMessage" label="Genre(s)" :validate-status="!!errorMessage ? 'error' : undefined">
-		<a-select :allow-clear="true" :options="opts" v-model:value="value" mode="multiple">
+		<a-select v-bind="$attrs" :allow-clear="true" :options="opts" v-model:value="value" mode="multiple">
 			<template #removeIcon>
 				<i class="far fa-circle-x" />
 			</template>
diff --git a/components/story/atoms/pairings.vue b/components/story/atoms/pairings.vue
index 03095b9..e8e24da 100644
--- a/components/story/atoms/pairings.vue
+++ b/components/story/atoms/pairings.vue
@@ -19,19 +19,19 @@
 	<a-form-item label="Pairings">
 		<a-row :gutter="5" :wrap="true" v-for="(field, idx) in fields" :key="field.key">
 			<Field :name="fname + 'relationships' + `[${idx}]`">
-				<a-select mode="multiple" :options="opts" v-model:value="field.value as string[]" @change="(val) => update(idx, val as string[])">
+				<a-select mode="multiple" v-bind="$attrs" :options="opts" v-model:value="field.value as string[]" @change="(val) => update(idx, val as string[])">
 					<template #removeIcon>
 						<i class="far fa-circle-x" />
 					</template>
 				</a-select>
 			</Field>
 			<a-col :span="4">
-				<a-button @click="(e) => remove(idx)"> - </a-button>
+				<a-button :data-testid="`${$attrs['data-testid']}.${idx}.remove`" @click="(e) => remove(idx)"> - </a-button>
 			</a-col>
 		</a-row>
 		<a-row justify="end">
 			<a-col :span="2">
-				<a-button @click="(e) => push([])"> + </a-button>
+				<a-button :data-testid="`${$attrs['data-testid']}.add`" @click="(e) => push([])"> + </a-button>
 			</a-col>
 		</a-row>
 	</a-form-item>
diff --git a/components/story/create/singleChapter.vue b/components/story/create/singleChapter.vue
index 5a915e2..d11969b 100644
--- a/components/story/create/singleChapter.vue
+++ b/components/story/create/singleChapter.vue
@@ -9,6 +9,7 @@
 	import elCharacters from "../atoms/characters.vue";
 	import elPairings from "../atoms/pairings.vue";
 	import uploadOrPaste from "./uploadOrPaste.vue";
+	import { IBand } from "@models/band";
 	// import test1 from
 
 	let { name, data } = defineProps<{
@@ -16,7 +17,7 @@
 		data: FormChapter;
 	}>();
 	let acData = toRef(data);
-	let { data: _bands } = await useApiFetch("/band/all");
+	let { data: _bands } = await useApiFetch<IBand[]>("/band/all");
 	let bands = ref(_bands);
 	provide("curName", name + ".");
 	provide("bandlist", bands);
@@ -30,58 +31,59 @@
 		updateBands,
 	});
 	const wrapc = { span: 12 };
+	const tbase = `storyform.${name}.form`;
 </script>
 <template>
-	<div>
+	<div :data-testid="tbase">
 		<a-row :gutter="[10, 0]">
 			<a-col :span="12">
 				<Field :name="name + '.chapterTitle'" v-slot="{ value, field, errorMessage }">
 					<a-form-item :name="[field.name as string]" label="Chapter title" :help="errorMessage" :status="!!errorMessage ? 'error' : undefined">
-						<a-input v-bind="field" />
+						<a-input :data-testid="`${tbase}.title`" v-bind="field" />
 					</a-form-item>
 				</Field>
 			</a-col>
 			<a-col :span="12">
-				<el-bands />
+				<el-bands :data-testid="`${tbase}.bands`" />
 			</a-col>
 		</a-row>
 		<a-row :gutter="[10, 0]">
 			<a-col :span="12">
-				<base-editor v-model:val="acData.summary" :name="name + '.summary'" :wrap-col="wrapc" label="Summary" :init="bare" />
+				<base-editor :data-testid="`${tbase}.summary`" v-model:val="acData.summary" :name="name + '.summary'" :wrap-col="wrapc" label="Summary" :init="bare" />
 			</a-col>
 			<a-col :span="12">
-				<base-editor v-model:val="acData.notes" :name="name + '.notes'" :wrap-col="wrapc" label="Author's notes" :init="bare" />
+				<base-editor :data-testid="`${tbase}.notes`" v-model:val="acData.notes" :name="name + '.notes'" :wrap-col="wrapc" label="Author's notes" :init="bare" />
 			</a-col>
 		</a-row>
 		<a-row :gutter="[10, 0]">
 			<a-col :span="12">
-				<el-characters />
+				<el-characters :data-testid="`${tbase}.characters`" />
 			</a-col>
 			<a-col :span="12">
-				<el-pairings />
+				<el-pairings :data-testid="`${tbase}.relationships`" />
 			</a-col>
 		</a-row>
 		<Field :name="name + '.nsfw'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
-			<a-checkbox v-bind="field" v-model="field.value"> Has NSFW content </a-checkbox>
+			<a-checkbox :data-testid="`${tbase}.nsfw`" v-bind="field" v-model="field.value"> Has NSFW content </a-checkbox>
 			<error-message :name="field.name" />
 		</Field>
 		<Field :name="name + '.loggedInOnly'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
-			<a-checkbox v-bind="field"> Visible only to registered users </a-checkbox>
+			<a-checkbox :data-testid="`${tbase}.loggedInOnly`" v-bind="field"> Visible only to registered users </a-checkbox>
 			<error-message :name="field.name" />
 		</Field>
 		<Field :name="name + '.hidden'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
 			<a-tooltip>
 				<template #title> Hides your story from everyone except you and site admins. </template>
-				<a-checkbox v-bind="field"> Hidden </a-checkbox>
+				<a-checkbox v-bind="field" :data-testid="`${tbase}.hidden`"> Hidden </a-checkbox>
 			</a-tooltip>
 		</Field>
 		<a-row>
 			<a-col :span="24">
-				<genre />
+				<genre :data-testid="`${tbase}.genre`" />
 			</a-col>
 		</a-row>
 		<a-divider> Contents </a-divider>
-		<upload-or-paste />
-		<Field :name="name + '.id'" v-if="!!data.id" :model-value="data.id" />
+		<upload-or-paste :data-testid="`${tbase}.uploadOrPaste`" />
+		<Field :hidden="true" :name="name + '.id'" v-if="!!data.id" :model-value="data.id" />
 	</div>
 </template>
diff --git a/components/story/create/uploadOrPaste.vue b/components/story/create/uploadOrPaste.vue
index cbf232d..74484cf 100644
--- a/components/story/create/uploadOrPaste.vue
+++ b/components/story/create/uploadOrPaste.vue
@@ -11,14 +11,15 @@
 </script>
 <template>
 	<a-radio-group v-model:value="pvalue">
-		<a-radio value="pasteOrType">Paste or type content</a-radio>
-		<a-radio value="upload">Upload a file</a-radio>
+		<a-radio value="pasteOrType" :data-testid="$attrs['data-testid'] + '.radio.pasteOrType'">Paste or type content</a-radio>
+		<a-radio value="upload" :data-testid="$attrs['data-testid'] + '.radio.upload'">Upload a file</a-radio>
 	</a-radio-group>
 	<br />
 	<br />
-	<base-editor label="" v-if="pvalue === 'pasteOrType'" :init="story" :name="fname + 'content'" />
+	<base-editor :data-testid="$attrs['data-testid'] + '.type'" label="" v-if="pvalue === 'pasteOrType'" :init="story" :name="fname + 'content'" />
 	<a-upload
 		v-model:file-list="fileList"
+		:data-testid="$attrs['data-testid'] + '.upload'"
 		v-else-if="pvalue === 'upload'"
 		:name="fname + 'file'"
 		accept=".doc,.docx,.md,.markdown"
@@ -32,6 +33,7 @@
 				let resp;
 				try {
 					resp = bap.file.response;
+					console.log('RESPONSE', resp);
 					if (resp.success) {
 						fileField.setValue(resp.fileName);
 						console.log(fileField.value);