@windward/core 0.12.1 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### Hotfix [0.12.2] created - 2025-02-21
+
+
 ### Hotfix [0.12.1] created - 2025-02-21
 
 

package/components/utils/glossary/GlossaryToolTip.vue

@@ -5,6 +5,7 @@
             :close-on-content-click="false"
             offset-y
             max-width="768px"
+            :z-index="20"
         >
             <template #activator="{ on }">
                 <span 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/core",
-    "version": "0.12.1",
+    "version": "0.12.2",
     "description": "Windward UI Core Plugins",
     "main": "plugin.js",
     "scripts": {

package/test/Components/utils/glossary/GlossaryToolTip.spec.js

@@ -0,0 +1,136 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import VueI18n from 'vue-i18n'
+import GlossaryToolTip from '../../../../components/utils/glossary/GlossaryToolTip.vue'
+
+Vue.use(Vuetify)
+Vue.use(VueI18n)
+
+describe('GlossaryToolTip', () => {
+    const localVue = createLocalVue()
+    let vuetify
+    let i18n
+    let wrapper
+
+    beforeEach(() => {
+        vuetify = new Vuetify()
+        i18n = new VueI18n({
+            locale: 'en',
+            messages: {
+                en: {
+                    'windward.core.components.utils.tiny_mce_wrapper.definition': 'Definition',
+                    'windward.core.components.utils.tiny_mce_wrapper.alternate_forms': 'Alternate Forms',
+                    'windward.core.components.utils.tiny_mce_wrapper.related_terms': 'Related Terms'
+                }
+            }
+        })
+
+        // Create data-app element for Vuetify
+        const app = document.createElement('div')
+        app.setAttribute('data-app', 'true')
+        document.body.appendChild(app)
+    })
+
+    afterEach(() => {
+        wrapper.destroy()
+        // Clean up data-app element
+        const app = document.querySelector('[data-app=true]')
+        if (app) {
+            document.body.removeChild(app)
+        }
+    })
+
+    const mountComponent = (options = {}) => {
+        return mount(GlossaryToolTip, {
+            localVue,
+            vuetify,
+            i18n,
+            attachTo: document.body,
+            slots: {
+                term: '<span>Test Term</span>',
+                definition: '<span>Test Definition</span>'
+            },
+            ...options
+        })
+    }
+
+    const waitForMenuTransition = async () => {
+        await new Promise(resolve => setTimeout(resolve, 300))
+        await Vue.nextTick()
+    }
+
+    it('renders the term in the activator slot', () => {
+        wrapper = mountComponent()
+        expect(wrapper.find('.glossary-word').text()).toContain('Test Term')
+    })
+
+    it('starts with menu closed', () => {
+        wrapper = mountComponent()
+        expect(wrapper.vm.show).toBe(false)
+        expect(wrapper.find('.v-menu__content').exists()).toBe(false)
+    })
+
+    it('opens menu on click', async () => {
+        wrapper = mountComponent()
+        const activator = wrapper.find('.glossary-word span')
+        
+        await activator.trigger('click')
+        await waitForMenuTransition()
+        
+        expect(wrapper.vm.show).toBe(true)
+        const menu = document.querySelector('.v-menu__content')
+        expect(menu).toBeTruthy()
+        expect(getComputedStyle(menu).display).not.toBe('none')
+    })
+
+    it('closes menu when clicking outside', async () => {
+        wrapper = mountComponent()
+        const activator = wrapper.find('.glossary-word span')
+        
+        // Open menu
+        await activator.trigger('click')
+        await waitForMenuTransition()
+        expect(wrapper.vm.show).toBe(true)
+
+        // Click outside
+        document.body.click()
+        await waitForMenuTransition()
+        
+        expect(wrapper.vm.show).toBe(false)
+    })
+
+    it('renders definition content when menu is open', async () => {
+        wrapper = mountComponent()
+        const activator = wrapper.find('.glossary-word span')
+        
+        await activator.trigger('click')
+        await waitForMenuTransition()
+        
+        expect(document.body.textContent).toContain('Test Definition')
+    })
+
+    it('applies active class when menu is open', async () => {
+        wrapper = mountComponent()
+        const activator = wrapper.find('.glossary-word span')
+        
+        await activator.trigger('click')
+        await waitForMenuTransition()
+        
+        expect(wrapper.find('.glossary-word').classes()).toContain('active')
+    })
+
+    it('removes active class when menu is closed', async () => {
+        wrapper = mountComponent()
+        const activator = wrapper.find('.glossary-word span')
+        
+        // Open then close
+        await activator.trigger('click')
+        await waitForMenuTransition()
+        
+        document.body.click()
+        await waitForMenuTransition()
+        
+        expect(wrapper.find('.glossary-word').classes()).not.toContain('active')
+    })
+})