Skip to content
This repository has been archived by the owner on Nov 26, 2024. It is now read-only.

feat: Created Unit Tests for CSS Color Variables Alignment with Figma Token JSON #719

Merged
merged 2 commits into from
Jun 4, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: added tests for css variables
brianacnguyen committed Jun 3, 2024

Verified

This commit was signed with the committer’s verified signature.
brianacnguyen Brian August Nguyen
commit d71784a0bae298bdc5038b51da38f461248f6d91
30 changes: 30 additions & 0 deletions src/css/brandColors.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/* eslint-disable guard-for-in */
/* eslint-disable @typescript-eslint/restrict-template-expressions */
brianacnguyen marked this conversation as resolved.
Show resolved Hide resolved
import { readFileSync } from 'fs';
import { resolve } from 'path';

const brandColorsPath = resolve(__dirname, '../figma/brandColors.json');
const brandColorsCSSPath = resolve(__dirname, 'brand-colors.css');

const brandColors = JSON.parse(readFileSync(brandColorsPath, 'utf8'));
const brandColorsCSS = readFileSync(brandColorsCSSPath, 'utf8');

describe('Brand Colors CSS', () => {
for (const color in brandColors) {
if (color !== 'white' && color !== 'black') {
for (const shade in brandColors[color]) {
const variableName = `--brand-colors-${color}-${color}${shade}`;
const colorValue = brandColors[color][shade].value;
it(`should have the correct value for ${variableName}`, () => {
expect(brandColorsCSS).toContain(`${variableName}: ${colorValue};`);
});
}
} else {
const variableName = `--brand-colors-${color}`;
const colorValue = brandColors[color].value;
it(`should have the correct value for ${variableName}`, () => {
expect(brandColorsCSS).toContain(`${variableName}: ${colorValue};`);
});
}
}
});
36 changes: 36 additions & 0 deletions src/css/darkTheme.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/* eslint-disable guard-for-in */
brianacnguyen marked this conversation as resolved.
Show resolved Hide resolved
import { readFileSync } from 'fs';
import { resolve } from 'path';

const darkThemePath = resolve(__dirname, '../figma/darkTheme.json');
const darkThemeCSSPath = resolve(__dirname, 'dark-theme-colors.css');

const darkTheme = JSON.parse(readFileSync(darkThemePath, 'utf8'));
const darkThemeCSS = readFileSync(darkThemeCSSPath, 'utf8');

describe('Dark Theme Colors CSS', () => {
for (const section in darkTheme) {
for (const key in darkTheme[section]) {
const variableName = `--color-${section}-${key.replace(/_/gu, '-')}`;
const { value } = darkTheme[section][key];

let cssValue: string;
if (value.startsWith('{')) {
const parts: string[] = value.slice(1, -1).split('.');
const color: string | undefined = parts[0];
const shade: string | undefined = parts[1];
if (color && shade) {
cssValue = `var(--brand-colors-${color}-${color}${shade})`;
} else {
throw new Error(`Invalid color or shade: ${value as string}`);
}
} else {
cssValue = value;
}

it(`should have the correct value for ${variableName}`, () => {
expect(darkThemeCSS).toContain(`${variableName}: ${cssValue};`);
});
}
}
});
36 changes: 36 additions & 0 deletions src/css/lightTheme.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/* eslint-disable guard-for-in */
import { readFileSync } from 'fs';
import { resolve } from 'path';

const lightThemePath = resolve(__dirname, '../figma/lightTheme.json');
const lightThemeCSSPath = resolve(__dirname, 'light-theme-colors.css');

const lightTheme = JSON.parse(readFileSync(lightThemePath, 'utf8'));
const lightThemeCSS = readFileSync(lightThemeCSSPath, 'utf8');

describe('Light Theme Colors CSS', () => {
for (const section in lightTheme) {
for (const key in lightTheme[section]) {
const variableName = `--color-${section}-${key.replace(/_/gu, '-')}`;
const { value } = lightTheme[section][key];

let cssValue: string;
if (value.startsWith('{')) {
const parts: string[] = value.slice(1, -1).split('.');
const color: string | undefined = parts[0];
const shade: string | undefined = parts[1];
if (color && shade) {
cssValue = `var(--brand-colors-${color}-${color}${shade})`;
} else {
throw new Error(`Invalid color or shade: ${value as string}`);
}
} else {
cssValue = value;
}

it(`should have the correct value for ${variableName}`, () => {
expect(lightThemeCSS).toContain(`${variableName}: ${cssValue};`);
});
}
}
});