Skip to content

Commit

Permalink
fix(responsive): use defaultmatches for all uses (#471) (#461)
Browse files Browse the repository at this point in the history
* fix(responsive): use defaultmatches for all uses

- test: add ssr tests for Box, Button, ExpandCollapse, DisplayHeading, Heading, Tooltip
- upgrade jest to 22.x
- add testid to ExpandCollapse tertiarytext in order to be selectable

* test: adjust server side rendering descriptors

* refactor(tests): remove dirty laundry 👕
  • Loading branch information
theetrain authored and ryanoglesby08 committed Feb 8, 2018
1 parent 2885e93 commit 314bc55
Show file tree
Hide file tree
Showing 17 changed files with 647 additions and 348 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
"gitbook-cli": "^2.3.2",
"husky": "^0.14.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^21.2.1",
"jest": "^22.2.1",
"jest-enzyme": "^4.0.1",
"lint-staged": "^6.1.0",
"nightwatch": "^0.9.19",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Box/Box.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const Box = ({
const ySize = inset || vertical

return (
<Responsive minWidth="md">
<Responsive minWidth="md" defaultMatches={false}>
{desktop => {
const classes = joinClassNames(
getClassName('padding', 'horizontal', xSize, desktop),
Expand Down
16 changes: 16 additions & 0 deletions src/components/Box/__tests__/Box.ssr.spec.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* @jest-environment node
*/

import React from 'react'
import { render } from 'enzyme'

import Box from '../Box'

describe('Box server side rendering', () => {
it('uses mobile styles first', () => {
const box = render(<Box horizontal={4}>Submit</Box>)

expect(box.hasClass('horizontalPadding-4')).toBe(true)
})
})
5 changes: 3 additions & 2 deletions src/components/Button/BaseButton/BaseButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import styles from './BaseButton.modules.scss'
*/
const BaseButton = ({ element, variant, dangerouslyAddClassName, children, ...rest }) => {
return (
<Responsive minWidth="md">
<Responsive minWidth="md" defaultMatches={false}>
{desktop =>
React.createElement(
element,
Expand All @@ -29,7 +29,8 @@ const BaseButton = ({ element, variant, dangerouslyAddClassName, children, ...re
<FlexBox direction="row" dangerouslyAddClassName={styles.centered}>
{children}
</FlexBox>
)}
)
}
</Responsive>
)
}
Expand Down
16 changes: 16 additions & 0 deletions src/components/Button/__tests__/Button.ssr.spec.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* @jest-environment node
*/

import React from 'react'
import { render } from 'enzyme'

import Button from '../Button'

describe('Button server side rendering', () => {
it('uses mobile styles first', () => {
const button = render(<Button>Submit</Button>)

expect(button.hasClass('fullWidth')).toBe(true)
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,12 @@ exports[`Accordion renders a closed accordion 1`] = `
vertical={3}
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand All @@ -73,11 +74,12 @@ exports[`Accordion renders a closed accordion 1`] = `
tag="div"
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand Down Expand Up @@ -246,11 +248,12 @@ exports[`Accordion renders a closed accordion 1`] = `
tag="div"
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand Down Expand Up @@ -360,11 +363,12 @@ exports[`Accordion renders an open accordion 1`] = `
vertical={3}
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand All @@ -380,11 +384,12 @@ exports[`Accordion renders an open accordion 1`] = `
tag="div"
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand Down Expand Up @@ -553,11 +558,12 @@ exports[`Accordion renders an open accordion 1`] = `
tag="div"
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand Down
4 changes: 3 additions & 1 deletion src/components/ExpandCollapse/PanelWrapper/PanelWrapper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,9 @@ class PanelWrapper extends React.Component {

{tertiaryText && (
<span className={mobile ? styles.alignSelfFlexEnd : undefined}>
<Text size={mobile ? 'medium' : 'large'}>{tertiaryText}</Text>
<Text data-testid="tertiarytext" size={mobile ? 'medium' : 'large'}>
{tertiaryText}
</Text>
</span>
)}
</Flexbox>
Expand Down
24 changes: 14 additions & 10 deletions src/components/ExpandCollapse/__tests__/ExpandCollapse.spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,10 @@ describe('ExpandCollapse', () => {
it('renders panels conditionally', () => {
const { expandCollapse } = doMount(
<ExpandCollapse open={['panel-1']}>
{ false }
{ null }
{ undefined }
{ aPanel({id: 'panel-1'}) }
{false}
{null}
{undefined}
{aPanel({ id: 'panel-1' })}
</ExpandCollapse>
)

Expand Down Expand Up @@ -120,7 +120,9 @@ describe('ExpandCollapse', () => {
)

expect(findPanelHeader('panel-1')).toContainReact(
<Text size="large">Some tertiary text</Text>
<Text data-testid="tertiarytext" size="large">
Some tertiary text
</Text>
)
})
})
Expand Down Expand Up @@ -273,8 +275,8 @@ describe('ExpandCollapse', () => {
it('surrounds all the panels', () => {
const { expandCollapse } = doMount(
<ExpandCollapse>
{aPanel({id: 'panel-1'})}
{aPanel({id: 'panel-2'})}
{aPanel({ id: 'panel-1' })}
{aPanel({ id: 'panel-2' })}
</ExpandCollapse>
)

Expand All @@ -284,8 +286,8 @@ describe('ExpandCollapse', () => {
it('can turn off the top divider', () => {
const { expandCollapse } = doMount(
<ExpandCollapse topDivider={false}>
{aPanel({id: 'panel-1'})}
{aPanel({id: 'panel-2'})}
{aPanel({ id: 'panel-1' })}
{aPanel({ id: 'panel-2' })}
</ExpandCollapse>
)

Expand All @@ -307,7 +309,9 @@ describe('ExpandCollapse', () => {

expect(findPanelHeader('panel-1')).toContainReact(
<span className="alignSelfFlexEnd">
<Text size="medium">Some tertiary text</Text>
<Text data-testid="tertiarytext" size="medium">
Some tertiary text
</Text>
</span>
)
})
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/**
* @jest-environment node
*/

import React from 'react'
import { render } from 'enzyme'

import ExpandCollapse from '../ExpandCollapse'

describe('ExpandCollapse server side rendering', () => {
it('uses mobile styles first', () => {
const expandCollapse = render(
<ExpandCollapse>
<ExpandCollapse.Panel id="ssr" header="Yes" tertiaryText="Is that so?">
Here's what's inside
</ExpandCollapse.Panel>
</ExpandCollapse>
)

const panel = expandCollapse.find('[data-testid="ssr"]')

expect(panel.find('[data-testid="tertiarytext"]').hasClass('medium')).toBe(true)
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,12 @@ exports[`ExpandCollapse renders a closed panel 1`] = `
vertical={3}
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand All @@ -76,11 +77,12 @@ exports[`ExpandCollapse renders a closed panel 1`] = `
tag="div"
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand Down Expand Up @@ -249,11 +251,12 @@ exports[`ExpandCollapse renders a closed panel 1`] = `
tag="div"
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand Down Expand Up @@ -375,11 +378,12 @@ exports[`ExpandCollapse renders an open panel 1`] = `
vertical={3}
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand All @@ -395,11 +399,12 @@ exports[`ExpandCollapse renders an open panel 1`] = `
tag="div"
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand Down Expand Up @@ -568,11 +573,12 @@ exports[`ExpandCollapse renders an open panel 1`] = `
tag="div"
>
<Responsive
defaultMatches={false}
minWidth="md"
query={Object {}}
>
<Media
defaultMatches={true}
defaultMatches={false}
query={
Object {
"minWidth": 768,
Expand Down
16 changes: 16 additions & 0 deletions src/components/Link/ButtonLink/__tests__/ButtonLink.ssr.spec.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* @jest-environment node
*/

import React from 'react'
import { render } from 'enzyme'

import ButtonLink from '../ButtonLink'

describe('ButtonLink server side rendering', () => {
it('uses mobile styles first', () => {
const button = render(<ButtonLink>Submit</ButtonLink>)

expect(button.hasClass('fullWidth')).toBe(true)
})
})
16 changes: 16 additions & 0 deletions src/components/Tooltip/__tests__/Tooltip.ssr.spec.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* @jest-environment node
*/

import React from 'react'
import { render } from 'enzyme'

import Tooltip from '../Tooltip'

describe('Tooltip server side rendering', () => {
it('uses mobile styles first', () => {
const tooltip = render(<Tooltip>My tooltip text</Tooltip>)

expect(tooltip.find('[data-testid=bubble]').hasClass('full')).toBe(true)
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const getClassName = (invert, desktop) =>
* Large page titles. Renders an HTML `<h1>` element.
*/
const DisplayHeading = ({ invert, children, ...rest }) => (
<Responsive minWidth="md">
<Responsive minWidth="md" defaultMatches={false}>
{desktop => (
<h1 {...safeRest(rest)} className={getClassName(invert, desktop)}>
{children}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* @jest-environment node
*/

import React from 'react'
import { render } from 'enzyme'

import DisplayHeading from '../DisplayHeading'

describe('DisplayHeading server side rendering', () => {
it('uses mobile styles first', () => {
const heading = render(<DisplayHeading>My heading text</DisplayHeading>)

expect(heading.hasClass('heading')).toBe(true)
})
})
Loading

0 comments on commit 314bc55

Please sign in to comment.