test: update cases

Author: AngusFu

tests/unit/HelloWorld.spec.js

@@ -0,0 +1,58 @@
+import { mount } from '@vue/test-utils'
+import { ContainerQuery } from '../../src'
+
+const ContainerQueryApp = {
+  components: { ContainerQuery },
+  props: {
+    query: Object,
+    initialSize: Object
+  },
+  data () {
+    return { params: {} }
+  },
+  methods: {
+    handleChange (params) {
+      this.params = params
+    }
+  },
+  render (h) {
+    return (
+      <container-query
+        query={this.query}
+        initialSize={this.initialSize}
+        onChange={this.handleChange}
+      >
+        <pre class="app">{ this.params }</pre>
+      </container-query>
+    )
+  }
+}
+
+describe('ContainerQuery', () => {
+  const query = {
+    mobile: {maxWidth: 399},
+    desktop: {minWidth: 400}
+  }
+
+  const initialSize = { width: 300 }
+
+  it('renders without initialSize', () => {
+    const wrapper = mount(ContainerQueryApp, {
+      propsData: { query }
+    })
+
+    expect(wrapper.vm.params).toEqual({})
+    expect(wrapper.is('pre.app')).toBe(true)
+  })
+
+  it('renders with initialSize', () => {
+    const wrapper = mount(ContainerQueryApp, {
+      propsData: { query, initialSize }
+    })
+
+    expect(wrapper.vm.params.mobile).toBe(true)
+    expect(wrapper.vm.params.desktop).toBe(false)
+    expect(wrapper.is('pre.app')).toBe(true)
+  })
+})
+

tests/unit/component.spec.js

@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils'
+import { createContainerQueryMixin } from '../../src'
+
+const query = {
+  mobile: {maxWidth: 399},
+  desktop: {minWidth: 400}
+}
+const initialSize = { width: 300 }
+
+const template = '<pre class="app">{ containerQuery }</pre>'
+
+describe('createContainerQueryMixin', () => {
+  it('renders without initialSize', () => {
+    const wrapper = shallowMount({
+      template,
+      mixins: [
+        createContainerQueryMixin(query)
+      ]
+    })
+
+    expect(wrapper.vm.containerQuery).toEqual({})
+    expect(wrapper.is('pre.app')).toBe(true)
+  })
+
+  it('renders with initialSize', () => {
+    const wrapper = shallowMount({
+      template,
+      mixins: [
+        createContainerQueryMixin(query, initialSize)
+      ]
+    })
+
+    expect(wrapper.vm.containerQuery.mobile).toBe(true)
+    expect(wrapper.vm.containerQuery.desktop).toBe(false)
+    expect(wrapper.is('pre.app')).toBe(true)
+  })
+})