Update form-spinbutton.spec.js

tmorehouse · web-flow · commit bd734274d8eb · 2020-02-16T21:01:28.000-04:00
diff --git a/src/components/form-spinbutton/form-spinbutton.spec.js b/src/components/form-spinbutton/form-spinbutton.spec.js
@@ -9,10 +9,41 @@ describe('form-spinbutton', () => {
     await waitNT(wrapper.vm)
     await waitRAF()
 
-    expect(wrapper.classes()).toContain('form-control')
     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 ahve 3 child elements (btn, output, btn)
+    expect(wrapper.findAll('.b-form-spin-button > *').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')
 
-    // TBD
+    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('1')
+    expect($output.attributes('aria-valuemax')).toEqual('100')
+    // These two attribute should exist on the element
+    expect($output.element.hasAttribute('aria-valuenow')).toBe(false)
+    expect($output.element.hasAttribute('aria-valuetext')).toBe(false)
+    expect($output.find('div').exists()).toBe(true)
 
     await waitNT(wrapper.vm)
     await waitRAF()
