Skip to content

Commit 1fa37f6

Browse files
stuarthendrenstuarthendren
committed
Adding more tests /
1 parent e0ba5af commit 1fa37f6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1710
-389
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,10 @@
8585
"@storybook/react": "^6.1.11",
8686
"@storybook/storybook-deployer": "^2.8.7",
8787
"@storybook/theming": "^6.1.11",
88+
"@testing-library/dom": "^7.29.0",
8889
"@testing-library/jest-dom": "^5.5.0",
8990
"@testing-library/react": "^10.0.3",
91+
"@testing-library/user-event": "^12.6.0",
9092
"@types/jest": "^25.2.1",
9193
"@types/react": "^16.9.33",
9294
"@types/react-dom": "^16.9.6",

‎src/components/checktoken/CheckToken.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Row } from '../flex/Flex'
77
import { makeStyles, fade } from '../../styles'
88

99
interface CheckboxProps {
10-
color: 'primary' | 'secondary' | 'default'
10+
color?: 'primary' | 'secondary' | 'default'
1111
selected?: boolean | undefined
1212
disabled?: boolean
1313
}
@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => {
5353
},
5454
selected: {
5555
color: theme.palette.action.active,
56-
borderColor: ({ color }: CheckTokenProps) => {
56+
borderColor: ({ color = 'default' }: CheckTokenProps) => {
5757
if (
5858
color !== 'default' &&
5959
['primary', 'secondary', 'error', 'warning', 'info'].includes(color)
@@ -72,13 +72,24 @@ const useStyles = makeStyles((theme) => {
7272

7373
export const CheckToken = withPositioningProps<CheckTokenProps>(
7474
(props: CheckTokenProps) => {
75-
const { children, onClick, ...rest } = props
75+
const {
76+
children,
77+
onClick,
78+
color = 'default',
79+
value = 'check',
80+
...rest
81+
} = props
7682
const classes = useStyles(props)
7783
return (
78-
<ToggleButton {...rest} onChange={onClick} classes={classes}>
84+
<ToggleButton
85+
{...rest}
86+
onChange={onClick}
87+
value={value}
88+
classes={classes}
89+
>
7990
<Row>
8091
<Checkbox
81-
color={props.color}
92+
color={color}
8293
selected={props.selected}
8394
disabled={props.disabled}
8495
/>

‎src/components/typography/Typography.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { ForwardRefExoticComponent } from 'react'
22
import { styled } from '@material-ui/styles'
33
import MaterialTypography, {
44
TypographyProps as MaterialTypographyProps,
@@ -12,8 +12,13 @@ type BaseTypographyProps<C extends React.ElementType> = MaterialTypographyProps<
1212
> &
1313
PositioningProps
1414

15+
// function test() {
16+
// const ref = React.useRef(null)
17+
// return <MaterialTypography ref={ref} />
18+
// }
19+
1520
const BaseTypography = withPositioningProps<MaterialTypographyProps>(
16-
MaterialTypography
21+
MaterialTypography as ForwardRefExoticComponent<MaterialTypographyProps>
1722
)
1823

1924
export type ExtraTypographyProps = {

‎src/internal/noopener.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export function withNoOpener<P extends AProps & { ref?: React.Ref<any> }>(
1414
Component: React.ForwardRefExoticComponent<P>
1515
): React.ForwardRefExoticComponent<P>
1616

17-
export function withNoOpener<P>(
17+
export function withNoOpener<P extends AProps>(
1818
Component: React.FunctionComponent<P>
1919
): React.ForwardRefExoticComponent<P>
2020

‎src/internal/wrappers.tsx

Lines changed: 65 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,13 @@ import { omit } from '../util/transform'
1616

1717
export type { SizingProps }
1818

19-
export type BoxProps = SpacingProps &
20-
FlexboxProps &
21-
SizingProps &
22-
DisplayProps &
23-
GriditemProps
24-
2519
export type PositioningProps = SpacingProps &
2620
FlexboxProps &
2721
DisplayProps &
2822
GriditemProps
2923

24+
export type BoxProps = PositioningProps & SizingProps
25+
3026
// The natural typing causes typescript to error, hence the casts to force it.
3127
export const withPositioning = <P extends object>(
3228
WrappedComponent: React.ElementType<P>
@@ -35,7 +31,19 @@ export const withPositioning = <P extends object>(
3531
compose(display, spacing, flexbox, griditem)
3632
) as unknown) as React.ComponentType<P & PositioningProps>
3733

38-
export const boxPropsKeys: Array<keyof BoxProps> = [
34+
export const sizingPropsKeys: Array<keyof SizingProps> = [
35+
'width',
36+
'maxWidth',
37+
'minWidth',
38+
'height',
39+
'maxHeight',
40+
'minHeight',
41+
'sizeWidth',
42+
'sizeHeight',
43+
'boxSizing',
44+
]
45+
46+
export const positioningPropsKeys: Array<keyof PositioningProps> = [
3947
'm',
4048
'mt',
4149
'mr',
@@ -77,14 +85,6 @@ export const boxPropsKeys: Array<keyof BoxProps> = [
7785
'alignSelf',
7886
'justifyItems',
7987
'justifySelf',
80-
'width',
81-
'maxWidth',
82-
'minWidth',
83-
'height',
84-
'maxHeight',
85-
'minHeight',
86-
'sizeWidth',
87-
'sizeHeight',
8888
'display',
8989
'displayPrint',
9090
'overflow',
@@ -101,30 +101,62 @@ export const boxPropsKeys: Array<keyof BoxProps> = [
101101
'placeSelf',
102102
]
103103

104-
export const withBoxProps = <P extends object>(
104+
export const boxPropsKeys: Array<keyof BoxProps> = [
105+
...positioningPropsKeys,
106+
...sizingPropsKeys,
107+
]
108+
109+
type WrapperType<T> = {
110+
<P extends object & { ref?: React.Ref<any> }>(
111+
Component: React.ForwardRefExoticComponent<P>
112+
): React.ForwardRefExoticComponent<P & T>
113+
<P extends object>(
114+
Component: React.FunctionComponent<P>
115+
): React.ForwardRefExoticComponent<P & T>
116+
<P extends object>(
117+
WrappedComponent: React.ComponentType<P>
118+
): React.ComponentType<P & T>
119+
}
120+
121+
export const withBoxProps: WrapperType<BoxProps> = <P extends object>(
105122
WrappedComponent: React.ComponentType<P>
106123
) =>
107-
styled((props) => {
108-
const rest = omit(props, boxPropsKeys) as any
109-
return <WrappedComponent {...rest} />
110-
})(
124+
styled(
125+
React.forwardRef<React.ComponentType<P>, P & BoxProps>(function withBox(
126+
props,
127+
ref
128+
) {
129+
const rest = omit(props, boxPropsKeys) as any
130+
return <WrappedComponent {...rest} ref={ref} />
131+
})
132+
)(
111133
compose(display, spacing, flexbox, sizing, griditem)
112-
) as React.ComponentType<P & BoxProps>
134+
) as React.ForwardRefExoticComponent<P & BoxProps>
113135

114-
export const withPositioningProps = <P extends object>(
136+
export const withPositioningProps: WrapperType<PositioningProps> = <
137+
P extends object
138+
>(
115139
WrappedComponent: React.ComponentType<P>
116140
) =>
117-
styled((props) => {
118-
const rest = omit(props, boxPropsKeys) as any
119-
return <WrappedComponent {...rest} />
120-
})(compose(display, spacing, flexbox, griditem)) as React.ComponentType<
121-
P & PositioningProps
122-
>
141+
styled(
142+
React.forwardRef<React.ComponentType<P>, P & PositioningProps>(
143+
function withPositioning(props, ref) {
144+
const rest = omit(props, positioningPropsKeys) as any
145+
return <WrappedComponent {...rest} ref={ref} />
146+
}
147+
)
148+
)(
149+
compose(display, spacing, flexbox, griditem)
150+
) as React.ForwardRefExoticComponent<P & PositioningProps>
123151

124-
export const withSizingProps = <P extends object>(
152+
export const withSizingProps: WrapperType<SizingProps> = <P extends object>(
125153
WrappedComponent: React.ComponentType<P>
126154
) =>
127-
styled((props) => {
128-
const rest = omit(props, boxPropsKeys) as any
129-
return <WrappedComponent {...rest} />
130-
})(sizing) as React.ComponentType<P & SizingProps>
155+
styled(
156+
React.forwardRef<React.ComponentType<P>, P & SizingProps>(
157+
function withSizing(props, ref) {
158+
const rest = omit(props, sizingPropsKeys) as any
159+
return <WrappedComponent {...rest} ref={ref} />
160+
}
161+
)
162+
)(sizing) as React.ForwardRefExoticComponent<P & SizingProps>

‎src/theme/ThemeSwitch.tsx

Lines changed: 53 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -95,56 +95,62 @@ const CelestialIcon = (props: IconProps) => {
9595

9696
export type ThemeSwitchProps = BaseThemeSwitchProps & PositioningProps
9797

98-
const Toggle = ({
99-
themeChoice,
100-
toggleThemeChoice,
101-
lightColor = 'brand.main',
102-
darkColor = 'brand.main',
103-
variant = 'celestial',
104-
}: BaseThemeSwitchProps) => {
105-
const [choice, toggle] = useThemeController()
98+
const Toggle = React.forwardRef<HTMLButtonElement, BaseThemeSwitchProps>(
99+
(
100+
{
101+
themeChoice,
102+
toggleThemeChoice,
103+
lightColor = 'brand.main',
104+
darkColor = 'brand.main',
105+
variant = 'celestial',
106+
},
107+
ref
108+
) => {
109+
const [choice, toggle] = useThemeController()
106110

107-
// allow props to override theme until deprecated removed
108-
const internalChoice = themeChoice || choice
109-
const internalToggle = toggleThemeChoice || toggle
111+
// allow props to override theme until deprecated removed
112+
const internalChoice = themeChoice || choice
113+
const internalToggle = toggleThemeChoice || toggle
110114

111-
const isLight = internalChoice === 'light'
112-
const title = isLight ? 'Use dark theme' : 'Use light theme'
113-
let icon
114-
switch (variant) {
115-
case 'commit':
116-
icon = (
117-
<CommitIcon
118-
themeChoice={internalChoice}
119-
lightColor={lightColor}
120-
darkColor={darkColor}
121-
/>
122-
)
123-
break
124-
case 'celestial':
125-
icon = (
126-
<CelestialIcon
127-
themeChoice={internalChoice}
128-
lightColor={lightColor}
129-
darkColor={darkColor}
130-
/>
131-
)
132-
break
133-
default:
134-
break
135-
}
115+
const isLight = internalChoice === 'light'
116+
const title = isLight ? 'Use dark theme' : 'Use light theme'
117+
let icon
118+
switch (variant) {
119+
case 'commit':
120+
icon = (
121+
<CommitIcon
122+
themeChoice={internalChoice}
123+
lightColor={lightColor}
124+
darkColor={darkColor}
125+
/>
126+
)
127+
break
128+
case 'celestial':
129+
icon = (
130+
<CelestialIcon
131+
themeChoice={internalChoice}
132+
lightColor={lightColor}
133+
darkColor={darkColor}
134+
/>
135+
)
136+
break
137+
default:
138+
break
139+
}
136140

137-
return (
138-
<IconButton
139-
color={isLight ? 'primary' : 'secondary'}
140-
onClick={internalToggle}
141-
title={title}
142-
aria-label="switch-theme"
143-
>
144-
{icon}
145-
</IconButton>
146-
)
147-
}
141+
return (
142+
<IconButton
143+
ref={ref}
144+
color={isLight ? 'primary' : 'secondary'}
145+
onClick={internalToggle}
146+
title={title}
147+
aria-label="switch-theme"
148+
>
149+
{icon}
150+
</IconButton>
151+
)
152+
}
153+
)
148154

149155
export const ThemeSwitch: React.ComponentType<ThemeSwitchProps> = withPositioningProps<
150156
BaseThemeSwitchProps

‎test/AppBar.test.tsx

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
import React from 'react'
2-
import { render } from './test-utils'
2+
import { renderLight, renderDark } from './setupTests'
33
import { AppBar, Toolbar } from '../src'
44

5-
describe('AppBar', () => {
6-
it('renders without crashing', () => {
7-
const { asFragment } = render(
8-
<AppBar>
9-
<Toolbar />
10-
</AppBar>
11-
)
12-
expect(asFragment()).toMatchSnapshot()
13-
})
5+
it('renders light without crashing', () => {
6+
const { asFragment } = renderLight(
7+
<AppBar>
8+
<Toolbar />
9+
</AppBar>
10+
)
11+
expect(asFragment()).toMatchSnapshot()
12+
})
13+
14+
it('renders dark without crashing', () => {
15+
const { asFragment } = renderDark(
16+
<AppBar>
17+
<Toolbar />
18+
</AppBar>
19+
)
20+
expect(asFragment()).toMatchSnapshot()
1421
})

‎test/Avatar.test.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react'
2-
import { render } from './test-utils'
2+
import { renderLight, renderDark } from './setupTests'
33
import { Avatar } from '../src'
44

5-
describe('Avatar', () => {
6-
it('renders without crashing', () => {
7-
const { asFragment } = render(<Avatar />)
8-
expect(asFragment()).toMatchSnapshot()
9-
})
5+
it('renders light without crashing', () => {
6+
const { asFragment } = renderLight(<Avatar />)
7+
expect(asFragment()).toMatchSnapshot()
8+
})
9+
10+
it('renders dark without crashing', () => {
11+
const { asFragment } = renderDark(<Avatar />)
12+
expect(asFragment()).toMatchSnapshot()
1013
})

0 commit comments

Comments
 (0)