From 52fab7e70af6ec3ab4b499969483c1391bf836ca Mon Sep 17 00:00:00 2001
From: Brian August Nguyen <brianacnguyen@gmail.com>
Date: Tue, 4 Jun 2024 08:57:55 -0700
Subject: [PATCH] feat: Created Unit Tests for CSS Color Variables Alignment
 with Figma Token JSON (#719)

* feat: added tests for css variables

* refactor: removed lint ignore
---
 src/css/brandColors.test.ts | 34 ++++++++++++++++++++++++++++++++
 src/css/darkTheme.test.ts   | 39 +++++++++++++++++++++++++++++++++++++
 src/css/lightTheme.test.ts  | 39 +++++++++++++++++++++++++++++++++++++
 3 files changed, 112 insertions(+)
 create mode 100644 src/css/brandColors.test.ts
 create mode 100644 src/css/darkTheme.test.ts
 create mode 100644 src/css/lightTheme.test.ts

diff --git a/src/css/brandColors.test.ts b/src/css/brandColors.test.ts
new file mode 100644
index 00000000..c819684a
--- /dev/null
+++ b/src/css/brandColors.test.ts
@@ -0,0 +1,34 @@
+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 (Object.prototype.hasOwnProperty.call(brandColors, color)) {
+      if (color !== 'white' && color !== 'black') {
+        for (const shade in brandColors[color]) {
+          if (Object.prototype.hasOwnProperty.call(brandColors[color], shade)) {
+            const variableName = `--brand-colors-${color}-${color}${shade}`;
+            const colorValue: string = 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: string = brandColors[color].value;
+        it(`should have the correct value for ${variableName}`, () => {
+          expect(brandColorsCSS).toContain(`${variableName}: ${colorValue};`);
+        });
+      }
+    }
+  }
+});
diff --git a/src/css/darkTheme.test.ts b/src/css/darkTheme.test.ts
new file mode 100644
index 00000000..62497ed8
--- /dev/null
+++ b/src/css/darkTheme.test.ts
@@ -0,0 +1,39 @@
+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) {
+    if (Object.prototype.hasOwnProperty.call(darkTheme, section)) {
+      for (const key in darkTheme[section]) {
+        if (Object.prototype.hasOwnProperty.call(darkTheme[section], key)) {
+          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};`);
+          });
+        }
+      }
+    }
+  }
+});
diff --git a/src/css/lightTheme.test.ts b/src/css/lightTheme.test.ts
new file mode 100644
index 00000000..9300ed3a
--- /dev/null
+++ b/src/css/lightTheme.test.ts
@@ -0,0 +1,39 @@
+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) {
+    if (Object.prototype.hasOwnProperty.call(lightTheme, section)) {
+      for (const key in lightTheme[section]) {
+        if (Object.prototype.hasOwnProperty.call(lightTheme[section], key)) {
+          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};`);
+          });
+        }
+      }
+    }
+  }
+});