Skip to content

Commit

Permalink
feat(TabSet): Update styles
Browse files Browse the repository at this point in the history 
Based on updated spec
  • Loading branch information
@thyhjwb6
thyhjwb6 committed Mar 11, 2022
1 parent b0b3106 commit 7295bba
Show file tree
Hide file tree
Showing 8 changed files with 202 additions and 199 deletions.
204 changes: 105 additions & 99 deletions packages/react-component-library/cypress/specs/TabSet/index.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,161 +11,167 @@ function clickNTimes(selector: string, numClicks: number) {
})
}

describe('TabSet (scrollable)', () => {
beforeEach(() => {
cy.viewport(INITIAL_VIEWPORT_WIDTH, VIEWPORT_HEIGHT)
cy.visit('/iframe.html?args=&id=tab-set--scrollable&viewMode=story')
cy.get(selectors.tabSet.tabItem).eq(0).as('tabItem')
})

describe('when the scroll left button is clicked', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollRight, 1)
})

it('scrolls right one tab', () => {
cy.get('@tabItem').then(($tabItem) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should('be.closeTo', $tabItem.outerWidth(), 1)
})
})
})

describe('when the scroll right button is clicked twice in quick succession', () => {
describe('TabSet', () => {
describe('Scrollable', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollRight, 2)
cy.viewport(INITIAL_VIEWPORT_WIDTH, VIEWPORT_HEIGHT)
cy.visit('/iframe.html?id=tab-set--scrollable&viewMode=story')
cy.get(selectors.tabSet.tabItem).eq(0).as('tabItem')
})

it('scrolls right two tabs', () => {
cy.get('@tabItem').then(($tabItem) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should('be.closeTo', $tabItem.outerWidth() * 2, 1)
})
})

describe('and scroll left is clicked', () => {
describe('when the scroll left button is clicked', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollLeft, 1)
clickNTimes(selectors.tabSet.scrollRight, 1)
})

it('scrolls left one tab', () => {
it('scrolls right one tab', () => {
cy.get('@tabItem').then(($tabItem) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should('be.closeTo', $tabItem.outerWidth(), 1)
})
})
})
})

describe('when the scroll right button is clicked ten times', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollRight, 10)
})

it('scrolls right as far as possible', () => {
cy.get(selectors.tabSet.tabs).then(($tabs) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should('be.closeTo', $tabs[0].scrollWidth - $tabs[0].clientWidth, 1)
})
})

describe('and scroll left is clicked twice', () => {
describe('when the scroll right button is clicked twice in quick succession', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollLeft, 2)
clickNTimes(selectors.tabSet.scrollRight, 2)
})

it('scrolls left two and half tabs', () => {
it('scrolls right two tabs', () => {
cy.get('@tabItem').then(($tabItem) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should('be.closeTo', $tabItem.outerWidth() * 2, 1)
})
})
})

describe('and scroll left is clicked eight times', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollLeft, 8)
})
describe('and scroll left is clicked', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollLeft, 1)
})

it('scrolls left all the way', () => {
cy.get(selectors.tabSet.tabs).invoke('scrollLeft').should('eq', 0)
it('scrolls left one tab', () => {
cy.get('@tabItem').then(($tabItem) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should('be.closeTo', $tabItem.outerWidth(), 1)
})
})
})
})
})

describe('when the tab set is scrolled right fully', () => {
beforeEach(() => {
cy.get(selectors.tabSet.tabs).invoke('scrollLeft', 9999)
})

describe('and the viewport is made narrower by three tab widths', () => {
describe('when the scroll right button is clicked ten times', () => {
beforeEach(() => {
cy.get('@tabItem').then(($tabItem) => {
cy.viewport(
INITIAL_VIEWPORT_WIDTH - $tabItem.outerWidth() * 3,
VIEWPORT_HEIGHT
)
clickNTimes(selectors.tabSet.scrollRight, 10)
})

it('scrolls right as far as possible', () => {
cy.get(selectors.tabSet.tabs).then(($tabs) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should(
'be.closeTo',
$tabs[0].scrollWidth - $tabs[0].clientWidth,
1
)
})
})

describe('and the scroll right button is clicked once', () => {
describe('and scroll left is clicked twice', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollRight, 1)
clickNTimes(selectors.tabSet.scrollLeft, 2)
})

it('scrolls right once', () => {
it('scrolls left two and half tabs', () => {
cy.get('@tabItem').then(($tabItem) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should('be.closeTo', $tabItem.outerWidth() * 5, 1)
.should('be.closeTo', $tabItem.outerWidth() * 4, 1)
})
})
})

describe('and the scroll right button is clicked four times', () => {
describe('and scroll left is clicked eight times', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollRight, 4)
clickNTimes(selectors.tabSet.scrollLeft, 8)
})

it('scrolls right as far as possible', () => {
cy.get(selectors.tabSet.tabs).then(($tabs) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should(
'be.closeTo',
$tabs[0].scrollWidth - $tabs[0].clientWidth,
1
)
})
it('scrolls left all the way', () => {
cy.get(selectors.tabSet.tabs).invoke('scrollLeft').should('eq', 0)
})
})
})

describe('when the tab set is scrolled right fully', () => {
beforeEach(() => {
cy.get(selectors.tabSet.tabs).invoke('scrollLeft', 9999)
})

describe('and the scroll left button is clicked once', () => {
describe('and the viewport is made narrower by three tab widths', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollLeft, 1)
cy.get('@tabItem').then(($tabItem) => {
cy.viewport(
INITIAL_VIEWPORT_WIDTH - $tabItem.outerWidth() * 3,
VIEWPORT_HEIGHT
)
})
})

it('scrolls left once', () => {
cy.get('@tabItem').then(($tabItem) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should('be.closeTo', $tabItem.outerWidth() * 3, 1)
describe('and the scroll right button is clicked once', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollRight, 1)
})

it('scrolls right once', () => {
cy.get('@tabItem').then(($tabItem) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should('be.closeTo', $tabItem.outerWidth() * 7, 1)
})
})
})
})

describe('and the scroll left button is clicked four times', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollLeft, 4)
describe('and the scroll right button is clicked four times', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollRight, 4)
})

it('scrolls right as far as possible', () => {
cy.get(selectors.tabSet.tabs).then(($tabs) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should(
'be.closeTo',
$tabs[0].scrollWidth - $tabs[0].clientWidth,
1
)
})
})
})

it('scrolls left all the way', () => {
cy.get(selectors.tabSet.tabs).invoke('scrollLeft').should('eq', 0)
describe('and the scroll left button is clicked once', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollLeft, 1)
})

it('scrolls left once', () => {
cy.get('@tabItem').then(($tabItem) => {
cy.get(selectors.tabSet.tabs)
.invoke('scrollLeft')
.should('be.closeTo', $tabItem.outerWidth() * 5, 1)
})
})
})

describe('and the scroll left button is clicked six times', () => {
beforeEach(() => {
clickNTimes(selectors.tabSet.scrollLeft, 6)
})

it('scrolls left all the way', () => {
cy.get(selectors.tabSet.tabs).invoke('scrollLeft').should('eq', 0)
})
})
})
})
Expand Down
42 changes: 33 additions & 9 deletions packages/react-component-library/src/components/TabSet/TabSet.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,12 @@ describe('TabSet', () => {
wrapper.getByText('Title 2').click()
})

it('should apply the `is-active` class to the appropriate tab', () => {
it('should display the tab as active', () => {
const tab = wrapper.getByText('Title 2').parentElement
expect(tab).toHaveStyleRule('color', color('neutral', '500'))
expect(tab).toHaveStyleRule(
'background-color',
color('neutral', 'white')
)
})

it('should invoke the onChange function', () => {
Expand Down Expand Up @@ -192,7 +195,10 @@ describe('TabSet', () => {

it('sets the previous tab to active', () => {
const tab = wrapper.getByText('Title 1').parentElement
expect(tab).toHaveStyleRule('color', color('neutral', '500'))
expect(tab).toHaveStyleRule(
'background-color',
color('neutral', 'white')
)
})

describe('and the user presses the right arrow key', () => {
Expand All @@ -205,7 +211,10 @@ describe('TabSet', () => {

it('sets the next tab to active', () => {
const tab = wrapper.getByText('Title 2').parentElement
expect(tab).toHaveStyleRule('color', color('neutral', '500'))
expect(tab).toHaveStyleRule(
'background-color',
color('neutral', 'white')
)
})
})
})
Expand All @@ -229,7 +238,10 @@ describe('TabSet', () => {

it('should make the appropriate tab active', () => {
const tab = wrapper.getByText('Title 2').parentElement
expect(tab).toHaveStyleRule('color', color('neutral', '500'))
expect(tab).toHaveStyleRule(
'background-color',
color('neutral', 'white')
)
})
})
})
Expand All @@ -249,8 +261,14 @@ describe('TabSet', () => {
it('should make the appropriate tab active', () => {
const tab1 = wrapper.getByText('Title 1').parentElement
const tab2 = wrapper.getByText('Title 2').parentElement
expect(tab1).not.toHaveStyleRule('color', color('neutral', '500'))
expect(tab2).toHaveStyleRule('color', color('neutral', '500'))
expect(tab1).toHaveStyleRule(
'background-color',
color('neutral', '100')
)
expect(tab2).toHaveStyleRule(
'background-color',
color('neutral', 'white')
)
})

describe('when the user clicks on a tab', () => {
Expand All @@ -261,8 +279,14 @@ describe('TabSet', () => {
it('should make the appropriate tab active', () => {
const tab1 = wrapper.getByText('Title 1').parentElement
const tab2 = wrapper.getByText('Title 2').parentElement
expect(tab1).toHaveStyleRule('color', color('neutral', '500'))
expect(tab2).not.toHaveStyleRule('color', color('neutral', '500'))
expect(tab1).toHaveStyleRule(
'background-color',
color('neutral', 'white')
)
expect(tab2).toHaveStyleRule(
'background-color',
color('neutral', '100')
)
})
})
})
Expand Down
9 changes: 3 additions & 6 deletions packages/react-component-library/src/components/TabSet/TabSet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import React, { Children, KeyboardEvent, MouseEvent, useState } from 'react'
import {
IconKeyboardArrowLeft,
IconKeyboardArrowRight,
} from '@defencedigital/icon-library'
import { IconChevronLeft, IconChevronRight } from '@defencedigital/icon-library'
import { v4 as uuidv4 } from 'uuid'

import { ARROW_LEFT, ARROW_RIGHT } from '../../utils/keyCodes'
Expand Down Expand Up @@ -124,7 +121,7 @@ export const TabSet: React.FC<TabSetProps | ScrollableTabSetProps> = ({
onClick={scrollToNextTab((currentTabIndex) => currentTabIndex - 1)}
data-testid={`scroll-${SCROLL_DIRECTION.LEFT}`}
>
<IconKeyboardArrowLeft />
<IconChevronLeft size={36} />
</StyledScrollLeft>
)}
<StyledNavigation
Expand Down Expand Up @@ -162,7 +159,7 @@ export const TabSet: React.FC<TabSetProps | ScrollableTabSetProps> = ({
onClick={scrollToNextTab((currentTabIndex) => currentTabIndex + 1)}
data-testid={`scroll-${SCROLL_DIRECTION.RIGHT}`}
>
<IconKeyboardArrowRight />
<IconChevronRight size={36} />
</StyledScrollRight>
)}
</StyledHeader>
Expand Down
Loading

0 comments on commit 7295bba

Please sign in to comment.