test: add ui mixin tests

ecomfe · Dec 11, 2023 · 0451c7c · 0451c7c
1 parent 06e4ce6
commit 0451c7c
Showing 1 changed file with 46 additions and 4 deletions.
diff --git a/packages/veui/test/unit/specs/mixins/ui.spec.js b/packages/veui/test/unit/specs/mixins/ui.spec.js
@@ -44,10 +44,23 @@ uiManager.defaults(
   'bar'
 )
 
+uiManager.defaults(
+  {
+    ui: {
+      size: {
+        values: ['small', 'medium', 'large'],
+        default: 'medium',
+        inherit: true
+      }
+    }
+  },
+  'baz'
+)
+
 const Foo = {
   name: 'veui-foo',
   mixins: [useUi()],
-  template: '<div :ui="realUi"><slot>Foo Component</slot></div>'
+  template: `<div :class="$c('foo')" :ui="realUi"><slot>Foo Component</slot></div>`
 }
 
 const Bar = {
@@ -60,36 +73,53 @@ const Bar = {
     '<div :ui="realUi"><veui-foo :ui="uiParts.foo">Bar Component</veui-foo></div>'
 }
 
+const Baz = {
+  name: 'veui-baz',
+  mixins: [useUi()],
+  components: {
+    'veui-foo': Foo
+  },
+  template: `<div :class="$c('baz')" :ui="realUi"><veui-foo>Baz Component</veui-foo></div>`
+}
+
 describe('mixins/ui', () => {
-  it('should produce correct `ui` dom attribute', () => {
+  it('should produce correct `ui` dom attribute and class prefix', () => {
     const wrapper = mount(
       {
         components: {
           'veui-foo': Foo,
-          'veui-bar': Bar
+          'veui-bar': Bar,
+          'veui-baz': Baz
         },
         template: `
         <div>
           <veui-foo ref="f1"/>
           <veui-foo ref="f2" ui="large primary theme:d22"/>
           <veui-bar ref="b1"/>
           <veui-bar ref="b2" ui="large primary theme:d22"/>
+          <veui-baz ref="z1"/>
+          <veui-baz ref="z2" ui="large primary theme:ai"/>
         </div>`
       },
       {
         attachToDocument: true
       }
     )
 
-    const [f1, f2, bf1, bf2] = wrapper.findAll(Foo).wrappers
+    const [f1, f2, bf1, bf2, zf1, zf2] = wrapper.findAll(Foo).wrappers
     const [b1, b2] = wrapper.findAll(Bar).wrappers
+    const [z1, z2] = wrapper.findAll(Baz).wrappers
 
     const uiF1 = f1.attributes('ui')
     const uiF2 = f2.attributes('ui')
     const uiB1 = b1.attributes('ui')
     const uiBF1 = bf1.attributes('ui')
     const uiB2 = b2.attributes('ui')
     const uiBF2 = bf2.attributes('ui')
+    const uiZ1 = z1.attributes('ui')
+    const uiZF1 = zf1.attributes('ui')
+    const uiZ2 = z2.attributes('ui')
+    const uiZF2 = zf2.attributes('ui')
 
     expect(uiF1.includes('medium')).to.equal(true)
     expect(uiF1.includes('large')).to.equal(false)
@@ -121,6 +151,18 @@ describe('mixins/ui', () => {
     expect(uiBF2.includes('primary')).to.equal(true)
     expect(uiBF2.includes('theme:d22')).to.equal(true)
 
+    expect(uiZ1.includes('theme:ai')).to.equal(false)
+    expect(uiZF1.includes('theme:ai')).to.equal(false)
+    expect(uiZ2.includes('theme:ai')).to.equal(false)
+    expect(uiZF2.includes('theme:ai')).to.equal(false)
+    expect(uiZ2.includes('theme:d22')).to.equal(true)
+    expect(uiZF2.includes('theme:d22')).to.equal(true)
+
+    expect(z1.classes('veui-ai-baz')).to.equal(false)
+    expect(zf1.classes('veui-ai-foo')).to.equal(false)
+    expect(z2.classes('veui-ai-baz')).to.equal(true)
+    expect(zf2.classes('veui-ai-foo')).to.equal(true)
+
     wrapper.destroy()
   })
 })