Update form-spinbutton.spec.js

tmorehouse · web-flow · commit 1aad91392f60 · 2020-02-16T21:12:39.000-04:00
diff --git a/src/components/form-spinbutton/form-spinbutton.spec.js b/src/components/form-spinbutton/form-spinbutton.spec.js
@@ -18,7 +18,7 @@ describe('form-spinbutton', () => {
     // We always have LTR to ensire the flex order stays ltr
     expect(wrapper.attributes('dir')).toEqual('ltr')
 
-    // Should ahve 3 child elements (btn, output, btn)
+    // Should have 3 child elements (btn, output, btn)
     expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
 
     const $decrement = wrapper.find('[aria-label="Decrement"]')
@@ -51,6 +51,55 @@ describe('form-spinbutton', () => {
     wrapper.destroy()
   })
 
+  it('has expected structure when value set', async () => {
+    const wrapper = mount(BFormSpinbutton, {
+      propsData: {
+        min: 0,
+        max: 10,
+        value: 5
+      }
+    })
+    expect(wrapper.isVueInstance()).toBe(true)
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(wrapper.classes()).toContain('b-form-spinbutton')
+    expect(wrapper.classes()).toContain('form-control')
+    expect(wrapper.classes()).toContain('d-flex')
+    expect(wrapper.classes()).toContain('align-items-stretch')
+    expect(wrapper.attributes('role')).toEqual('group')
+    expect(wrapper.attributes('tabindex')).toEqual('-1')
+    // We always have LTR to ensire the flex order stays ltr
+    expect(wrapper.attributes('dir')).toEqual('ltr')
+
+    // Should have 3 child elements (btn, output, btn)
+    expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
+
+    const $decrement = wrapper.find('[aria-label="Decrement"]')
+    expect($decrement.exists()).toBe(true)
+    expect($decrement.is('button')).toBe(true)
+    expect($decrement.attributes('tabindex')).toEqual('-1')
+    expect($decrement.attributes('aria-keyshortcuts')).toEqual('ArrowDown')
+
+    const $increment = wrapper.find('[aria-label="Increment"]')
+    expect($increment.exists()).toBe(true)
+    expect($increment.is('button')).toBe(true)
+    expect($increment.attributes('tabindex')).toEqual('-1')
+    expect($decrement.attributes('aria-keyshortcuts')).toEqual('ArrowUp')
+
+    const $output = wrapper.find('output')
+    expect($output.exists()).toBe(true)
+    expect($output.attributes('role')).toEqual('spinbutton')
+    expect($output.attributes('tabindex')).toEqual('0')
+    expect($output.attributes('aria-live')).toEqual('off')
+    expect($output.attributes('aria-valuemin')).toEqual('0')
+    expect($output.attributes('aria-valuemax')).toEqual('10')
+    expect($output.attributes('aria-valuenow')).toEqual('5')
+    expect($output.attributes('aria-valuetext')).toEqual('5')
+
+    wrapper.destroy()
+  })
+
   it('renders hidden input when name set', async () => {
     const wrapper = mount(BFormSpinbutton, {
       propsData: {
