Added test for SASS variable retrieval function from JS definition

scripts/webpack/getThemeVariable.js

@@ -29,12 +29,12 @@ function getThemeVariable(variablePath, themeName) {
   const variable = get(theme, variablePath.getValue());
 
   if (!variable) {
-    throw new Error(`${variablePath.getValue()} is not defined for ${themeName.getValue()} theme`);
+    throw new Error(`${variablePath.getValue()} is not defined for ${themeName.getValue()}`);
   }
 
   if (isHex(variable)) {
     const rgb = new tinycolor(variable).toRgb();
-    const color = sass.types.Color(rgb.r, rgb.g, rgb.b);
+    const color = new sass.types.Color(rgb.r, rgb.g, rgb.b);
     return color;
   }
 

scripts/webpack/getThemeVariable.test.js

@@ -0,0 +1,40 @@
+const sass = require('node-sass');
+const getThemeVariable = require('./getThemeVariable');
+const { mockTheme } = require('@grafana/ui');
+
+const themeMock = {
+  color: {
+    background: '#ff0000',
+  },
+  spacing: {
+    padding: '2em',
+  },
+  typography: {
+    fontFamily: 'Arial, sans-serif',
+  },
+};
+
+describe('Variables retrieval', () => {
+  const restoreTheme = mockTheme(themeMock);
+
+  afterAll(() => {
+    restoreTheme();
+  });
+
+  it('returns sass Color for color values', () => {
+    const result = getThemeVariable({ getValue: () => 'color.background' }, { getValue: () => {} });
+    expect(result).toBeInstanceOf(sass.types.Color);
+  });
+  it('returns sass Number for dimension values', () => {
+    const result = getThemeVariable({ getValue: () => 'spacing.padding' }, { getValue: () => {} });
+    expect(result).toBeInstanceOf(sass.types.Number);
+  });
+  it('returns sass String for string values', () => {
+    const result = getThemeVariable({ getValue: () => 'typography.fontFamily' }, { getValue: () => {} });
+    expect(result).toBeInstanceOf(sass.types.String);
+  });
+
+  it('throws for unknown theme paths', () => {
+    expect(() => getThemeVariable({ getValue: () => 'what.ever' }, { getValue: () => {} })).toThrow();
+  });
+});