refactor(vue): use shared test id prop types

packages/vue/src/index.ts

@@ -48,7 +48,14 @@ export { useNodeFontStatus } from '#vue/shared/font-status/use'
 export { usePropScrub } from '#vue/controls/prop-scrub/use'
 export { toolCursor } from '#vue/editor/tool-cursor'
 export { testId, testIdSelector } from '#vue/testing/test-id'
-export type { TestId, TestIdProps } from '#vue/testing/test-id'
+export type {
+  RequiredTestIdProps,
+  TestId,
+  TestIdProps,
+  WithoutTestId,
+  WithRequiredTestId,
+  WithTestId
+} from '#vue/testing/test-id'
 
 /** Property-panel composables. */
 export { usePosition } from '#vue/controls/position/use'

packages/vue/src/testing/test-id.ts

@@ -4,6 +4,16 @@ export type TestIdProps = {
   testId?: TestId
 }
 
+export type RequiredTestIdProps = {
+  testId: TestId
+}
+
+export type WithTestId<TProps extends object = object> = TProps & TestIdProps
+
+export type WithRequiredTestId<TProps extends object = object> = TProps & RequiredTestIdProps
+
+export type WithoutTestId<TProps extends object> = Omit<TProps, keyof TestIdProps>
+
 export function testId(id?: TestId | null): { 'data-test-id'?: TestId } {
   return id ? { 'data-test-id': id } : {}
 }

src/components/PickerSlider.vue

@@ -11,7 +11,7 @@ type PickerSliderDisplay = {
   parse?: (value: number) => number
 }
 
-type PickerSliderProps = TestIdProps & {
+interface PickerSliderProps extends TestIdProps {
   label: string
   modelValue: number
   min: number

src/components/Toolbar/ToolButton.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
+import { testId as testIdAttr, type RequiredTestIdProps } from '@open-pencil/vue'
 import type { Component } from 'vue'
 
+interface ToolButtonProps extends RequiredTestIdProps {
+  icon: Component
+  active?: boolean
+  mobile?: boolean
+}
+
 const {
   icon,
   active = false,
   mobile = false,
   testId
-} = defineProps<{
-  icon: Component
-  active?: boolean
-  mobile?: boolean
-  testId: string
-}>()
+} = defineProps<ToolButtonProps>()
 
 const emit = defineEmits<{
   click: []
@@ -20,7 +22,7 @@ const emit = defineEmits<{
 
 <template>
   <button
-    :data-test-id="testId"
+    v-bind="testIdAttr(testId)"
     class="flex size-8 cursor-pointer items-center justify-center border-none transition-colors"
     :class="[
       mobile ? 'rounded-[6px] select-none' : 'rounded-lg',

src/components/chat/ProviderSelect/ProviderSelect.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { promiseTimeout } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
+import type { TestIdProps } from '@open-pencil/vue'
 
 import AppGroupedSelect from '@/components/ui/AppGroupedSelect.vue'
 import {
@@ -53,7 +54,7 @@ const displayName = computed(() => {
   return providerDef.value.name
 })
 
-const { ui, testId } = defineProps<{
+interface ProviderSelectProps extends TestIdProps {
   ui?: {
     trigger?: string
     content?: string
@@ -61,8 +62,9 @@ const { ui, testId } = defineProps<{
     label?: string
     separator?: string
   }
-  testId?: string
-}>()
+}
+
+const { ui, testId } = defineProps<ProviderSelectProps>()
 
 const groups = computed(() => {
   const result: Array<{ label?: string; items: Array<{ value: string; label: string }> }> = []

src/components/chat/ProviderSelect/ProviderSelectField.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { TestIdProps } from '@open-pencil/vue'
+
 import ProviderSelect from '@/components/chat/ProviderSelect/ProviderSelect.vue'
 
-const { testId = 'provider-selector' } = defineProps<{
-  testId?: string
-}>()
+const { testId = 'provider-selector' } = defineProps<TestIdProps>()
 </script>
 
 <template>

src/components/properties/BoundVariableButton.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { testId as testIdAttr, type TestIdProps } from '@open-pencil/vue'
+
 import Tip from '@/components/ui/Tip.vue'
 
-const { label, testId } = defineProps<{
+interface BoundVariableButtonProps extends TestIdProps {
   label: string
-  testId?: string
-}>()
+}
+
+const { label, testId } = defineProps<BoundVariableButtonProps>()
 
 const emit = defineEmits<{
   detach: []
@@ -14,7 +17,7 @@ const emit = defineEmits<{
 <template>
   <Tip :label="label">
     <button
-      :data-test-id="testId"
+      v-bind="testIdAttr(testId)"
       class="shrink-0 cursor-pointer border-none bg-transparent p-0 text-violet-400 hover:text-surface"
       @click="emit('detach')"
     >

src/components/properties/LayoutSection/SizeControls.vue

@@ -20,13 +20,13 @@ import { useSelectUI } from '@/components/ui/select'
 import { useI18n, useLayoutControlsContext, useNumberVariableBinding } from '@open-pencil/vue'
 
 import type { LayoutSizing } from '@open-pencil/core/scene-graph'
-import type { SizeLimitProp } from '@open-pencil/vue'
+import type { SizeLimitProp, TestId } from '@open-pencil/vue'
 
 type SizeSelectValue = LayoutSizing | `add-${SizeLimitProp}` | `remove-${SizeLimitProp}`
 
 type ActiveSizeLimit = {
   prop: SizeLimitProp
-  testId: string
+  testId: TestId
   icon: () => string
   value: () => number | null
   setLabel: () => string

src/components/ui/AppGroupedSelect.vue

@@ -33,13 +33,13 @@ interface GroupedSelectUi {
   separator?: string
 }
 
-const { groups, displayValue, ui, testId } = defineProps<
-  TestIdProps & {
-    groups: SelectGroupDef<T>[]
-    displayValue: string
-    ui?: GroupedSelectUi
-  }
->()
+interface AppGroupedSelectProps<TValue extends string | number> extends TestIdProps {
+  groups: SelectGroupDef<TValue>[]
+  displayValue: string
+  ui?: GroupedSelectUi
+}
+
+const { groups, displayValue, ui, testId } = defineProps<AppGroupedSelectProps<T>>()
 
 const modelValue = defineModel<T>({ required: true })
 

src/components/ui/AppSelect.vue

@@ -21,18 +21,18 @@ interface AppSelectUi extends SelectUi {
   indicator?: string
 }
 
+interface AppSelectProps<TValue extends string | number> extends TestIdProps {
+  options: { value: TValue; label: string }[]
+  placeholder?: string
+  ui?: AppSelectUi
+}
+
 const {
   options,
   placeholder,
   ui,
   testId = 'app-select-trigger'
-} = defineProps<
-  TestIdProps & {
-    options: { value: T; label: string }[]
-    placeholder?: string
-    ui?: AppSelectUi
-  }
->()
+} = defineProps<AppSelectProps<T>>()
 
 const modelValue = defineModel<T>({ required: true })