Skip to content

Commit afe6cca

Browse files
asadmogulasadmogul
committed
feat(Button): Button colors and test added
Button colors error, warning, success and tests added.
1 parent c1640d9 commit afe6cca

File tree

8 files changed

+335
-137
lines changed

8 files changed

+335
-137
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"config": {},
1313
"size-limit": [
1414
{
15-
"limit": "35 KB",
15+
"limit": "40 KB",
1616
"webpack": false,
1717
"path": "dist/**/!(*.test).js"
1818
}

‎src/components/Button/Button.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { ButtonDefaultProps, ButtonProps, ActivityIndicator, DynamicIcon } from '@bluebase/components';
1+
import { ActivityIndicator, ButtonDefaultProps, ButtonProps, DynamicIcon } from '@bluebase/components';
22
import MUIButton from '@material-ui/core/Button';
3-
import { componentMapper } from '@bluebase/component-mapper';
43
import React from 'react';
5-
import { withPropsStyles } from '../../withPropsStyles';
4+
import { componentMapper } from '@bluebase/component-mapper';
65
import { styles } from './styles';
6+
import { withPropsStyles } from '../../withPropsStyles';
77

88
export const Button = withPropsStyles(styles)(componentMapper<ButtonProps>(MUIButton, {
99
children: ({ title, children, loading, icon }: ButtonProps) => {

‎src/components/Button/__tests__/Button.test.tsx

Lines changed: 93 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,100 @@
1+
import { BlueBaseApp } from '@bluebase/core';
12
import { Button } from '../Button';
3+
import Plugin from '../../../index';
24
import React from 'react';
35
import { Text } from 'react-native';
4-
import { shallow } from 'enzyme';
6+
import { mount } from 'enzyme';
7+
import { waitForElement } from 'enzyme-async-helpers';
58

69

7-
test('Button component should use title prop to show children', () => {
8-
const component = shallow(
9-
<Button title="Foo" />
10-
);
11-
// expect(component).toMatchSnapshot();
12-
expect(component.childAt(0).text()).toEqual('Foo');
13-
});
10+
describe('Button', () => {
11+
12+
test('Button component should use title prop to show children', async () => {
13+
const component = mount(
14+
<BlueBaseApp plugins={[Plugin]}>
15+
<Button title="Foo" />
16+
</BlueBaseApp>
17+
);
18+
await waitForElement(component, Button);
19+
20+
expect(component.find('Button').prop('title')).toEqual('Foo');
21+
});
22+
23+
test('Button component should use children prop to show content', async () => {
24+
const component = mount(
25+
<BlueBaseApp plugins={[Plugin]}>
26+
<Button title="Foo">
27+
<Text>Bar</Text>
28+
</Button>
29+
</BlueBaseApp>
30+
);
31+
await waitForElement(component, Button);
32+
33+
expect(component.find('Text').last().text()).toEqual('Bar');
34+
});
35+
36+
it('should disable the button when disabled is true ', async () => {
37+
const component = mount(
38+
<BlueBaseApp plugins={[Plugin]}>
39+
<Button disabled />
40+
</BlueBaseApp>
41+
);
42+
await waitForElement(component, Button);
43+
expect(component.find('Button').first().prop('disabled')).toEqual(true);
44+
});
45+
46+
it('should pass the color as is when set to "primary"', async () => {
47+
const component = mount(
48+
<BlueBaseApp plugins={[Plugin]}>
49+
<Button color="primary" />
50+
</BlueBaseApp>
51+
);
52+
await waitForElement(component, Button);
53+
54+
expect(component.find('Button').last().prop('color')).toEqual('primary');
55+
});
56+
57+
it('should pass the color as is when set to "secondary"', async () => {
58+
const component = mount(
59+
<BlueBaseApp plugins={[Plugin]}>
60+
<Button color="secondary" />
61+
</BlueBaseApp>
62+
);
63+
await waitForElement(component, Button);
64+
65+
expect(component.find('Button').last().prop('color')).toEqual('secondary');
66+
});
67+
68+
it('should pass the color as is when set to "default"', async () => {
69+
const component = mount(
70+
<BlueBaseApp plugins={[Plugin]}>
71+
<Button color="default" />
72+
</BlueBaseApp>
73+
);
74+
await waitForElement(component, Button);
75+
76+
expect(component.find('Button').last().prop('color')).toEqual('default');
77+
});
78+
79+
it('should loading the button when loading is true ', async () => {
80+
const component = mount(
81+
<BlueBaseApp plugins={[Plugin]}>
82+
<Button loading />
83+
</BlueBaseApp>
84+
);
85+
await waitForElement(component, Button);
86+
expect(component.find('Button').first().prop('loading')).toEqual(true);
87+
});
88+
89+
it('should display icon on button when icon is given ', async () => {
90+
const component = mount(
91+
<BlueBaseApp plugins={[Plugin]}>
92+
<Button icon={{ type: 'icon', name: 'favorite' }} />
93+
</BlueBaseApp>
94+
);
95+
await waitForElement(component, Button);
96+
expect(component.find('Button').first().prop('icon')).toBeDefined();
97+
});
98+
1499

15-
test('Button component should use children prop to show content', () => {
16-
const component = shallow(
17-
<Button title="Foo">
18-
<Text>Bar</Text>
19-
</Button>
20-
);
21-
expect(component.childAt(0).childAt(0).text()).toEqual('Bar');
22100
});

‎src/components/Button/styles.ts

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,40 @@ import { Theme } from '@bluebase/core';
33
import { Theme as MuiTheme } from '@material-ui/core';
44
import { fade } from '@material-ui/core/styles/colorManipulator';
55

6-
export const styles = ({ color }: SwitchProps, muiTheme: MuiTheme, theme: Theme ) => {
7-
6+
export const styles = ({ color }: SwitchProps, muiTheme: MuiTheme, theme: Theme) => {
87
if (!color || color === 'default') {
98
return;
109
}
1110

1211
const colors: {
13-
hover?: string,
14-
main?: string,
15-
text?: string,
12+
hover?: string;
13+
main?: string;
14+
text?: string;
1615
} = {};
1716

1817
// If color is NOT primary, secondary or default then create custom styles
19-
if (color === 'primary' || color === 'secondary' || color === 'success' || color === 'error' || color === 'warning') {
18+
if (
19+
color === 'primary' ||
20+
color === 'secondary' ||
21+
color === 'success' ||
22+
color === 'error' ||
23+
color === 'warning'
24+
) {
2025
colors.hover = (theme.palette as any)[color].dark;
21-
colors.main = (theme.palette as any).main;
22-
colors.text = (theme.palette as any).contrastText;
23-
}
24-
else {
26+
colors.main = (theme.palette as any)[color].main;
27+
colors.text = (theme.palette as any)[color].contrastText;
28+
} else {
2529
colors.hover = color;
2630
colors.main = color;
2731
colors.text = muiTheme.palette.getContrastText(color);
2832
}
2933

3034
return {
31-
3235
contained: {},
3336
outlined: {},
3437
// text: {},
3538

3639
root: {
37-
3840
'&$contained': {
3941
backgroundColor: colors.main,
4042
color: colors.text,
@@ -43,37 +45,31 @@ export const styles = ({ color }: SwitchProps, muiTheme: MuiTheme, theme: Theme
4345
backgroundColor: colors.hover,
4446
},
4547
},
46-
47-
'&$text': {
48-
color: colors.main,
48+
/* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
49+
'&$outlined': {
4950
'&:hover': {
50-
backgroundColor: fade(colors.main as string, theme.palette.action.hoverOpacity),
51-
// Reset on touch devices, it doesn't add specificity
5251
'@media (hover: none)': {
5352
backgroundColor: 'transparent',
5453
},
54+
backgroundColor: fade(colors.main as string, theme.palette.action.hoverOpacity),
55+
border: `1px solid ${colors.main as string}`,
56+
// Reset on touch devices, it doesn't add specificity
5557
},
56-
},
57-
58-
59-
/* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
60-
'&$outlined': {
61-
color: colors.main,
6258
border: `1px solid ${fade(colors.main as string, 0.5)}`,
59+
color: colors.main,
60+
},
61+
'&$text': {
6362
'&:hover': {
64-
border: `1px solid ${colors.main as string}`,
65-
backgroundColor: fade(colors.main as string, theme.palette.action.hoverOpacity),
66-
// Reset on touch devices, it doesn't add specificity
6763
'@media (hover: none)': {
6864
backgroundColor: 'transparent',
6965
},
66+
backgroundColor: fade(colors.main as string, theme.palette.action.hoverOpacity),
67+
// Reset on touch devices, it doesn't add specificity
7068
},
69+
color: colors.main,
7170
},
7271
},
73-
74-
7572
/* Styles applied to the root element if `variant="text"` */
76-
text: {
77-
},
73+
text: {},
7874
};
7975
};

‎src/components/Checkbox/__tests__/Checkbox.test.tsx

Lines changed: 55 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,102 @@
1+
import { BlueBaseApp } from '@bluebase/core';
12
import { Checkbox } from '../Checkbox';
3+
import Plugin from '../../../index';
24
import React from 'react';
35
import { mount } from 'enzyme';
6+
import { waitForElement } from 'enzyme-async-helpers';
47

58
describe('Checkbox', () => {
69

7-
it('should set the checked to true when checked is true', () => {
10+
it('should set the checked to true when checked is true', async () => {
811
const component = mount(
9-
<Checkbox checked />
12+
<BlueBaseApp plugins={[Plugin]}>
13+
<Checkbox checked />
14+
</BlueBaseApp>
1015
);
11-
16+
await waitForElement(component, Checkbox);
1217
// expect(component).toMatchSnapshot();
1318
expect(component.find('Checkbox').first().prop('checked')).toEqual(true);
1419
});
1520

16-
it('should set the checked to false when checked is false', () => {
21+
it('should set the checked to false when checked is false', async () => {
1722
const component = mount(
18-
<Checkbox checked={false} />
23+
<BlueBaseApp plugins={[Plugin]}>
24+
<Checkbox checked={false} />
25+
</BlueBaseApp>
1926
);
27+
await waitForElement(component, Checkbox);
2028

2129
expect(component.find('Checkbox').first().prop('checked')).toEqual(false);
2230
});
2331

24-
it('should pass the color as is when set to "primary"', () => {
32+
it('should pass the color as is when set to "primary"', async () => {
2533
const component = mount(
26-
<Checkbox color="primary" />
34+
<BlueBaseApp plugins={[Plugin]}>
35+
36+
<Checkbox color="primary" />
37+
</BlueBaseApp>
2738
);
39+
await waitForElement(component, Checkbox);
2840

2941
expect(component.find('Checkbox').first().prop('color')).toEqual('primary');
3042
});
3143

32-
it('should pass the color as is when set to "secondary"', () => {
44+
it('should pass the color as is when set to "secondary"', async () => {
3345
const component = mount(
34-
<Checkbox color="secondary" />
46+
<BlueBaseApp plugins={[Plugin]}>
47+
<Checkbox color="secondary" />
48+
</BlueBaseApp>
3549
);
50+
await waitForElement(component, Checkbox);
3651

3752
expect(component.find('Checkbox').first().prop('color')).toEqual('secondary');
3853
});
3954

40-
it('should pass the color as is when set to "default"', () => {
55+
it('should pass the color as is when set to "default"', async () => {
4156
const component = mount(
42-
<Checkbox color="default" />
57+
<BlueBaseApp plugins={[Plugin]}>
58+
<Checkbox color="default" />
59+
</BlueBaseApp>
4360
);
61+
await waitForElement(component, Checkbox);
4462

4563
expect(component.find('Checkbox').first().prop('color')).toEqual('default');
4664
});
4765

48-
it('should set the color prop to undefined and create classed for custom colors', () => {
66+
it('should set the color prop to undefined and create classed for custom colors', async () => {
4967
const component = mount(
50-
<Checkbox color="red" />
68+
<BlueBaseApp plugins={[Plugin]}>
69+
<Checkbox color="red" />
70+
</BlueBaseApp>
5171
);
72+
await waitForElement(component, Checkbox);
5273
// expect(component).toMatchSnapshot();
5374
expect(component.find('WithStyles(Checkbox)').first().prop('classes')).toBeTruthy();
5475
expect(component.find('WithStyles(Checkbox)').first().prop('color')).toEqual(undefined);
5576
});
5677

57-
it('should set the label component', () => {
78+
it('should set the label component', async () => {
5879
const component = mount(
59-
<Checkbox label="Foo" />
80+
<BlueBaseApp plugins={[Plugin]}>
81+
<Checkbox label="Foo" />
82+
</BlueBaseApp>
6083
);
84+
await waitForElement(component, Checkbox);
85+
6186
// expect(component).toMatchSnapshot();
6287
expect(component.find('FormControlLabel').length).toBeGreaterThan(0);
6388
expect(component.find('FormControlLabel').first().prop('label')).toEqual('Foo');
6489
});
6590

66-
it('should map onValueChange fn to onChange fn', () => {
91+
it('should map onValueChange fn to onChange fn', async () => {
6792

6893
const cb = jest.fn();
6994
const component = mount(
70-
<Checkbox label="Foo" onValueChange={cb} />
95+
<BlueBaseApp plugins={[Plugin]}>
96+
<Checkbox label="Foo" onValueChange={cb} />
97+
</BlueBaseApp>
7198
);
99+
await waitForElement(component, Checkbox);
72100

73101
const checkbox = component.find('Checkbox').first();
74102
const onChange = checkbox.prop('onChange') as any;
@@ -80,12 +108,15 @@ describe('Checkbox', () => {
80108
expect(cb).toBeCalledWith(undefined, true);
81109
});
82110

83-
it('should map onValueChange fn to onChange fn with value', () => {
111+
it('should map onValueChange fn to onChange fn with value', async () => {
84112

85113
const cb = jest.fn();
86114
const component = mount(
87-
<Checkbox label="Foo" value="foo" onValueChange={cb} />
115+
<BlueBaseApp plugins={[Plugin]}>
116+
<Checkbox label="Foo" value="foo" onValueChange={cb} />
117+
</BlueBaseApp>
88118
);
119+
await waitForElement(component, Checkbox);
89120

90121
const checkbox = component.find('Checkbox').first();
91122
const onChange = checkbox.prop('onChange') as any;
@@ -97,14 +128,17 @@ describe('Checkbox', () => {
97128
expect(cb).toBeCalledWith('foo', true);
98129
});
99130

100-
it('should pass onChange as is if available', () => {
131+
it('should pass onChange as is if available', async () => {
101132

102133
const cb = jest.fn();
103134

104135
const CHECKBOX = Checkbox as any;
105136
const component = mount(
106-
<CHECKBOX label="Foo" onChange={cb} />
137+
<BlueBaseApp plugins={[Plugin]}>
138+
<CHECKBOX label="Foo" onChange={cb} />
139+
</BlueBaseApp>
107140
);
141+
await waitForElement(component, CHECKBOX);
108142

109143
const onChange = component.find('Checkbox').first().prop('onChange') as any;
110144

0 commit comments

Comments
 (0)