From 364ee5443ff05b6c7ade64e87a03acf867f204a7 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 7 Jun 2020 23:23:43 +0300
Subject: [PATCH 01/57] export everything from vtl

---
 babel.config.js                |  2 +-
 tests/test-utils/test-utils.js | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index 28460893..c61b6267 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -6,7 +6,7 @@ module.exports = {
   ],
   env: {
     test: {
-      plugins: ['transform-es2015-modules-commonjs']
+      // plugins: ['transform-es2015-modules-commonjs']
     }
   }
 }
diff --git a/tests/test-utils/test-utils.js b/tests/test-utils/test-utils.js
index 563f9b0d..701e9b52 100644
--- a/tests/test-utils/test-utils.js
+++ b/tests/test-utils/test-utils.js
@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom/extend-expect'
-import { render } from '@testing-library/vue'
+import * as vtl from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 
 import icons from '@/packages/chakra-ui-core/src/lib/internal-icons'
 import theme from '@/packages/chakra-ui-core/src/lib/theme'
-
 const defaultProviders = options => ({
   $chakraTheme: () => theme,
   $chakraColorMode: () => 'light',
@@ -11,11 +11,11 @@ const defaultProviders = options => ({
   ...options
 })
 
-const customRender = (component, ...rest) => {
+const render = (component, ...rest) => {
   const defaults = {
     provide: () => defaultProviders()
   }
-  const utils = render({ ...defaults, ...component }, ...rest)
+  const utils = vtl.render({ ...defaults, ...component }, ...rest)
   return {
     ...utils,
     asFragment: (innerHTML = utils.container.innerHTML) => {
@@ -32,13 +32,14 @@ const customRender = (component, ...rest) => {
   }
 }
 
-export function waitMs (ms = 0) {
+function waitMs (ms = 0) {
   return new Promise(resolve => setTimeout(resolve, ms))
 }
 
-export { default as userEvent } from '@testing-library/user-event'
-export { fireEvent } from '@testing-library/vue'
+export * from '@testing-library/vue'
 export {
-  customRender as render,
+  render,
+  userEvent,
+  waitMs,
   defaultProviders
 }

From b1dbd305dd0b8f7481f16f68892073234510d353 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 7 Jun 2020 23:24:40 +0300
Subject: [PATCH 02/57] test(aspect-ratio): add tests for padding bottom

---
 .../tests/CAspectRatioBox.test.js             | 52 +++++++++++++++----
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
index 20da297d..90293fdc 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
@@ -1,6 +1,5 @@
 import { CAspectRatioBox, CBox } from '../..'
-import { render } from '@/tests/test-utils'
-
+import { render, screen } from '@/tests/test-utils'
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
   const base = {
@@ -15,17 +14,53 @@ const renderComponent = (props) => {
   return render(base)
 }
 
+/**
+ * Not sure if we need jest-emotion
+ *
+ * Get styles from document.styleSheets
+ * @param {String} selector
+ */
+function getElementStyles (selector) {
+  selector = new RegExp(selector)
+  let styles = []
+  let i; let j; let sel = selector
+  for (i = 0; i < document.styleSheets.length; ++i) {
+    for (j = 0; j < document.styleSheets[i].cssRules.length; ++j) {
+      if (sel.test(document.styleSheets[i].cssRules[j].selectorText)) {
+        // let selectorText = document.styleSheets[i].cssRules[j].selectorText
+        let cssText = document.styleSheets[i].cssRules[j].style.cssText
+        styles += cssText
+      }
+    }
+  }
+  return styles
+}
+
 it('should render correctly', () => {
   const inlineAttrs = ':ratio="1"'
   const { asFragment } = renderComponent({ inlineAttrs })
   expect(asFragment()).toMatchSnapshot()
+
+  const [, emotionClassName] = [...screen.getByTestId('aspectRatioBox').classList]
+  const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
+
+  expect(pseudoStyles).toContain(`
+    padding-bottom: 100%
+  `.trim())
 })
 
-it('should have correct styles', () => {
-  const inlineAttrs = ':ratio="2"'
-  const { getByTestId } = renderComponent({ inlineAttrs })
-  const image = getByTestId('image')
-  const aspectRatioBox = getByTestId('aspectRatioBox')
+it('should have correct styles', async () => {
+  const inlineAttrs = `:ratio="2"`
+  renderComponent({ inlineAttrs })
+  const image = screen.getByTestId('image')
+  const aspectRatioBox = screen.getByTestId('aspectRatioBox')
+
+  const [, emotionClassName] = [...aspectRatioBox.classList]
+  const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
+
+  expect(pseudoStyles).toContain(`
+    padding-bottom: 50%
+  `.trim())
 
   expect(aspectRatioBox).toHaveStyle(`
     max-width: 400px;
@@ -40,7 +75,4 @@ it('should have correct styles', () => {
     top: 0px;
     left: 0px;
   `)
-
-  // TODO: we can't test pseudo elements.. so better test styles?
-  // aspectRatioBox padding-bottom
 })

From 77eefca780a32729eb1d09d6e87ec5900b3f4183 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sat, 13 Jun 2020 16:20:37 +0300
Subject: [PATCH 03/57] chore: fix lint errs

---
 .../src/CAspectRatioBox/tests/CAspectRatioBox.test.js     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
index 90293fdc..e3935e26 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
@@ -23,12 +23,12 @@ const renderComponent = (props) => {
 function getElementStyles (selector) {
   selector = new RegExp(selector)
   let styles = []
-  let i; let j; let sel = selector
+  let i; let j; const sel = selector
   for (i = 0; i < document.styleSheets.length; ++i) {
     for (j = 0; j < document.styleSheets[i].cssRules.length; ++j) {
       if (sel.test(document.styleSheets[i].cssRules[j].selectorText)) {
         // let selectorText = document.styleSheets[i].cssRules[j].selectorText
-        let cssText = document.styleSheets[i].cssRules[j].style.cssText
+        const cssText = document.styleSheets[i].cssRules[j].style.cssText
         styles += cssText
       }
     }
@@ -49,8 +49,8 @@ it('should render correctly', () => {
   `.trim())
 })
 
-it('should have correct styles', async () => {
-  const inlineAttrs = `:ratio="2"`
+it('should have correct styles', () => {
+  const inlineAttrs = ':ratio="2"'
   renderComponent({ inlineAttrs })
   const image = screen.getByTestId('image')
   const aspectRatioBox = screen.getByTestId('aspectRatioBox')

From 8c438d0b319b3729492beaa564a8405b2891a7d0 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Wed, 1 Jul 2020 15:47:44 +0300
Subject: [PATCH 04/57] test(aspect-ratio): refactor and fix AspectRatio tests

---
 .../src/CAccordion/tests/CAccordion.test.js   | 126 ++++++++----------
 1 file changed, 57 insertions(+), 69 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js b/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
index f6031289..d6fe79a5 100644
--- a/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
+++ b/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
@@ -1,5 +1,5 @@
 import { CAccordion, CAccordionItem, CAccordionHeader, CAccordionPanel, CAccordionIcon } from '..'
-import { render, userEvent, fireEvent } from '@/tests/test-utils'
+import { render, userEvent, fireEvent, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -10,9 +10,8 @@ const renderComponent = (props) => {
 }
 
 it('should render correctly', () => {
-  const { asFragment } = renderComponent(
-    {
-      template: `
+  const { asFragment } = renderComponent({
+    template: `
     <CAccordion>
       <CAccordionItem id="ac-1">
         <CAccordionHeader>Section 1 title<CAccordionIcon /></CAccordionHeader>
@@ -20,13 +19,12 @@ it('should render correctly', () => {
       </CAccordionItem>
     </CAccordion>
     `
-    }
-  )
+  })
   expect(asFragment()).toMatchSnapshot()
 })
 
 it('uncontrolled: It opens the accordion panel', () => {
-  const { getByTestId } = renderComponent({
+  renderComponent({
     template: `
     <CAccordion>
       <CAccordionItem>
@@ -35,14 +33,13 @@ it('uncontrolled: It opens the accordion panel', () => {
       </CAccordionItem>
     </CAccordion>
     `
-  }
-  )
-  const button = getByTestId('button')
+  })
+  const button = screen.getByTestId('button')
   expect(button).toHaveAttribute('aria-expanded', 'true')
 })
 
-it('uncontrolled: toggles the accordion on click', () => {
-  const { getByText } = renderComponent({
+it('uncontrolled: toggles the accordion on click', async () => {
+  renderComponent({
     template: `
     <CAccordion>
       <CAccordionItem>
@@ -52,19 +49,17 @@ it('uncontrolled: toggles the accordion on click', () => {
     </CAccordion>`
   })
 
-  const trigger = getByText('Trigger')
-
-  userEvent.click(trigger)
-  expect(trigger).toHaveAttribute('aria-expanded', 'true')
+  await userEvent.click(screen.getByText('Trigger'))
+  expect(screen.getByText('Trigger')).toHaveAttribute('aria-expanded', 'true')
 
   // you can't toggle an accordion without passing `allowToggle`
-  userEvent.click(trigger)
-  expect(trigger).toHaveAttribute('aria-expanded', 'true')
+  await userEvent.click(screen.getByText('Trigger'))
+  expect(screen.getByText('Trigger')).toHaveAttribute('aria-expanded', 'true')
 })
 
 // test the only one accordion can be visible + is not togglable
-it('only one accordion can be visible + is not togglable', () => {
-  const { getByText } = renderComponent({
+it('only one accordion can be visible + is not togglable', async () => {
+  renderComponent({
     template: `
     <CAccordion>
       <CAccordionItem>
@@ -78,21 +73,19 @@ it('only one accordion can be visible + is not togglable', () => {
     </CAccordion>`
   })
 
-  const firstAccordion = getByText('First section')
-
-  userEvent.click(firstAccordion)
-  expect(firstAccordion).toHaveAttribute('aria-expanded', 'true')
+  await userEvent.click(screen.getByText('First section'))
+  expect(screen.getByText('First section')).toHaveAttribute('aria-expanded', 'true')
 
-  userEvent.click(firstAccordion)
-  expect(firstAccordion).toHaveAttribute('aria-expanded', 'true')
+  await userEvent.click(screen.getByText('First section'))
+  expect(screen.getByText('First section')).toHaveAttribute('aria-expanded', 'true')
 })
 
 // test the only one accordion can be visible + is togglable
-it('only one accordion can be visible + is togglable', () => {
-  const { getByText } = renderComponent({
+it('only one accordion can be visible + is togglable', async () => {
+  renderComponent({
     template: `
     <CAccordion allowToggle>
-      <CAccordionItem>
+      <CAccordionItem data-testid="accordionItem1">
         <CAccordionHeader>First section</CAccordionHeader>
         <CAccordionPanel>Panel 1</CAccordionPanel>
       </CAccordionItem>
@@ -102,21 +95,19 @@ it('only one accordion can be visible + is togglable', () => {
       </CAccordionItem>
     </CAccordion>`
   })
-  const firstAccordion = getByText('First section')
 
-  // TODO: Why its not working?
-  // fireEvent.click(firstAccordion)
-  // expect(firstAccordion).toHaveAttribute('aria-expanded', 'false')
+  await userEvent.click(screen.getByText('First section'))
+  expect(screen.getByText('First section')).not.toHaveAttribute('aria-expanded') // false or null?
 
-  userEvent.click(firstAccordion)
-  expect(firstAccordion).toHaveAttribute('aria-expanded', 'true')
+  await userEvent.click(screen.getByText('First section'))
+  expect(screen.getByText('First section')).toHaveAttribute('aria-expanded', 'true')
 })
 
 // test that multiple accordions can be opened + is togglable
-it('multiple accordions can be opened + is togglable', () => {
-  const { getByText } = renderComponent({
+it('multiple accordions can be opened + is togglable', async () => {
+  renderComponent({
     template: `
-    <CAccordion allowMultiple :defaultIndex="[0]">
+    <CAccordion allowMultiple :defaultIndex="[0, 1]">
       <CAccordionItem>
         <CAccordionHeader>First section</CAccordionHeader>
         <CAccordionPanel>Panel 1</CAccordionPanel>
@@ -128,19 +119,16 @@ it('multiple accordions can be opened + is togglable', () => {
     </CAccordion>`
   })
 
-  const firstAccordion = getByText('First section')
-  const secondAccordion = getByText('Second section')
-
-  userEvent.click(firstAccordion)
-  expect(firstAccordion).toHaveAttribute('aria-expanded', 'true')
+  expect(screen.getByText('First section')).toHaveAttribute('aria-expanded', 'true')
+  expect(screen.getByText('Second section')).toHaveAttribute('aria-expanded', 'true')
 
-  userEvent.click(secondAccordion)
-  expect(firstAccordion).toHaveAttribute('aria-expanded', 'true')
+  await userEvent.click(screen.getByText('First section'))
+  expect(screen.getByText('First section')).not.toHaveAttribute('aria-expanded')
 })
 
 // it has the proper aria attributes
 it('has the proper aria attributes', () => {
-  const { getByText, getByTestId } = renderComponent({
+  renderComponent({
     template: `
     <CAccordion>
       <CAccordionItem>
@@ -149,16 +137,16 @@ it('has the proper aria attributes', () => {
       </CAccordionItem>
     </CAccordion>`
   })
-  const button = getByText('Section 1 title')
-  const panel = getByTestId('panel1')
+  const button = screen.getByText('Section 1 title')
+  const panel = screen.getByTestId('panel1')
   expect(button).toHaveAttribute('aria-controls')
   expect(button).toHaveAttribute('aria-expanded')
   expect(panel).toHaveAttribute('aria-labelledby')
 })
 
 // test that tab moves focus to the next focusable element
-it('tab moves focus to the next focusable element', () => {
-  const { getByText } = renderComponent({
+it('tab moves focus to the next focusable element', async () => {
+  renderComponent({
     template: `
     <CAccordion>
       <CAccordionItem>
@@ -176,23 +164,23 @@ it('tab moves focus to the next focusable element', () => {
     </CAccordion>`
   })
 
-  const first = getByText('First section')
-  const second = getByText('Second section')
-  const last = getByText('Last section')
+  const first = screen.getByText('First section')
+  const second = screen.getByText('Second section')
+  const last = screen.getByText('Last section')
 
-  userEvent.tab()
+  await userEvent.tab()
   expect(first).toHaveFocus()
 
-  userEvent.tab()
+  await userEvent.tab()
   expect(second).toHaveFocus()
 
-  userEvent.tab()
+  await userEvent.tab()
   expect(last).toHaveFocus()
 })
 
 // test that aria-contols for button is same as id for panel
 it('aria-contols for button is same as id for panel', () => {
-  const { getByText, getByTestId } = renderComponent({
+  renderComponent({
     template: `
     <CAccordion>
       <CAccordionItem>
@@ -202,14 +190,14 @@ it('aria-contols for button is same as id for panel', () => {
     </CAccordion>`
   })
 
-  const button = getByText('Section 1 title')
-  const panel = getByTestId('panel1')
+  const button = screen.getByText('Section 1 title')
+  const panel = screen.getByTestId('panel1')
   expect(button.getAttribute('aria-controls')).toEqual(panel.getAttribute('id'))
 })
 
 // test that aria-expanded is true/false when accordion is open/closed
 it('aria-expanded is true/false when accordion is open/closed', () => {
-  const { getByText } = renderComponent({
+  renderComponent({
     template: `
     <CAccordion :defaultIndex="[0]">
       <CAccordionItem>
@@ -223,13 +211,13 @@ it('aria-expanded is true/false when accordion is open/closed', () => {
     </CAccordion>`
   })
 
-  const button = getByText('Section 1 title')
+  const button = screen.getByText('Section 1 title')
   expect(button).toHaveAttribute('aria-expanded', 'true')
 })
 
 // test that panel has role=region and aria-labelledby
 it('panel has role=region and aria-labelledby', () => {
-  const { getByTestId } = renderComponent({
+  renderComponent({
     template: `
     <CAccordion>
       <CAccordionItem>
@@ -238,15 +226,15 @@ it('panel has role=region and aria-labelledby', () => {
       </CAccordionItem>
     </CAccordion>`
   })
-  const panel = getByTestId('panel1')
+  const panel = screen.getByTestId('panel1')
 
   expect(panel).toHaveAttribute('aria-labelledby')
   expect(panel).toHaveAttribute('role', 'region')
 })
 
 // eslint-disable-next-line no-undef
-xit('arrow up & down moves focus to next/previous accordion', () => {
-  const { getByText } = renderComponent({
+xit('arrow up & down moves focus to next/previous accordion', async () => {
+  renderComponent({
     template: `
     <CAccordion>
       <CAccordionItem>
@@ -260,12 +248,12 @@ xit('arrow up & down moves focus to next/previous accordion', () => {
     </CAccordion>`
   })
 
-  const first = getByText('Section 1 title')
-  const second = getByText('Section 2 title')
+  const first = screen.getByText('Section 1 title')
+  const second = screen.getByText('Section 2 title')
 
-  fireEvent.keyDown(first, { key: 'ArrowDown', keyCode: 40 })
+  await fireEvent.keyDown(first, { key: 'ArrowDown', keyCode: 40 })
   expect(second).toHaveFocus()
 
-  fireEvent.keyDown(second, { key: 'ArrowUp', keyCode: 38 })
+  await fireEvent.keyDown(second, { key: 'ArrowUp', keyCode: 38 })
   expect(first).toHaveFocus()
 })

From eb768bf687040ba1b2f2dd7162b68fa701978fd9 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Wed, 1 Jul 2020 15:54:25 +0300
Subject: [PATCH 05/57] test(alert): add tests for alert icons and refactor

---
 .../src/CAlert/tests/CAlert.test.js           |  53 +++---
 .../tests/__snapshots__/CAlert.test.js.snap   | 178 ++----------------
 2 files changed, 46 insertions(+), 185 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAlert/tests/CAlert.test.js b/packages/chakra-ui-core/src/CAlert/tests/CAlert.test.js
index 57306430..bfbeea3c 100644
--- a/packages/chakra-ui-core/src/CAlert/tests/CAlert.test.js
+++ b/packages/chakra-ui-core/src/CAlert/tests/CAlert.test.js
@@ -1,14 +1,12 @@
 import { CAlert, CAlertIcon, CAlertTitle, CAlertDescription, CStack } from '../..'
-import icons from '../../lib/internal-icons'
-import { render, defaultProviders } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
     components: { CAlert, CAlertTitle, CAlertDescription, CAlertIcon, CStack },
-    provide: () => defaultProviders({ $chakraIcons: { add: icons.add } }),
     template: `
     <CAlert>
-      <CAlertIcon />
+      <CAlertIcon name="add" />
       <CAlertTitle>alert title</CAlertTitle>
       <CAlertDescription>alert description</CAlertDescription>
     </CAlert>`,
@@ -16,23 +14,12 @@ const renderComponent = (props) => {
   }
   return render(base)
 }
+
 it('should render correctly', () => {
   const { asFragment } = renderComponent()
   expect(asFragment()).toMatchSnapshot()
 })
 
-it('should display title', () => {
-  const { getByText } = renderComponent()
-
-  expect(getByText('alert title')).toBeInTheDocument()
-})
-
-it('should display description', () => {
-  const { getByText } = renderComponent()
-
-  expect(getByText('alert description')).toBeInTheDocument()
-})
-
 it('should override icon if set explicitly', () => {
   const { asFragment } = renderComponent({
     template: `
@@ -44,17 +31,6 @@ it('should override icon if set explicitly', () => {
   expect(asFragment()).toMatchSnapshot()
 })
 
-it('should have role=alert', () => {
-  const { getByRole } = renderComponent({
-    template: `
-    <CAlert status="error">
-      <CAlertIcon name="add" />
-    </CAlert>`
-  })
-
-  getByRole('alert')
-})
-
 it('should render correct variant styles', () => {
   const { asFragment } = renderComponent({
     template: `
@@ -81,3 +57,26 @@ it('should render correct variant styles', () => {
 
   expect(asFragment()).toMatchSnapshot()
 })
+
+it('should display title', () => {
+  renderComponent()
+
+  expect(screen.getByText('alert title')).toBeInTheDocument()
+})
+
+it('should display description', () => {
+  renderComponent()
+
+  expect(screen.getByText('alert description')).toBeInTheDocument()
+})
+
+it('should have role=alert', () => {
+  renderComponent({
+    template: `
+    <CAlert status="error">
+      <CAlertIcon name="add" />
+    </CAlert>`
+  })
+
+  screen.getByRole('alert')
+})
diff --git a/packages/chakra-ui-core/src/CAlert/tests/__snapshots__/CAlert.test.js.snap b/packages/chakra-ui-core/src/CAlert/tests/__snapshots__/CAlert.test.js.snap
index c631a8ae..1f3960a7 100644
--- a/packages/chakra-ui-core/src/CAlert/tests/__snapshots__/CAlert.test.js.snap
+++ b/packages/chakra-ui-core/src/CAlert/tests/__snapshots__/CAlert.test.js.snap
@@ -44,39 +44,11 @@ exports[`should render correct variant styles 1`] = `
         viewBox="0 0 24 24"
       >
         
-    
-        <g
-          stroke="currentColor"
-          strokewidth="1.5"
-        >
-          
-      
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokelinecap="full"
-          />
-          
       
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="none"
-            strokelinecap="full"
-          />
-          
-      
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokemiterlimit="10"
-          />
-          
-    
-        </g>
-        
-    
+        <path
+          d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+          fill="currentColor"
+        />
       </svg>
       
         Data uploaded to the server. Fire on!
@@ -94,39 +66,11 @@ exports[`should render correct variant styles 1`] = `
         viewBox="0 0 24 24"
       >
         
-    
-        <g
-          stroke="currentColor"
-          strokewidth="1.5"
-        >
-          
-      
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokelinecap="full"
-          />
-          
       
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="none"
-            strokelinecap="full"
-          />
-          
-      
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokemiterlimit="10"
-          />
-          
-    
-        </g>
-        
-    
+        <path
+          d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+          fill="currentColor"
+        />
       </svg>
       
         Data uploaded to the server. Fire on!
@@ -144,39 +88,11 @@ exports[`should render correct variant styles 1`] = `
         viewBox="0 0 24 24"
       >
         
-    
-        <g
-          stroke="currentColor"
-          strokewidth="1.5"
-        >
-          
-      
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokelinecap="full"
-          />
-          
-      
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="none"
-            strokelinecap="full"
-          />
-          
       
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokemiterlimit="10"
-          />
-          
-    
-        </g>
-        
-    
+        <path
+          d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+          fill="currentColor"
+        />
       </svg>
       
         Data uploaded to the server. Fire on!
@@ -194,39 +110,11 @@ exports[`should render correct variant styles 1`] = `
         viewBox="0 0 24 24"
       >
         
-    
-        <g
-          stroke="currentColor"
-          strokewidth="1.5"
-        >
-          
       
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokelinecap="full"
-          />
-          
-      
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="none"
-            strokelinecap="full"
-          />
-          
-      
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokemiterlimit="10"
-          />
-          
-    
-        </g>
-        
-    
+        <path
+          d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+          fill="currentColor"
+        />
       </svg>
       
         Data uploaded to the server. Fire on!
@@ -251,36 +139,10 @@ exports[`should render correctly 1`] = `
     >
       
     
-      <g
-        stroke="currentColor"
-        strokewidth="1.5"
-      >
-        
-      
-        <path
-          d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-          fill="none"
-          strokelinecap="full"
-        />
-        
-      
-        <path
-          d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-          fill="none"
-          strokelinecap="full"
-        />
-        
-      
-        <circle
-          cx="12"
-          cy="12"
-          fill="none"
-          r="11.25"
-          strokemiterlimit="10"
-        />
-        
-    
-      </g>
+      <path
+        d="M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z"
+        fill="currentColor"
+      />
       
     
     </svg>

From ea6011fc4ab57c0662b3e47e3c69267d9d2ceef4 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Wed, 1 Jul 2020 16:09:54 +0300
Subject: [PATCH 06/57] test(alert-dialog): refactor alert dialog tests

---
 .../CAlertDialog/tests/CAlertDialog.test.js   | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAlertDialog/tests/CAlertDialog.test.js b/packages/chakra-ui-core/src/CAlertDialog/tests/CAlertDialog.test.js
index 26fed9ee..43ee113f 100644
--- a/packages/chakra-ui-core/src/CAlertDialog/tests/CAlertDialog.test.js
+++ b/packages/chakra-ui-core/src/CAlertDialog/tests/CAlertDialog.test.js
@@ -1,6 +1,5 @@
-import Vue from 'vue'
 import { CButton, CAlertDialog, CAlertDialogContent, CAlertDialogBody, CAlertDialogFooter, CAlertDialogOverlay, CAlertDialogHeader } from '../..'
-import { render, userEvent, fireEvent, waitMs } from '@/tests/test-utils'
+import { render, userEvent, fireEvent, wait, screen } from '@/tests/test-utils'
 import { useId } from '@/packages/chakra-ui-core/src/utils'
 
 // mocks
@@ -49,18 +48,19 @@ it('should render correctly', async () => {
   const inlineAttrs = 'isOpen'
   const { asFragment } = renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
-
-  expect(asFragment(document.body.innerHTML)).toMatchSnapshot()
+  await wait(() => {
+    expect(asFragment(document.body.innerHTML)).toMatchSnapshot()
+  })
 })
 
 test('clicking the close button calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = 'isOpen :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, methods: { close: onClose } })
+  renderComponent({ inlineAttrs, methods: { close: onClose } })
 
-  await Vue.nextTick()
-  userEvent.click(getByTestId('close-btn'))
+  await wait(async () => {
+    await userEvent.click(screen.getByTestId('close-btn'))
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
@@ -68,12 +68,12 @@ test('clicking the close button calls the onClose callback', async () => {
 test('pressing "esc" calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = ':isOpen="isOpen" :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
-
-  await Vue.nextTick()
-  const inputInside = getByTestId('inputInsideDrawer')
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
 
-  fireEvent.keyDown(inputInside, { key: 'Escape' })
+  await wait(async () => {
+    const inputInside = screen.getByTestId('inputInsideDrawer')
+    await fireEvent.keyDown(inputInside, { key: 'Escape' })
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
@@ -81,12 +81,12 @@ test('pressing "esc" calls the onClose callback', async () => {
 test('clicking overlay calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = ':isOpen="isOpen" :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
-
-  await Vue.nextTick()
-  const overlay = getByTestId('overlay')
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
 
-  userEvent.click(overlay)
+  await wait(async () => {
+    const overlay = screen.getByTestId('overlay')
+    await userEvent.click(overlay)
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
@@ -96,11 +96,11 @@ it('should have proper aria', async () => {
   const inlineAttrs = 'isOpen'
   renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
-  const dialog = document.querySelector('section')
-  await waitMs()
+  let dialog
+  await wait(() => {
+    dialog = screen.getByRole('alertdialog')
+  })
 
-  expect(dialog).toHaveAttribute('role', 'alertdialog')
   expect(dialog).toHaveAttribute('aria-modal', 'true')
   expect(dialog).toHaveAttribute('aria-labelledby', 'alert-dialog-1-label')
   expect(dialog).toHaveAttribute('aria-describedby', 'alert-dialog-1-desc')

From d1814b7d9c7763cdfd5f59eec3ef4ccf9a4e5119 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Wed, 1 Jul 2020 16:18:56 +0300
Subject: [PATCH 07/57] feat(test-utils): add getElementStyles to test utils

---
 .../tests/CAspectRatioBox.test.js             | 26 ++------------
 tests/test-utils/test-utils.js                | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
index e3935e26..01cc167e 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
@@ -1,5 +1,5 @@
 import { CAspectRatioBox, CBox } from '../..'
-import { render, screen } from '@/tests/test-utils'
+import { render, screen, getElementStyles } from '@/tests/test-utils'
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
   const base = {
@@ -14,28 +14,6 @@ const renderComponent = (props) => {
   return render(base)
 }
 
-/**
- * Not sure if we need jest-emotion
- *
- * Get styles from document.styleSheets
- * @param {String} selector
- */
-function getElementStyles (selector) {
-  selector = new RegExp(selector)
-  let styles = []
-  let i; let j; const sel = selector
-  for (i = 0; i < document.styleSheets.length; ++i) {
-    for (j = 0; j < document.styleSheets[i].cssRules.length; ++j) {
-      if (sel.test(document.styleSheets[i].cssRules[j].selectorText)) {
-        // let selectorText = document.styleSheets[i].cssRules[j].selectorText
-        const cssText = document.styleSheets[i].cssRules[j].style.cssText
-        styles += cssText
-      }
-    }
-  }
-  return styles
-}
-
 it('should render correctly', () => {
   const inlineAttrs = ':ratio="1"'
   const { asFragment } = renderComponent({ inlineAttrs })
@@ -55,7 +33,7 @@ it('should have correct styles', () => {
   const image = screen.getByTestId('image')
   const aspectRatioBox = screen.getByTestId('aspectRatioBox')
 
-  const [, emotionClassName] = [...aspectRatioBox.classList]
+  const [, emotionClassName] = [...aspectRatioBox.classList] // second className has the pseudo styles
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
   expect(pseudoStyles).toContain(`
diff --git a/tests/test-utils/test-utils.js b/tests/test-utils/test-utils.js
index 701e9b52..e12b043f 100644
--- a/tests/test-utils/test-utils.js
+++ b/tests/test-utils/test-utils.js
@@ -32,10 +32,44 @@ const render = (component, ...rest) => {
   }
 }
 
+/**
+ * Wait for given ms
+ *
+ * @param {number} duration
+ */
 function waitMs (ms = 0) {
   return new Promise(resolve => setTimeout(resolve, ms))
 }
 
+/**
+ * Get styles from document.styleSheets
+ *
+ * @param {String} selector
+ *
+ * @example className usage
+ *  getElementStyles('.anyClassName')
+ *
+ * @example Emotion Classname
+ *  const [className1, className2] = [...screen.getByTestId('aspectRatioBox').classList]
+ *  const styles = getElementStyles(`.${className1}`)
+ *  const pseudoStyles = getElementStyles(`.${className2}:before`)
+ */
+export function getElementStyles (selector) {
+  selector = new RegExp(selector)
+  let styles = []
+  let i; let j; const sel = selector
+  for (i = 0; i < document.styleSheets.length; ++i) {
+    for (j = 0; j < document.styleSheets[i].cssRules.length; ++j) {
+      if (sel.test(document.styleSheets[i].cssRules[j].selectorText)) {
+        // let selectorText = document.styleSheets[i].cssRules[j].selectorText
+        const cssText = document.styleSheets[i].cssRules[j].style.cssText
+        styles += cssText
+      }
+    }
+  }
+  return styles
+}
+
 export * from '@testing-library/vue'
 export {
   render,

From afaa8bc8f8eb06f057fc91bb40541047229da4da Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Thu, 2 Jul 2020 19:27:59 +0300
Subject: [PATCH 08/57] fix(avatar): render AvatarName if no src provided and
 fix all test cases

---
 jest.config.js                                |  3 +-
 .../chakra-ui-core/src/CAvatar/CAvatar.js     |  5 +-
 .../src/CAvatar/tests/CAvatar.test.js         | 77 ++++++++++++++-----
 .../tests/__snapshots__/CAvatar.test.js.snap  | 61 +++++----------
 4 files changed, 79 insertions(+), 67 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index e03e1bb7..d2c950c2 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -29,5 +29,6 @@ module.exports = {
   watchPlugins: [
     'jest-watch-typeahead/filename',
     'jest-watch-typeahead/testname'
-  ]
+  ],
+  testEnvironmentOptions: { resources: 'usable' }
 }
diff --git a/packages/chakra-ui-core/src/CAvatar/CAvatar.js b/packages/chakra-ui-core/src/CAvatar/CAvatar.js
index d98d0574..73a2a274 100644
--- a/packages/chakra-ui-core/src/CAvatar/CAvatar.js
+++ b/packages/chakra-ui-core/src/CAvatar/CAvatar.js
@@ -201,7 +201,6 @@ const CAvatar = {
       if (!canUseDOM) {
         return
       }
-
       const image = new window.Image()
       image.src = src
 
@@ -210,7 +209,7 @@ const CAvatar = {
         this.$emit('load', event)
       }
 
-      image.onError = (event) => {
+      image.onerror = (event) => {
         this.hasLoaded = false
         this.$emit('error', event)
       }
@@ -252,7 +251,7 @@ const CAvatar = {
         })
       }
 
-      if (this.src && !this.hasLoaded) {
+      if (!this.src || (this.src && !this.hasLoaded)) {
         if (this.name) {
           return h(CAvatarName, {
             props: {
diff --git a/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js b/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
index 79b87d60..c36e1fe0 100644
--- a/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
+++ b/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
@@ -1,45 +1,82 @@
 import { CAvatar, CAvatarBadge } from '..'
-import { render, fireEvent } from '@/tests/test-utils'
+import { render, wait, waitMs, screen } from '@/tests/test-utils'
+const LOAD_FAILURE_SRC = 'LOAD_FAILURE_SRC'
+const LOAD_SUCCESS_SRC = 'LOAD_SUCCESS_SRC'
+
+beforeAll(() => {
+  process.browser = true // Mock process.browser for CAvatar created()
+})
+
+beforeAll(() => {
+  // Mock Img
+  // eslint-disable-next-line accessor-pairs
+  Object.defineProperty(global.Image.prototype, 'src', {
+    set (src) {
+      if (src === LOAD_FAILURE_SRC) {
+        setTimeout(() => this.onerror(new Error('mocked error')))
+      } else if (src === LOAD_SUCCESS_SRC) {
+        setTimeout(() => this.onload())
+      }
+    }
+  })
+})
 
 const renderComponent = (props) => {
   const base = {
     components: { CAvatar, CAvatarBadge },
-    template: '<CAvatar name="Mesut Koca" data-testid=\'avatar\' src="http://mesut.dev"></CAvatar>',
+    template: '<CAvatar name="Mesut Koca" data-testid="avatar" src="LOAD_SUCCESS_SRC"></CAvatar>',
     ...props
   }
   return render(base)
 }
 
-it('should render correctly', () => {
+it('should render correctly', async () => {
   const { asFragment } = renderComponent()
+
+  await waitMs(1) // wait for img.onsuccess to be called.
+
   expect(asFragment()).toMatchSnapshot()
 })
 
-it("should render default avatar if name is not provided and image didn't load", async () => {
-  const { container, asFragment } = renderComponent({ template: '<CAvatar data-testid="avatar" src="mesut.dev" />' })
-  const image = container.querySelector('img')
+it('Avatar with AvatarBadge renders correctly', async () => {
+  const { asFragment } = renderComponent({
+    template: `
+    <CAvatar
+      name="Mesut Koca"
+      src="LOAD_SUCCESS_SRC"
+    >
+      <CAvatarBadge size="1.0em" bg="green.500" />
+    </CAvatar>
+  `
+  })
 
-  if (image) {
-    await fireEvent.error(image)
-  }
+  await waitMs(1) // wait for img.onsuccess to be called.
 
   expect(asFragment()).toMatchSnapshot()
 })
 
-// TODO: change mounted logic in avatar
-xit('should render image if loaded correctly', () => {
-  const { getByAltText } = renderComponent()
+it('renders an image', async () => {
+  renderComponent({ template: '<CAvatar name="Mesut Koca" src="LOAD_SUCCESS_SRC" />' })
 
-  expect(getByAltText('Mesut Koca')).toBeInTheDocument()
+  await wait(() => {
+    expect(screen.getByAltText(/Mesut Koca/i)).toBeInTheDocument()
+  })
 })
 
-// TODO: change mounted logic in avatar
-xit("should render avatar name as fallback if image didn't loaded correctly", async () => {
-  const { getByAltText, queryByAltText, getByText } = renderComponent()
-  const image = getByAltText('Mesut Koca')
+it('renders a name avatar if no src', async () => {
+  renderComponent({ template: '<CAvatar data-testid="avatar" name="Mesut Koca" />' })
+
+  await wait(() => {
+    expect(screen.getByLabelText(/Mesut Koca/i)).toBeInTheDocument()
+    expect(screen.getByText('MK')).toBeInTheDocument()
+  })
+})
 
-  await fireEvent.error(image)
+it('renders a name avatar if src fails', async () => {
+  renderComponent({ template: '<CAvatar data-testid="avatar" name="Mesut Koca" src="LOAD_FAILURE_SRC" />' })
 
-  expect(queryByAltText('Mesut Koca')).not.toBeInTheDocument()
-  expect(getByText('MK')).toBeInTheDocument()
+  await wait(() => {
+    expect(screen.queryByAltText(/Mesut Koca/i)).not.toBeInTheDocument()
+    expect(screen.getByText('MK')).toBeInTheDocument()
+  })
 })
diff --git a/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap b/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
index bf5dae1f..35592779 100644
--- a/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
+++ b/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
@@ -1,63 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render correctly 1`] = `
+exports[`Avatar with AvatarBadge renders correctly 1`] = `
 <DocumentFragment>
   <div
     class="css-2sxxyf"
     data-chakra-component="CAvatar"
-    data-testid="avatar"
   >
+    <img
+      alt="Mesut Koca"
+      class="css-58rle2"
+      data-chakra-component="CBox"
+      src="LOAD_SUCCESS_SRC"
+    />
     <div
-      aria-label="Mesut Koca"
-      class="css-1n1d9mc"
-      data-chakra-component="CAvatarName"
-    >
-      MK
-    </div>
+      class="css-mwkd9l"
+      data-chakra-component="CAvatarBadge"
+    />
   </div>
 </DocumentFragment>
 `;
 
-exports[`should render default avatar if name is not provided and image didn't load 1`] = `
+exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-7ezpv2"
+    class="css-2sxxyf"
     data-chakra-component="CAvatar"
     data-testid="avatar"
   >
-    <div
-      class="css-1clbu1k"
-      data-chakra-component="CDefaultAvatar"
-    >
-      
-        
-      <svg
-        fill="#fff"
-        role="img"
-        viewBox="0 0 128 128"
-      >
-        
-          
-        <g>
-          
-            
-          <path
-            d="M103,102.1388 C93.094,111.92 79.3504,118 64.1638,118 C48.8056,118 34.9294,111.768 25,101.7892 L25,95.2 C25,86.8096 31.981,80 40.6,80 L87.4,80 C96.019,80 103,86.8096 103,95.2 L103,102.1388 Z"
-          />
-          
-            
-          <path
-            d="M63.9961647,24 C51.2938136,24 41,34.2938136 41,46.9961647 C41,59.7061864 51.2938136,70 63.9961647,70 C76.6985159,70 87,59.7061864 87,46.9961647 C87,34.2938136 76.6985159,24 63.9961647,24"
-          />
-          
-          
-        </g>
-        
-        
-      </svg>
-      
-      
-    </div>
+    <img
+      alt="Mesut Koca"
+      class="css-58rle2"
+      data-chakra-component="CBox"
+      src="LOAD_SUCCESS_SRC"
+    />
   </div>
 </DocumentFragment>
 `;

From b2b706df8bad2331d526413d2ee246d53ffd0546 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Thu, 2 Jul 2020 19:51:55 +0300
Subject: [PATCH 09/57] test(avatar-group): fix AvatarGroup tests

---
 .../CAvatarGroup/tests/CAvatarGroup.test.js   | 34 ++++++++++++++++---
 .../__snapshots__/CAvatarGroup.test.js.snap   | 26 +++++++-------
 2 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js b/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
index 9cbed35f..b14d5d3f 100644
--- a/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
+++ b/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
@@ -1,5 +1,26 @@
 import { CAvatar, CAvatarGroup } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, waitMs } from '@/tests/test-utils'
+
+const LOAD_FAILURE_SRC = 'LOAD_FAILURE_SRC'
+const LOAD_SUCCESS_SRC = 'LOAD_SUCCESS_SRC'
+
+beforeAll(() => {
+  process.browser = true // Mock process.browser for CAvatar created()
+})
+
+beforeAll(() => {
+  // Mock Img
+  // eslint-disable-next-line accessor-pairs
+  Object.defineProperty(global.Image.prototype, 'src', {
+    set (src) {
+      if (src === LOAD_FAILURE_SRC) {
+        setTimeout(() => this.onerror(new Error('mocked error')))
+      } else if (src === LOAD_SUCCESS_SRC) {
+        setTimeout(() => this.onload())
+      }
+    }
+  })
+})
 
 const renderComponent = (props) => {
   const base = {
@@ -11,15 +32,15 @@ const renderComponent = (props) => {
     <CAvatarGroup max="2">
       <CAvatar
         name="Mesut Koca"
-        src="https://pbs.twimg.com/profile_images/953743486842474496/cOrUdK4z_200x200.jpg"
+        src="LOAD_SUCCESS_SRC"
       />
       <CAvatar
         name="Evan You"
-        src="https://pbs.twimg.com/profile_images/888432310504370176/mhoGA4uj_400x400.jpg"
+        src="LOAD_SUCCESS_SRC"
       />
       <CAvatar
         name="Jonathan Bakebwa"
-        src="https://res.cloudinary.com/xtellar/image/upload/v1572857445/me_zqos4e.jpg"
+        src="LOAD_SUCCESS_SRC"
       />
     </CAvatarGroup>`,
     ...props
@@ -27,8 +48,11 @@ const renderComponent = (props) => {
   return render(base)
 }
 
-it('should render correctly', () => {
+it('should render correctly', async () => {
   const { asFragment } = renderComponent()
+
+  await waitMs(1)
+
   expect(asFragment()).toMatchSnapshot()
 })
 
diff --git a/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap b/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap
index d539866a..f7fbaa6b 100644
--- a/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap
+++ b/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap
@@ -10,25 +10,23 @@ exports[`should render correctly 1`] = `
       class="css-1jwki60"
       data-chakra-component="CAvatar"
     >
-      <div
-        aria-label="Mesut Koca"
-        class="css-1n1d9mc"
-        data-chakra-component="CAvatarName"
-      >
-        MK
-      </div>
+      <img
+        alt="Mesut Koca"
+        class="css-58rle2"
+        data-chakra-component="CBox"
+        src="LOAD_SUCCESS_SRC"
+      />
     </div>
     <div
       class="css-1li52eg"
       data-chakra-component="CAvatar"
     >
-      <div
-        aria-label="Evan You"
-        class="css-1n1d9mc"
-        data-chakra-component="CAvatarName"
-      >
-        EY
-      </div>
+      <img
+        alt="Evan You"
+        class="css-58rle2"
+        data-chakra-component="CBox"
+        src="LOAD_SUCCESS_SRC"
+      />
     </div>
     <div
       class="css-lpwrl7"

From 7edd2ecccdfcf56f2407fa2943c24a05c6e86709 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Thu, 2 Jul 2020 19:57:04 +0300
Subject: [PATCH 10/57] test(bread-crumb): refactor Breadcrump tests

---
 .../src/CBreadcrumb/tests/CBreadcrumb.test.js          | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/chakra-ui-core/src/CBreadcrumb/tests/CBreadcrumb.test.js b/packages/chakra-ui-core/src/CBreadcrumb/tests/CBreadcrumb.test.js
index 4bbeaa0d..32bc26bd 100644
--- a/packages/chakra-ui-core/src/CBreadcrumb/tests/CBreadcrumb.test.js
+++ b/packages/chakra-ui-core/src/CBreadcrumb/tests/CBreadcrumb.test.js
@@ -1,5 +1,5 @@
 import { CBreadcrumb, CBreadcrumbItem, CBreadcrumbLink, CBreadcrumbSeparator } from '..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -49,7 +49,7 @@ it('should display custom seperator ', () => {
 })
 
 it('should have the proper aria-attributes', () => {
-  const { getByText, getAllByRole, getByLabelText } = renderComponent({
+  renderComponent({
     template: `
     <CBreadcrumb>
       <CBreadcrumbItem>
@@ -65,12 +65,12 @@ it('should have the proper aria-attributes', () => {
   })
 
   // surrounding `nav` has aria-label="breadcrumb"
-  getByLabelText('breadcrumb', { selector: 'nav' })
+  screen.getByLabelText('breadcrumb', { selector: 'nav' })
 
   // `isCurrentPage` link has aria-current="page"
-  const currentPageLink = getByText('Contact')
+  const currentPageLink = screen.getByText('Contact')
   expect(currentPageLink).toHaveAttribute('aria-current', 'page')
 
   // separator receives presentation="role"
-  expect(getAllByRole('presentation')).toHaveLength(2)
+  expect(screen.getAllByRole('presentation')).toHaveLength(2)
 })

From 5e8f58e4ab13d21d7b186ae69d521be87ea6058a Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Thu, 2 Jul 2020 20:03:42 +0300
Subject: [PATCH 11/57] test(button): refactor button tests

---
 .../src/CButton/tests/CButton.test.js         | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/chakra-ui-core/src/CButton/tests/CButton.test.js b/packages/chakra-ui-core/src/CButton/tests/CButton.test.js
index 2f976f9e..578394cd 100644
--- a/packages/chakra-ui-core/src/CButton/tests/CButton.test.js
+++ b/packages/chakra-ui-core/src/CButton/tests/CButton.test.js
@@ -1,5 +1,5 @@
 import { CButton } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -17,26 +17,19 @@ it('should render correctly', () => {
   expect(asFragment()).toMatchSnapshot()
 })
 
-it('should display children', () => {
-  const { getByText } = renderComponent({ template: '<CButton><span>Works</span></CButton>' })
-  expect(getByText('Works')).toBeInTheDocument()
-})
-
 it('should display button with left icon', () => {
-  const { container, asFragment } = renderComponent({ template: '<CButton leftIcon="email">Email</CButton>' })
-  expect(container.querySelector('button > svg')).toBeInTheDocument()
+  const { asFragment } = renderComponent({ template: '<CButton leftIcon="email">Email</CButton>' })
   expect(asFragment()).toMatchSnapshot()
 })
 
 it('should display button with right icon', () => {
-  const { container, asFragment } = renderComponent({ template: '<CButton rightIcon="email">Email</CButton>' })
-  expect(container.querySelector('button > svg')).toBeInTheDocument()
+  const { asFragment } = renderComponent({ template: '<CButton rightIcon="email">Email</CButton>' })
   expect(asFragment()).toMatchSnapshot()
 })
 
 it('should display spinner and hide text', () => {
-  const { getByTestId, container } = renderComponent({ template: '<CButton isLoading data-testid="btn">CButton</CButton>' })
-  const button = getByTestId('btn')
+  const { container } = renderComponent({ template: '<CButton isLoading data-testid="btn">CButton</CButton>' })
+  const button = screen.getByTestId('btn')
 
   expect(button).toHaveAttribute('disabled')
   expect(button).toHaveAttribute('aria-disabled', 'true')
@@ -47,15 +40,15 @@ it('should display spinner and hide text', () => {
 })
 
 it('should display spinner with text', () => {
-  const { getByText, container } = renderComponent({ template: '<CButton isLoading loadingText="Submitting" data-testid="Spinner">Button</CButton>' })
+  const { container } = renderComponent({ template: '<CButton isLoading loadingText="Submitting" data-testid="Spinner">Button</CButton>' })
 
-  expect(getByText('Submitting')).toBeInTheDocument()
+  expect(screen.getByText('Submitting')).toBeInTheDocument()
   const spinner = container.querySelector('[data-chakra-component=CSpinner]')
   expect(spinner).toBeInTheDocument()
 })
 
 it('should display a disabled button', () => {
-  const { getByText } = renderComponent({ template: '<CButton isDisabled>Button</CButton>' })
+  renderComponent({ template: '<CButton isDisabled>Button</CButton>' })
 
-  expect(getByText('Button')).toHaveAttribute('disabled')
+  expect(screen.getByText('Button')).toHaveAttribute('disabled')
 })

From 83e9a99a9594b8db2cb3211af867ecf6a69a76f2 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Thu, 2 Jul 2020 20:41:57 +0300
Subject: [PATCH 12/57] chore: add .jsconfig for better code completion support
 in vscode

---
 jsconfig.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 jsconfig.json

diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..29037a62
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"],
+      "~~/*": ["./*"],
+      "@@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}

From 78099790e56253e2be0ff70b078cef641e62ce05 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Thu, 2 Jul 2020 21:26:33 +0300
Subject: [PATCH 13/57] chore: add eslint testing library plugin

---
 .eslintrc.js | 17 ++++++++++-------
 package.json |  1 +
 yarn.lock    | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 66b25a11..d37cd07f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,15 +3,21 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
+  plugins: ['testing-library'],
+  extends: [
     'plugin:vue/essential',
     '@vue/standard',
-    '@nuxtjs'
+    '@nuxtjs',
+    'plugin:testing-library/recommended',
+    'plugin:testing-library/vue'
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'curly': 'off'
+    curly: 'off',
+    'testing-library/no-debug': 'error',
+    'testing-library/prefer-screen-queries': 'error',
+    'testing-library/await-fire-event': 'error'
   },
   parserOptions: {
     parser: 'babel-eslint'
@@ -23,10 +29,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/*.{j,t}s?(x)'
-      ],
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/*.{j,t}s?(x)'],
       env: {
         jest: true
       }
diff --git a/package.json b/package.json
index 0bb0e3ac..d5455650 100644
--- a/package.json
+++ b/package.json
@@ -147,6 +147,7 @@
     "eslint-loader": "^3.0.3",
     "eslint-plugin-nuxt": ">=0.4.2",
     "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-testing-library": "^3.3.1",
     "jest": "^25.1.0",
     "prettier": "^1.19.1",
     "rimraf": "^3.0.2",
diff --git a/yarn.lock b/yarn.lock
index d29f93c9..700d5a23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4585,6 +4585,16 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@typescript-eslint/experimental-utils@^2.29.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz#d3524b644cdb40eebceca67f8cf3e4cc9c8f980f"
+  integrity sha512-eS6FTkq+wuMJ+sgtuNTtcqavWXqsflWcfBnlYhg/nS4aZ1leewkXGbvBhaapn1q6qf4M71bsR1tez5JTRMuqwA==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/typescript-estree" "2.34.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
 "@typescript-eslint/experimental-utils@^2.5.0":
   version "2.26.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.26.0.tgz#063390c404d9980767d76274df386c0aa675d91d"
@@ -4608,6 +4618,19 @@
     semver "^6.3.0"
     tsutils "^3.17.1"
 
+"@typescript-eslint/typescript-estree@2.34.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5"
+  integrity sha512-OMAr+nJWKdlVM9LOqCqh3pQQPwxHAN7Du8DR6dmwCrAmxtiXQnhHJ6tBNtf+cggqfo51SG/FCwnKhXCIM7hnVg==
+  dependencies:
+    debug "^4.1.1"
+    eslint-visitor-keys "^1.1.0"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
@@ -10128,6 +10151,13 @@ eslint-plugin-standard@^4.0.0, eslint-plugin-standard@^4.0.1:
   resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-4.0.1.tgz#ff0519f7ffaff114f76d1bd7c3996eef0f6e20b4"
   integrity sha512-v/KBnfyaOMPmZc/dmc6ozOdWqekGp7bBGq4jLAecEfPGmfKiWS4sA8sC0LqiV9w5qmXAtXVn4M3p1jSyhY85SQ==
 
+eslint-plugin-testing-library@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-3.3.1.tgz#aab204bb19b634ee50a9da550649a51723ebb423"
+  integrity sha512-0Ubug+v9hJDb0OEHc6e2p5/7Q4xhaCZiYLc05hybja8Yd2t+2y1Q+UDwKz+JiDAHoPgE7y2B2G3jn+u9kqJTGw==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "^2.29.0"
+
 eslint-plugin-unicorn@^16.0.0:
   version "16.1.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-unicorn/-/eslint-plugin-unicorn-16.1.1.tgz#012c598d71914ef30f5d386dd85110e59f2ef999"
@@ -20064,6 +20094,11 @@ semver@^7.1.2, semver@^7.1.3:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.3.tgz#e4345ce73071c53f336445cfc19efb1c311df2a6"
   integrity sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA==
 
+semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"

From 8a3a5909fb67dabba4cd75137bb1e7a3b87e6c19 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Thu, 2 Jul 2020 21:27:59 +0300
Subject: [PATCH 14/57] test(button-group): remove unnecessary test in
 ButtonGroup

---
 .../src/CButtonGroup/tests/CButtonGroup.test.js           | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js b/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
index f87efd27..18468028 100644
--- a/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
+++ b/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
@@ -1,5 +1,5 @@
 import { CButton, CButtonGroup } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -21,9 +21,3 @@ it('should render correctly', () => {
   const { asFragment } = renderComponent()
   expect(asFragment()).toMatchSnapshot()
 })
-
-it('should display children', () => {
-  const { getByText } = renderComponent()
-  expect(getByText('Button1')).toBeInTheDocument()
-  expect(getByText('Button2')).toBeInTheDocument()
-})

From 5bcc4d5c2e144ded41a5632066307db80f053ace Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Thu, 2 Jul 2020 21:34:03 +0300
Subject: [PATCH 15/57] test(avatar): remove unused attrs

---
 packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js b/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
index c36e1fe0..0d801f5a 100644
--- a/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
+++ b/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
@@ -64,7 +64,7 @@ it('renders an image', async () => {
 })
 
 it('renders a name avatar if no src', async () => {
-  renderComponent({ template: '<CAvatar data-testid="avatar" name="Mesut Koca" />' })
+  renderComponent({ template: '<CAvatar name="Mesut Koca" />' })
 
   await wait(() => {
     expect(screen.getByLabelText(/Mesut Koca/i)).toBeInTheDocument()
@@ -73,7 +73,7 @@ it('renders a name avatar if no src', async () => {
 })
 
 it('renders a name avatar if src fails', async () => {
-  renderComponent({ template: '<CAvatar data-testid="avatar" name="Mesut Koca" src="LOAD_FAILURE_SRC" />' })
+  renderComponent({ template: '<CAvatar name="Mesut Koca" src="LOAD_FAILURE_SRC" />' })
 
   await wait(() => {
     expect(screen.queryByAltText(/Mesut Koca/i)).not.toBeInTheDocument()

From 97807ad2dbf3b718651b3042fb8e04ab83129bb5 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sat, 4 Jul 2020 15:53:35 +0300
Subject: [PATCH 16/57] test(accordion): add shift+tab tests for accordion

---
 .../src/CAccordion/tests/CAccordion.test.js   | 69 ++++++++++---------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js b/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
index d6fe79a5..23ce636c 100644
--- a/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
+++ b/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
@@ -144,7 +144,6 @@ it('has the proper aria attributes', () => {
   expect(panel).toHaveAttribute('aria-labelledby')
 })
 
-// test that tab moves focus to the next focusable element
 it('tab moves focus to the next focusable element', async () => {
   renderComponent({
     template: `
@@ -178,7 +177,43 @@ it('tab moves focus to the next focusable element', async () => {
   expect(last).toHaveFocus()
 })
 
-// test that aria-contols for button is same as id for panel
+
+it('shift+tab moves focus to the previous focusable element', async () => {
+  renderComponent({
+    template: `
+    <CAccordion>
+      <CAccordionItem>
+        <CAccordionHeader>First section</CAccordionHeader>
+        <CAccordionPanel>Panel 1</CAccordionPanel>
+      </CAccordionItem>
+      <CAccordionItem>
+        <CAccordionHeader>Second section</CAccordionHeader>
+        <CAccordionPanel>Panel 2</CAccordionPanel>
+      </CAccordionItem>
+      <CAccordionItem>
+        <CAccordionHeader>Last section</CAccordionHeader>
+        <CAccordionPanel>Panel 3</CAccordionPanel>
+      </CAccordionItem>
+    </CAccordion>`
+  })
+
+  const first = screen.getByText('First section')
+  const second = screen.getByText('Second section')
+  const last = screen.getByText('Last section')
+
+  await userEvent.tab()
+  expect(first).toHaveFocus()
+
+  await userEvent.tab()
+  expect(second).toHaveFocus()
+
+  await userEvent.tab()
+  expect(last).toHaveFocus()
+
+  await userEvent.tab({shift: true}) // shift+tab
+  expect(second).toHaveFocus()
+})
+
 it('aria-contols for button is same as id for panel', () => {
   renderComponent({
     template: `
@@ -195,7 +230,6 @@ it('aria-contols for button is same as id for panel', () => {
   expect(button.getAttribute('aria-controls')).toEqual(panel.getAttribute('id'))
 })
 
-// test that aria-expanded is true/false when accordion is open/closed
 it('aria-expanded is true/false when accordion is open/closed', () => {
   renderComponent({
     template: `
@@ -215,7 +249,6 @@ it('aria-expanded is true/false when accordion is open/closed', () => {
   expect(button).toHaveAttribute('aria-expanded', 'true')
 })
 
-// test that panel has role=region and aria-labelledby
 it('panel has role=region and aria-labelledby', () => {
   renderComponent({
     template: `
@@ -230,30 +263,4 @@ it('panel has role=region and aria-labelledby', () => {
 
   expect(panel).toHaveAttribute('aria-labelledby')
   expect(panel).toHaveAttribute('role', 'region')
-})
-
-// eslint-disable-next-line no-undef
-xit('arrow up & down moves focus to next/previous accordion', async () => {
-  renderComponent({
-    template: `
-    <CAccordion>
-      <CAccordionItem>
-        <CAccordionHeader>Section 1 title</CAccordionHeader>
-        <CAccordionPanel>Panel 1</CAccordionPanel>
-      </CAccordionItem>
-      <CAccordionItem>
-        <CAccordionHeader>Section 2 title</CAccordionHeader>
-        <CAccordionPanel>Panel 2</CAccordionPanel>
-      </CAccordionItem>
-    </CAccordion>`
-  })
-
-  const first = screen.getByText('Section 1 title')
-  const second = screen.getByText('Section 2 title')
-
-  await fireEvent.keyDown(first, { key: 'ArrowDown', keyCode: 40 })
-  expect(second).toHaveFocus()
-
-  await fireEvent.keyDown(second, { key: 'ArrowUp', keyCode: 38 })
-  expect(first).toHaveFocus()
-})
+})
\ No newline at end of file

From 3c2400dab91e25997ad73a3d9a5ffcbf857a9578 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sat, 4 Jul 2020 15:58:12 +0300
Subject: [PATCH 17/57] test(avatar+avatar-group): add comments for the future
 and one tick is enough

---
 packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js     | 4 ++--
 .../src/CAvatarGroup/tests/CAvatarGroup.test.js               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js b/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
index 0d801f5a..f29229c1 100644
--- a/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
+++ b/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
@@ -33,7 +33,7 @@ const renderComponent = (props) => {
 it('should render correctly', async () => {
   const { asFragment } = renderComponent()
 
-  await waitMs(1) // wait for img.onsuccess to be called.
+  await waitMs() // wait for img.onsuccess to be called.
 
   expect(asFragment()).toMatchSnapshot()
 })
@@ -50,7 +50,7 @@ it('Avatar with AvatarBadge renders correctly', async () => {
   `
   })
 
-  await waitMs(1) // wait for img.onsuccess to be called.
+  await waitMs() // wait for img.onsuccess to be called.
 
   expect(asFragment()).toMatchSnapshot()
 })
diff --git a/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js b/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
index b14d5d3f..dd803db2 100644
--- a/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
+++ b/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
@@ -51,7 +51,7 @@ const renderComponent = (props) => {
 it('should render correctly', async () => {
   const { asFragment } = renderComponent()
 
-  await waitMs(1)
+  await waitMs() // wait for img.onsuccess to be called.
 
   expect(asFragment()).toMatchSnapshot()
 })

From 5cdb5af691506b82c1d0606fe52e03a57dd51ee7 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sat, 4 Jul 2020 16:01:04 +0300
Subject: [PATCH 18/57] test(badge): remove unnecessary test

---
 packages/chakra-ui-core/src/CBadge/tests/CBadge.test.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/chakra-ui-core/src/CBadge/tests/CBadge.test.js b/packages/chakra-ui-core/src/CBadge/tests/CBadge.test.js
index eb1f01af..f8a5e0ee 100644
--- a/packages/chakra-ui-core/src/CBadge/tests/CBadge.test.js
+++ b/packages/chakra-ui-core/src/CBadge/tests/CBadge.test.js
@@ -15,12 +15,6 @@ it('should render correctly', () => {
   expect(asFragment()).toMatchSnapshot()
 })
 
-it('should display children', () => {
-  const { getByText } = renderComponent()
-
-  expect(getByText('500')).toBeInTheDocument()
-})
-
 it('should apply variant styles corectly', () => {
   const { asFragment } = renderComponent({
     template: `

From 0037cb9466baee87a699303380d00293a8923fcf Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sat, 4 Jul 2020 16:13:24 +0300
Subject: [PATCH 19/57] test(Box): refactor box tests

---
 packages/chakra-ui-core/src/CBox/tests/CBox.test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/chakra-ui-core/src/CBox/tests/CBox.test.js b/packages/chakra-ui-core/src/CBox/tests/CBox.test.js
index 61060dad..cbc4caa0 100644
--- a/packages/chakra-ui-core/src/CBox/tests/CBox.test.js
+++ b/packages/chakra-ui-core/src/CBox/tests/CBox.test.js
@@ -1,5 +1,5 @@
 import CBox from '../'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -22,9 +22,9 @@ it('should change the style', () => {
   d="flex" :w="['auto']" px="5" py="5" shadow="lg"
   my="5" mb="5" rounded="sm" font-family="body"
   background-color="blue.200" color="blue.700"`
-  const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
+  const { asFragment } = renderComponent({ inlineAttrs })
 
-  const box = getByTestId('box')
+  const box = screen.getByTestId('box')
 
   expect(asFragment()).toMatchSnapshot()
   expect(box).toHaveStyle('display: flex')

From 2bf0f5e5af35c27895d9406179386a3207a873a2 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sat, 4 Jul 2020 16:16:25 +0300
Subject: [PATCH 20/57] chore: remove unused screen

---
 .../chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js b/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
index 18468028..eb6ef1a4 100644
--- a/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
+++ b/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
@@ -1,5 +1,5 @@
 import { CButton, CButtonGroup } from '../..'
-import { render, screen } from '@/tests/test-utils'
+import { render } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {

From e68973128e4d8007e698b878e3fe9539e1215918 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sat, 4 Jul 2020 16:59:26 +0300
Subject: [PATCH 21/57] chore: fix eslint errors (husky didnt check for some
 reason)

---
 .../chakra-ui-core/src/CAccordion/tests/CAccordion.test.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js b/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
index 23ce636c..68126a71 100644
--- a/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
+++ b/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
@@ -1,5 +1,5 @@
 import { CAccordion, CAccordionItem, CAccordionHeader, CAccordionPanel, CAccordionIcon } from '..'
-import { render, userEvent, fireEvent, screen } from '@/tests/test-utils'
+import { render, userEvent, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -177,7 +177,6 @@ it('tab moves focus to the next focusable element', async () => {
   expect(last).toHaveFocus()
 })
 
-
 it('shift+tab moves focus to the previous focusable element', async () => {
   renderComponent({
     template: `
@@ -210,7 +209,7 @@ it('shift+tab moves focus to the previous focusable element', async () => {
   await userEvent.tab()
   expect(last).toHaveFocus()
 
-  await userEvent.tab({shift: true}) // shift+tab
+  await userEvent.tab({ shift: true }) // shift+tab
   expect(second).toHaveFocus()
 })
 
@@ -263,4 +262,4 @@ it('panel has role=region and aria-labelledby', () => {
 
   expect(panel).toHaveAttribute('aria-labelledby')
   expect(panel).toHaveAttribute('role', 'region')
-})
\ No newline at end of file
+})

From 068420c1e30f55068bfc47fb89666e0a73de4612 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Mon, 6 Jul 2020 23:01:04 +0300
Subject: [PATCH 22/57] test(checkbox): refactor checkbox tests

---
 .../src/CCheckbox/tests/CCheckbox.test.js     | 56 +++++++++----------
 .../__snapshots__/CCheckbox.test.js.snap      |  2 +-
 2 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/packages/chakra-ui-core/src/CCheckbox/tests/CCheckbox.test.js b/packages/chakra-ui-core/src/CCheckbox/tests/CCheckbox.test.js
index d91864b9..f1edcb51 100644
--- a/packages/chakra-ui-core/src/CCheckbox/tests/CCheckbox.test.js
+++ b/packages/chakra-ui-core/src/CCheckbox/tests/CCheckbox.test.js
@@ -1,5 +1,5 @@
 import CCheckbox from '..'
-import { render, userEvent } from '@/tests/test-utils'
+import { render, userEvent, screen } from '@/tests/test-utils'
 
 jest.mock('@/packages/chakra-ui-core/src/utils/generators.js', () => {
   return {
@@ -13,7 +13,7 @@ const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
   const base = {
     components: { CCheckbox },
-    template: `<CCheckbox ${inlineAttrs}>checkbox</CCheckbox>`,
+    template: `<CCheckbox ${inlineAttrs}>check</CCheckbox>`,
     ...props
   }
   return render(base)
@@ -26,42 +26,42 @@ it('should render correctly', () => {
 
 it('should display a disabled checkbox', () => {
   const inlineAttrs = 'isDisabled'
-  const { getByText, container } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('check')
 
   expect(input).toHaveAttribute('disabled')
-  expect(getByText('checkbox').parentNode).toHaveStyle('cursor: not-allowed;')
+  expect(screen.getByText('check').parentNode).toHaveStyle('cursor: not-allowed;')
 })
 
 it('should display a checkbox with a checked state', () => {
   const inlineAttrs = 'isChecked'
-  const { container } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('check')
 
   expect(input).toBeChecked()
 })
 
 it('should display a checkbox with an unchecked state', () => {
   const inlineAttrs = ':isChecked="false"'
-  const { container } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('check')
 
   expect(input).not.toBeChecked()
 })
 
 it('should have a checked state when setting defaultIsChecked', () => {
   const inlineAttrs = 'defaultIsChecked'
-  const { container } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('check')
 
   expect(input).toBeChecked()
 })
 
 test('Uncontrolled - should not check if disabled', async () => {
   const inlineAttrs = 'isDisabled'
-  const { container, getByText } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
-  const checkbox = getByText('checkbox')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('check') // input
+  const checkbox = screen.getByText('check') // div with text
 
   expect(input).toBeDisabled()
 
@@ -71,9 +71,9 @@ test('Uncontrolled - should not check if disabled', async () => {
 })
 
 test('Uncontrolled - should check and uncheck', async () => {
-  const { container, getByText } = renderComponent()
-  const input = container.querySelector('input')
-  const checkbox = getByText('checkbox')
+  renderComponent()
+  const input = screen.getByLabelText('check') // input
+  const checkbox = screen.getByText('check') // div with text
 
   // click the first time, it's checked
   await userEvent.click(checkbox)
@@ -85,23 +85,21 @@ test('Uncontrolled - should check and uncheck', async () => {
 })
 
 test('properly handles v-model', async () => {
-  const { getByText, container } = renderComponent(
-    {
-      data: () => ({
-        enable: false
-      }),
-      template: `
+  renderComponent({
+    data: () => ({
+      enable: false
+    }),
+    template: `
       <div>
         <span>{{enable ? 'enabled' : 'disabled'}}</span>
-        <CCheckbox v-model="enable" />
+        <CCheckbox v-model="enable">check</CCheckbox>
       </div>`
-    }
-  )
-  const input = container.querySelector('input')
+  })
+  const input = screen.getByLabelText('check') // input
 
-  expect(getByText('disabled')).toBeInTheDocument()
+  expect(screen.getByText('disabled')).toBeInTheDocument()
 
   await userEvent.click(input)
 
-  expect(getByText('enabled')).toBeInTheDocument()
+  expect(screen.getByText('enabled')).toBeInTheDocument()
 })
diff --git a/packages/chakra-ui-core/src/CCheckbox/tests/__snapshots__/CCheckbox.test.js.snap b/packages/chakra-ui-core/src/CCheckbox/tests/__snapshots__/CCheckbox.test.js.snap
index 92141cec..3f97af56 100644
--- a/packages/chakra-ui-core/src/CCheckbox/tests/__snapshots__/CCheckbox.test.js.snap
+++ b/packages/chakra-ui-core/src/CCheckbox/tests/__snapshots__/CCheckbox.test.js.snap
@@ -46,7 +46,7 @@ exports[`should render correctly 1`] = `
       class="css-np4rym"
       data-chakra-component="CBox"
     >
-      checkbox
+      check
     </div>
   </label>
 </DocumentFragment>

From 7b3d85f8a8fcc7829d2e98f9cefa001c09dcae14 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Mon, 6 Jul 2020 23:23:14 +0300
Subject: [PATCH 23/57] test(checkbox-group): refactor CheckboxGroup tests

---
 .../tests/CCheckboxGroup.test.js              | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/chakra-ui-core/src/CCheckboxGroup/tests/CCheckboxGroup.test.js b/packages/chakra-ui-core/src/CCheckboxGroup/tests/CCheckboxGroup.test.js
index 522f3f16..71549b95 100644
--- a/packages/chakra-ui-core/src/CCheckboxGroup/tests/CCheckboxGroup.test.js
+++ b/packages/chakra-ui-core/src/CCheckboxGroup/tests/CCheckboxGroup.test.js
@@ -1,5 +1,5 @@
 import { CBox, CCheckbox, CCheckboxGroup } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen, wait } from '@/tests/test-utils'
 
 // mocks
 import { useId } from '@/packages/chakra-ui-core/src/utils'
@@ -33,20 +33,18 @@ it('should render correctly', () => {
 })
 
 it('should display children', () => {
-  const { getByText } = renderComponent()
-  expect(getByText('One')).toBeInTheDocument()
-  expect(getByText('Two')).toBeInTheDocument()
-  expect(getByText('Three')).toBeInTheDocument()
+  renderComponent()
+  expect(screen.getByText('One')).toBeInTheDocument()
+  expect(screen.getByText('Two')).toBeInTheDocument()
+  expect(screen.getByText('Three')).toBeInTheDocument()
 })
 
 test('selectedValues prop works', () => {
-  const { getByTestId } = renderComponent()
+  renderComponent()
 
-  const one = getByTestId('one').querySelector('input')
-  const two = getByTestId('two').querySelector('input')
-  const three = getByTestId('three').querySelector('input')
-
-  expect(one).not.toBeChecked()
-  expect(two).toBeChecked()
-  expect(three).not.toBeChecked()
+  wait(() => {
+    expect(screen.getByLabelText('One')).not.toBeChecked()
+    expect(screen.getByLabelText('Two')).toBeChecked()
+    expect(screen.getByLabelText('Three')).not.toBeChecked()
+  })
 })

From d14721cddaa4af8b4b0886cb90b955e6f13d7357 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Mon, 6 Jul 2020 23:25:41 +0300
Subject: [PATCH 24/57] test(circular-progress): refactor circular progress

---
 .../tests/CCircularProgress.test.js                | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/chakra-ui-core/src/CCircularProgress/tests/CCircularProgress.test.js b/packages/chakra-ui-core/src/CCircularProgress/tests/CCircularProgress.test.js
index f8007f41..280c0c3c 100644
--- a/packages/chakra-ui-core/src/CCircularProgress/tests/CCircularProgress.test.js
+++ b/packages/chakra-ui-core/src/CCircularProgress/tests/CCircularProgress.test.js
@@ -1,5 +1,5 @@
 import { CCircularProgress, CCircularProgressLabel } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -20,26 +20,26 @@ it('should render correctly', () => {
 })
 
 it('should display a label', () => {
-  const { queryByText } = renderComponent({
+  renderComponent({
     template: `
   <CCircularProgress :value="40">
     <CCircularProgressLabel>40%</CCircularProgressLabel>
   </CCircularProgress>`
   })
 
-  expect(queryByText('40%')).toBeInTheDocument()
+  expect(screen.getByText('40%')).toBeInTheDocument()
 })
 
 test('a11y - progress has a "role" set to "progressbar"', () => {
-  const { queryByRole } = renderComponent()
+  renderComponent()
 
-  expect(queryByRole('progressbar')).toBeInTheDocument()
+  expect(screen.queryByRole('progressbar')).toBeInTheDocument()
 })
 
 test('a11y - progress has a "aria-valuenow" set to the percentage completion value', () => {
-  const { queryByTestId } = renderComponent()
+  renderComponent()
 
-  expect(queryByTestId('CircularProgress')).toHaveAttribute(
+  expect(screen.queryByTestId('CircularProgress')).toHaveAttribute(
     'aria-valuenow',
     '40'
   )

From a77f8f3ba20293351c5ab994204e27d3544ea6e9 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Mon, 6 Jul 2020 23:31:29 +0300
Subject: [PATCH 25/57] test(close-button): refactor close button tests

---
 .../src/CCloseButton/tests/CloseButton.test.js         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/chakra-ui-core/src/CCloseButton/tests/CloseButton.test.js b/packages/chakra-ui-core/src/CCloseButton/tests/CloseButton.test.js
index 836800b2..65961321 100644
--- a/packages/chakra-ui-core/src/CCloseButton/tests/CloseButton.test.js
+++ b/packages/chakra-ui-core/src/CCloseButton/tests/CloseButton.test.js
@@ -1,5 +1,5 @@
 import CloseButton from '../'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -14,18 +14,18 @@ it('should render correctly', () => {
   expect(asFragment()).toMatchSnapshot()
 })
 it('should allow setting a custom aria-label for the button', () => {
-  const { container } = renderComponent({ template: '<CloseButton aria-label="my aria label" />' })
+  renderComponent({ template: '<CloseButton aria-label="my aria label" />' })
 
-  expect(container.querySelector('button')).toHaveAttribute(
+  expect(screen.getByLabelText('my aria label')).toHaveAttribute(
     'aria-label',
     'my aria label'
   )
 })
 
 test('a11y - should have aria-label set to "Close"', () => {
-  const { container } = renderComponent()
+  renderComponent()
 
-  expect(container.querySelector('button')).toHaveAttribute(
+  expect(screen.getByLabelText('Close')).toHaveAttribute(
     'aria-label',
     'Close'
   )

From 725f822a297711cfbe0cb35c62d6a302f8faa12f Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Mon, 6 Jul 2020 23:32:35 +0300
Subject: [PATCH 26/57] test(code): refactor to screen

---
 packages/chakra-ui-core/src/CCode/tests/CCode.test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/chakra-ui-core/src/CCode/tests/CCode.test.js b/packages/chakra-ui-core/src/CCode/tests/CCode.test.js
index d7151b2d..ffe67e55 100644
--- a/packages/chakra-ui-core/src/CCode/tests/CCode.test.js
+++ b/packages/chakra-ui-core/src/CCode/tests/CCode.test.js
@@ -1,5 +1,5 @@
 import CCode from '..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -16,7 +16,7 @@ it('should render correctly', () => {
 })
 
 it('should display children', () => {
-  const { getByText } = renderComponent()
+  renderComponent()
 
-  expect(getByText('content')).toBeInTheDocument()
+  expect(screen.getByText('content')).toBeInTheDocument()
 })

From 1af9a078aa8474a0911126bf58b3fb017c86b54c Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Mon, 6 Jul 2020 23:34:19 +0300
Subject: [PATCH 27/57] test(controlbox): refactor use screen

---
 .../src/CControlBox/tests/CControlBox.test.js | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/chakra-ui-core/src/CControlBox/tests/CControlBox.test.js b/packages/chakra-ui-core/src/CControlBox/tests/CControlBox.test.js
index 9e375198..1fd25dc1 100644
--- a/packages/chakra-ui-core/src/CControlBox/tests/CControlBox.test.js
+++ b/packages/chakra-ui-core/src/CControlBox/tests/CControlBox.test.js
@@ -1,5 +1,5 @@
 import { CVisuallyHidden, CControlBox, CBox } from '../..'
-import { render, userEvent } from '@/tests/test-utils'
+import { render, userEvent, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -43,9 +43,9 @@ it('should render correctly', () => {
 })
 
 test('Uncontrolled radio - should be checked always', async () => {
-  const { getByTestId } = renderComponent({ type: 'radio' })
-  const control = getByTestId('control')
-  const hiddenControl = getByTestId('hiddenControl')
+  renderComponent({ type: 'radio' })
+  const control = screen.getByTestId('control')
+  const hiddenControl = screen.getByTestId('hiddenControl')
 
   // click the first time, it's checked
   await userEvent.click(control)
@@ -57,9 +57,9 @@ test('Uncontrolled radio - should be checked always', async () => {
 })
 
 test('Uncontrolled checkbox - should toggle', async () => {
-  const { getByTestId } = renderComponent({ type: 'checkbox' })
-  const control = getByTestId('control')
-  const hiddenControl = getByTestId('hiddenControl')
+  renderComponent({ type: 'checkbox' })
+  const control = screen.getByTestId('control')
+  const hiddenControl = screen.getByTestId('hiddenControl')
 
   // click the first time, it's checked
   await userEvent.click(control)
@@ -72,9 +72,9 @@ test('Uncontrolled checkbox - should toggle', async () => {
 
 test('controlled checkbox - v-model works', async () => {
   const inlineAttrs = ':checked="checked"'
-  const { getByTestId } = renderComponent({ inlineAttrs, type: 'checkbox', data: () => ({ checked: true }) })
-  const control = getByTestId('control')
-  const hiddenControl = getByTestId('hiddenControl')
+  renderComponent({ inlineAttrs, type: 'checkbox', data: () => ({ checked: true }) })
+  const control = screen.getByTestId('control')
+  const hiddenControl = screen.getByTestId('hiddenControl')
 
   // click the first time, it's checked
   expect(hiddenControl).toBeChecked()
@@ -86,9 +86,9 @@ test('controlled checkbox - v-model works', async () => {
 
 test('controlled radio - v-model works', async () => {
   const inlineAttrs = ':checked="checked"'
-  const { getByTestId } = renderComponent({ inlineAttrs, type: 'radio', data: () => ({ checked: true }) })
-  const control = getByTestId('control')
-  const hiddenControl = getByTestId('hiddenControl')
+  renderComponent({ inlineAttrs, type: 'radio', data: () => ({ checked: true }) })
+  const control = screen.getByTestId('control')
+  const hiddenControl = screen.getByTestId('hiddenControl')
 
   // click the first time, it's checked
   expect(hiddenControl).toBeChecked()

From 3aa7a15add043850ee97aa9d9c1035bc1735875f Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Tue, 7 Jul 2020 00:07:17 +0300
Subject: [PATCH 28/57] test(drawer): refactor drawer tests

---
 .../src/CDrawer/tests/CDrawer.test.js         | 72 ++++++++++---------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/packages/chakra-ui-core/src/CDrawer/tests/CDrawer.test.js b/packages/chakra-ui-core/src/CDrawer/tests/CDrawer.test.js
index 01d397c8..0087ba68 100644
--- a/packages/chakra-ui-core/src/CDrawer/tests/CDrawer.test.js
+++ b/packages/chakra-ui-core/src/CDrawer/tests/CDrawer.test.js
@@ -1,6 +1,5 @@
-import Vue from 'vue'
 import { CInput, CButton, CDrawer, CDrawerBody, CDrawerFooter, CDrawerHeader, CDrawerOverlay, CDrawerContent, CDrawerCloseButton } from '../../'
-import { render, userEvent, fireEvent, waitMs } from '@/tests/test-utils'
+import { render, userEvent, fireEvent, waitMs, wait, screen } from '@/tests/test-utils'
 import { useId } from '@/packages/chakra-ui-core/src/utils'
 
 // mocks
@@ -49,7 +48,7 @@ it('should render correctly', async () => {
   const inlineAttrs = 'isOpen'
   const { asFragment } = renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
+  await waitMs() // render
 
   expect(asFragment(document.body.innerHTML)).toMatchSnapshot()
 })
@@ -57,10 +56,11 @@ it('should render correctly', async () => {
 test('clicking the close button calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = 'isOpen :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, methods: { close: onClose } })
+  renderComponent({ inlineAttrs, methods: { close: onClose } })
 
-  await Vue.nextTick()
-  userEvent.click(getByTestId('close-btn'))
+  await wait(() => {
+    userEvent.click(screen.getByTestId('close-btn'))
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
@@ -68,12 +68,12 @@ test('clicking the close button calls the onClose callback', async () => {
 test('pressing "esc" calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = ':isOpen="isOpen" :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
 
-  await Vue.nextTick()
-  const inputInside = getByTestId('inputInsideDrawer')
-
-  fireEvent.keyDown(inputInside, { key: 'Escape' })
+  await wait(async () => {
+    const inputInside = screen.getByTestId('inputInsideDrawer')
+    await fireEvent.keyDown(inputInside, { key: 'Escape' })
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
@@ -81,39 +81,41 @@ test('pressing "esc" calls the onClose callback', async () => {
 test('clicking overlay calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = ':isOpen="isOpen" :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
-
-  await Vue.nextTick()
-  const overlay = getByTestId('overlay')
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
 
-  userEvent.click(overlay)
+  await wait(async () => {
+    const overlay = screen.getByTestId('overlay')
+    await fireEvent.click(overlay)
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
 
 test('focuses the initial focus ref when opened - initialFocusRef', async () => {
   const inlineAttrs = 'isOpen :on-close="close" :initialFocusRef="()=>$refs.inputInsideDrawer"'
-  const { getByTestId } = renderComponent({ inlineAttrs })
+  renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
-  const inputInside = getByTestId('inputInsideDrawer')
+  await waitMs() // render
 
-  await waitMs()
-  expect(inputInside).toHaveFocus()
+  await wait(() => {
+    expect(screen.getByTestId('inputInsideDrawer')).toHaveFocus()
+  })
 })
 
 test('returns focus when closed - finalFocusRef', async () => {
   const inlineAttrs = ':isOpen="isOpen" :on-close="close" :finalFocusRef="$refs.inputOutsideDrawer"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }) })
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }) })
+
+  await waitMs() // render
 
-  await Vue.nextTick()
-  const inputOutside = getByTestId('inputOutsideDrawer')
-  const closeButton = getByTestId('close-btn')
+  const inputOutside = screen.getByTestId('inputOutsideDrawer')
+  const closeButton = screen.getByTestId('close-btn')
 
-  await userEvent.click(closeButton)
-  await waitMs()
+  await fireEvent.click(closeButton)
 
-  expect(inputOutside).toHaveFocus()
+  await wait(() => {
+    expect(inputOutside).toHaveFocus()
+  })
 })
 
 it('should have proper aria', async () => {
@@ -121,12 +123,12 @@ it('should have proper aria', async () => {
   const inlineAttrs = 'isOpen'
   renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
-  const dialog = document.querySelector('section')
-  await waitMs()
+  await wait(() => {
+    const dialog = screen.getByRole('dialog')
 
-  expect(dialog).toHaveAttribute('role', 'dialog')
-  expect(dialog).toHaveAttribute('aria-modal', 'true')
-  expect(dialog).toHaveAttribute('aria-labelledby', 'drawer-1-header')
-  expect(dialog).toHaveAttribute('aria-describedby', 'drawer-1-body')
+    expect(dialog).toHaveAttribute('role', 'dialog')
+    expect(dialog).toHaveAttribute('aria-modal', 'true')
+    expect(dialog).toHaveAttribute('aria-labelledby', 'drawer-1-header')
+    expect(dialog).toHaveAttribute('aria-describedby', 'drawer-1-body')
+  })
 })

From 470ec732f537316a6a93ea22deb769f2577b8fd0 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Tue, 7 Jul 2020 00:45:35 +0300
Subject: [PATCH 29/57] test(editable): refactor use screen

---
 .../src/CEditable/tests/CEditable.test.js     | 57 ++++++++++---------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/packages/chakra-ui-core/src/CEditable/tests/CEditable.test.js b/packages/chakra-ui-core/src/CEditable/tests/CEditable.test.js
index 0cd18dc7..550f653e 100644
--- a/packages/chakra-ui-core/src/CEditable/tests/CEditable.test.js
+++ b/packages/chakra-ui-core/src/CEditable/tests/CEditable.test.js
@@ -1,6 +1,6 @@
 import { CEditable, CEditableInput, CEditablePreview } from '../..'
 import { useId } from '../../utils'
-import { render, userEvent, fireEvent } from '@/tests/test-utils'
+import { render, userEvent, fireEvent, screen } from '@/tests/test-utils'
 
 // mocks
 jest.mock('@/packages/chakra-ui-core/src/utils/generators.js')
@@ -29,9 +29,9 @@ it('should render correctly', () => {
 it('should render correctly - input', async () => {
   useId.mockReturnValueOnce('1')
   const inlineAttrs = 'defaultValue="testing" '
-  const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
+  const { asFragment } = renderComponent({ inlineAttrs })
 
-  const preview = getByTestId('preview')
+  const preview = screen.getByTestId('preview')
   await userEvent.click(preview)
 
   expect(asFragment(document.body.innerHTML)).toMatchSnapshot()
@@ -44,82 +44,87 @@ it('uncontrolled: handles callbacks correctly', async () => {
   const onEdit = jest.fn()
 
   const inlineAttrs = '@edit="onEdit" @change="onChange" @cancel="onCancel" @submit="onSubmit" defaultValue="Hello "'
-  const { getByTestId } = renderComponent({ inlineAttrs, methods: { onChange, onCancel, onSubmit, onEdit } })
+  renderComponent({ inlineAttrs, methods: { onChange, onCancel, onSubmit, onEdit } })
 
-  const preview = getByTestId('preview')
+  const preview = screen.getByTestId('preview')
   await userEvent.click(preview)
 
-  const input = getByTestId('input')
+  const input = screen.getByTestId('input')
 
   // calls `onEdit` when preview is focused
-  fireEvent.focus(preview)
+  await fireEvent.focus(preview)
   expect(onEdit).toHaveBeenCalled()
 
   // calls `onChange` with input on change
-  userEvent.type(input, 'World')
+  await userEvent.type(input, 'World')
   expect(onChange).toHaveBeenCalledWith('Hello World')
 
   // calls `onCancel` with previous value when "esc" pressed
-  fireEvent.keyDown(input, { key: 'Escape' })
+  await fireEvent.keyDown(input, { key: 'Escape' })
   expect(onCancel).toHaveBeenCalledWith('Hello ')
 
   // calls `onSubmit` with previous value when "enter" pressed after cancelling
-  fireEvent.keyDown(input, { key: 'Enter' })
+  await fireEvent.keyDown(input, { key: 'Enter' })
   expect(onSubmit).toHaveBeenCalledWith('Hello ')
 
   // TODO: ⚠️ we should make controlledInput for vue
+  // we didn't change the v-model but input.value changes
   // remove this line, previous input value stays and next 2 expect fails
   input.value = 'Hello '
 
   // returns new value when submitting without cancelling
-  userEvent.type(input, 'World')
-  fireEvent.keyDown(input, { key: 'Enter' })
+  await userEvent.type(input, 'World')
+  await fireEvent.keyDown(input, { key: 'Enter' })
   expect(onSubmit).toHaveBeenCalledWith('Hello World')
 
   // cancelling now returns new value
-  fireEvent.keyDown(input, { key: 'Escape' })
+  await fireEvent.keyDown(input, { key: 'Escape' })
   expect(onCancel).toHaveBeenCalledWith('Hello ')
 })
 
 it('controlled: handles callbacks correctly', async () => {
+  useId.mockReturnValueOnce('1')
   const onChange = jest.fn()
   const onCancel = jest.fn()
   const onSubmit = jest.fn()
   const onEdit = jest.fn()
 
   const inlineAttrs = '@edit="onEdit" @change="onChange" @cancel="onCancel" @submit="onSubmit" defaultValue="Hello "'
-  const { getByTestId } = renderComponent({ inlineAttrs, methods: { onChange, onCancel, onSubmit, onEdit } })
+  renderComponent({ inlineAttrs, methods: { onChange, onCancel, onSubmit, onEdit } })
 
-  const preview = getByTestId('preview')
+  const preview = screen.getByTestId('preview')
 
-  await userEvent.click(preview)
-  const input = getByTestId('input')
+  await fireEvent.touch(preview)
+  const input = screen.getByTestId('input')
 
   // calls `onEdit` when preview is focused
-  fireEvent.focus(preview)
+  await fireEvent.focus(preview)
   expect(onEdit).toHaveBeenCalled()
 
   // calls `onSubmit` with `value`
-  fireEvent.keyDown(input, { key: 'Enter' })
+  await fireEvent.keyDown(input, { key: 'Enter' })
   expect(onSubmit).toHaveBeenCalledWith('Hello ')
 
   // calls `onCancel` with `value`
-  fireEvent.keyDown(input, { key: 'Escape' })
+  await fireEvent.keyDown(input, { key: 'Escape' })
   expect(onSubmit).toHaveBeenCalledWith('Hello ')
 
   // calls `onChange` with new input on change
-  userEvent.type(input, 'World')
+  // await fireEvent.update(input, 'Hello World') // changes all value
+  await userEvent.type(input, 'World') // continues typing with previous value
+
+  await fireEvent.keyDown(input, { key: 'Escape' })
   expect(onChange).toHaveBeenCalledWith('Hello World')
 })
 
 test('has the proper aria attributes', async () => {
   const inlineAttrs = 'defaultValue=""'
-  const { getByTestId } = renderComponent({ inlineAttrs })
+  renderComponent({ inlineAttrs })
 
-  const preview = getByTestId('preview')
+  const preview = screen.getByTestId('preview')
 
   await userEvent.click(preview)
-  const input = getByTestId('input')
+  const input = screen.getByTestId('input')
 
   // preview and input do not have aria-disabled when `CEditable` is not disabled
   expect(preview).not.toHaveAttribute('aria-disabled')
@@ -128,9 +133,9 @@ test('has the proper aria attributes', async () => {
 
 test('has the proper aria attributes when disabled', () => {
   const inlineAttrs = 'isDisabled defaultValue=""'
-  const { getByTestId } = renderComponent({ inlineAttrs })
+  renderComponent({ inlineAttrs })
 
-  const preview = getByTestId('preview')
+  const preview = screen.getByTestId('preview')
 
   // preview does not have aria-disabled when `CEditable` is not disabled
   expect(preview).toHaveAttribute('aria-disabled', 'true')

From 5edf979a452cf39e6a819904cacd07e784e53ce3 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Tue, 7 Jul 2020 00:46:34 +0300
Subject: [PATCH 30/57] test(flex): refactor use screen

---
 packages/chakra-ui-core/src/CFlex/tests/CFlex.test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/chakra-ui-core/src/CFlex/tests/CFlex.test.js b/packages/chakra-ui-core/src/CFlex/tests/CFlex.test.js
index 6dfb2495..e5abcb5b 100644
--- a/packages/chakra-ui-core/src/CFlex/tests/CFlex.test.js
+++ b/packages/chakra-ui-core/src/CFlex/tests/CFlex.test.js
@@ -1,5 +1,5 @@
 import CFlex from '..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -19,11 +19,11 @@ it('should render correctly', () => {
 
 it('should change styles', () => {
   const inlineAttrs = 'align="center" justify="center" direction="column"'
-  const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
+  const { asFragment } = renderComponent({ inlineAttrs })
 
   expect(asFragment()).toMatchSnapshot()
 
-  const flex = getByTestId('flex')
+  const flex = screen.getByTestId('flex')
   expect(flex).toHaveStyle('display: flex')
   expect(flex).toHaveStyle('align-items: center')
   expect(flex).toHaveStyle('justify-content: center')

From 70e9ae2c4760bde4ef0b77fc7af866507f19c788 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Tue, 7 Jul 2020 00:59:33 +0300
Subject: [PATCH 31/57] test(icon-button): refactor use screen

---
 .../src/CIconButton/tests/CIconButton.test.js             | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/chakra-ui-core/src/CIconButton/tests/CIconButton.test.js b/packages/chakra-ui-core/src/CIconButton/tests/CIconButton.test.js
index 53ea5187..ab963093 100644
--- a/packages/chakra-ui-core/src/CIconButton/tests/CIconButton.test.js
+++ b/packages/chakra-ui-core/src/CIconButton/tests/CIconButton.test.js
@@ -1,5 +1,5 @@
 import CIconButton from '..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -19,15 +19,15 @@ it('should render correctly', () => {
 
 it('should display spinner and hide the icon', () => {
   const inlineAttrs = 'isLoading'
-  const { container, getByTestId } = renderComponent({ inlineAttrs })
+  const { container } = renderComponent({ inlineAttrs })
 
-  const button = getByTestId('btn')
+  const button = screen.getByTestId('btn')
 
   expect(button).toHaveAttribute('disabled')
   expect(button).toHaveAttribute('aria-disabled', 'true')
 
   // TODO: find a way to easily grab the spinner element
-  // Maybe? expect(getByTestId('Spinner')).toBeInTheDocument()
+  // Maybe? expect(screen.getByTestId('Spinner')).toBeInTheDocument()
   expect(button).toHaveStyle('opacity: 0.4')
   expect(container.querySelector('button > div')).toBeInTheDocument()
 })

From 979bb01bfbef59eed68a27bdb1943c75fbe69c35 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Tue, 7 Jul 2020 01:03:39 +0300
Subject: [PATCH 32/57] test(image): add tests for Image component and fix
 onerror

---
 packages/chakra-ui-core/src/CImage/CImage.js  |  2 +-
 .../src/CImage/tests/CImage.test.js           | 47 +++++++++++++++++++
 .../tests/__snapshots__/CImage.test.js.snap   | 13 +++++
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 packages/chakra-ui-core/src/CImage/tests/CImage.test.js
 create mode 100644 packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap

diff --git a/packages/chakra-ui-core/src/CImage/CImage.js b/packages/chakra-ui-core/src/CImage/CImage.js
index 17c75186..934ac10b 100644
--- a/packages/chakra-ui-core/src/CImage/CImage.js
+++ b/packages/chakra-ui-core/src/CImage/CImage.js
@@ -55,7 +55,7 @@ const CImage = {
         this.$emit('load', event)
       }
 
-      image.onError = (event) => {
+      image.onerror = (event) => {
         this.hasLoaded = false
         this.$emit('error', event)
       }
diff --git a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
new file mode 100644
index 00000000..3b6feaff
--- /dev/null
+++ b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
@@ -0,0 +1,47 @@
+import { CImage } from '../..'
+import { render, wait, waitMs, screen } from '@/tests/test-utils'
+const LOAD_FAILURE_SRC = 'LOAD_FAILURE_SRC'
+const LOAD_SUCCESS_SRC = 'LOAD_SUCCESS_SRC'
+
+beforeAll(() => {
+  process.browser = true // Mock process.browser for CAvatar created()
+})
+
+beforeAll(() => {
+  // Mock Img
+  // eslint-disable-next-line accessor-pairs
+  Object.defineProperty(global.Image.prototype, 'src', {
+    set (src) {
+      if (src === LOAD_FAILURE_SRC) {
+        setTimeout(() => this.onerror(new Error('mocked error')))
+      } else if (src === LOAD_SUCCESS_SRC) {
+        setTimeout(() => this.onload())
+      }
+    }
+  })
+})
+
+const renderComponent = (props) => {
+  const base = {
+    components: { CImage },
+    template: '<CImage alt="Mesut Koca" data-testid="avatar" src="LOAD_SUCCESS_SRC"></CImage>',
+    ...props
+  }
+  return render(base)
+}
+
+it('should render correctly', async () => {
+  const { asFragment } = renderComponent()
+
+  await waitMs() // wait for img.onsuccess to be called.
+
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('fallback src works', async () => {
+  renderComponent({ template: '<CImage alt="Mesut Koca" src="LOAD_FAILURE_SRC" fallback-src="LOAD_FALLBACK_SRC" />' })
+
+  await wait(() => {
+    expect(screen.getByAltText(/Mesut Koca/i)).toHaveAttribute('src', 'LOAD_FALLBACK_SRC')
+  })
+})
diff --git a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
new file mode 100644
index 00000000..23f8c25b
--- /dev/null
+++ b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocumentFragment>
+  <img
+    alt="Mesut Koca"
+    class="css-fzcsno"
+    data-chakra-component="CImage"
+    data-testid="avatar"
+    src="LOAD_SUCCESS_SRC"
+  />
+</DocumentFragment>
+`;

From e988316e121ceae0c14052b728b298c4be4ec7b2 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Tue, 7 Jul 2020 01:24:22 +0300
Subject: [PATCH 33/57] test(input): add tests for input component and fix
 readonly

---
 packages/chakra-ui-core/src/CInput/CInput.js  |  2 +-
 .../src/CInput/tests/CInput.test.js           | 40 +++++++++++++++++++
 .../tests/__snapshots__/CInput.test.js.snap   | 12 ++++++
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 packages/chakra-ui-core/src/CInput/tests/CInput.test.js
 create mode 100644 packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap

diff --git a/packages/chakra-ui-core/src/CInput/CInput.js b/packages/chakra-ui-core/src/CInput/CInput.js
index 24efb167..c1f27eab 100644
--- a/packages/chakra-ui-core/src/CInput/CInput.js
+++ b/packages/chakra-ui-core/src/CInput/CInput.js
@@ -90,7 +90,7 @@ const CInput = {
       },
       attrs: {
         'aria-readonly': this.isReadOnly,
-        'read-only': this.formControl.isReadOnly,
+        readonly: this.formControl.isReadOnly,
         disabled: this.formControl.isDisabled,
         'aria-disabled': this.formControl.isDisabled,
         'aria-invalid': this.formControl.isInvalid,
diff --git a/packages/chakra-ui-core/src/CInput/tests/CInput.test.js b/packages/chakra-ui-core/src/CInput/tests/CInput.test.js
new file mode 100644
index 00000000..31295c19
--- /dev/null
+++ b/packages/chakra-ui-core/src/CInput/tests/CInput.test.js
@@ -0,0 +1,40 @@
+import { CInput } from '../..'
+import { render, screen, userEvent } from '@/tests/test-utils'
+
+const renderComponent = (props) => {
+  const inlineAttrs = (props && props.inlineAttrs) || ''
+  const base = {
+    data: () => ({ text: 'hello' }),
+    components: { CInput },
+    template: `<CInput data-testid="input" placeholder="input placeholder" v-model="text" ${inlineAttrs}/>`,
+    ...props
+  }
+  return render(base)
+}
+
+test('should render correctly', () => {
+  const { asFragment } = renderComponent()
+  expect(asFragment()).toMatchSnapshot()
+})
+
+test('v-model works', () => {
+  renderComponent()
+  const input = screen.getByTestId('input')
+
+  userEvent.type(input, ' world')
+  expect(input).toHaveValue('hello world')
+})
+
+test('readonly input renders correctly', () => {
+  renderComponent({ inlineAttrs: 'isReadOnly' })
+  const input = screen.getByTestId('input')
+
+  expect(input).toHaveAttribute('readonly')
+})
+
+test('disabled input renders correctly', () => {
+  renderComponent({ inlineAttrs: 'isDisabled' })
+  const input = screen.getByTestId('input')
+
+  expect(input).toHaveAttribute('disabled')
+})
diff --git a/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap b/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap
new file mode 100644
index 00000000..bd670d80
--- /dev/null
+++ b/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocumentFragment>
+  <input
+    class="css-fzcsno css-1l17jza"
+    data-chakra-component="CInput"
+    data-testid="input"
+    placeholder="input placeholder"
+  />
+</DocumentFragment>
+`;

From efd6965be0b873e58a53002e1ff0363bcddf3224 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Wed, 8 Jul 2020 00:50:51 +0300
Subject: [PATCH 34/57] test(list): add tests for List component

---
 .../src/CList/tests/CList.test.js             | 24 +++++++++
 .../tests/__snapshots__/CList.test.js.snap    | 51 +++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 packages/chakra-ui-core/src/CList/tests/CList.test.js
 create mode 100644 packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap

diff --git a/packages/chakra-ui-core/src/CList/tests/CList.test.js b/packages/chakra-ui-core/src/CList/tests/CList.test.js
new file mode 100644
index 00000000..b8b2cfa5
--- /dev/null
+++ b/packages/chakra-ui-core/src/CList/tests/CList.test.js
@@ -0,0 +1,24 @@
+import { CList, CListItem, CListIcon } from '../..'
+import { render } from '@/tests/test-utils'
+
+const renderComponent = (props) => {
+  const base = {
+    components: { CList, CListItem, CListIcon },
+    template: `
+    <CList spacing="3">
+      <CListItem>
+        <CListIcon icon="check-circle" color="green.500" />Lorem ipsum dolor sit amet, consectetur adipisicing elit
+      </CListItem>
+      <CListItem>
+        <CListIcon icon="check-circle" color="green.500" />Assumenda, quia temporibus eveniet a libero incidunt suscipit
+      </CListItem>
+    </CList>`,
+    ...props
+  }
+  return render(base)
+}
+
+it('should render correctly', () => {
+  const { asFragment } = renderComponent()
+  expect(asFragment()).toMatchSnapshot()
+})
diff --git a/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap b/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap
new file mode 100644
index 00000000..4b7e4ce6
--- /dev/null
+++ b/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocumentFragment>
+  <ul
+    class="css-kzncz7"
+    data-chakra-component="CList"
+  >
+    <li
+      class="css-fzcsno css-1u7dvmo"
+      data-chakra-component="CListItem"
+    >
+      <svg
+        class="css-4phyzl css-y3asau"
+        data-chakra-component="CListIcon"
+        role="presentation"
+        viewBox="0 0 24 24"
+      >
+        
+      
+        <path
+          d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+          fill="currentColor"
+        />
+      </svg>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+      
+    </li>
+    <li
+      class="css-fzcsno css-fzcsno"
+      data-chakra-component="CListItem"
+    >
+      <svg
+        class="css-4phyzl css-y3asau"
+        data-chakra-component="CListIcon"
+        role="presentation"
+        viewBox="0 0 24 24"
+      >
+        
+      
+        <path
+          d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+          fill="currentColor"
+        />
+      </svg>
+      Assumenda, quia temporibus eveniet a libero incidunt suscipit
+      
+    </li>
+  </ul>
+</DocumentFragment>
+`;

From 961ce9f101daf1216cd7435ae8158fcef0c1e284 Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Sun, 12 Jul 2020 18:48:29 +0800
Subject: [PATCH 35/57] chore: merge and resolve all tests form tests/next

---
 .../src/CAccordion/tests/CAccordion.test.js            |  4 ++--
 .../src/CAspectRatioBox/tests/CAspectRatioBox.test.js  |  6 +++---
 .../CAvatar/tests/__snapshots__/CAvatar.test.js.snap   |  4 ++++
 packages/chakra-ui-core/src/CImage/CImage.js           |  7 ++++---
 packages/chakra-ui-core/src/CImage/CImage.stories.js   |  2 +-
 .../src/CImage/tests/__snapshots__/CImage.test.js.snap |  2 +-
 .../src/CInput/tests/__snapshots__/CInput.test.js.snap |  2 +-
 .../src/CList/tests/__snapshots__/CList.test.js.snap   | 10 +++++-----
 8 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js b/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
index 68126a71..ecb002ff 100644
--- a/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
+++ b/packages/chakra-ui-core/src/CAccordion/tests/CAccordion.test.js
@@ -97,7 +97,7 @@ it('only one accordion can be visible + is togglable', async () => {
   })
 
   await userEvent.click(screen.getByText('First section'))
-  expect(screen.getByText('First section')).not.toHaveAttribute('aria-expanded') // false or null?
+  expect(screen.getByText('First section')).toHaveAttribute('aria-expanded', 'false')
 
   await userEvent.click(screen.getByText('First section'))
   expect(screen.getByText('First section')).toHaveAttribute('aria-expanded', 'true')
@@ -123,7 +123,7 @@ it('multiple accordions can be opened + is togglable', async () => {
   expect(screen.getByText('Second section')).toHaveAttribute('aria-expanded', 'true')
 
   await userEvent.click(screen.getByText('First section'))
-  expect(screen.getByText('First section')).not.toHaveAttribute('aria-expanded')
+  expect(screen.getByText('First section')).toHaveAttribute('aria-expanded', 'false')
 })
 
 // it has the proper aria attributes
diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
index 01cc167e..fb3fd0c6 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
@@ -14,12 +14,12 @@ const renderComponent = (props) => {
   return render(base)
 }
 
-it('should render correctly', () => {
+xit('should render correctly', () => {
   const inlineAttrs = ':ratio="1"'
   const { asFragment } = renderComponent({ inlineAttrs })
   expect(asFragment()).toMatchSnapshot()
 
-  const [, emotionClassName] = [...screen.getByTestId('aspectRatioBox').classList]
+  const [emotionClassName] = [...screen.getByTestId('aspectRatioBox').classList]
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
   expect(pseudoStyles).toContain(`
@@ -33,7 +33,7 @@ it('should have correct styles', () => {
   const image = screen.getByTestId('image')
   const aspectRatioBox = screen.getByTestId('aspectRatioBox')
 
-  const [, emotionClassName] = [...aspectRatioBox.classList] // second className has the pseudo styles
+  const [emotionClassName] = [...aspectRatioBox.classList] // second className has the pseudo styles
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
   expect(pseudoStyles).toContain(`
diff --git a/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap b/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
index 429af257..8835e329 100644
--- a/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
+++ b/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
@@ -20,6 +20,10 @@ exports[`Avatar with AvatarBadge renders correctly 1`] = `
 </DocumentFragment>
 `;
 
+exports[`renders a name avatar if no src 1`] = `<DocumentFragment />`;
+
+exports[`renders an image 1`] = `<DocumentFragment />`;
+
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
diff --git a/packages/chakra-ui-core/src/CImage/CImage.js b/packages/chakra-ui-core/src/CImage/CImage.js
index 20ee9b16..11bac886 100644
--- a/packages/chakra-ui-core/src/CImage/CImage.js
+++ b/packages/chakra-ui-core/src/CImage/CImage.js
@@ -77,12 +77,13 @@ const CImage = {
       h('img', {
         class: this.className,
         domProps: {
-          width: this.htmlWidth,
-          height: this.htmlHeight
+          ...imageProps
         },
         attrs: {
           ...imageProps,
-          ...this.computedAttrs
+          ...this.computedAttrs,
+          width: this.htmlWidth,
+          height: this.htmlHeight
         }
       })
     ])
diff --git a/packages/chakra-ui-core/src/CImage/CImage.stories.js b/packages/chakra-ui-core/src/CImage/CImage.stories.js
index 139faffd..d4130a74 100644
--- a/packages/chakra-ui-core/src/CImage/CImage.stories.js
+++ b/packages/chakra-ui-core/src/CImage/CImage.stories.js
@@ -8,7 +8,7 @@ storiesOf('UI | Image', module)
       <CImage
         shadow="sm"
         htmlWidth="100px"
-        src="https://avatars3.githubusercontent.com/u/37928?s=52&v=4"
+        src="https://bit.ly/chakra-jonathan-bakebwa"
       />
     `
   }))
diff --git a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
index 23f8c25b..0b179b32 100644
--- a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
+++ b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
@@ -4,7 +4,7 @@ exports[`should render correctly 1`] = `
 <DocumentFragment>
   <img
     alt="Mesut Koca"
-    class="css-fzcsno"
+    class="css-0"
     data-chakra-component="CImage"
     data-testid="avatar"
     src="LOAD_SUCCESS_SRC"
diff --git a/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap b/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap
index bd670d80..ffb8b5dd 100644
--- a/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap
+++ b/packages/chakra-ui-core/src/CInput/tests/__snapshots__/CInput.test.js.snap
@@ -3,7 +3,7 @@
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <input
-    class="css-fzcsno css-1l17jza"
+    class="css-18expoa"
     data-chakra-component="CInput"
     data-testid="input"
     placeholder="input placeholder"
diff --git a/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap b/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap
index 4b7e4ce6..5bc9ded4 100644
--- a/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap
+++ b/packages/chakra-ui-core/src/CList/tests/__snapshots__/CList.test.js.snap
@@ -3,15 +3,15 @@
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <ul
-    class="css-kzncz7"
+    class="css-19ndbdu"
     data-chakra-component="CList"
   >
     <li
-      class="css-fzcsno css-1u7dvmo"
+      class="css-82qlwu"
       data-chakra-component="CListItem"
     >
       <svg
-        class="css-4phyzl css-y3asau"
+        class="css-12j51pv css-3vopgu css-154al8w"
         data-chakra-component="CListIcon"
         role="presentation"
         viewBox="0 0 24 24"
@@ -27,11 +27,11 @@ exports[`should render correctly 1`] = `
       
     </li>
     <li
-      class="css-fzcsno css-fzcsno"
+      class="css-0"
       data-chakra-component="CListItem"
     >
       <svg
-        class="css-4phyzl css-y3asau"
+        class="css-12j51pv css-3vopgu css-154al8w"
         data-chakra-component="CListIcon"
         role="presentation"
         viewBox="0 0 24 24"

From 511f5ae7faf3a0621507d02840785746ad81d575 Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Sun, 12 Jul 2020 18:53:50 +0800
Subject: [PATCH 36/57] chore: added skipped test

---
 .../src/CAspectRatioBox/tests/CAspectRatioBox.test.js           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
index fb3fd0c6..2e8752c9 100644
--- a/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
+++ b/packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js
@@ -14,7 +14,7 @@ const renderComponent = (props) => {
   return render(base)
 }
 
-xit('should render correctly', () => {
+it('should render correctly', () => {
   const inlineAttrs = ':ratio="1"'
   const { asFragment } = renderComponent({ inlineAttrs })
   expect(asFragment()).toMatchSnapshot()

From 87b0afec53c6a8a39f099f0729e66273140ba912 Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Sun, 12 Jul 2020 19:12:33 +0800
Subject: [PATCH 37/57] test(image+avatar+avatargroup): mock onload
 implementation

---
 packages/chakra-ui-core/src/CAvatar/CAvatar.js            | 3 ++-
 packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js | 3 +++
 .../src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap  | 8 ++++----
 .../src/CAvatarGroup/tests/CAvatarGroup.test.js           | 3 +++
 .../tests/__snapshots__/CAvatarGroup.test.js.snap         | 4 ++--
 packages/chakra-ui-core/src/CImage/CImage.js              | 6 +++---
 packages/chakra-ui-core/src/CImage/tests/CImage.test.js   | 3 +++
 .../src/CImage/tests/__snapshots__/CImage.test.js.snap    | 2 ++
 8 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAvatar/CAvatar.js b/packages/chakra-ui-core/src/CAvatar/CAvatar.js
index 577a30a2..ac992f7a 100644
--- a/packages/chakra-ui-core/src/CAvatar/CAvatar.js
+++ b/packages/chakra-ui-core/src/CAvatar/CAvatar.js
@@ -249,7 +249,8 @@ const CAvatar = {
             h: '100%',
             rounded: 'full',
             objectFit: 'cover',
-            alt: this.name
+            alt: this.name,
+            src: this.src
           },
           domProps: {
             src: this.src
diff --git a/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js b/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
index f29229c1..6e4c25b7 100644
--- a/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
+++ b/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
@@ -12,6 +12,9 @@ beforeAll(() => {
   // eslint-disable-next-line accessor-pairs
   Object.defineProperty(global.Image.prototype, 'src', {
     set (src) {
+      // Mock the Image.prototype.onload/onerror implementations
+      this.onload = jest.fn().mockImplementation(fn => fn)
+      this.onerror = jest.fn().mockImplementation(err => err)
       if (src === LOAD_FAILURE_SRC) {
         setTimeout(() => this.onerror(new Error('mocked error')))
       } else if (src === LOAD_SUCCESS_SRC) {
diff --git a/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap b/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
index 8835e329..6564f7bc 100644
--- a/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
+++ b/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
@@ -8,12 +8,12 @@ exports[`Avatar with AvatarBadge renders correctly 1`] = `
   >
     <img
       alt="Mesut Koca"
-      class="css-58rle2"
+      class="css-6qjm3j"
       data-chakra-component="CBox"
       src="LOAD_SUCCESS_SRC"
     />
     <div
-      class="css-mwkd9l"
+      class="css-bruuz9"
       data-chakra-component="CAvatarBadge"
     />
   </div>
@@ -27,13 +27,13 @@ exports[`renders an image 1`] = `<DocumentFragment />`;
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-2sxxyf"
+    class="css-1sovlky"
     data-chakra-component="CAvatar"
     data-testid="avatar"
   >
     <img
       alt="Mesut Koca"
-      class="css-58rle2"
+      class="css-6qjm3j"
       data-chakra-component="CBox"
       src="LOAD_SUCCESS_SRC"
     />
diff --git a/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js b/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
index 94512cce..be8d069f 100644
--- a/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
+++ b/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
@@ -13,6 +13,9 @@ beforeAll(() => {
   // eslint-disable-next-line accessor-pairs
   Object.defineProperty(global.Image.prototype, 'src', {
     set (src) {
+      // Mock the Image.prototype.onload/onerror implementations
+      this.onload = jest.fn().mockImplementation(fn => fn)
+      this.onerror = jest.fn().mockImplementation(err => err)
       if (src === LOAD_FAILURE_SRC) {
         setTimeout(() => this.onerror(new Error('mocked error')))
       } else if (src === LOAD_SUCCESS_SRC) {
diff --git a/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap b/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap
index c704e76a..003b3ddc 100644
--- a/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap
+++ b/packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap
@@ -54,7 +54,7 @@ exports[`should render correctly 1`] = `
     >
       <img
         alt="Mesut Koca"
-        class="css-58rle2"
+        class="css-6qjm3j"
         data-chakra-component="CBox"
         src="LOAD_SUCCESS_SRC"
       />
@@ -65,7 +65,7 @@ exports[`should render correctly 1`] = `
     >
       <img
         alt="Evan You"
-        class="css-58rle2"
+        class="css-6qjm3j"
         data-chakra-component="CBox"
         src="LOAD_SUCCESS_SRC"
       />
diff --git a/packages/chakra-ui-core/src/CImage/CImage.js b/packages/chakra-ui-core/src/CImage/CImage.js
index 11bac886..1cb7e6a5 100644
--- a/packages/chakra-ui-core/src/CImage/CImage.js
+++ b/packages/chakra-ui-core/src/CImage/CImage.js
@@ -76,9 +76,9 @@ const CImage = {
     return h(CNoSsr, [
       h('img', {
         class: this.className,
-        domProps: {
-          ...imageProps
-        },
+        // domProps: {
+        //   ...imageProps
+        // },
         attrs: {
           ...imageProps,
           ...this.computedAttrs,
diff --git a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
index 3b6feaff..f52ed557 100644
--- a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
+++ b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
@@ -12,6 +12,9 @@ beforeAll(() => {
   // eslint-disable-next-line accessor-pairs
   Object.defineProperty(global.Image.prototype, 'src', {
     set (src) {
+      // Mock the Image.prototype.onload/onerror implementations
+      this.onload = jest.fn().mockImplementation(fn => fn)
+      this.onerror = jest.fn().mockImplementation(err => err)
       if (src === LOAD_FAILURE_SRC) {
         setTimeout(() => this.onerror(new Error('mocked error')))
       } else if (src === LOAD_SUCCESS_SRC) {
diff --git a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
index 0b179b32..a40581cd 100644
--- a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
+++ b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`fallback src works 1`] = `<DocumentFragment />`;
+
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <img

From 22efab5c826e0153375493ed7d223656065695e6 Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Sun, 12 Jul 2020 19:16:21 +0800
Subject: [PATCH 38/57] chore: removed unused comments

---
 packages/chakra-ui-core/src/CImage/CImage.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/chakra-ui-core/src/CImage/CImage.js b/packages/chakra-ui-core/src/CImage/CImage.js
index 1cb7e6a5..d1f46bb9 100644
--- a/packages/chakra-ui-core/src/CImage/CImage.js
+++ b/packages/chakra-ui-core/src/CImage/CImage.js
@@ -76,9 +76,6 @@ const CImage = {
     return h(CNoSsr, [
       h('img', {
         class: this.className,
-        // domProps: {
-        //   ...imageProps
-        // },
         attrs: {
           ...imageProps,
           ...this.computedAttrs,

From abb48cd789955165f9ba6fd18477466d09fd3cab Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Sun, 12 Jul 2020 19:23:12 +0800
Subject: [PATCH 39/57] test: removed obsolete snapshots

---
 .../src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap      | 4 ----
 .../src/CImage/tests/__snapshots__/CImage.test.js.snap        | 2 --
 2 files changed, 6 deletions(-)

diff --git a/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap b/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
index 6564f7bc..474ff9c9 100644
--- a/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
+++ b/packages/chakra-ui-core/src/CAvatar/tests/__snapshots__/CAvatar.test.js.snap
@@ -20,10 +20,6 @@ exports[`Avatar with AvatarBadge renders correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`renders a name avatar if no src 1`] = `<DocumentFragment />`;
-
-exports[`renders an image 1`] = `<DocumentFragment />`;
-
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
diff --git a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
index a40581cd..0b179b32 100644
--- a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
+++ b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
@@ -1,7 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`fallback src works 1`] = `<DocumentFragment />`;
-
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <img

From 1cf9673e98099d44c12a099af5738cd8ee255e95 Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Sun, 12 Jul 2020 19:50:51 +0800
Subject: [PATCH 40/57] ci: added workflow for other prs

---
 .github/workflows/{nodejs.yml => release.yml} |  0
 .github/workflows/test.yml                    | 34 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 rename .github/workflows/{nodejs.yml => release.yml} (100%)
 create mode 100644 .github/workflows/test.yml

diff --git a/.github/workflows/nodejs.yml b/.github/workflows/release.yml
similarity index 100%
rename from .github/workflows/nodejs.yml
rename to .github/workflows/release.yml
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 00000000..7fda49f8
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,34 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Build & Test Components
+
+on:
+  # Trigger the workflow on push or pull request,
+  # but only for the master branch
+  push:
+    branches-ignore:
+      - master
+  pull_request:
+    branches-ignore:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: yarn
+    - run: yarn bootstrap
+    - run: yarn lint
+    - run: yarn build --if-present
+    - run: yarn test
+      env:
+        CI: true
\ No newline at end of file

From 7a488efb78a34b39d6cb765051df1c39f733d4a4 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:09:03 +0300
Subject: [PATCH 41/57] test(button-group): refactor use screen

---
 .../src/CButtonGroup/tests/CButtonGroup.test.js      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js b/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
index 34a7d625..41056950 100644
--- a/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
+++ b/packages/chakra-ui-core/src/CButtonGroup/tests/CButtonGroup.test.js
@@ -1,5 +1,5 @@
 import { CButton, CButtonGroup } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -23,7 +23,7 @@ it('should render correctly', () => {
 })
 
 it('should attach buttons when `is-attached` is passed', () => {
-  const { asFragment, getByText } = renderComponent({
+  const { asFragment } = renderComponent({
     template: `
     <CButtonGroup isAttached>
       <CButton>Button1</CButton>
@@ -31,13 +31,13 @@ it('should attach buttons when `is-attached` is passed', () => {
     </CButtonGroup>`
   })
 
-  const button = getByText('Button1')
+  const button = screen.getByText('Button1')
   expect(button).toHaveStyle('border-top-right-radius: 0; border-bottom-right-radius: 0;')
   expect(asFragment()).toMatchSnapshot()
 })
 
 it('should display children', () => {
-  const { getByText } = renderComponent()
-  expect(getByText('Button1')).toBeInTheDocument()
-  expect(getByText('Button2')).toBeInTheDocument()
+  renderComponent()
+  expect(screen.getByText('Button1')).toBeInTheDocument()
+  expect(screen.getByText('Button2')).toBeInTheDocument()
 })

From 24033315b2c214d5d3c920c0c3b885e168131101 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:10:11 +0300
Subject: [PATCH 42/57] test(divider): refactor use screen

---
 packages/chakra-ui-core/src/CDivider/tests/CDivider.test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/chakra-ui-core/src/CDivider/tests/CDivider.test.js b/packages/chakra-ui-core/src/CDivider/tests/CDivider.test.js
index 20c20fcc..b8072b88 100644
--- a/packages/chakra-ui-core/src/CDivider/tests/CDivider.test.js
+++ b/packages/chakra-ui-core/src/CDivider/tests/CDivider.test.js
@@ -1,5 +1,5 @@
 import CDivider from '..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -26,9 +26,9 @@ it('should change orientation', () => {
 
 it('should have corresponding aria-orientation attribute', () => {
   const inlineAttrs = 'orientation="horizontal"'
-  const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
+  const { asFragment } = renderComponent({ inlineAttrs })
 
-  const divider = getByTestId('divider')
+  const divider = screen.getByTestId('divider')
   expect(divider).toHaveAttribute('aria-orientation', 'horizontal')
   expect(asFragment()).toMatchSnapshot()
 })

From 92d5db7b44868c4ad0d4b344b0c647bd553c80e8 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:11:10 +0300
Subject: [PATCH 43/57] test(form-control): refactor use screen

---
 .../src/CFormControl/tests/CFormControl.test.js             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/chakra-ui-core/src/CFormControl/tests/CFormControl.test.js b/packages/chakra-ui-core/src/CFormControl/tests/CFormControl.test.js
index ed924c55..de1977f7 100644
--- a/packages/chakra-ui-core/src/CFormControl/tests/CFormControl.test.js
+++ b/packages/chakra-ui-core/src/CFormControl/tests/CFormControl.test.js
@@ -1,5 +1,5 @@
 import { CFormControl, CInput, CFormLabel } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -22,7 +22,7 @@ it('should render correctly', () => {
 })
 
 it('should provide formcontrol state via scoped slot', () => {
-  const { getByTestId } = renderComponent({
+  renderComponent({
     template: `
     <CFormControl isRequired isReadOnly #default="props">
       <pre data-testid="pre">
@@ -31,7 +31,7 @@ it('should provide formcontrol state via scoped slot', () => {
     </CFormControl>`
   })
 
-  const pre = getByTestId('pre')
+  const pre = screen.getByTestId('pre')
   expect(JSON.parse(pre.textContent, null, 2)).toEqual({
     isInvalid: false,
     isRequired: true,

From 1ca10fb923e5124474599e553bf6e8fcad5a5795 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:21:48 +0300
Subject: [PATCH 44/57] test(modal): refactor use screen

---
 .../src/CModal/tests/CModal.test.js           | 72 ++++++++++---------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/packages/chakra-ui-core/src/CModal/tests/CModal.test.js b/packages/chakra-ui-core/src/CModal/tests/CModal.test.js
index 852ac0e9..7be28adb 100644
--- a/packages/chakra-ui-core/src/CModal/tests/CModal.test.js
+++ b/packages/chakra-ui-core/src/CModal/tests/CModal.test.js
@@ -1,6 +1,5 @@
-import Vue from 'vue'
 import { CInput, CButton, CModal, CModalOverlay, CModalContent, CModalHeader, CModalFooter, CModalBody, CModalCloseButton } from '../..'
-import { render, userEvent, fireEvent, waitMs } from '@/tests/test-utils'
+import { render, userEvent, fireEvent, waitMs, screen, wait } from '@/tests/test-utils'
 import { useId, wrapEvent } from '@/packages/chakra-ui-core/src/utils'
 
 // mocks
@@ -53,7 +52,7 @@ it('should render correctly', async () => {
   const inlineAttrs = 'isOpen'
   const { asFragment } = renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
+  await waitMs() // render
 
   expect(asFragment(document.body.innerHTML)).toMatchSnapshot()
 })
@@ -61,10 +60,11 @@ it('should render correctly', async () => {
 test('clicking the close button calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = 'isOpen :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, methods: { close: onClose } })
+  renderComponent({ inlineAttrs, methods: { close: onClose } })
 
-  await Vue.nextTick()
-  userEvent.click(getByTestId('close-btn'))
+  await wait(() => {
+    userEvent.click(screen.getByTestId('close-btn'))
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
@@ -72,12 +72,12 @@ test('clicking the close button calls the onClose callback', async () => {
 test('pressing "esc" calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = ':isOpen="isOpen" :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
 
-  await Vue.nextTick()
-  const inputInside = getByTestId('inputInsideModal')
-
-  fireEvent.keyDown(inputInside, { key: 'Escape' })
+  await wait(async () => {
+    const inputInside = screen.getByTestId('inputInsideModal')
+    await fireEvent.keyDown(inputInside, { key: 'Escape' })
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
@@ -85,39 +85,41 @@ test('pressing "esc" calls the onClose callback', async () => {
 test('clicking overlay calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = ':isOpen="isOpen" :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
-
-  await Vue.nextTick()
-  const overlay = getByTestId('overlay')
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
 
-  userEvent.click(overlay)
+  await wait(async () => {
+    const overlay = screen.getByTestId('overlay')
+    await fireEvent.click(overlay.parentElement)
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
 
 test('focuses the initial focus ref when opened - initialFocusRef', async () => {
   const inlineAttrs = 'isOpen :on-close="close" :initialFocusRef="()=>$refs.inputInsideModal"'
-  const { getByTestId } = renderComponent({ inlineAttrs })
+  renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
-  const inputInside = getByTestId('inputInsideModal')
+  await waitMs() // render
 
-  await waitMs()
-  expect(inputInside).toHaveFocus()
+  await wait(() => {
+    expect(screen.getByTestId('inputInsideModal')).toHaveFocus()
+  })
 })
 
 test('returns focus when closed - finalFocusRef', async () => {
   const inlineAttrs = ':isOpen="isOpen" :on-close="close" :finalFocusRef="$refs.inputOutsideModal"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }) })
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }) })
+
+  await waitMs() // render
 
-  await Vue.nextTick()
-  const inputOutside = getByTestId('inputOutsideModal')
-  const closeButton = getByTestId('close-btn')
+  const inputOutside = screen.getByTestId('inputOutsideModal')
+  const closeButton = screen.getByTestId('close-btn')
 
-  await userEvent.click(closeButton)
-  await waitMs()
+  await fireEvent.click(closeButton)
 
-  expect(inputOutside).toHaveFocus()
+  await wait(() => {
+    expect(inputOutside).toHaveFocus()
+  })
 })
 
 it('should have proper aria', async () => {
@@ -125,12 +127,12 @@ it('should have proper aria', async () => {
   const inlineAttrs = 'isOpen'
   renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
-  const dialog = document.querySelector('section')
-  await waitMs()
+  await wait(() => {
+    const dialog = screen.getByRole('dialog')
 
-  expect(dialog).toHaveAttribute('role', 'dialog')
-  expect(dialog).toHaveAttribute('aria-modal', 'true')
-  expect(dialog).toHaveAttribute('aria-labelledby', 'modal-1-header')
-  expect(dialog).toHaveAttribute('aria-describedby', 'modal-1-body')
+    expect(dialog).toHaveAttribute('role', 'dialog')
+    expect(dialog).toHaveAttribute('aria-modal', 'true')
+    expect(dialog).toHaveAttribute('aria-labelledby', 'modal-1-header')
+    expect(dialog).toHaveAttribute('aria-describedby', 'modal-1-body')
+  })
 })

From 1dd4c68a2d371d1e3ae43107193cf66d20a71bbe Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:24:45 +0300
Subject: [PATCH 45/57] chore: fix eslint error no named exports

---
 packages/chakra-ui-core/src/CBox/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/chakra-ui-core/src/CBox/index.js b/packages/chakra-ui-core/src/CBox/index.js
index 02a022aa..7eb01a36 100644
--- a/packages/chakra-ui-core/src/CBox/index.js
+++ b/packages/chakra-ui-core/src/CBox/index.js
@@ -1,3 +1,2 @@
 import CBox from './CBox'
 export default CBox
-export * from './CBox'

From 4ad841f846a687e4166aa9cf6894a945fdfb4e9d Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:29:55 +0300
Subject: [PATCH 46/57] test(progress): refactor use screen

---
 .../src/CProgress/tests/CProgress.test.js      | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/chakra-ui-core/src/CProgress/tests/CProgress.test.js b/packages/chakra-ui-core/src/CProgress/tests/CProgress.test.js
index 5a075c94..20c2efb8 100644
--- a/packages/chakra-ui-core/src/CProgress/tests/CProgress.test.js
+++ b/packages/chakra-ui-core/src/CProgress/tests/CProgress.test.js
@@ -1,5 +1,5 @@
 import { CProgress, CProgressLabel } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -19,31 +19,31 @@ it('should render correctly', () => {
 })
 
 it('should have the correct width', () => {
-  const { queryByRole } = renderComponent()
+  renderComponent()
 
-  expect(queryByRole('progressbar')).toHaveStyle('width: 40%')
+  expect(screen.queryByRole('progressbar')).toHaveStyle('width: 40%')
 })
 
 it('should display a label', () => {
-  const { queryByText } = renderComponent({
+  renderComponent({
     template: `
   <CProgress :value="40">
     <CProgressLabel>Label</CProgressLabel>
   </CProgress>`
   })
 
-  expect(queryByText('Label')).toBeInTheDocument()
+  expect(screen.queryByText('Label')).toBeInTheDocument()
 })
 
 test('a11y - progress has a "role" set to "progressbar"', () => {
-  const { queryByRole } = renderComponent()
-  expect(queryByRole('progressbar')).toBeInTheDocument()
+  renderComponent()
+  expect(screen.queryByRole('progressbar')).toBeInTheDocument()
 })
 
 test('a11y - progress has a "aria-valuenow" set to the percentage completion value', () => {
-  const { queryByRole } = renderComponent()
+  renderComponent()
 
-  expect(queryByRole('progressbar')).toHaveAttribute(
+  expect(screen.queryByRole('progressbar')).toHaveAttribute(
     'aria-valuenow',
     '40'
   )

From b58b5f738eb9c347bb7113110975bde8e3ab12c3 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:31:08 +0300
Subject: [PATCH 47/57] test(pseudo-box): refactor use screen

---
 .../src/CPseudoBox/tests/CPseudoBox.test.js            | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/chakra-ui-core/src/CPseudoBox/tests/CPseudoBox.test.js b/packages/chakra-ui-core/src/CPseudoBox/tests/CPseudoBox.test.js
index 7e0a213d..a17d1744 100644
--- a/packages/chakra-ui-core/src/CPseudoBox/tests/CPseudoBox.test.js
+++ b/packages/chakra-ui-core/src/CPseudoBox/tests/CPseudoBox.test.js
@@ -1,5 +1,5 @@
 import CPseudoBox from '../'
-import { render, getTagName } from '@/tests/test-utils'
+import { render, getTagName, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -21,9 +21,9 @@ it('should change the style', () => {
   d="flex" :w="['auto']" px="5" py="5" shadow="lg"
   my="5" mb="5" rounded="sm" font-family="body"
   background-color="blue.200" color="blue.700"`
-  const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
+  const { asFragment } = renderComponent({ inlineAttrs })
 
-  const pseudobox = getByTestId('pseudobox')
+  const pseudobox = screen.getByTestId('pseudobox')
 
   expect(asFragment()).toMatchSnapshot()
   expect(pseudobox).toHaveStyle('display: flex')
@@ -46,8 +46,8 @@ it.each`
   'should display Box with type as $as',
   ({ as }) => {
     const inlineAttrs = `as=${as}`
-    const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
-    expect(getTagName(getByTestId('pseudobox'))).toEqual(as)
+    const { asFragment } = renderComponent({ inlineAttrs })
+    expect(getTagName(screen.getByTestId('pseudobox'))).toEqual(as)
     expect(asFragment()).toMatchSnapshot()
   }
 )

From a1fad2ae829fbfeb80080b6711b0afc3f2ca1255 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:36:54 +0300
Subject: [PATCH 48/57] test(radio): refactor use screen

---
 .../src/CRadio/tests/CRadio.test.js           | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/chakra-ui-core/src/CRadio/tests/CRadio.test.js b/packages/chakra-ui-core/src/CRadio/tests/CRadio.test.js
index 0b7e94d6..5ac4d9a7 100644
--- a/packages/chakra-ui-core/src/CRadio/tests/CRadio.test.js
+++ b/packages/chakra-ui-core/src/CRadio/tests/CRadio.test.js
@@ -1,5 +1,5 @@
 import CRadio from '..'
-import { render, userEvent } from '@/tests/test-utils'
+import { render, userEvent, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -18,52 +18,50 @@ it('should render correctly', () => {
 
 it('should display a disabled radio', () => {
   const inlineAttrs = 'isDisabled'
-  const { getByText, container } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('radio')
 
   expect(input).toHaveAttribute('disabled')
-  expect(getByText('radio').parentNode).toHaveStyle('cursor: not-allowed;')
+  expect(input.parentNode).toHaveStyle('cursor: not-allowed;')
 })
 
 it('should display a radio with a checked state', () => {
   const inlineAttrs = 'isChecked'
-  const { container } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('radio')
 
   expect(input).toBeChecked()
 })
 
 it('should display a radio with an unchecked state', () => {
   const inlineAttrs = ':isChecked="false"'
-  const { container } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('radio')
 
   expect(input).not.toBeChecked()
 })
 
 test('Uncontrolled - should not check if disabled', async () => {
   const inlineAttrs = 'isDisabled'
-  const { container, getByText } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
-  const radio = getByText('radio')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('radio')
 
   expect(input).toBeDisabled()
 
-  await userEvent.click(radio)
+  await userEvent.click(input)
 
   expect(input).not.toBeChecked()
 })
 
 test('Uncontrolled - should be checked always', async () => {
-  const { container, getByText } = renderComponent()
-  const input = container.querySelector('input')
-  const radio = getByText('radio')
+  renderComponent()
+  const input = screen.getByLabelText('radio')
 
   // click the first time, it's checked
-  await userEvent.click(radio)
+  await userEvent.click(input)
   expect(input).toBeChecked()
 
   // click the second time, it should be still checked
-  await userEvent.click(radio)
+  await userEvent.click(input)
   expect(input).toBeChecked()
 })

From 57dd80e4b7d54618760e0c107039b7dcb7958ec1 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:47:30 +0300
Subject: [PATCH 49/57] test(radio-button-group): refactor use screen

---
 .../tests/CRadioButtonGroup.test.js            | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/chakra-ui-core/src/CRadioButtonGroup/tests/CRadioButtonGroup.test.js b/packages/chakra-ui-core/src/CRadioButtonGroup/tests/CRadioButtonGroup.test.js
index 4809f100..e2f95dbc 100644
--- a/packages/chakra-ui-core/src/CRadioButtonGroup/tests/CRadioButtonGroup.test.js
+++ b/packages/chakra-ui-core/src/CRadioButtonGroup/tests/CRadioButtonGroup.test.js
@@ -1,5 +1,5 @@
 import { CButton, CRadioButtonGroup } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const CustomRadio = {
   name: 'CustomRadio',
@@ -55,29 +55,29 @@ it('should render correctly', () => {
 })
 
 it('should display children', () => {
-  const { getByText } = renderComponent()
-  expect(getByText('Custom Radio 1')).toBeInTheDocument()
-  expect(getByText('Custom Radio 2')).toBeInTheDocument()
+  renderComponent()
+  expect(screen.getByText('Custom Radio 1')).toBeInTheDocument()
+  expect(screen.getByText('Custom Radio 2')).toBeInTheDocument()
 })
 
 test('v-model works', () => {
-  const { getByTestId } = renderComponent({
+  renderComponent({
     data () {
       return {
         selected: 'item-2'
       }
     }
   })
-  const one = getByTestId('item-1')
-  const two = getByTestId('item-2')
+  const one = screen.getByTestId('item-1')
+  const two = screen.getByTestId('item-2')
 
   expect(one).not.toHaveAttribute('aria-checked')
   expect(two).toHaveAttribute('aria-checked', 'true')
 })
 
 test('CustomRadio isDisabled works', () => {
-  const { getByTestId } = renderComponent()
-  const last = getByTestId('item-4')
+  renderComponent()
+  const last = screen.getByTestId('item-4')
 
   expect(last).toHaveAttribute('disabled')
 })

From b3f4806e84448538b115975b2afbacd14b045041 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:49:35 +0300
Subject: [PATCH 50/57] test(stack): refactor use screen

---
 .../src/CStack/tests/CStack.test.js            | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/chakra-ui-core/src/CStack/tests/CStack.test.js b/packages/chakra-ui-core/src/CStack/tests/CStack.test.js
index 03298dff..4805554c 100644
--- a/packages/chakra-ui-core/src/CStack/tests/CStack.test.js
+++ b/packages/chakra-ui-core/src/CStack/tests/CStack.test.js
@@ -1,5 +1,5 @@
 import { CStack, CBox, CHeading, CText } from '../..'
-import { render, getTagName } from '@/tests/test-utils'
+import { render, getTagName, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -27,22 +27,22 @@ it('should render correctly', () => {
 })
 
 it('should default to vertical stack', () => {
-  const { getByTestId } = renderComponent()
-  const stack = getByTestId('stack')
+  renderComponent()
+  const stack = screen.getByTestId('stack')
   expect(stack).toHaveStyle('display: flex')
   expect(stack).toHaveStyle('flex-direction: column')
 })
 
 it('should not space last child', () => {
-  const { getByTestId } = renderComponent()
-  const stack = getByTestId('stack')
+  renderComponent()
+  const stack = screen.getByTestId('stack')
   expect(stack).not.toHaveStyle('margin-bottom: 0.5rem')
 })
 
 it('should should stack horizontally if isInline', () => {
   const inlineAttrs = 'is-inline'
-  const { getByTestId } = renderComponent({ inlineAttrs })
-  const stack = getByTestId('stack')
+  renderComponent({ inlineAttrs })
+  const stack = screen.getByTestId('stack')
   expect(stack).toHaveStyle('display: flex')
   expect(stack).toHaveStyle('flex-direction: row')
 })
@@ -58,8 +58,8 @@ it.each`
   'should render CStack with element as $as',
   ({ as }) => {
     const inlineAttrs = `as="${as}"`
-    const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
-    const stack = getByTestId('stack')
+    const { asFragment } = renderComponent({ inlineAttrs })
+    const stack = screen.getByTestId('stack')
     expect(getTagName(stack)).toEqual(as)
     expect(asFragment()).toMatchSnapshot()
   }

From 97a13495dd34048b91a24702fd0b973a5745719b Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 16:50:53 +0300
Subject: [PATCH 51/57] test(stat): refactor use screen

---
 packages/chakra-ui-core/src/CStat/tests/CStat.test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/chakra-ui-core/src/CStat/tests/CStat.test.js b/packages/chakra-ui-core/src/CStat/tests/CStat.test.js
index eeb12553..a297ed99 100644
--- a/packages/chakra-ui-core/src/CStat/tests/CStat.test.js
+++ b/packages/chakra-ui-core/src/CStat/tests/CStat.test.js
@@ -1,5 +1,5 @@
 import { CStat, CStatLabel, CStatNumber, CStatHelperText, CStatArrow } from '..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -22,8 +22,8 @@ it('should render correctly', () => {
 })
 
 it('should render children in DOM', () => {
-  const { getByText } = renderComponent()
-  expect(getByText('Collected Fees')).toBeInTheDocument()
+  renderComponent()
+  expect(screen.getByText('Collected Fees')).toBeInTheDocument()
 })
 
 test('"CStatArrow" should display corresponding icon for "type" prop', () => {

From 99f38b2b3549cac30f94537f6784d4dd82b9a113 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 17:02:36 +0300
Subject: [PATCH 52/57] test(switch): refactor use screen

---
 .../src/CSwitch/tests/CSwitch.test.js         | 66 +++++++------------
 .../tests/__snapshots__/CSwitch.test.js.snap  |  1 +
 2 files changed, 24 insertions(+), 43 deletions(-)

diff --git a/packages/chakra-ui-core/src/CSwitch/tests/CSwitch.test.js b/packages/chakra-ui-core/src/CSwitch/tests/CSwitch.test.js
index c16015bf..cee479d5 100644
--- a/packages/chakra-ui-core/src/CSwitch/tests/CSwitch.test.js
+++ b/packages/chakra-ui-core/src/CSwitch/tests/CSwitch.test.js
@@ -1,71 +1,51 @@
 import CSwitch from '..'
-import { render, userEvent } from '@/tests/test-utils'
+import { render, userEvent, screen } from '@/tests/test-utils'
 
-const renderComponent = (props) => {
+const renderComponent = ({ inlineAttrs = '', ...props } = { }) => {
   const base = {
+    template: `<CSwitch data-testid="switch" ${inlineAttrs} />`,
     components: { CSwitch },
     ...props
   }
   return render(base)
 }
 it('should render correctly', () => {
-  const { asFragment } = renderComponent(
-    {
-      template: `
-    <CSwitch />
-    `
-    }
-  )
+  const { asFragment } = renderComponent()
   expect(asFragment()).toMatchSnapshot()
 })
 
 it('should switch', async () => {
-  const { getByTestId, getByRole } = renderComponent(
-    {
-      template: '<CSwitch data-testid="label" />'
-    }
-  )
-  const label = getByTestId('label')
-  const input = getByRole('checkbox')
-  await userEvent.click(label)
-  expect(input).toBeChecked()
+  renderComponent()
+
+  await userEvent.click(screen.getByTestId('switch'))
+  expect(screen.getByRole('checkbox')).toBeChecked()
 })
 
 it('should emit a change event', async () => {
-  const spy = jest.fn()
-  const { getByTestId } = renderComponent(
-    {
-      methods: {
-        handleChange: spy
-      },
-      template: '<CSwitch data-testid="label" @change="handleChange"  /> '
-    }
-  )
+  const onChange = jest.fn()
+  const inlineAttrs = '@change="handleChange"'
+  renderComponent({ inlineAttrs, methods: { handleChange: onChange } })
 
-  const label = getByTestId('label')
-  await userEvent.click(label)
+  await userEvent.click(screen.getByTestId('switch'))
 
-  expect(spy).toHaveBeenCalledTimes(1)
+  expect(onChange).toHaveBeenCalledTimes(1)
 })
 
 test('properly handles v-model', async () => {
-  const { getByTestId, getByText } = renderComponent(
-    {
-      data: () => ({
-        enable: false
-      }),
-      template: `
+  renderComponent({
+    data: () => ({
+      enable: false
+    }),
+    template: `
       <div>
         <span>{{enable ? 'enabled' : 'disabled'}}</span>
-        <CSwitch v-model="enable" data-testid="label" />
+        <CSwitch v-model="enable" data-testid="switch" />
       </div>`
-    }
-  )
-  const label = getByTestId('label')
+  })
 
-  expect(getByText('disabled')).toBeInTheDocument()
+  expect(screen.getByText('disabled')).toBeInTheDocument()
 
-  await userEvent.click(label)
+  await userEvent.click(screen.getByTestId('switch'))
 
-  expect(getByText('enabled')).toBeInTheDocument()
+  expect(screen.getByText('enabled')).toBeInTheDocument()
 })
diff --git a/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap b/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap
index a7b24700..706cf836 100644
--- a/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap
+++ b/packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap
@@ -5,6 +5,7 @@ exports[`should render correctly 1`] = `
   <label
     class="css-v7ibj3"
     data-chakra-component="CSwitch"
+    data-testid="switch"
   >
     <input
       class="css-f8n5zr"

From a6cf7ef7cc283f3c60cd7f736dcec2d16d0bbece Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 17:04:43 +0300
Subject: [PATCH 53/57] test(tag): refactor use screen

---
 .../src/CTag/tests/CTag.test.js               | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/packages/chakra-ui-core/src/CTag/tests/CTag.test.js b/packages/chakra-ui-core/src/CTag/tests/CTag.test.js
index 7288493d..7c446d18 100644
--- a/packages/chakra-ui-core/src/CTag/tests/CTag.test.js
+++ b/packages/chakra-ui-core/src/CTag/tests/CTag.test.js
@@ -1,5 +1,5 @@
 import { CBox, CTag, CTagLabel, CTagIcon, CTagCloseButton, CAvatar } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -22,38 +22,36 @@ it('should render correctly', () => {
 })
 
 it('should display children', () => {
-  const { getByText } = renderComponent()
+  renderComponent()
 
-  expect(getByText('Green')).toBeInTheDocument()
+  expect(screen.getByText('Green')).toBeInTheDocument()
 })
 
 it('should display tag with right icon', () => {
   const { asFragment } = renderComponent({
     template: `
-  <CBox mb="3">
-    <CTag size="sm" variantColor="green">
-      <CTagLabel>Green</CTagLabel>
-      <CTagIcon icon="add" size="12px" />
-    </CTag>
-  </CBox>
-  `
+    <CBox mb="3">
+      <CTag size="sm" variantColor="green">
+        <CTagLabel>Green</CTagLabel>
+        <CTagIcon icon="add" size="12px" />
+      </CTag>
+    </CBox>`
   })
   expect(asFragment()).toMatchSnapshot()
 })
 it('should display tag with custom element', () => {
   const { asFragment } = renderComponent({
     template: `
-  <CBox mb="3">
-    <CTag rounded="full" variantColor="red">
-      <CAvatar
-        name="Mesut Koca"
-        size="xs"
-        src="https://pbs.twimg.com/profile_images/953743486842474496/cOrUdK4z_200x200.jpg"
-      />
-      <CTagLabel>Mesut</CTagLabel>
-    </CTag>
-  </CBox>
-  `
+    <CBox mb="3">
+      <CTag rounded="full" variantColor="red">
+        <CAvatar
+          name="Mesut Koca"
+          size="xs"
+          src="https://pbs.twimg.com/profile_images/953743486842474496/cOrUdK4z_200x200.jpg"
+        />
+        <CTagLabel>Mesut</CTagLabel>
+      </CTag>
+    </CBox>`
   })
   expect(asFragment()).toMatchSnapshot()
 })

From 2d8b646cf79a2fec731c35d7b3456098bc53bf96 Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 17:05:45 +0300
Subject: [PATCH 54/57] test(text): refactor use screen

---
 packages/chakra-ui-core/src/CText/tests/CText.test.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/chakra-ui-core/src/CText/tests/CText.test.js b/packages/chakra-ui-core/src/CText/tests/CText.test.js
index 8b86a14a..31e6c085 100644
--- a/packages/chakra-ui-core/src/CText/tests/CText.test.js
+++ b/packages/chakra-ui-core/src/CText/tests/CText.test.js
@@ -1,5 +1,5 @@
 import CText from '..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -19,9 +19,9 @@ it('should render correctly', () => {
 
 it('should change the style', () => {
   const inlineAttrs = 'd="flex"'
-  const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
+  const { asFragment } = renderComponent({ inlineAttrs })
 
-  const text = getByTestId('text')
+  const text = screen.getByTestId('text')
 
   expect(asFragment()).toMatchSnapshot()
   expect(text).toHaveStyle('display: flex')
@@ -44,8 +44,8 @@ it.each`
   'should display text type as $as',
   ({ as }) => {
     const inlineAttrs = `as=${as}`
-    const { getByTestId } = renderComponent({ inlineAttrs })
-    const text = getByTestId('text')
+    renderComponent({ inlineAttrs })
+    const text = screen.getByTestId('text')
     expect(text.tagName.toLowerCase()).toEqual(as)
   }
 )

From 1d80cf457d54a351d7915c99d44b464871756cbb Mon Sep 17 00:00:00 2001
From: Mesut Koca <imesutkoca@gmail.com>
Date: Sun, 12 Jul 2020 17:08:19 +0300
Subject: [PATCH 55/57] chore: fix eslint error no named exports

---
 packages/chakra-ui-core/src/CPseudoBox/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/chakra-ui-core/src/CPseudoBox/index.js b/packages/chakra-ui-core/src/CPseudoBox/index.js
index b3da1097..583e09f1 100644
--- a/packages/chakra-ui-core/src/CPseudoBox/index.js
+++ b/packages/chakra-ui-core/src/CPseudoBox/index.js
@@ -1,3 +1,2 @@
 import CPseudoBox from './CPseudoBox'
 export default CPseudoBox
-export * from './CPseudoBox'

From dfbddfb95d0223226147930a0d3b6a58386ecbbe Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Mon, 13 Jul 2020 23:54:29 +0800
Subject: [PATCH 56/57] fix: update image src attr

---
 .github/workflows/test.yml                                | 8 ++++----
 packages/chakra-ui-core/src/CAvatar/CAvatar.js            | 3 ---
 packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js | 3 ---
 .../src/CAvatarGroup/tests/CAvatarGroup.test.js           | 3 ---
 packages/chakra-ui-core/src/CImage/tests/CImage.test.js   | 3 ---
 5 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 7fda49f8..72f63328 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -7,11 +7,11 @@ on:
   # Trigger the workflow on push or pull request,
   # but only for the master branch
   push:
-    branches-ignore:
-      - master
+    branches:
+      - develop
   pull_request:
-    branches-ignore:
-      - master
+    branches:
+      - develop
 
 jobs:
   build:
diff --git a/packages/chakra-ui-core/src/CAvatar/CAvatar.js b/packages/chakra-ui-core/src/CAvatar/CAvatar.js
index ac992f7a..b4d64a1d 100644
--- a/packages/chakra-ui-core/src/CAvatar/CAvatar.js
+++ b/packages/chakra-ui-core/src/CAvatar/CAvatar.js
@@ -252,9 +252,6 @@ const CAvatar = {
             alt: this.name,
             src: this.src
           },
-          domProps: {
-            src: this.src
-          }
         })
       }
 
diff --git a/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js b/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
index 6e4c25b7..f29229c1 100644
--- a/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
+++ b/packages/chakra-ui-core/src/CAvatar/tests/CAvatar.test.js
@@ -12,9 +12,6 @@ beforeAll(() => {
   // eslint-disable-next-line accessor-pairs
   Object.defineProperty(global.Image.prototype, 'src', {
     set (src) {
-      // Mock the Image.prototype.onload/onerror implementations
-      this.onload = jest.fn().mockImplementation(fn => fn)
-      this.onerror = jest.fn().mockImplementation(err => err)
       if (src === LOAD_FAILURE_SRC) {
         setTimeout(() => this.onerror(new Error('mocked error')))
       } else if (src === LOAD_SUCCESS_SRC) {
diff --git a/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js b/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
index be8d069f..94512cce 100644
--- a/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
+++ b/packages/chakra-ui-core/src/CAvatarGroup/tests/CAvatarGroup.test.js
@@ -13,9 +13,6 @@ beforeAll(() => {
   // eslint-disable-next-line accessor-pairs
   Object.defineProperty(global.Image.prototype, 'src', {
     set (src) {
-      // Mock the Image.prototype.onload/onerror implementations
-      this.onload = jest.fn().mockImplementation(fn => fn)
-      this.onerror = jest.fn().mockImplementation(err => err)
       if (src === LOAD_FAILURE_SRC) {
         setTimeout(() => this.onerror(new Error('mocked error')))
       } else if (src === LOAD_SUCCESS_SRC) {
diff --git a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
index f52ed557..3b6feaff 100644
--- a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
+++ b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
@@ -12,9 +12,6 @@ beforeAll(() => {
   // eslint-disable-next-line accessor-pairs
   Object.defineProperty(global.Image.prototype, 'src', {
     set (src) {
-      // Mock the Image.prototype.onload/onerror implementations
-      this.onload = jest.fn().mockImplementation(fn => fn)
-      this.onerror = jest.fn().mockImplementation(err => err)
       if (src === LOAD_FAILURE_SRC) {
         setTimeout(() => this.onerror(new Error('mocked error')))
       } else if (src === LOAD_SUCCESS_SRC) {

From 18e78638ca5b5810b42d0073888f010933d22ae0 Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Mon, 13 Jul 2020 23:55:51 +0800
Subject: [PATCH 57/57] test: update image snapshot

---
 packages/chakra-ui-core/src/CAvatar/CAvatar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/chakra-ui-core/src/CAvatar/CAvatar.js b/packages/chakra-ui-core/src/CAvatar/CAvatar.js
index b4d64a1d..6dc38b8d 100644
--- a/packages/chakra-ui-core/src/CAvatar/CAvatar.js
+++ b/packages/chakra-ui-core/src/CAvatar/CAvatar.js
@@ -251,7 +251,7 @@ const CAvatar = {
             objectFit: 'cover',
             alt: this.name,
             src: this.src
-          },
+          }
         })
       }