test: Unskip and fix old tests for Spinner and SelectorCounter

telus · Dec 28, 2017 · b586b20 · b586b20
1 parent 59e37bd
commit b586b20
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 50 deletions.
diff --git a/src/old-components/SelectorCounter/__tests__/SelectorCounter.spec.jsx b/src/old-components/SelectorCounter/__tests__/SelectorCounter.spec.jsx
@@ -5,8 +5,11 @@ import CounterButton from '../CounterButton'
 
 describe('<SelectorCounter />', () => {
   it('starts with a given default value', () => {
-    expect(shallow(<SelectorCounter defaultValue={5} />)
-      .find('input.selector-counter__value').props().value).toEqual(5)
+    expect(
+      shallow(<SelectorCounter defaultValue={5} />)
+        .find('input.selector-counter__value')
+        .props().value
+    ).toEqual(5)
   })
 
   describe('onChange handler', () => {
@@ -15,22 +18,23 @@ describe('<SelectorCounter />', () => {
 
     beforeEach(() => {
       onChangeSpy = jest.fn()
-      wrapper = mount(
-        <SelectorCounter
-          defaultValue={1}
-          onChange={onChangeSpy}
-        />
-      )
+      wrapper = mount(<SelectorCounter defaultValue={1} onChange={onChangeSpy} />)
     })
 
     it('is called with the incremented value', () => {
-      wrapper.find(CounterButton).first().simulate('click')
+      wrapper
+        .find(CounterButton)
+        .first()
+        .simulate('click')
       expect(onChangeSpy.mock.calls.length).toEqual(1)
       expect(onChangeSpy.mock.calls[0][0]).toEqual(2)
     })
 
     it('is called with the decremented value', () => {
-      wrapper.find(CounterButton).last().simulate('click')
+      wrapper
+        .find(CounterButton)
+        .last()
+        .simulate('click')
       expect(onChangeSpy.mock.calls.length).toEqual(1)
       expect(onChangeSpy.mock.calls[0][0]).toEqual(0)
     })
@@ -42,64 +46,74 @@ describe('<SelectorCounter />', () => {
 
     it('is not called when the min value has been reached', () => {
       wrapper = mount(<SelectorCounter onChange={onChangeSpy} />)
-      wrapper.find(CounterButton).last().simulate('click')
+      wrapper
+        .find(CounterButton)
+        .last()
+        .simulate('click')
       expect(onChangeSpy.mock.calls.length).toEqual(0)
     })
 
     it('is not called when the max value has been reached', () => {
       wrapper = mount(<SelectorCounter onChange={onChangeSpy} defaultValue={10} max={10} />)
-      wrapper.find(CounterButton).first().simulate('click')
+      wrapper
+        .find(CounterButton)
+        .first()
+        .simulate('click')
       expect(onChangeSpy.mock.calls.length).toEqual(0)
     })
   })
 
-  it.skip('focuses on demand', () => {
+  it('focuses on demand', () => {
     const wrapper = mount(<SelectorCounter />)
 
     wrapper.instance().focus()
-    expect(wrapper.find('input[type="number"]').node).toBe(document.activeElement)
+    expect(wrapper.find('input[type="number"]').getElement().props.id).toEqual(
+      document.activeElement.getAttribute('id')
+    )
   })
 
   describe('accessibility', () => {
     describe('context', () => {
       it('renders a helpful prefix', () => {
         const wrapper = shallow(
-          <SelectorCounter
-            contextPrefix="prefixed context"
-            defaultValue={0}
-          />
+          <SelectorCounter contextPrefix="prefixed context" defaultValue={0} />
         )
         const expectedText = 'prefixed context 0 '
 
-        expect(wrapper.find('.accessible-hide').first().text())
-          .toEqual(expectedText)
+        expect(
+          wrapper
+            .find('.accessible-hide')
+            .first()
+            .text()
+        ).toEqual(expectedText)
       })
 
       it('renders a helpful suffix', () => {
         const wrapper = shallow(
-          <SelectorCounter
-            contextSuffix="suffixed context"
-            defaultValue={0}
-          />
+          <SelectorCounter contextSuffix="suffixed context" defaultValue={0} />
         )
         const expectedText = ' 0 suffixed context'
 
-        expect(wrapper.find('.accessible-hide').first().text())
-          .toEqual(expectedText)
+        expect(
+          wrapper
+            .find('.accessible-hide')
+            .first()
+            .text()
+        ).toEqual(expectedText)
       })
 
       it('renders a helpful prefix and suffix', () => {
         const wrapper = shallow(
-          <SelectorCounter
-            contextPrefix="prefix"
-            contextSuffix="suffix"
-            defaultValue={0}
-          />
+          <SelectorCounter contextPrefix="prefix" contextSuffix="suffix" defaultValue={0} />
         )
         const expectedText = 'prefix 0 suffix'
 
-        expect(wrapper.find('.accessible-hide').first().text())
-          .toEqual(expectedText)
+        expect(
+          wrapper
+            .find('.accessible-hide')
+            .first()
+            .text()
+        ).toEqual(expectedText)
       })
 
       it('renders the status div', () => {
@@ -116,10 +130,12 @@ describe('<SelectorCounter />', () => {
     it('uses the given id', () =>
       expect(shallow(<SelectorCounter id="foo" />).find('#foo').length).toEqual(1))
 
-    it.skip('generates a default id', () => {
-      const input = shallow(<SelectorCounter />).find('input').first()
+    it('generates a default id', () => {
+      const input = shallow(<SelectorCounter />)
+        .find('input')
+        .first()
 
-      expect(input.node.props.id.length).toBeGreaterThan(0)
+      expect(input).toHaveProp('id')
     })
   })
 })
diff --git a/src/old-components/Spinner/__tests__/Spinner.spec.jsx b/src/old-components/Spinner/__tests__/Spinner.spec.jsx
@@ -2,36 +2,68 @@ import React from 'react'
 import { shallow, mount } from 'enzyme'
 import Spinner from '../Spinner'
 
-
 describe('<Spinner />', () => {
   describe('in container mode', () => {
     it('spinner is visible when spinning is true', () => {
-      const wrapper = shallow(
-        <Spinner tip="Loading..." spinning />
-      )
-      expect(wrapper.find('.spinner').first().hasClass('spinner--spinning')).toBeTruthy()
-      expect(wrapper.find('.spinner__tip').first().text()).toBe('Loading...')
+      const wrapper = shallow(<Spinner tip="Loading..." spinning />)
+      expect(
+        wrapper
+          .find('.spinner')
+          .first()
+          .hasClass('spinner--spinning')
+      ).toBeTruthy()
+      expect(
+        wrapper
+          .find('.spinner__tip')
+          .first()
+          .text()
+      ).toBe('Loading...')
       wrapper.setProps({
-        spinning: false
+        spinning: false,
       })
-      expect(wrapper.find('.spinner').first().hasClass('spinner--spinning')).toBeFalsy()
+      expect(
+        wrapper
+          .find('.spinner')
+          .first()
+          .hasClass('spinner--spinning')
+      ).toBeFalsy()
     })
   })
 
   describe('embedded mode', () => {
-    it.skip('spinner is visible when spinning is true', () => {
+    it('spinner is visible when spinning is true', () => {
       const wrapper = mount(
         <Spinner tip="Loading..." spinning wrapperClassName="test">
           <p>TEST</p>
         </Spinner>
       )
-      expect(wrapper.find('.spinner').first().hasClass('spinner--spinning')).toBeTruthy()
-      expect(wrapper.find('.spinner__tip').first().text()).toBe('Loading...')
-      expect(wrapper.find('.spinner-container').first().hasClass('spinner-container--loading')).toBeTruthy()
+      expect(
+        wrapper
+          .find('.spinner')
+          .first()
+          .hasClass('spinner--spinning')
+      ).toBeTruthy()
+      expect(
+        wrapper
+          .find('.spinner__tip')
+          .first()
+          .text()
+      ).toBe('Loading...')
+      expect(
+        wrapper
+          .find('.spinner-container')
+          .first()
+          .hasClass('spinner-container--loading')
+      ).toBeTruthy()
       wrapper.setProps({
-        spinning: false
+        spinning: false,
       })
-      expect(wrapper.find('.spinner-container > p').first().text()).toBe('TEST')
+      expect(
+        wrapper
+          .find('.spinner-container > p')
+          .first()
+          .text()
+      ).toBe('TEST')
     })
   })
 })