Skip to content

Commit c161ded

Browse files
jzempeljzempel
committed
Fix color-related tests
1 parent a84a16c commit c161ded

38 files changed

+388
-287
lines changed

‎.storybook/preview.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
import React from 'react';
99
import styled, { createGlobalStyle } from 'styled-components';
1010
import { create } from '@storybook/theming/create';
11-
import { ThemeProvider, DEFAULT_THEME, getColor } from '../packages/theming/src';
11+
import { ThemeProvider, DEFAULT_THEME, getColorV8 } from '../packages/theming/src';
1212

1313
const DARK_THEME = { ...DEFAULT_THEME, colors: { ...DEFAULT_THEME.colors, base: 'dark' } };
14-
const DARK = getColor({ theme: DARK_THEME, variable: 'background.default' });
15-
const LIGHT = getColor({ theme: DEFAULT_THEME, variable: 'background.default' });
14+
const DARK = getColorV8('foreground', 600 /* default shade */, DARK_THEME);
15+
const LIGHT = getColorV8('background', 600 /* default shade */, DEFAULT_THEME);
1616

1717
export const parameters = {
1818
actions: { argTypesRegex: '^on[A-Z].*' },
@@ -36,7 +36,7 @@ export const parameters = {
3636

3737
const GlobalPreviewStyling = createGlobalStyle`
3838
body {
39-
background-color: ${p => getColor({ theme: p.theme, variable: 'background.default' })};
39+
background-color: ${p => getColorV8('background', 600 /* default shade */, p.theme)};
4040
/* stylelint-disable-next-line declaration-no-important */
4141
padding: 0 !important;
4242
font-family: ${p => p.theme.fonts.system};
@@ -65,6 +65,8 @@ const withThemeProvider = (story, context) => {
6565
: context.parameters.backgrounds.default === 'dark'
6666
) {
6767
colors.base = 'dark';
68+
colors.background = getColorV8('neutralHue', 900, DEFAULT_THEME);
69+
colors.foreground = getColorV8('neutralHue', 200, DEFAULT_THEME);
6870
}
6971

7072
const theme = { ...DEFAULT_THEME, colors, rtl };

‎packages/accordions/src/styled/accordion/StyledButton.spec.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import { render, renderRtl } from 'garden-test-utils';
10-
import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
10+
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
1111
import { StyledButton } from './StyledButton';
1212

1313
describe('StyledButton', () => {
@@ -16,7 +16,7 @@ describe('StyledButton', () => {
1616

1717
expect(container.firstChild).toHaveStyleRule('padding', '20px');
1818
expect(container.firstChild).toHaveStyleRule('text-align', 'left');
19-
expect(container.firstChild).toHaveStyleRule('color', '#2f3941');
19+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
2020
expect(container.firstChild).not.toHaveStyleRule('cursor');
2121
});
2222

@@ -35,10 +35,7 @@ describe('StyledButton', () => {
3535
it('renders isHovered styling correctly', () => {
3636
const { container } = render(<StyledButton isHovered />);
3737

38-
expect(container.firstChild).toHaveStyleRule(
39-
'color',
40-
getColorV8('primaryHue', 600, DEFAULT_THEME)
41-
);
38+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.blue[600]);
4239

4340
expect(container.firstChild).toHaveStyleRule('cursor', 'pointer', {
4441
modifier: '&:hover'

‎packages/accordions/src/styled/stepper/StyledIcon.spec.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,23 @@
88
import React from 'react';
99
import { render } from 'garden-test-utils';
1010
import { StyledIcon } from './StyledIcon';
11-
import { getColorV8, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
11+
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
1212

1313
describe('StyledIcon', () => {
1414
it('renders default styles', () => {
1515
const { container } = render(<StyledIcon />);
1616

17-
expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800]);
18-
expect(container.firstChild).toHaveStyleRule(
19-
'background',
20-
getColorV8('neutralHue', 200, DEFAULT_THEME)
21-
);
17+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
18+
expect(container.firstChild).toHaveStyleRule('background', PALETTE_V8.grey[200]);
2219
expect(container.firstChild).toHaveStyleRule('margin-right', '12px');
2320
expect(container.firstChild).not.toHaveStyleRule('margin-bottom');
2421
});
22+
2523
it('renders active color styles', () => {
2624
const { container } = render(<StyledIcon isActive />);
2725

28-
expect(container.firstChild).toHaveStyleRule('color', PALETTE.white);
29-
expect(container.firstChild).toHaveStyleRule(
30-
'background',
31-
getColorV8('neutralHue', 600, DEFAULT_THEME)
32-
);
26+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.white);
27+
expect(container.firstChild).toHaveStyleRule('background', PALETTE_V8.grey[600]);
3328
});
3429

3530
it('renders correct icon styles for horizontal stepper', () => {

‎packages/accordions/src/styled/stepper/StyledLabel.spec.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import React from 'react';
99
import { render } from 'garden-test-utils';
1010
import { StyledLabel } from './StyledLabel';
11-
import { getColorV8, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
11+
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
1212

1313
describe('StyledLabel', () => {
1414
it('renders default styles', () => {
@@ -18,10 +18,7 @@ describe('StyledLabel', () => {
1818
expect(container.firstChild).not.toHaveStyleRule('text-align');
1919
expect(container.firstChild).toHaveStyleRule('display', 'flex');
2020
expect(container.firstChild).toHaveStyleRule('align-items', 'center');
21-
expect(container.firstChild).toHaveStyleRule(
22-
'color',
23-
getColorV8('neutralHue', 600, DEFAULT_THEME)
24-
);
21+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
2522
});
2623

2724
it('renders styles for horizontal label', () => {
@@ -36,7 +33,7 @@ describe('StyledLabel', () => {
3633
it('renders styles for active label', () => {
3734
const { container } = render(<StyledLabel isActive />);
3835

39-
expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800]);
36+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
4037
expect(container.firstChild).toHaveStyleRule('font-weight', '600');
4138
});
4239
});

‎packages/buttons/src/styled/StyledButton.spec.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import { render } from 'garden-test-utils';
10-
import { getColorV8, PALETTE } from '@zendeskgarden/react-theming';
10+
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
1111
import { StyledButton } from './StyledButton';
1212

1313
describe('StyledButton', () => {
@@ -32,13 +32,13 @@ describe('StyledButton', () => {
3232
it('renders danger styling if provided', () => {
3333
const { container } = render(<StyledButton isDanger />);
3434

35-
expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue'));
35+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]);
3636
});
3737

3838
it('renders disabled styling if provided', () => {
3939
const { container } = render(<StyledButton disabled />);
4040

41-
expect(container.firstChild).toHaveStyleRule('color', getColorV8('neutralHue'));
41+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
4242
});
4343

4444
it('renders link styling if provided', () => {
@@ -51,13 +51,13 @@ describe('StyledButton', () => {
5151
it('renders primary styling if provided', () => {
5252
const { container } = render(<StyledButton isPrimary />);
5353

54-
expect(container.firstChild).toHaveStyleRule('background-color', getColorV8('primaryHue'));
54+
expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.blue[600]);
5555
});
5656

5757
it('renders neutral styling if provided', () => {
5858
const { container } = render(<StyledButton isNeutral />);
5959

60-
expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.grey[300]);
60+
expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.grey[300]);
6161
});
6262

6363
it('renders pill styling if provided', () => {

‎packages/buttons/src/styled/StyledIconButton.spec.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { css } from 'styled-components';
1010
import { render } from 'garden-test-utils';
1111
import { StyledIconButton } from './StyledIconButton';
1212
import { StyledIcon } from './StyledIcon';
13-
import { PALETTE } from '@zendeskgarden/react-theming';
13+
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
1414

1515
describe('StyledIconButton', () => {
1616
it('renders the expected element', () => {
@@ -28,7 +28,7 @@ describe('StyledIconButton', () => {
2828
it('renders basic color styling', () => {
2929
const { container } = render(<StyledIconButton isBasic />);
3030

31-
expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[600]);
31+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
3232
});
3333

3434
describe('disabled', () => {
@@ -43,7 +43,7 @@ describe('StyledIconButton', () => {
4343
it('renders expected primary styling', () => {
4444
const { container } = render(<StyledIconButton disabled isPrimary />);
4545

46-
expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.grey[200], {
46+
expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.grey[200], {
4747
modifier: ':disabled'
4848
});
4949
});

‎packages/buttons/src/styled/StyledSplitButton.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { render, renderRtl, screen } from 'garden-test-utils';
1010
import { StyledSplitButton } from './StyledSplitButton';
1111
import { StyledButton } from './StyledButton';
1212
import { StyledIconButton } from './StyledIconButton';
13-
import { PALETTE } from '@zendeskgarden/react-theming';
13+
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
1414

1515
describe('StyledSplitButton', () => {
1616
it('renders the expected element', () => {
@@ -50,7 +50,7 @@ describe('StyledSplitButton', () => {
5050
</StyledSplitButton>
5151
);
5252

53-
expect(screen.getByText('test')).toHaveStyleRule('background-color', PALETTE.grey[200], {
53+
expect(screen.getByText('test')).toHaveStyleRule('background-color', PALETTE_V8.grey[200], {
5454
modifier: `${StyledSplitButton} &&:disabled`
5555
});
5656
});

‎packages/dropdowns.legacy/src/elements/Combobox/Combobox.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import userEvent from '@testing-library/user-event';
10-
import { PALETTE } from '@zendeskgarden/react-theming';
10+
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
1111
import { fireEvent, render } from 'garden-test-utils';
1212
import { KEY_CODES } from '@zendeskgarden/container-utilities';
1313

@@ -45,7 +45,7 @@ describe('Combobox', () => {
4545

4646
await user.hover(label);
4747

48-
expect(combobox).toHaveStyleRule('border-color', PALETTE.blue[600], { modifier: ':hover' });
48+
expect(combobox).toHaveStyleRule('border-color', PALETTE_V8.blue[600], { modifier: ':hover' });
4949
});
5050

5151
it('focuses input on label click', async () => {

‎packages/dropdowns.legacy/src/styled/items/StyledItem.spec.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
*/
77

88
import React from 'react';
9+
import { rgba } from 'polished';
910
import { render } from 'garden-test-utils';
10-
import { getColorV8, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
11+
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
1112
import { StyledItem } from './StyledItem';
1213

1314
describe('StyledItem', () => {
@@ -20,21 +21,21 @@ describe('StyledItem', () => {
2021
it('renders default styling', () => {
2122
const { container } = render(<StyledItem />);
2223

23-
expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800]);
24+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
2425
});
2526

2627
it('renders danger styling if provided', () => {
2728
const { container } = render(<StyledItem isDanger />);
2829

29-
expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue'));
30+
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]);
3031
});
3132

3233
it('render danger focus styling if provided', () => {
3334
const { container } = render(<StyledItem isDanger isFocused />);
3435

3536
expect(container.firstChild).toHaveStyleRule(
3637
'background-color',
37-
getColorV8('dangerHue', 600, DEFAULT_THEME, 0.08)
38+
rgba(PALETTE_V8.red[600], 0.08)
3839
);
3940
});
4041
});

‎packages/dropdowns/src/elements/combobox/Combobox.spec.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import React, { HTMLAttributes, InputHTMLAttributes, forwardRef } from 'react';
99
import { render, renderRtl } from 'garden-test-utils';
1010
import userEvent from '@testing-library/user-event';
11-
import { PALETTE } from '@zendeskgarden/react-theming';
11+
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
1212
import { IComboboxProps, ISelectedOption } from '../../types';
1313
import { Combobox } from './Combobox';
1414
import { OptGroup } from './OptGroup';
@@ -99,7 +99,7 @@ describe('Combobox', () => {
9999

100100
await user.hover(label);
101101

102-
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.blue[600], {
102+
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.blue[600], {
103103
modifier: ':hover'
104104
});
105105
});
@@ -228,7 +228,7 @@ describe('Combobox', () => {
228228
const input = getByTestId('input');
229229

230230
expect(trigger).toHaveAttribute('aria-disabled', 'true');
231-
expect(trigger).toHaveStyleRule('background-color', PALETTE.grey[100], {
231+
expect(trigger).toHaveStyleRule('background-color', PALETTE_V8.grey[100], {
232232
modifier: '[aria-disabled="true"]'
233233
});
234234
expect(input).toHaveAttribute('disabled');
@@ -451,8 +451,8 @@ describe('Combobox', () => {
451451
const combobox = getByTestId('combobox');
452452
const message = getByTestId('message');
453453

454-
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.green[600]);
455-
expect(message).toHaveStyleRule('color', PALETTE.green[600]);
454+
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.green[600]);
455+
expect(message).toHaveStyleRule('color', PALETTE_V8.green[600]);
456456
expect(message.firstChild).not.toBeNull();
457457
});
458458

@@ -461,8 +461,8 @@ describe('Combobox', () => {
461461
const combobox = getByTestId('combobox');
462462
const message = getByTestId('message');
463463

464-
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.yellow[600]);
465-
expect(message).toHaveStyleRule('color', PALETTE.yellow[700]);
464+
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.yellow[600]);
465+
expect(message).toHaveStyleRule('color', PALETTE_V8.yellow[700]);
466466
expect(message.firstChild).not.toBeNull();
467467
});
468468

@@ -471,8 +471,8 @@ describe('Combobox', () => {
471471
const combobox = getByTestId('combobox');
472472
const message = getByTestId('message');
473473

474-
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.red[600]);
475-
expect(message).toHaveStyleRule('color', PALETTE.red[600]);
474+
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.red[600]);
475+
expect(message).toHaveStyleRule('color', PALETTE_V8.red[600]);
476476
expect(message.firstChild).not.toBeNull();
477477
});
478478
});

0 commit comments

Comments
 (0)