@vue/test-utils#flushPromises TypeScript Examples

describe('Popover', () => {
  it('should be render as a element', () => {
    const wrapper = mount(Popover, {
      slots: {
        default: () => 123,
        widget: () => 456
      }
    })

    expect(wrapper.html()).toMatchSnapshot()
  })
  it('should be work correctly', async () => {
    const wrapper = mount(Wrapper, { attachTo: document.body })
    const {
      popoverRef: { changeHandler }
    } = wrapper.vm.$refs as any
    await changeHandler(true)
    await flushPromises()
    await later()
    expect(wrapper.vm.visible).toBe(true)
    await changeHandler(false)
    await flushPromises()
    await later()
    expect(wrapper.vm.visible).toBe(false)
  })
})

describe('Swipe', () => {
  it('should be support custom render indicator', async () => {
    const slots = {
      indicator: () => <div>custom</div>
    }

    const wrapper = mount({
      render() {
        return (
          <Swipe v-slots={slots}>
            <SwipeItem>1</SwipeItem>
            <SwipeItem>2</SwipeItem>
          </Swipe>
        )
      }
    })
    await flushPromises()
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('Tooltip', () => {
  it('should be support slots content', () => {
    const wrapper = mount(Tooltip, {
      slots: {
        content: <div>test message</div>
      }
    })
    expect(wrapper.html()).toMatchSnapshot()
  })
  it('bidirectional binding should be supported', async () => {
    const wrapper = mount(Wrapper, { attachTo: document.body })
    const {
      tooltipRef: { setTeleport }
    } = wrapper.vm.$refs as any
    await setTeleport('.container')

    const el = wrapper.find('.fect-tooltip')
    await el.trigger('click')
    await flushPromises()
    await later()
    expect(wrapper.vm.visible).toBe(true)
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('v-model', () => {
  it('updates local data when v-model changes', async () => {
    const wrapper = mount(
      {
        data() {
          return {
            name: 'foobar',
          }
        },
        template: `<FormKit v-model="name" :delay="0" />`,
      },
      {
        global: {
          plugins: [[plugin, defaultConfig]],
        },
      }
    )
    expect(wrapper.find('input').element.value).toBe('foobar')
    wrapper.vm.$data.name = 'jane'
    await nextTick()
    expect(wrapper.find('input').element.value).toBe('jane')
    wrapper.find('input').setValue('jon')
    await flushPromises()
    expect(wrapper.vm.$data.name).toBe('jon')
  })
})

waitForTime = async (millisecond: number) => {
  jest.advanceTimersByTime(millisecond);
  await flushPromises();
}

waitForAll = async () => {
  jest.runAllTimers();
  await flushPromises();
}

describe('Swipe', () => {
  it('should be render as a element', async () => {
    const wrapper = mount(Wrapper)
    await flushPromises()
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
    wrapper.unmount()
  })
  it('should be support custom indicator color', async () => {
    const wrapper = mount(Wrapper)
    await wrapper.setData({ indicatorColor: 'red' })
    await flushPromises()
    expect(wrapper.html()).toMatchSnapshot()
    wrapper.unmount()
  })

  it('component props should be work correctly', async () => {
    const wrapper = mount(Wrapper)
    await wrapper.setData({
      loop: true,
      indicatorDisplay: false,
      autoplay: 2000
    })
    await flushPromises()
    expect(wrapper.html()).toMatchSnapshot()
    wrapper.unmount()
  })
  it('component should processing boundary index correctly', async () => {
    const wrapper = mount(Wrapper)
    await wrapper.setData({
      loop: true,
      autoPlay: 2000,
      initialValue: -1
    })
    await flushPromises()
    const indicators = wrapper.findAll('.fect-swipe__indicator')
    await indicators[0].trigger('click')
    expect(wrapper.html()).toMatchSnapshot()
    wrapper.unmount()
  })

  it('component swipeItem should emitter a click event', async () => {
    const wrapper = mount(Wrapper)
    await flushPromises()
    const els = wrapper.findAll('.fect-swipe__item')
    await els[0].trigger('click')
    expect(wrapper.emitted()).toBeTruthy()
    wrapper.unmount()
  })
  it('should support autoplay', async () => {
    const wrapper = mount(Wrapper)
    await wrapper.setData({
      loop: true,
      autoplay: 2000
    })
    // await flushPromises()
    // await later()
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('Collapse', () => {
  it('should be render as a element', () => {
    const wrapper = mount(Collapse, {
      props: {
        title: 'test'
      }
    })
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should be support title and subtitle', () => {
    const wrapper = mount(Collapse, {
      props: {
        title: 'HTML',
        subtitle: 'HyperText Markup Language'
      }
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('h3').text()).toBe('HTML')
    expect(wrapper.find('.subtitle').text()).toBe('HyperText Markup Language')
  })
  it('should be support subTag and shadow mode', () => {
    const wrapper = mount(Collapse, {
      props: {
        title: 'HTML',
        subtitle: 'HyperText Markup Language',
        subTag: 'code',
        shadow: true
      }
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('code')).toBeTruthy()
    expect(wrapper.find('.fect-collapse--shadow')).toBeTruthy()
  })

  it('should be tigger click', async () => {
    const wrapper = mount(Collapse, {
      props: {
        title: 'HTML',
        visible: false
      }
    })

    await wrapper.find('.fect-collapse__view').trigger('click')
    expect(wrapper.find('.fect-collapse__expand').attributes('style')).toBe('visibility: visible; height: 0px;')
  })
  it('should be support accordion model', async () => {
    const wrapper = mount({
      components: {
        [Collapse.name]: Collapse,
        [CollapseGroup.name]: CollapseGroup
      },
      data() {
        return { show: [0], accordion: true }
      },
      template: `
      <div class="container">
        <fe-collapseGroup v-model="show" :accordion="accordion">
          <fe-collapse title="Test">
            123456
          </fe-collapse>
          <fe-collapse title="Test1">
            1
          </fe-collapse>
        </fe-collapseGroup>
      </div>
      `
    })
    expect(wrapper.html()).toMatchSnapshot()
    const els = wrapper.findAll('.fect-collapse__view')
    await els[0].trigger('click')
    await flushPromises()
    await later()
    expect(wrapper.vm.show.length).toBe(0)
    await els[0].trigger('click')
    await flushPromises()
    await later()
    await els[1].trigger('click')
    expect(wrapper.vm.show).toEqual([1])
    await wrapper.setData({ accordion: false })
    await els[0].trigger('click')
    expect(wrapper.vm.show).toEqual([1, 0])
  })
})

describe('parsing dom elements', () => {
  it('can render a single simple dom element', () => {
    const wrapper = mount(FormKitSchema, {
      props: {
        schema: [
          {
            $el: 'h1',
            children: 'Hello world',
            attrs: {
              'data-foo': 'bar',
            },
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<h1 data-foo="bar">Hello world</h1>')
  })

  it('can render a multiple children', () => {
    const wrapper = mount(FormKitSchema, {
      props: {
        schema: [
          {
            $el: 'h1',
            children: [
              {
                $el: 'em',
                children: 'Hello',
              },
              ' world',
            ],
            attrs: {
              'data-foo': 'bar',
            },
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<h1 data-foo="bar"><em>Hello</em> world</h1>')
  })

  it('can update data by replacing prop', async () => {
    const wrapper = mount(FormKitSchema, {
      props: {
        data: { a: { b: 'c' } },
        schema: [{ $el: 'h1', children: '$a.b' }, { $el: 'input' }],
      },
    })
    expect(wrapper.html()).toContain('c')
    wrapper.find('input').setValue('hello world')
    wrapper.setProps({ data: { a: { b: 'f' } } })
    await nextTick()
    expect(wrapper.html()).toContain('f')
    expect(wrapper.find('input').element.value).toBe('hello world')
  })

  it('can update new data by changing reactive prop', async () => {
    const data = reactive({ a: { b: 'c' } })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [{ $el: 'h1', children: '$a.b' }],
      },
    })
    expect(wrapper.html()).toContain('c')
    data.a.b = 'f'
    await nextTick()
    expect(wrapper.html()).toContain('f')
  })

  it('can update new data by changing sub-object prop', async () => {
    const data = reactive({ a: { b: 'c' } })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [{ $el: 'h1', children: '$a.b' }],
      },
    })
    data.a = { b: 'g' }
    await nextTick()
    expect(wrapper.html()).toContain('g')
  })

  it('can remove a node with the "if" property', async () => {
    const data = reactive({ a: { b: 'c' } })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [{ $el: 'h1', children: '$a.b', if: "$a.b === 'c'" }],
      },
    })
    expect(wrapper.html()).toBe('<h1>c</h1>')
    data.a = { b: 'g' }
    await nextTick()
    expect(wrapper.html()).toBe('')
    data.a.b = 'c'
    await nextTick()
    expect(wrapper.html()).toBe('<h1>c</h1>')
  })

  it('can render different children with if/then/else at root', async () => {
    const data = reactive({ value: 100 })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: {
          if: '$value >= 100',
          then: [{ $el: 'h1', children: ['$', '$value'] }],
          else: {
            if: '$value > 50',
            then: [{ $el: 'h2', children: ['$', '$value'] }],
            else: [{ $el: 'h3', children: 'You need a job!' }],
          },
        },
      },
    })
    expect(wrapper.html()).toBe('<h1>$100</h1>')
    data.value = 75
    await nextTick()
    expect(wrapper.html()).toBe('<h2>$75</h2>')
    data.value = 50
    await nextTick()
    expect(wrapper.html()).toBe('<h3>You need a job!</h3>')
  })

  it('can render different sibling children with if/then/else at root', async () => {
    const data = reactive({ value: 100 })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'label',
            children: 'What is your salary?',
          },
          {
            if: '$value >= 100',
            then: [{ $el: 'h1', children: ['$', '$value'] }],
            else: {
              if: '$value > 20',
              then: [{ $el: 'h2', children: ['$', '$value'] }],
              else: [{ $el: 'h3', children: 'You need a new job!' }],
            },
          },
          {
            $el: 'footer',
            children: '© All rights reserved.',
          },
        ],
      },
    })
    expect(wrapper.html()).toBe(
      `<label>What is your salary?</label>
<h1>$100</h1>
<footer>© All rights reserved.</footer>`
    )
    data.value = 75
    await nextTick()
    expect(wrapper.html()).toContain('<h2>$75</h2>')
    data.value = 20
    await nextTick()
    expect(wrapper.html()).toContain('<h3>You need a new job!</h3>')
  })

  it('can render attributes', () => {
    const wrapper = mount(FormKitSchema, {
      props: {
        schema: [
          {
            $el: 'button',
            attrs: {
              type: 'submit',
            },
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<button type="submit"></button>')
  })

  it('can render dynamic attribute values', async () => {
    const data = reactive({ type: 'foo' })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'button',
            attrs: {
              'data-type': '$type',
            },
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<button data-type="foo"></button>')
    data.type = 'bar'
    await flushPromises()
    expect(wrapper.html()).toBe('<button data-type="bar"></button>')
  })

  it('can render dynamic attribute values at depth', async () => {
    const data = reactive({ color: 'red' })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'button',
            attrs: {
              style: {
                color: '$color',
              },
            },
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<button style="color: red;"></button>')
    data.color = 'green'
    await flushPromises()
    expect(wrapper.html()).toBe('<button style="color: green;"></button>')
  })

  it('can perform string concatenation in dynamic attributes', async () => {
    const data = reactive({ size: 10 })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'button',
            attrs: {
              style: {
                fontSize: '$size + 1 + em',
              },
            },
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<button style="font-size: 11em;"></button>')
    data.size = 5
    await nextTick()
    expect(wrapper.html()).toBe('<button style="font-size: 6em;"></button>')
  })

  it('can render conditional set of attributes', async () => {
    const data = reactive({ status: 'warning' })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'div',
            attrs: {
              if: "$status === 'warning'",
              then: {
                'data-status': '$status',
                style: {
                  color: 'red',
                },
              },
              else: {
                if: '$status === information',
                then: {
                  'data-info': 'true',
                },
                else: {
                  'data-status': '$status',
                },
              },
            },
          },
        ],
      },
    })
    expect(wrapper.html()).toBe(
      '<div data-status="warning" style="color: red;"></div>'
    )
    data.status = 'information'
    await nextTick()
    expect(wrapper.html()).toBe('<div data-info="true"></div>')
    data.status = 'error'
    await nextTick()
    expect(wrapper.html()).toBe('<div data-status="error"></div>')
  })

  it('can render a single complex conditional attribute', async () => {
    const data = reactive({ size: 1 })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'button',
            attrs: {
              'data-size': {
                if: '$size < 5',
                then: 'extra-small',
                else: {
                  if: '$size >= 5 && $size < 10',
                  then: 'medium',
                  else: {
                    if: '$size >= 10 && $size < 20',
                    then: 'large',
                    else: 'extra-large',
                  },
                },
              },
            },
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<button data-size="extra-small"></button>')
    data.size = 5
    await nextTick()
    expect(wrapper.html()).toBe('<button data-size="medium"></button>')
    data.size = 10
    await nextTick()
    expect(wrapper.html()).toBe('<button data-size="large"></button>')
    data.size = 50
    await nextTick()
    expect(wrapper.html()).toBe('<button data-size="extra-large"></button>')
  })

  it('can render an conditional attribute with compiled values', async () => {
    const data = reactive({ status: 'warning' })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'div',
            attrs: {
              id: {
                if: '$status === warning',
                then: '$status',
                else: 'no-warning',
              },
            },
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<div id="warning"></div>')
    data.status = 'ok'
    await nextTick()
    expect(wrapper.html()).toBe('<div id="no-warning"></div>')
  })

  it('can render a list of items', () => {
    const wrapper = mount(FormKitSchema, {
      props: {
        schema: [
          {
            $el: 'ul',
            children: [
              {
                $el: 'li',
                for: ['value', 'key', ['a', 'b', 'c']],
                children: [
                  {
                    $el: 'span',
                    for: ['price', 2],
                    children: ['$key', ':', '$value', ', ', '$price'],
                  },
                ],
              },
            ],
          },
        ],
      },
    })
    expect(wrapper.html()).toBe(
      `<ul>
  <li><span>0:a, 0</span><span>0:a, 1</span></li>
  <li><span>1:b, 0</span><span>1:b, 1</span></li>
  <li><span>2:c, 0</span><span>2:c, 1</span></li>
</ul>`
    )
  })

  it('reacts to iteration data changes', async () => {
    const data = reactive({
      alphabet: ['a', 'b', 'c'],
    })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'span',
            for: ['value', '$alphabet'],
            children: '$value',
          },
        ],
      },
    })
    expect(wrapper.html()).toBe(`<span>a</span>
<span>b</span>
<span>c</span>`)
    data.alphabet[1] = 'd'
    await nextTick()
    expect(wrapper.html()).toBe(`<span>a</span>
<span>d</span>
<span>c</span>`)
  })

  it('can access nested iteration data', async () => {
    const data = reactive({
      accounts: [{ user: { name: 'bob' } }, { user: { name: 'ted' } }],
    })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'span',
            for: ['account', '$accounts'],
            children: '$account.user.name',
          },
        ],
      },
    })
    expect(wrapper.html()).toBe(`<span>bob</span>
<span>ted</span>`)
    data.accounts.unshift({ user: { name: 'fred' } })
    await nextTick()
    expect(wrapper.html()).toBe(`<span>fred</span>
<span>bob</span>
<span>ted</span>`)
  })

  it('can shadow nested loop scoped variables', async () => {
    const data = reactive({
      users: ['fred', 'ted'],
      foods: ['ice cream', 'pizza'],
    })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'div',
            for: ['foobar', '$users'],
            children: [
              {
                $el: 'h2',
                children: '$foobar',
              },
              {
                $el: 'ul',
                children: [
                  {
                    $el: 'li',
                    for: ['foobar', '$foods'],
                    children: '$foobar',
                  },
                ],
              },
            ],
          },
        ],
      },
    })
    expect(wrapper.html()).toBe(
      `<div>
  <h2>fred</h2>
  <ul>
    <li>ice cream</li>
    <li>pizza</li>
  </ul>
</div>
<div>
  <h2>ted</h2>
  <ul>
    <li>ice cream</li>
    <li>pizza</li>
  </ul>
</div>`
    )
  })

  it('can render slots as the only child', () => {
    const wrapper = mount(FormKitSchema, {
      slots: {
        default: 'click me',
      },
      props: {
        schema: [
          {
            $el: 'button',
            children: '$slots.default',
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<button>click me</button>')
  })

  it('can render slots as one of many children', () => {
    const wrapper = mount(FormKitSchema, {
      slots: {
        default: 'click me',
      },
      props: {
        schema: [
          {
            $el: 'button',
            children: ['$slots.default', ' to buy'],
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<button>click me to buy</button>')
  })

  it('can render the loop data inside the default slot', () => {
    const wrapper = mount(FormKitSchema, {
      props: {
        data: {
          items: ['a', 'b', 'c'],
        },
        schema: [
          {
            $cmp: 'FormKit',
            for: ['item', 'index', '$items'],
            props: {
              type: 'group',
            },
            children: '$index + ": " + $item',
          },
        ],
      },
      global: {
        plugins: [[plugin, defaultConfig]],
      },
    })
    expect(wrapper.text()).toBe('0: a1: b2: c')
  })

  it('can render the loop data inside the default slot when nested in an $el', async () => {
    const colors = ref(['red', 'green', 'blue'])
    const items = ref(['a', 'b', 'c'])
    const wrapper = mount(FormKitSchema, {
      props: {
        data: {
          colors,
          items,
        },
        schema: [
          {
            $el: 'div',
            for: ['color', '$colors'],
            children: [
              {
                $el: 'span',
                for: ['item', 'index', '$items'],
                children: [
                  {
                    $cmp: 'FormKit',
                    props: {
                      type: 'group',
                    },
                    children: '$color + ": " + $index + " : " + $item + "|"',
                  },
                ],
              },
            ],
          },
        ],
      },
      global: {
        plugins: [[plugin, defaultConfig]],
      },
    })
    expect(wrapper.text()).toBe(
      'red: 0 : a|red: 1 : b|red: 2 : c|green: 0 : a|green: 1 : b|green: 2 : c|blue: 0 : a|blue: 1 : b|blue: 2 : c|'
    )
    colors.value.shift()
    await nextTick()
    expect(wrapper.text()).toBe(
      'green: 0 : a|green: 1 : b|green: 2 : c|blue: 0 : a|blue: 1 : b|blue: 2 : c|'
    )
    items.value.push('d')
    await nextTick()
    expect(wrapper.text()).toBe(
      'green: 0 : a|green: 1 : b|green: 2 : c|green: 3 : d|blue: 0 : a|blue: 1 : b|blue: 2 : c|blue: 3 : d|'
    )
  })

  it('can render iteration data inside the slot of a conditional component', async () => {
    const colors = ref(['red', 'green', 'blue'])
    const wrapper = mount(FormKitSchema, {
      props: {
        data: {
          colors,
        },
        schema: [
          {
            $el: 'div',
            for: ['color', '$colors'],
            children: {
              if: '$color === "red"',
              then: 'RED!',
              else: {
                $cmp: 'FormKit',
                props: {
                  type: 'group',
                },
                children: '$color + "|"',
              },
            },
          },
        ],
      },
      global: {
        plugins: [[plugin, defaultConfig]],
      },
    })
    expect(wrapper.text()).toBe('RED!green|blue|')
  })

  it('can render iteration data in an element that is in the slot of a conditional component', async () => {
    const letters = ref(['a', 'b', 'c'])
    const wrapper = mount(FormKitSchema, {
      props: {
        data: {
          letters,
        },
        schema: [
          {
            $el: 'div',
            for: ['letter', 'index', '$letters'],
            attrs: {
              class: 'repeated',
            },
            children: [
              {
                if: '$letter !== "b"',
                then: {
                  $el: 'h2',
                  children: 'Not B',
                },
                else: {
                  $cmp: 'FormKit',
                  props: {
                    type: 'group',
                  },
                  children: [
                    {
                      $el: 'h1',
                      children: '$letter',
                    },
                  ],
                },
              },
            ],
          },
        ],
      },
      global: {
        plugins: [[plugin, defaultConfig]],
      },
    })
    expect(wrapper.text()).toBe('Not BbNot B')
  })

  it('can render functional data reactively', async () => {
    const data = reactive({
      price: 10,
      quantity: 2,
      cost: (p: number, q: number) => p * q,
    })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'button',
            children: ['Total $', '$cost($price, $quantity + 2) + 1'],
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<button>Total $41</button>')
    data.price = 11
    await nextTick()
    expect(wrapper.html()).toBe('<button>Total $45</button>')
  })

  it('can bind arbitrary objects as attrs', async () => {
    const data = reactive({
      details: {
        type: 'number',
        name: 'foobar',
        min: '20',
        step: '1',
      },
    })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'input',
            bind: '$details',
          },
        ],
      },
    })
    expect(wrapper.html()).toBe(
      '<input type="number" name="foobar" min="20" step="1">'
    )
    data.details.name = 'barfoo'
    await nextTick()
    expect(wrapper.html()).toBe(
      '<input type="number" name="barfoo" min="20" step="1">'
    )
  })

  it('can bind arbitrary objects as attrs but attrs override them', async () => {
    const data = reactive({
      details: {
        type: 'number',
        name: 'foobar',
        min: '20',
        step: '1',
      },
    })
    const wrapper = mount(FormKitSchema, {
      props: {
        data,
        schema: [
          {
            $el: 'input',
            bind: '$details',
            attrs: {
              type: 'text',
            },
          },
        ],
      },
    })
    expect(wrapper.html()).toBe(
      '<input name="foobar" min="20" step="1" type="text">'
    )
    data.details.type = 'jimbo'
    await nextTick()
    expect(wrapper.html()).toBe(
      '<input name="foobar" min="20" step="1" type="text">'
    )
  })

  it('can "unwrap" a schema node by having a null value.', () => {
    const wrapper = mount(FormKitSchema, {
      props: {
        schema: [
          {
            $el: null,
            children: [
              {
                $el: 'label',
                children: [
                  {
                    $el: 'input',
                    attrs: {
                      type: 'checkbox',
                    },
                  },
                ],
              },
            ],
          },
        ],
      },
    })
    expect(wrapper.html()).toBe('<label><input type="checkbox"></label>')
  })
})