Skip to content

Commit

Permalink
more tests, simplify logic, clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@mnajdova
mnajdova committed Sep 22, 2023
1 parent 0414435 commit 940164b
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 57 deletions.
26 changes: 2 additions & 24 deletions packages/mui-system/src/createStyled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,23 +192,13 @@ export default function createStyled(input = {}) {
}
delete resolvedStyles['variants'];
}
let result = resolvedStyles;

const variantsStyles = variantsResolver(
props,
transformVariants(optionalVariants),
optionalVariants,
);

// the variantsStyle is an array of all variant styles that need to be applied,
// so we need to merge them on top of the rest of the styles
if (variantsStyles) {
variantsStyles.forEach((variantStyle) => {
result = deepmerge(result, variantStyle);
});
}

return result;
return [resolvedStyles, ...variantsStyles];
};
} else if (isPlainObject(stylesArg)) {
let transformedStylesArg = stylesArg;
Expand All @@ -220,7 +210,6 @@ export default function createStyled(input = {}) {

if (styledArgVariants) {
transformedStylesArg = (props) => {
console.log(props);
let result = stylesArg;
const variantStyles = variantsResolver(
props,
Expand All @@ -230,7 +219,6 @@ export default function createStyled(input = {}) {
variantStyles.forEach((variantStyle) => {
result = deepmerge(result, variantStyle);
});
console.log(result);

return result;
};
Expand Down Expand Up @@ -286,23 +274,13 @@ export default function createStyled(input = {}) {
}
delete resolvedStyles['variants'];
}
let result = resolvedStyles;

const variantsStyles = variantsResolver(
props,
transformVariants(optionalVariants),
optionalVariants,
);

// the variantsStyle is an array of all variant styles that need to be applied,
// so we need to merge them on top of the rest of the styles
if (variantsStyles) {
variantsStyles.forEach((variantStyle) => {
result = deepmerge(result, variantStyle);
});
}

return result;
return [resolvedStyles, ...variantsStyles];
};
}

Expand Down
123 changes: 90 additions & 33 deletions packages/mui-system/src/createStyled.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -433,37 +433,39 @@ describe('createStyled', () => {
],
});

// console.log("fn as arg");
// const TestFn = styled('div')(() => ({
// variants: [{
// props: { color: 'blue', variant: 'filled' },
// styles: {
// backgroundColor: 'rgb(0,0,255)'
// }
// }, {
// props: { color: 'blue', variant: 'text' },
// styles: {
// color: 'rgb(0,0,255)'
// }
// }]
// }));

// console.log("string template as arg");
// const StringTemplate = styled('div')``;

// console.log("string template with callbacks");
// const StringTemplateWithCallbacks = styled('div')`
// background-color: ${props => props.color === 'blue' ? 'rgb(0, 0, 255)' : 'transparent'}
// `;

// const Test = styled('div')(({ variant, color }) => ({
// ...(color === 'blue' && variant === 'filled' && {
// backgroundColor: 'rgb(0,0,255)'
// }),
// ...(color === 'blue' && variant === 'text' && {
// color: 'rgb(0,0,255)'
// }),
// }));
const { getByTestId } = render(
<>
<Test data-testid="filled" color="blue" variant="filled">
Filled
</Test>
<Test data-testid="text" color="blue" variant="text">
Filled
</Test>
</>,
);
expect(getByTestId('filled')).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)' });
expect(getByTestId('text')).toHaveComputedStyle({ color: 'rgb(0, 0, 255)' });
});

it('should accept variants in function style arg', () => {
const styled = createStyled({ defaultTheme: { colors: { blue: 'rgb(0, 0, 255)' } } });

const Test = styled('div')(({ theme }) => ({
variants: [
{
props: { color: 'blue', variant: 'filled' },
style: {
backgroundColor: theme.colors.blue,
},
},
{
props: { color: 'blue', variant: 'text' },
style: {
color: theme.colors.blue,
},
},
],
}));

const { getByTestId } = render(
<>
Expand Down Expand Up @@ -541,6 +543,13 @@ describe('createStyled', () => {
borderTopColor: 'rgb(0,0,255)',
},
},
// This is overriding the previous definition
{
props: { color: 'blue', variant: 'text' },
style: {
color: 'rgb(0,0,220)',
},
},
],
},
);
Expand All @@ -559,10 +568,58 @@ describe('createStyled', () => {
</>,
);
expect(getByTestId('filled')).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)' });
expect(getByTestId('text')).toHaveComputedStyle({ color: 'rgb(0, 0, 255)' });
expect(getByTestId('text')).toHaveComputedStyle({ color: 'rgb(0, 0, 220)' });
expect(getByTestId('outlined')).toHaveComputedStyle({ borderTopColor: 'rgb(0, 0, 255)' });
});

// TODO: Add tests for priority of style definition
it('theme variants should override styled variants', () => {
const styled = createStyled({});

const Test = styled('div', { name: 'Test' })({
variants: [
{
props: { color: 'blue', variant: 'filled' },
style: {
backgroundColor: 'rgb(0,0,255)',
},
},
// This is overriding the previous definition
{
props: { color: 'blue', variant: 'text' },
style: {
color: 'rgb(0,0,255)',
},
},
],
});

const { getByTestId } = render(
<ThemeProvider
theme={{
components: {
Test: {
variants: [
{
props: { variant: 'text', color: 'blue' },
style: {
color: 'rgb(0,0,220)',
},
},
],
},
},
}}
>
<Test data-testid="filled" color="blue" variant="filled">
Filled
</Test>
<Test data-testid="text" color="blue" variant="text">
Filled
</Test>
</ThemeProvider>,
);
expect(getByTestId('filled')).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)' });
expect(getByTestId('text')).toHaveComputedStyle({ color: 'rgb(0, 0, 220)' });
});
});
});

0 comments on commit 940164b

Please sign in to comment.