@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-beta.1

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

@@ -8,23 +8,23 @@ describe('CollapsibleCard', () => {
       const wrapper = mount(CollapsibleCard, {
         props: { title: 'Test Card' },
       })
-      expect(wrapper.find('.mld-collapsible-card').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__title').text()).toBe('Test Card')
+      expect(wrapper.find('.mint-collapsible-card').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__title').text()).toBe('Test Card')
     })
 
     it('should render subtitle when provided', () => {
       const wrapper = mount(CollapsibleCard, {
         props: { title: 'Test Card', subtitle: 'Test Subtitle' },
       })
-      expect(wrapper.find('.mld-collapsible-card__subtitle').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__subtitle').text()).toBe('Test Subtitle')
+      expect(wrapper.find('.mint-collapsible-card__subtitle').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__subtitle').text()).toBe('Test Subtitle')
     })
 
     it('should not render subtitle when not provided', () => {
       const wrapper = mount(CollapsibleCard, {
         props: { title: 'Test Card' },
       })
-      expect(wrapper.find('.mld-collapsible-card__subtitle').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__subtitle').exists()).toBe(false)
     })
   })
 
@@ -37,11 +37,11 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon-badge').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon').element.tagName).toBe('svg')
-      expect(wrapper.find('.mld-collapsible-card__icon path').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon-text').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon-badge').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon').element.tagName).toBe('svg')
+      expect(wrapper.find('.mint-collapsible-card__icon path').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').exists()).toBe(false)
     })
 
     it('should render SVG when icon starts with lowercase m', () => {
@@ -52,10 +52,10 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon').element.tagName).toBe('svg')
-      expect(wrapper.find('.mld-collapsible-card__icon path').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon-text').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon').element.tagName).toBe('svg')
+      expect(wrapper.find('.mint-collapsible-card__icon path').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').exists()).toBe(false)
     })
 
     it('should render single path element with correct d attribute', () => {
@@ -67,7 +67,7 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      const path = wrapper.find('.mld-collapsible-card__icon path')
+      const path = wrapper.find('.mint-collapsible-card__icon path')
       expect(path.exists()).toBe(true)
       expect(path.attributes('d')).toBe(pathData)
     })
@@ -84,14 +84,14 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon').element.tagName).toBe('svg')
+      expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon').element.tagName).toBe('svg')
 
-      const pathElements = wrapper.findAll('.mld-collapsible-card__icon path')
+      const pathElements = wrapper.findAll('.mint-collapsible-card__icon path')
       expect(pathElements).toHaveLength(2)
       expect(pathElements[0].attributes('d')).toBe(paths[0])
       expect(pathElements[1].attributes('d')).toBe(paths[1])
-      expect(wrapper.find('.mld-collapsible-card__icon-text').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').exists()).toBe(false)
     })
 
     it('should set correct SVG attributes for path icons', () => {
@@ -102,7 +102,7 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      const svg = wrapper.find('.mld-collapsible-card__icon')
+      const svg = wrapper.find('.mint-collapsible-card__icon')
       expect(svg.attributes('viewBox')).toBe('0 0 24 24')
       expect(svg.attributes('fill')).toBe('none')
       expect(svg.attributes('stroke')).toBe('currentColor')
@@ -121,10 +121,10 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon-badge').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon-text').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon-text').text()).toBe('⚙')
-      expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon-badge').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').text()).toBe('⚙')
+      expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(false)
     })
 
     it('should render single letter as text in span element', () => {
@@ -135,9 +135,9 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon-text').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon-text').text()).toBe('A')
-      expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').text()).toBe('A')
+      expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(false)
     })
 
     it('should render multi-character text as span element', () => {
@@ -148,9 +148,9 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon-text').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon-text').text()).toBe('AB')
-      expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').text()).toBe('AB')
+      expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(false)
     })
 
     it('should handle various emoji types', () => {
@@ -164,9 +164,9 @@ describe('CollapsibleCard', () => {
           },
         })
 
-        expect(wrapper.find('.mld-collapsible-card__icon-text').exists()).toBe(true)
-        expect(wrapper.find('.mld-collapsible-card__icon-text').text()).toBe(emoji)
-        expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(false)
+        expect(wrapper.find('.mint-collapsible-card__icon-text').exists()).toBe(true)
+        expect(wrapper.find('.mint-collapsible-card__icon-text').text()).toBe(emoji)
+        expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(false)
       })
     })
   })
@@ -177,9 +177,9 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card' },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon-badge').exists()).toBe(false)
-      expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(false)
-      expect(wrapper.find('.mld-collapsible-card__icon-text').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon-badge').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').exists()).toBe(false)
     })
 
     it('should not render icon badge when icon prop is empty string', () => {
@@ -187,7 +187,7 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card', icon: '' },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon-badge').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon-badge').exists()).toBe(false)
     })
 
     it('should render empty array as SVG with no paths', () => {
@@ -198,9 +198,9 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon-badge').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(true)
-      expect(wrapper.findAll('.mld-collapsible-card__icon path')).toHaveLength(0)
+      expect(wrapper.find('.mint-collapsible-card__icon-badge').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(true)
+      expect(wrapper.findAll('.mint-collapsible-card__icon path')).toHaveLength(0)
     })
 
     it('should render string starting with non-M letter as text', () => {
@@ -211,9 +211,9 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon-text').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon-text').text()).toBe('Hello')
-      expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').text()).toBe('Hello')
+      expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(false)
     })
 
     it('should render string with M in middle as text', () => {
@@ -224,8 +224,8 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon-text').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__icon-text').text()).toBe('AMB')
+      expect(wrapper.find('.mint-collapsible-card__icon-text').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon-text').text()).toBe('AMB')
     })
   })
 
@@ -239,7 +239,7 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      const svg = wrapper.find('.mld-collapsible-card__icon')
+      const svg = wrapper.find('.mint-collapsible-card__icon')
       expect(svg.attributes('style')).toContain('color: #ff0000')
     })
 
@@ -252,7 +252,7 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      const badge = wrapper.find('.mld-collapsible-card__icon-badge')
+      const badge = wrapper.find('.mint-collapsible-card__icon-badge')
       expect(badge.attributes('style')).toContain('background-color: #00ff00')
     })
 
@@ -265,7 +265,7 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      const textIcon = wrapper.find('.mld-collapsible-card__icon-text')
+      const textIcon = wrapper.find('.mint-collapsible-card__icon-text')
       expect(textIcon.attributes('style')).toContain('color: #0000ff')
     })
 
@@ -277,7 +277,7 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      const badge = wrapper.find('.mld-collapsible-card__icon-badge')
+      const badge = wrapper.find('.mint-collapsible-card__icon-badge')
       expect(badge.attributes('style')).toContain('background-color: var(--color-primary-soft)')
     })
 
@@ -289,7 +289,7 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      const svg = wrapper.find('.mld-collapsible-card__icon')
+      const svg = wrapper.find('.mint-collapsible-card__icon')
       expect(svg.attributes('style')).toContain('color: var(--color-primary)')
     })
   })
@@ -300,7 +300,7 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card' },
       })
 
-      const body = wrapper.find('.mld-collapsible-card__body')
+      const body = wrapper.find('.mint-collapsible-card__body')
       expect((body.element as HTMLElement).style.display).toBe('none')
       expect(wrapper.find('button').attributes('aria-expanded')).toBe('false')
     })
@@ -310,7 +310,7 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card', defaultOpen: true },
       })
 
-      const body = wrapper.find('.mld-collapsible-card__body')
+      const body = wrapper.find('.mint-collapsible-card__body')
       expect((body.element as HTMLElement).style.display).not.toBe('none')
       expect(wrapper.find('button').attributes('aria-expanded')).toBe('true')
     })
@@ -320,15 +320,15 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card' },
       })
 
-      let body = wrapper.find('.mld-collapsible-card__body')
+      let body = wrapper.find('.mint-collapsible-card__body')
       expect((body.element as HTMLElement).style.display).toBe('none')
 
       await wrapper.find('button').trigger('click')
-      body = wrapper.find('.mld-collapsible-card__body')
+      body = wrapper.find('.mint-collapsible-card__body')
       expect((body.element as HTMLElement).style.display).not.toBe('none')
 
       await wrapper.find('button').trigger('click')
-      body = wrapper.find('.mld-collapsible-card__body')
+      body = wrapper.find('.mint-collapsible-card__body')
       expect((body.element as HTMLElement).style.display).toBe('none')
     })
 
@@ -337,11 +337,11 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card', disabled: true },
       })
 
-      let body = wrapper.find('.mld-collapsible-card__body')
+      let body = wrapper.find('.mint-collapsible-card__body')
       expect((body.element as HTMLElement).style.display).toBe('none')
 
       await wrapper.find('button').trigger('click')
-      body = wrapper.find('.mld-collapsible-card__body')
+      body = wrapper.find('.mint-collapsible-card__body')
       expect((body.element as HTMLElement).style.display).toBe('none')
     })
 
@@ -352,7 +352,7 @@ describe('CollapsibleCard', () => {
 
       const header = wrapper.find('button')
       expect(header.attributes('disabled')).toBeDefined()
-      expect(header.classes()).toContain('mld-collapsible-card__header--disabled')
+      expect(header.classes()).toContain('mint-collapsible-card__header--disabled')
     })
   })
 
@@ -362,7 +362,7 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card' },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__toggle').exists()).toBe(false)
+      expect(wrapper.find('.mint-collapsible-card__toggle').exists()).toBe(false)
     })
 
     it('should render toggle when showToggle is true', () => {
@@ -370,7 +370,7 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card', showToggle: true },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__toggle').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__toggle').exists()).toBe(true)
       expect(wrapper.find('[role="switch"]').exists()).toBe(true)
     })
 
@@ -381,7 +381,7 @@ describe('CollapsibleCard', () => {
 
       const toggle = wrapper.find('[role="switch"]')
       expect(toggle.attributes('aria-checked')).toBe('true')
-      expect(toggle.classes()).toContain('mld-collapsible-card__toggle-track--on')
+      expect(toggle.classes()).toContain('mint-collapsible-card__toggle-track--on')
     })
 
     it('should emit update:toggleValue event', async () => {
@@ -389,7 +389,7 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card', showToggle: true, toggleValue: false },
       })
 
-      await wrapper.find('.mld-collapsible-card__toggle').trigger('click')
+      await wrapper.find('.mint-collapsible-card__toggle').trigger('click')
 
       expect(wrapper.emitted('update:toggleValue')).toBeTruthy()
       expect(wrapper.emitted('update:toggleValue')?.[0]).toEqual([true])
@@ -401,8 +401,8 @@ describe('CollapsibleCard', () => {
       })
 
       // Click toggle should not expand/collapse the card
-      await wrapper.find('.mld-collapsible-card__toggle').trigger('click')
-      const body = wrapper.find('.mld-collapsible-card__body')
+      await wrapper.find('.mint-collapsible-card__toggle').trigger('click')
+      const body = wrapper.find('.mint-collapsible-card__body')
       expect((body.element as HTMLElement).style.display).toBe('none')
     })
 
@@ -416,7 +416,7 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      const track = wrapper.find('.mld-collapsible-card__toggle-track')
+      const track = wrapper.find('.mint-collapsible-card__toggle-track')
       const style = track.attributes('style')
       expect(style).toContain('background-color: #ff0000')
       expect(style).toContain('border-color: #ff0000')
@@ -432,8 +432,8 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__content').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__content').html()).toContain('Card content')
+      expect(wrapper.find('.mint-collapsible-card__content').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__content').html()).toContain('Card content')
     })
   })
 
@@ -443,7 +443,7 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card' },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__chevron').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__chevron').exists()).toBe(true)
     })
 
     it('should toggle chevron class when open', async () => {
@@ -451,11 +451,11 @@ describe('CollapsibleCard', () => {
         props: { title: 'Test Card' },
       })
 
-      const chevron = wrapper.find('.mld-collapsible-card__chevron')
-      expect(chevron.classes()).not.toContain('mld-collapsible-card__chevron--open')
+      const chevron = wrapper.find('.mint-collapsible-card__chevron')
+      expect(chevron.classes()).not.toContain('mint-collapsible-card__chevron--open')
 
       await wrapper.find('button').trigger('click')
-      expect(chevron.classes()).toContain('mld-collapsible-card__chevron--open')
+      expect(chevron.classes()).toContain('mint-collapsible-card__chevron--open')
     })
   })
 
@@ -473,13 +473,13 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__toggle').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__icon').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__toggle').exists()).toBe(true)
 
-      const svg = wrapper.find('.mld-collapsible-card__icon')
+      const svg = wrapper.find('.mint-collapsible-card__icon')
       expect(svg.attributes('style')).toContain('color: #ff0000')
 
-      const badge = wrapper.find('.mld-collapsible-card__icon-badge')
+      const badge = wrapper.find('.mint-collapsible-card__icon-badge')
       expect(badge.attributes('style')).toContain('background-color: #00ff00')
     })
 
@@ -493,8 +493,8 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      expect(wrapper.find('.mld-collapsible-card__icon-text').text()).toBe('🔬')
-      expect(wrapper.find('.mld-collapsible-card__subtitle').text()).toBe('Subtitle')
+      expect(wrapper.find('.mint-collapsible-card__icon-text').text()).toBe('🔬')
+      expect(wrapper.find('.mint-collapsible-card__subtitle').text()).toBe('Subtitle')
       expect(wrapper.find('button').attributes('disabled')).toBeDefined()
     })
 
@@ -512,12 +512,12 @@ describe('CollapsibleCard', () => {
         },
       })
 
-      const pathElements = wrapper.findAll('.mld-collapsible-card__icon path')
+      const pathElements = wrapper.findAll('.mint-collapsible-card__icon path')
       expect(pathElements).toHaveLength(2)
-      expect(wrapper.find('.mld-collapsible-card__subtitle').exists()).toBe(true)
-      expect(wrapper.find('.mld-collapsible-card__toggle').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__subtitle').exists()).toBe(true)
+      expect(wrapper.find('.mint-collapsible-card__toggle').exists()).toBe(true)
 
-      const body = wrapper.find('.mld-collapsible-card__body')
+      const body = wrapper.find('.mint-collapsible-card__body')
       expect((body.element as HTMLElement).style.display).not.toBe('none')
     })
   })