@morscherlab/mint-sdk 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/components/AppTopBar.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
 import { computed, ref } from 'vue'
 import { createPinia } from 'pinia'
 import AppTopBar from '../../components/AppTopBar.vue'
@@ -64,6 +64,17 @@ function createWrapper(props = {}, slots = {}) {
   })
 }
 
+async function waitForAsyncComponents(wrapper: VueWrapper) {
+  await flushPromises()
+  await wrapper.vm.$nextTick()
+}
+
+async function openSettingsModal(wrapper: VueWrapper) {
+  await wrapper.get('.mint-topbar__settings-btn').trigger('click')
+  await waitForAsyncComponents(wrapper)
+  return wrapper.findComponent(SettingsModal)
+}
+
 describe('AppTopBar', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -147,12 +158,15 @@ describe('AppTopBar', () => {
       expect(settingsBtn.exists()).toBe(true)
     })
 
-    it('should render SettingsModal when showSettings is true', () => {
+    it('should render SettingsModal after settings is opened', async () => {
       const wrapper = createWrapper({
         title: 'Test App',
         showSettings: true,
       })
-      expect(wrapper.findComponent(SettingsModal).exists()).toBe(true)
+      expect(wrapper.findComponent(SettingsModal).exists()).toBe(false)
+
+      const settingsModal = await openSettingsModal(wrapper)
+      expect(settingsModal.exists()).toBe(true)
     })
 
     it('should have aria-label on settings button', () => {
@@ -183,26 +197,22 @@ describe('AppTopBar', () => {
         showSettings: true,
       })
 
-      const settingsBtn = wrapper.find('.mint-topbar__settings-btn')
-      await settingsBtn.trigger('click')
-
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('modelValue')).toBe(true)
     })
 
-    it('should initialize SettingsModal as closed', () => {
+    it('should not mount SettingsModal while closed', () => {
       const wrapper = createWrapper({
         title: 'Test App',
         showSettings: true,
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
-      expect(settingsModal.props('modelValue')).toBe(false)
+      expect(wrapper.findComponent(SettingsModal).exists()).toBe(false)
     })
   })
 
   describe('settingsConfig prop', () => {
-    it('should pass title to SettingsModal', () => {
+    it('should pass title to SettingsModal', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         title: 'Custom Settings',
       }
@@ -213,11 +223,11 @@ describe('AppTopBar', () => {
         settingsConfig,
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('title')).toBe('Custom Settings')
     })
 
-    it('should pass tabs to SettingsModal', () => {
+    it('should pass tabs to SettingsModal', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         tabs: [
           { id: 'general', label: 'General' },
@@ -231,11 +241,11 @@ describe('AppTopBar', () => {
         settingsConfig,
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('tabs')).toEqual(settingsConfig.tabs)
     })
 
-    it('should normalize shorthand settings tabs for SettingsModal', () => {
+    it('should normalize shorthand settings tabs for SettingsModal', async () => {
       const wrapper = createWrapper({
         title: 'Test App',
         showSettings: true,
@@ -245,7 +255,7 @@ describe('AppTopBar', () => {
         },
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('tabs')).toEqual([
         { id: 'General', label: 'General' },
         { id: 'Advanced', label: 'Advanced' },
@@ -287,18 +297,20 @@ describe('AppTopBar', () => {
         settingsConfig,
       })
 
+      await openSettingsModal(wrapper)
       await wrapper.setProps({
         settingsConfig: {
           ...settingsConfig,
           values: { threshold: 0.75, method: 'logistic', externalContext: 'experiment-2' },
         },
       })
+      await waitForAsyncComponents(wrapper)
 
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.75')
       expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
     })
 
-    it('should render compact controls in SettingsModal', () => {
+    it('should render compact controls in SettingsModal', async () => {
       const controls = defineControls({
         threshold: {
           label: 'Threshold',
@@ -318,13 +330,13 @@ describe('AppTopBar', () => {
         settingsConfig,
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('controls')).toStrictEqual(controls)
       expect(wrapper.text()).toContain('Threshold')
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
     })
 
-    it('should pass control model to SettingsModal', () => {
+    it('should pass control model to SettingsModal', async () => {
       const model = defineControlModel({
         controls: {
           threshold: {
@@ -346,13 +358,13 @@ describe('AppTopBar', () => {
         settingsConfig,
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('model')).toStrictEqual(model)
       expect(wrapper.text()).toContain('Threshold')
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
     })
 
-    it('should pass showAppearance to SettingsModal', () => {
+    it('should pass showAppearance to SettingsModal', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         showAppearance: false,
       }
@@ -363,11 +375,11 @@ describe('AppTopBar', () => {
         settingsConfig,
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('showAppearance')).toBe(false)
     })
 
-    it('should pass settings userType to SettingsModal', () => {
+    it('should pass settings userType to SettingsModal', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         userType: 'admin',
       }
@@ -378,22 +390,22 @@ describe('AppTopBar', () => {
         settingsConfig,
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('userType')).toBe('admin')
     })
 
-    it('should default showAppearance to true when not specified', () => {
+    it('should default showAppearance to true when not specified', async () => {
       const wrapper = createWrapper({
         title: 'Test App',
         showSettings: true,
         settingsConfig: {},
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('showAppearance')).toBe(true)
     })
 
-    it('should pass size to SettingsModal', () => {
+    it('should pass size to SettingsModal', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         size: 'xl',
       }
@@ -404,24 +416,24 @@ describe('AppTopBar', () => {
         settingsConfig,
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('size')).toBe('xl')
     })
 
-    it('should use default size when not specified', () => {
+    it('should use default size when not specified', async () => {
       const wrapper = createWrapper({
         title: 'Test App',
         showSettings: true,
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       // SettingsModal defaults to 'lg' size
       expect(settingsModal.props('size')).toBe('lg')
     })
   })
 
   describe('settings tab slot forwarding', () => {
-    it('should forward settings-tab slots to SettingsModal', () => {
+    it('should forward settings-tab slots to SettingsModal', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         tabs: [{ id: 'general', label: 'General' }],
       }
@@ -434,11 +446,11 @@ describe('AppTopBar', () => {
         'settings-tab-general': '<div class="custom-tab-content">Custom General Tab</div>',
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.vm.$slots['tab-general']).toBeDefined()
     })
 
-    it('should forward shorthand settings-tab slots to SettingsModal', () => {
+    it('should forward shorthand settings-tab slots to SettingsModal', async () => {
       const wrapper = createWrapper({
         title: 'Test App',
         showSettings: true,
@@ -450,11 +462,11 @@ describe('AppTopBar', () => {
         'settings-tab-General': '<div>General Content</div>',
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.vm.$slots['tab-General']).toBeDefined()
     })
 
-    it('should forward multiple settings-tab slots', () => {
+    it('should forward multiple settings-tab slots', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         tabs: [
           { id: 'general', label: 'General' },
@@ -471,12 +483,12 @@ describe('AppTopBar', () => {
         'settings-tab-advanced': '<div>Advanced Content</div>',
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.vm.$slots['tab-general']).toBeDefined()
       expect(settingsModal.vm.$slots['tab-advanced']).toBeDefined()
     })
 
-    it('should forward settings-appearance slot', () => {
+    it('should forward settings-appearance slot', async () => {
       const wrapper = createWrapper({
         title: 'Test App',
         showSettings: true,
@@ -484,7 +496,7 @@ describe('AppTopBar', () => {
         'settings-appearance': '<div class="custom-appearance">Custom Appearance</div>',
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.vm.$slots.appearance).toBeDefined()
     })
   })
@@ -551,7 +563,7 @@ describe('AppTopBar', () => {
   })
 
   describe('combined features', () => {
-    it('passes injected app experiment bindings to the popover and selector modal', () => {
+    it('passes injected app experiment bindings to the popover and selector modal', async () => {
       vi.mocked(usePlatformContext).mockReturnValueOnce({
         isIntegrated: computed(() => true),
         context: ref({ isIntegrated: true, theme: 'system' }),
@@ -587,7 +599,7 @@ describe('AppTopBar', () => {
           saveSuccessMessage: 'Saved',
         })),
         selectorModal: computed(() => ({
-          modelValue: false,
+          modelValue: true,
           currentExperimentId: 12,
         })),
         openModal: vi.fn(),
@@ -614,6 +626,7 @@ describe('AppTopBar', () => {
         },
       })
 
+      await waitForAsyncComponents(wrapper)
       expect(wrapper.findComponent(ExperimentPopover).props()).toMatchObject({
         experimentName: 'Dose response',
         experimentCode: 'EXP-012',
@@ -626,7 +639,7 @@ describe('AppTopBar', () => {
         saveSuccessMessage: 'Saved',
       })
       expect(wrapper.findComponent(ExperimentSelectorModal).props()).toMatchObject({
-        modelValue: false,
+        modelValue: true,
         currentExperimentId: 12,
       })
     })
@@ -822,14 +835,14 @@ describe('AppTopBar', () => {
   })
 
   describe('edge cases', () => {
-    it('should handle empty settingsConfig object', () => {
+    it('should handle empty settingsConfig object', async () => {
       const wrapper = createWrapper({
         title: 'Test App',
         showSettings: true,
         settingsConfig: {},
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       // SettingsModal has default values for these props
       expect(settingsModal.props('title')).toBe('Settings')
       expect(settingsModal.props('tabs')).toEqual([])
@@ -837,7 +850,7 @@ describe('AppTopBar', () => {
       expect(settingsModal.props('size')).toBe('lg')
     })
 
-    it('should handle settingsConfig with only some fields', () => {
+    it('should handle settingsConfig with only some fields', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         title: 'Partial Config',
       }
@@ -848,7 +861,7 @@ describe('AppTopBar', () => {
         settingsConfig,
       })
 
-      const settingsModal = wrapper.findComponent(SettingsModal)
+      const settingsModal = await openSettingsModal(wrapper)
       expect(settingsModal.props('title')).toBe('Partial Config')
       // SettingsModal defaults tabs to empty array
       expect(settingsModal.props('tabs')).toEqual([])
@@ -880,7 +893,7 @@ describe('AppTopBar', () => {
   })
 
   describe('type safety', () => {
-    it('should accept valid settingsConfig with all fields', () => {
+    it('should accept valid settingsConfig with all fields', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         title: 'Complete Settings',
         tabs: [
@@ -897,22 +910,22 @@ describe('AppTopBar', () => {
         settingsConfig,
       })
 
-      expect(wrapper.findComponent(SettingsModal).exists()).toBe(true)
+      expect((await openSettingsModal(wrapper)).exists()).toBe(true)
     })
 
-    it('should accept all valid size options', () => {
+    it('should accept all valid size options', async () => {
       const sizes: Array<'md' | 'lg' | 'xl'> = ['md', 'lg', 'xl']
 
-      sizes.forEach((size) => {
+      for (const size of sizes) {
         const wrapper = createWrapper({
           title: 'Test App',
           showSettings: true,
           settingsConfig: { size },
         })
 
-        const settingsModal = wrapper.findComponent(SettingsModal)
+        const settingsModal = await openSettingsModal(wrapper)
         expect(settingsModal.props('size')).toBe(size)
-      })
+      }
     })
   })
 

package/src/__tests__/components/PluginWorkspaceView.test.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import { computed, h, nextTick, ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
@@ -316,6 +316,9 @@ describe('PluginWorkspaceView', () => {
       global: globalOptions,
     })
 
+    await flushPromises()
+    await nextTick()
+
     expect(wrapper.findComponent(ExperimentPopover).props()).toMatchObject({
       experimentName: 'Dose response',
       experimentCode: 'EXP-012',
@@ -327,6 +330,10 @@ describe('PluginWorkspaceView', () => {
       saveLoading: false,
     })
 
+    wrapper.findComponent(ExperimentPopover).vm.$emit('select')
+    await flushPromises()
+    await nextTick()
+
     wrapper.findComponent(ExperimentSelectorModal).vm.$emit('select', {
       id: 13,
       name: 'Selected experiment',