Added test for SASS variable retrieval function from JS definition

jest.config.js

@@ -6,11 +6,13 @@ module.exports = {
   },
   "moduleDirectories": ["node_modules", "public"],
   "roots": [
+    "<rootDir>/scripts",
     "<rootDir>/public/app",
     "<rootDir>/public/test",
     "<rootDir>/packages"
   ],
   "testRegex": "(\\.|/)(test)\\.(jsx?|tsx?)$",
+  "testPathIgnorePatterns": ["webpack.test.js"],
   "moduleFileExtensions": [
     "ts",
     "tsx",

packages/grafana-ui/src/themes/index.js

@@ -1,15 +1,16 @@
 const darkTheme = require('./dark');
 const lightTheme = require('./light');
 
-const getTheme = name => (name === 'light' ? lightTheme : darkTheme);
+let mockedTheme;
+
+let getTheme = name => mockedTheme || (name === 'light' ? lightTheme : darkTheme);
 
 const mockTheme = mock => {
-  const originalGetTheme = getTheme;
+  mockedTheme = mock;
-  getTheme = () => mock;
+  return () => (mockedTheme = null);
-  return () => (getTheme = originalGetTheme);
 };
 
 module.exports = {
   getTheme,
-  mockTheme
+  mockTheme,
 };

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();
+  });
+});