Add test to Tabs component

Author: igorbrasileiro

CHANGELOG.md

@@ -14,8 +14,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
-- Warning icon when input has errorMessaxge
+- Warning icon when input has errorMessage
 - Size prop to checkbox.
+- Tests for `Tabs` component
 
 ### Changed
 

react/components/Tabs/index.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { toHaveClass, toHaveAttribute, toHaveTextContent } from '@testing-library/jest-dom/matchers'
+
+import Tabs from '.'
+import Tab from './Tab.js'
+
+describe('Tabs', () => {
+  expect.extend({ toHaveClass, toHaveAttribute, toHaveTextContent })
+  const tabsId = 'tabs'
+  const tab1Id = 'tab 1'
+
+  describe('CSS API', () => {
+
+    it('props: default', () => {
+      const { getByTestId } = render(
+        <Tabs testId={tabsId}>
+          <Tab testId={tab1Id} label="label 1" active>
+            Tab 1
+          </Tab>
+          <Tab label="label 2" />
+        </Tabs>
+      )
+      
+      const tabs = getByTestId(tabsId)
+      expect(tabs).not.toHaveClass('overflow-y-hidden')
+      
+      const tabsContent = tabs.querySelector('.overflow-y-auto')
+      expect(tabsContent).toBeNull()
+      expect(tabsContent).toBeDefined()
+
+      expect(getByTestId(tab1Id)).not.toHaveClass('w-100')
+    })
+    
+    it('prop: sticky', () => {
+      const { getByTestId } = render(
+        <Tabs testId={tabsId} sticky>
+          <Tab label="label 1" active>
+            Tab 1
+          </Tab>
+          <Tab label="label 2" />
+        </Tabs>
+      )
+
+      const tabs = getByTestId(tabsId)
+      expect(tabs).toHaveClass('overflow-y-hidden')
+      
+      const tabsContent = tabs.querySelector('.overflow-y-auto')
+      expect(tabsContent).not.toBeNull()
+      expect(tabsContent).toBeDefined()
+    })
+
+    it('prop: fullWidth', () => {
+      const { getByTestId } = render(
+        <Tabs testId={tabsId} fullWidth>
+          <Tab testId={tab1Id} label="label 1" active>
+            Tab 1
+          </Tab>
+          <Tab label="label 2">Tab 2</Tab>
+          <Tab label="label 3">Tab 3</Tab>
+        </Tabs>
+      )
+
+      expect(getByTestId(tabsId)).toHaveClass('w-100')
+      expect(getByTestId(tab1Id)).toHaveClass('w-100')
+    })
+  })
+
+  describe('Behavior', () => {
+    it('active tab content', () => {
+      const { getByTestId } = render(
+        <Tabs testId={tabsId}>
+          <Tab label="label 1" active>
+            Tab 1
+          </Tab>
+          <Tab label="label 2">Tab 2</Tab>
+        </Tabs>
+      )
+
+      expect(getByTestId(tabsId)).toHaveTextContent('Tab 1')
+    })
+  })
+})