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/Tab.js

@@ -7,7 +7,7 @@ class Tab extends Component {
   }
 
   render() {
-    const { active, fullWidth, label, disabled, testId } = this.props
+    const { active, fullWidth, label, disabled } = this.props
 
     let tabStyle =
       'c-muted-1 b--transparent hover-c-action-primary pointer vtex-tab__button--inactive'
@@ -22,7 +22,6 @@ class Tab extends Component {
 
     return (
       <button
-        data-testid={testId}
         type="button"
         onClick={this.handleClick}
         className={`vtex-tab__button bt-0 bl-0 br-0 bw1 ${
@@ -42,8 +41,6 @@ Tab.defaultProps = {
 }
 
 Tab.propTypes = {
-  /** Data attribute */
-  testId: PropTypes.string,
   active: PropTypes.bool,
   fullWidth: PropTypes.bool,
   children: PropTypes.node,

react/components/Tabs/index.test.tsx

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