Skip to content

Commit 4cdd9b8

Browse files
author
Dario Soller
committed
tests(integration): add mix color integration tests
(cherry picked from commit 72bca07) # Conflicts: # test/integration/color-modifier-references.test.ts
1 parent d0db881 commit 4cdd9b8

File tree

3 files changed

+135
-3
lines changed

3 files changed

+135
-3
lines changed

‎test/integration/color-modifier-references.test.ts

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const cfg = {
2727

2828
let dict: StyleDictionary | undefined;
2929

30-
describe('typography references', () => {
30+
describe('color modifier references', () => {
3131
beforeEach(async () => {
3232
if (dict) {
3333
cleanup(dict);
@@ -50,8 +50,46 @@ describe('typography references', () => {
5050

5151
it('supports color modifier that is a reference itself, containing another reference', async () => {
5252
const file = await promises.readFile(outputFilePath, 'utf-8');
53-
const content = excerpt(file, { start: '--sdModifier: [object Object];', end: '}' });
53+
const content = excerpt(file, {
54+
start: '--sdModifier: [object Object];',
55+
end: '--sdTreshhold',
56+
});
5457
const expectedOutput = `--sdColor2: #0000004d;`;
5558
expect(content).toBe(expectedOutput);
5659
});
60+
61+
it('supports color with hardcoded mix value and hardcoded mix color', async () => {
62+
const file = await promises.readFile(outputFilePath, 'utf-8');
63+
const content = excerpt(file, { start: new RegExp('--sdMixColor: .*;'), end: '--sdColor4' });
64+
const expectedOutput = `--sdColor3: #a1bbee;`;
65+
expect(content).toBe(expectedOutput);
66+
});
67+
68+
it('supports color with hardcoded mix value and hardcoded mix color using an expression', async () => {
69+
const file = await promises.readFile(outputFilePath, 'utf-8');
70+
const content = excerpt(file, { start: new RegExp('--sdColor3: .*;'), end: '--sdColor5' });
71+
const expectedOutput = `--sdColor4: #759ae6;`;
72+
expect(content).toBe(expectedOutput);
73+
});
74+
75+
it('supports color with hardcoded mix value and referenced mix color', async () => {
76+
const file = await promises.readFile(outputFilePath, 'utf-8');
77+
const content = excerpt(file, { start: new RegExp('--sdColor4: .*;'), end: '--sdColor6' });
78+
const expectedOutput = `--sdColor5: #759ae6;`;
79+
expect(content).toBe(expectedOutput);
80+
});
81+
82+
it('supports color with referenced base color and referenced mix color', async () => {
83+
const file = await promises.readFile(outputFilePath, 'utf-8');
84+
const content = excerpt(file, { start: new RegExp('--sdColor5: .*;'), end: '--sdColor7' });
85+
const expectedOutput = `--sdColor6: #3b64b3;`;
86+
expect(content).toBe(expectedOutput);
87+
});
88+
89+
it('supports color with referenced base color, referenced mix color, and expression-based mix value', async () => {
90+
const file = await promises.readFile(outputFilePath, 'utf-8');
91+
const content = excerpt(file, { start: new RegExp('--sdColor6: .*;'), end: '}' });
92+
const expectedOutput = `--sdColor7: #3b64b3;`;
93+
expect(content).toBe(expectedOutput);
94+
});
5795
});

‎test/integration/tokens/color-modifier-references.tokens.json

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,96 @@
3333
"modify": "{modifier}"
3434
}
3535
}
36+
},
37+
"treshhold": {
38+
"value": 0.5,
39+
"type": "number"
40+
},
41+
"increment": {
42+
"value": 0.04,
43+
"type": "number"
44+
},
45+
"baseColor": {
46+
"value": "#202D3B",
47+
"type": "color"
48+
},
49+
"mixColor": {
50+
"value": "#4477DD",
51+
"type": "color"
52+
},
53+
"color3": {
54+
"value": "#FFFFFF",
55+
"type": "color",
56+
"$extensions": {
57+
"studio.tokens": {
58+
"modify": {
59+
"type": "mix",
60+
"value": "0.5",
61+
"space": "srgb",
62+
"color": "#4477DD",
63+
"format": "hex"
64+
}
65+
}
66+
}
67+
},
68+
"color4": {
69+
"value": "#FFFFFF",
70+
"type": "color",
71+
"$extensions": {
72+
"studio.tokens": {
73+
"modify": {
74+
"type": "mix",
75+
"value": "0.5 + 6 * 0.04",
76+
"space": "srgb",
77+
"color": "#4477DD",
78+
"format": "hex"
79+
}
80+
}
81+
}
82+
},
83+
"color5": {
84+
"value": "#FFFFFF",
85+
"type": "color",
86+
"$extensions": {
87+
"studio.tokens": {
88+
"modify": {
89+
"type": "mix",
90+
"value": "0.5 + 6 * 0.04",
91+
"space": "srgb",
92+
"color": "{mixColor}",
93+
"format": "hex"
94+
}
95+
}
96+
}
97+
},
98+
"color6": {
99+
"value": "{baseColor}",
100+
"type": "color",
101+
"$extensions": {
102+
"studio.tokens": {
103+
"modify": {
104+
"type": "mix",
105+
"value": "0.5 + 6 * 0.04",
106+
"space": "srgb",
107+
"color": "{mixColor}",
108+
"format": "hex"
109+
}
110+
}
111+
}
112+
},
113+
"color7": {
114+
"type": "color",
115+
"value": "{baseColor}",
116+
"$extensions": {
117+
"studio.tokens": {
118+
"modify": {
119+
"type": "mix",
120+
"value": "({treshhold} + 6 * {increment})",
121+
"space": "srgb",
122+
"color": "{mixColor}",
123+
"format": "hex"
124+
}
125+
}
126+
}
36127
}
37128
}

‎test/integration/utils.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@ export async function cleanup(dict?: StyleDictionary & { cleaned?: boolean }) {
2929

3030
// Take an excerpt of a string and trim whitespace at the ends
3131
// and remove indentations after newline -> before the `--` CSS prop starting characters
32-
export function excerpt(content: string, options?: { start?: string; end?: string }) {
32+
export function excerpt(
33+
content: string,
34+
options?: { start?: string | RegExp; end?: string | RegExp },
35+
) {
3336
const { start, end } = options ?? {};
3437
let trimmedContent = content;
3538
if (start) {

0 commit comments

Comments
 (0)