Skip to content

Commit

Permalink
chore: Improve border tests (#188)
Browse files Browse the repository at this point in the history
  • Loading branch information
@magnuh
magnuh committed Jan 11, 2024
1 parent b700198 commit e70f3bd
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 70 deletions.
33 changes: 30 additions & 3 deletions test/__snapshots__/border.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,22 @@ exports[`border > supports divide borders between horizontal and stacked childre
.divide-y>*+*{--w-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--w-divide-y-reverse)));border-bottom-width:calc(1px * var(--w-divide-y-reverse));}"
`;

exports[`border > supports setting arbitrary border colors 1`] = `
exports[`border > supports setting arbitrary border color values 1`] = `
"/* layer: default */
.border-\\[\\#000000\\]{border-color:#000000;}
.border-\\[black\\]{border-color:black;}
.border-l-\\[white\\]{border-left-color:white;}
.border-x-\\[rgb\\(0\\,0\\,0\\)\\]{border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);}
.border-y-\\[rgba\\(0\\,0\\,0\\,0\\)\\]{border-top-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,0);}"
`;

exports[`border > supports setting arbitrary border color variables 1`] = `
"/* layer: default */
.border-\\[--w-s-color-border\\],
.border-\\[var\\(--w-s-color-border\\)\\]{border-color:var(--w-s-color-border);}"
.border-\\[var\\(--w-s-color-border\\)\\]{border-color:var(--w-s-color-border);}
.border-l-\\[var\\(--w-s-color-border\\)\\]{border-left-color:var(--w-s-color-border);}
.border-x-\\[var\\(--w-s-color-border\\)\\]{border-left-color:var(--w-s-color-border);border-right-color:var(--w-s-color-border);}
.border-y-\\[--w-s-color-border\\]{border-top-color:var(--w-s-color-border);border-bottom-color:var(--w-s-color-border);}"
`;

exports[`border > supports setting arbitrary border width 1`] = `
Expand All @@ -66,7 +78,15 @@ exports[`border > supports setting arbitrary border width 1`] = `
.border-t-\\[7rem\\]{border-top-width:7rem;}"
`;

exports[`border > supports setting arbitrary divide colors 1`] = `
exports[`border > supports setting arbitrary divide color values 1`] = `
"/* layer: default */
.divide-\\[\\#000000\\]>*+*{border-color: #000000;}
.divide-\\[black\\]>*+*{border-color: black;}
.divide-x-\\[rgb\\(0\\,0\\,0\\)\\]>*+*{border-left-color: rgb(0,0,0);border-right-color: rgb(0,0,0);}
.divide-y-\\[rgba\\(0\\,0\\,0\\,0\\)\\]>*+*{border-top-color: rgba(0,0,0,0);border-bottom-color: rgba(0,0,0,0);}"
`;

exports[`border > supports setting arbitrary divide color variables 1`] = `
"/* layer: default */
.divide-\\[--w-s-color-border\\]>*+*{border-color: var(--w-s-color-border);}
.divide-\\[var\\(--w-s-color-border-subtle\\)\\]>*+*{border-color: var(--w-s-color-border-subtle);}
Expand Down Expand Up @@ -104,6 +124,13 @@ exports[`border > supports setting border width 1`] = `
.border-8{border-width:8px;}"
`;

exports[`border > supports setting divide to current color 1`] = `
"/* layer: default */
.divide-current>*+*{border-color: currentColor;}
.divide-x-current>*+*{border-left-color: currentColor;border-right-color: currentColor;}
.divide-y-current>*+*{border-top-color: currentColor;border-bottom-color: currentColor;}"
`;

exports[`border > supports x|y with value and without 1`] = `
"/* layer: default */
.border-x{border-left-width:1px;border-right-width:1px;}
Expand Down
100 changes: 33 additions & 67 deletions test/border.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,46 +25,46 @@ describe('border', () => {
expect(css).toMatchSnapshot();
});

test('supports setting arbitrary border colors', async ({ uno }) => {
const classes = ['border-[--w-s-color-border]', 'border-[var(--w-s-color-border)]'];
test('supports setting arbitrary border color variables', async ({ uno }) => {
const classes = ['border-[--w-s-color-border]', 'border-[var(--w-s-color-border)]', 'border-x-[var(--w-s-color-border)]', 'border-y-[--w-s-color-border]', 'border-l-[var(--w-s-color-border)]'];
const { css } = await uno.generate(classes);
expect(css).toMatchSnapshot();
});

test('supports setting arbitrary divide colors', async ({ uno }) => {
const classes = [
'divide-[--w-s-color-border]',
'divide-[var(--w-s-color-border-subtle)]',
'divide-x-[var(--w-s-color-border-negative)]',
'divide-y-[var(--w-s-color-border-positive)]',
];
test('supports setting arbitrary border color values', async ({ uno }) => {
const classes = ['border-[#000000]', 'border-[black]', 'border-x-[rgb(0,0,0)]', 'border-y-[rgba(0,0,0,0)]', 'border-l-[white]'];
const antiClasses = ['border-#000000', 'border-black', 'border-x-white', 'border-y-rgba(0,0,0,0)', 'border[white]'];
const { css } = await uno.generate([...classes, ...antiClasses]);
expect(css).toMatchSnapshot();
});

test('supports setting arbitrary divide color variables', async ({ uno }) => {
const classes = ['divide-[--w-s-color-border]', 'divide-[var(--w-s-color-border-subtle)]', 'divide-x-[var(--w-s-color-border-negative)]', 'divide-y-[var(--w-s-color-border-positive)]'];
const { css } = await uno.generate(classes);
expect(css).toMatchSnapshot();
});

test('supports setting divide to current color', async ({ uno }) => {
const classes = ['divide-current', 'divide-x-current', 'divide-y-current'];
const antiClasses = ['divide-currentcolor', 'dividecurrent', 'divide-l-current', 'divide-current-y'];
const { css } = await uno.generate([...classes, ...antiClasses]);
expect(css).toMatchSnapshot();
});

test('supports setting arbitrary divide color values', async ({ uno }) => {
const classes = ['divide-[#000000]', 'divide-[black]', 'divide-x-[rgb(0,0,0)]', 'divide-y-[rgba(0,0,0,0)]'];
const { css } = await uno.generate(classes);
expect(css).toMatchSnapshot();
});

test('supports setting border style', async ({ uno }) => {
const classes = [
'border-solid',
'border-dashed',
'border-dotted',
'border-double',
'border-hidden',
'border-none',
'border-groove',
'border-ridge',
'border-inset',
'border-outset',
];
const classes = ['border-solid', 'border-dashed', 'border-dotted', 'border-double', 'border-hidden', 'border-none', 'border-groove', 'border-ridge', 'border-inset', 'border-outset'];
const { css } = await uno.generate(classes);
expect(css).toMatchSnapshot();
});

test('supports setting border color', async ({ uno }) => {
const classes = [
'border-transparent',
'border-inherit',
'border-current',
];
const classes = ['border-transparent', 'border-inherit', 'border-current'];
const { css } = await uno.generate(classes);
expect(css).toMatchSnapshot();
});
Expand All @@ -80,13 +80,17 @@ describe('border', () => {
});

test('supports divide borders between horizontal and stacked children', async ({ uno }) => {
const classes = Object.keys(lineWidth).map(width => [`divide-x-${width}`, `divide-y-${width}`]).flat();
const classes = Object.keys(lineWidth)
.map((width) => [`divide-x-${width}`, `divide-y-${width}`])
.flat();
const { css } = await uno.generate(classes);
expect(css).toMatchSnapshot();
});

test('supports divide borders between horizontal and stacked children in reverse order', async ({ uno }) => {
const classes = Object.keys(lineWidth).map(() => [`divide-x-reverse`, `divide-y-reverse`]).flat();
const classes = Object.keys(lineWidth)
.map(() => [`divide-x-reverse`, `divide-y-reverse`])
.flat();
const { css } = await uno.generate(classes);
expect(css).toMatchSnapshot();
});
Expand All @@ -111,46 +115,8 @@ describe('rounded', () => {
});

test('support setting arbitrary rounded', async ({ uno }) => {
const classes = [
'rounded-[31]',
'rounded-[31rem]',
'rounded-[31px]',
'rounded-[31%]',
'rounded-t-[31]',
'rounded-t-[31rem]',
'rounded-t-[31px]',
'rounded-t-[31%]',
'rounded-tr-[31]',
'rounded-tr-[31rem]',
'rounded-tr-[31px]',
'rounded-tr-[31%]',
'rounded-tl-[31]',
'rounded-tl-[31rem]',
'rounded-tl-[31px]',
'rounded-tl-[31%]',
'rounded-r-[31]',
'rounded-r-[31rem]',
'rounded-r-[31px]',
'rounded-r-[31%]',
'rounded-l-[31]',
'rounded-l-[31rem]',
'rounded-l-[31px]',
'rounded-l-[31%]',
'rounded-b-[31]',
'rounded-b-[31rem]',
'rounded-b-[31px]',
'rounded-b-[31%]',
'rounded-br-[31]',
'rounded-br-[31rem]',
'rounded-br-[31px]',
'rounded-br-[31%]',
'rounded-bl-[31]',
'rounded-bl-[31rem]',
'rounded-bl-[31px]',
'rounded-bl-[31%]',
];
const classes = ['rounded-[31]', 'rounded-[31rem]', 'rounded-[31px]', 'rounded-[31%]', 'rounded-t-[31]', 'rounded-t-[31rem]', 'rounded-t-[31px]', 'rounded-t-[31%]', 'rounded-tr-[31]', 'rounded-tr-[31rem]', 'rounded-tr-[31px]', 'rounded-tr-[31%]', 'rounded-tl-[31]', 'rounded-tl-[31rem]', 'rounded-tl-[31px]', 'rounded-tl-[31%]', 'rounded-r-[31]', 'rounded-r-[31rem]', 'rounded-r-[31px]', 'rounded-r-[31%]', 'rounded-l-[31]', 'rounded-l-[31rem]', 'rounded-l-[31px]', 'rounded-l-[31%]', 'rounded-b-[31]', 'rounded-b-[31rem]', 'rounded-b-[31px]', 'rounded-b-[31%]', 'rounded-br-[31]', 'rounded-br-[31rem]', 'rounded-br-[31px]', 'rounded-br-[31%]', 'rounded-bl-[31]', 'rounded-bl-[31rem]', 'rounded-bl-[31px]', 'rounded-bl-[31%]'];
const { css } = await uno.generate(classes);
expect(css).toMatchSnapshot();
});
});

0 comments on commit e70f3bd

Please sign in to comment.