chore: uiux testing posts -d

@fiction/admin/test/settings.debug.test.ts

@@ -30,7 +30,7 @@ describe('settings e2e', async () => {
         { type: 'fill', selector: `[data-option-path="publication.sender"] input`, text: 'Alvin the Chipmunk' },
         { type: 'click', selector: `[data-test-id="save"]` },
         { type: 'visible', selector: `[data-settings-tool="${first}"]` },
-        { type: 'value', selector: `[data-settings-tool]`, callback: (value) => {
+        { type: 'value', selector: `[data-settings-tool]`, onValue: (value) => {
           const v = value as Organization
 
           expect(v.orgName).toBe('Org Name Test')

@fiction/admin/test/signin.uiux.test.ts

@@ -99,7 +99,7 @@ describe('signin UX', { retry: 3 }, async () => {
         { type: 'fill', selector: '[data-test-id="input-email"] input', text: fields.email },
         { type: 'fill', selector: '[data-test-id="input-password"] input', text: fields.password },
         { type: 'fill', selector: '[data-test-id="input-name"] input', text: fields.name },
-        { type: 'value', selector: '[data-test-id="form"]', callback: (v) => {
+        { type: 'value', selector: '[data-test-id="form"]', onValue: (v) => {
           expect(v?.email).toBe(fields.email)
           expect(v?.password).toBe(fields.password)
           expect(v?.fullName).toBe(fields.name)

@fiction/cards/capture/captureCard.uiux.test.ts

@@ -14,7 +14,7 @@ describe('hero: card', async () => {
         { type: 'exists', selector: '[data-mode="onLoad"] form' },
         { type: 'fill', selector: '[data-mode="onLoad"] form [data-test-id="email"]', text: '[email protected]' },
         { type: 'click', selector: '[data-mode="onLoad"] form [data-test-id="submit"]' },
-        { type: 'value', selector: '[data-wrap-mode="onLoad"]', callback: value => expect(value?.subscribed).toBeTruthy() },
+        { type: 'value', selector: '[data-wrap-mode="onLoad"]', onValue: value => expect(value?.subscribed).toBeTruthy() },
       ],
     })
 
@@ -30,7 +30,7 @@ describe('hero: card', async () => {
         { type: 'exists', selector: '[data-mode="onScroll"] form' },
         { type: 'fill', selector: '[data-mode="onScroll"] form [data-test-id="email"]', text: '[email protected]' },
         { type: 'click', selector: '[data-mode="onScroll"] form [data-test-id="submit"]' },
-        { type: 'value', selector: '[data-wrap-mode="onScroll"]', callback: value => expect(value?.subscribed).toBeTruthy() },
+        { type: 'value', selector: '[data-wrap-mode="onScroll"]', onValue: value => expect(value?.subscribed).toBeTruthy() },
       ],
     })
   })

@fiction/core/test-utils/buildTest.ts

@@ -271,12 +271,19 @@ export class PlaywrightLogger {
 }
 
 type TestPageAction = {
-  type: 'visible' | 'click' | 'fill' | 'keyboard' | 'exists' | 'count' | 'value' | 'hasText' | 'hasValue' | 'scrollTo' | 'frameInteraction'
+  type: 'visible' | 'click' | 'fill' | 'keyboard' | 'exists' | 'count' | 'value' | 'hasText' | 'hasValue' | 'scrollTo' | 'frameInteraction' | 'callback'
   selector?: string
   text?: string
   key?: string
   wait?: number
-  callback?: (value?: Record<string, string>) => void
+  waitAfter?: number
+  onValue?: (value?: Record<string, string>) => void
+  callback?: (args: {
+    page: Page
+    element: playwrightTest.Locator
+    action: TestPageAction
+    browser: TestBrowser
+  }) => Promise<void>
   frameSelector?: string
   frameActions?: TestPageAction[]
 }
@@ -374,6 +381,14 @@ export async function performActions(args: {
           action.callback?.(v)
           break
         }
+        case 'callback': {
+          logger.info('EXECUTING_CALLBACK', { data: { selector: action.selector } })
+          if (action.callback) {
+            await action.callback({ page, element, action, browser })
+          }
+          break
+        }
+
         case 'frameInteraction': {
           if (!action.frameSelector || !action.frameActions) {
             throw new Error('Frame selector and actions are required for frame interaction')
@@ -420,9 +435,23 @@ export async function performActions(args: {
                 frameAction.callback?.(v)
                 break
               }
+
+              case 'callback': {
+                logger.info('EXECUTING_CALLBACK_IN_FRAME', { data: { selector: frameAction.selector } })
+                if (frameAction.callback) {
+                  await frameAction.callback({ page, element: frameElement, action: frameAction, browser })
+                }
+                break
+              }
+
               default:
                 throw new Error(`Unsupported frame action type: ${frameAction.type}`)
             }
+
+            if (frameAction.waitAfter) {
+              logger.info('WAIT_AFTER_FRAME_ACTION', { data: { wait: `${frameAction.waitAfter}ms` } })
+              await waitFor(frameAction.waitAfter)
+            }
           }
           break
         }
@@ -437,8 +466,10 @@ export async function performActions(args: {
       throw new Error(errorMessage)
     }
 
-    if (action.wait)
-      await waitFor(action.wait)
+    if (action.waitAfter) {
+      logger.info('WAIT_AFTER', { data: { wait: `${action.waitAfter}ms` } })
+      await waitFor(action.waitAfter)
+    }
   }
 
   if (playwrightLogger.errorLogs.length > 0)

@fiction/posts/el/PagePostEdit.vue

@@ -120,6 +120,7 @@ async function resetToPublished() {
           class="min-w-36"
           icon="i-tabler-arrow-big-up-lines"
           size="md"
+          data-test-id="publish-button"
           @click.stop.prevent="publish()"
         >
           Publish Changes

@fiction/posts/el/ToolPostMain.vue

@@ -98,6 +98,10 @@ const options = vue.computed<InputOption<any>[]>(() => {
           description: 'A short teaser for the post',
           input: 'InputTextarea',
         }),
+        new InputOption({
+          key: 'content',
+          input: 'hidden',
+        }),
         new InputOption({
           key: 'dateAt',
           label: 'Display Date',

@fiction/posts/test/postEditing.debug.test.ts

@@ -18,7 +18,12 @@ describe('postEditing', async () => {
         { type: 'hasValue', selector: '[data-option-path="title"] input', text: 'Test Post' },
         { type: 'fill', selector: '[data-test-id="post-editor-sub-title"]', text: 'hello world' },
         { type: 'hasValue', selector: '[data-option-path="subTitle"] input', text: 'hello world' },
-        { type: 'fill', selector: '[data-test-id="prose-editor-content"] .tiptap', text: 'testing' },
+        { type: 'fill', selector: '[data-test-id="prose-editor-content"] .tiptap', text: 'testing testing testing' },
+        { type: 'click', selector: '[data-test-id="publish-button"]' },
+        { type: 'fill', selector: '[data-test-id="prose-editor-content"] .tiptap', text: ' lorem ipsum', wait: 3000 },
+        { type: 'click', selector: `[data-test-id="draft-control-dropdown"] button`, wait: 3000 },
+        { type: 'click', selector: `[data-test-id="draft-control-dropdown"] [data-test-id="reset-to-published"]` },
+        { type: 'hasValue', selector: '[data-option-path="content"]', text: '<p>testing testing testing</p>' },
       ],
     })
 

@fiction/ui/inputs/ElInput.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   description: { type: String, default: '' },
   inputProps: { type: Object as vue.PropType<InputProps>, default: () => ({}) },
   uiSize: { type: String as vue.PropType<UiElementSize>, default: 'md' },
-  input: { type: [String, Object] as vue.PropType<keyof typeof inputs | vue.Component | 'title' | 'group'>, default: undefined },
+  input: { type: [String, Object] as vue.PropType<keyof typeof inputs | vue.Component | 'title' | 'group' | 'hidden'>, default: undefined },
   defaultValue: { type: [String, Object, Array, Number, Date, Boolean], default: undefined },
 })
 
@@ -50,7 +50,7 @@ const inputEl = vue.ref<vue.ComponentPublicInstance>()
 const valid = vue.ref<boolean | undefined>()
 const inputComponent = vue.computed(() => {
   const inp = props.input
-  if (inp === 'title' || inp === 'group') {
+  if (inp === 'title' || inp === 'group' || inp === 'hidden') {
     return ''
   }
   else if (inp && typeof inp === 'string') {

@fiction/ui/inputs/FormEngine.vue

@@ -112,7 +112,7 @@ function getGroupHeaderClasses(opt: InputOption) {
 <template>
   <div :data-options-len="options.length">
     <div class="flex flex-col" :class="cls.inputGap">
-      <div v-for="(opt, i) in options.filter(_ => !_.settings.isHidden)" :key="i">
+      <template v-for="(opt, i) in options.filter(_ => !_.settings.isHidden)" :key="i">
         <div
           v-if="opt.input.value === 'group'"
           :class="[
@@ -156,6 +156,7 @@ function getGroupHeaderClasses(opt: InputOption) {
           class="mb-2"
           :class="i === 0 ? 'mt-0' : 'mt-8'"
         />
+        <input v-else-if="opt.input.value === 'hidden'" :data-option-path="opt.key.value" type="hidden" :value="getNested({ path: getOptionPath(opt.key.value), data: modelValue })">
         <div v-else :class="opt.settings.uiFormat !== 'naked' && depth === 0 ? 'px-6' : ''" :data-depth="depth">
           <ElInput
             v-if="opt.isHidden.value !== true"
@@ -170,7 +171,7 @@ function getGroupHeaderClasses(opt: InputOption) {
             @update:model-value="emit('update:modelValue', setNested({ path: getOptionPath(opt.key.value), data: modelValue, value: $event }))"
           />
         </div>
-      </div>
+      </template>
     </div>
     <ElActions :actions class="mt-4 flex items-center justify-center" />
   </div>

@fiction/ui/inputs/index.ts

@@ -71,7 +71,7 @@ export interface InputOptionSettings<T extends string = string > {
   description?: string
   subLabel?: string
   placeholder?: string
-  input?: keyof typeof inputs | 'title' | 'group' | vue.Component
+  input?: keyof typeof inputs | 'title' | 'group' | 'hidden' | vue.Component
   isRequired?: boolean
   isClosed?: boolean
   props?: Record<string, unknown>

@fiction/ui/prose/editor/ProseEditor.vue

@@ -7,6 +7,8 @@ import { EditorContent, useEditor } from '@tiptap/vue-3'
 import BubbleMenuEngine from './el/BubbleMenuEngine.vue'
 import { getExtensions } from './extensions/index'
 
+defineOptions({ name: 'ProseEditor' })
+
 const { modelValue = '', supplemental = {}, isContentCompletionDisabled = false } = defineProps<{
   modelValue: string
   supplemental?: EditorSupplementary
@@ -59,6 +61,9 @@ vue.onMounted(() => {
     }
   })
 })
+
+// Expose the editor instance
+defineExpose({ editor })
 </script>
 
 <template>