From 1e4c6b4b527df387946c34d13d3a8b7e58aa20df Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 6 Feb 2019 17:05:22 +0100
Subject: [PATCH] Added test for SASS variable retrieval function from JS
 definition

---
 jest.config.js                           |  2 ++
 packages/grafana-ui/src/themes/index.js  | 11 ++++---
 scripts/webpack/getThemeVariable.js      |  4 +--
 scripts/webpack/getThemeVariable.test.js | 40 ++++++++++++++++++++++++
 4 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 scripts/webpack/getThemeVariable.test.js

diff --git a/jest.config.js b/jest.config.js
index c5c6bcb9f5f..248435c43f2 100644
--- a/jest.config.js
+++ b/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",
diff --git a/packages/grafana-ui/src/themes/index.js b/packages/grafana-ui/src/themes/index.js
index c88cf137574..91ba25349fd 100644
--- a/packages/grafana-ui/src/themes/index.js
+++ b/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;
-  getTheme = () => mock;
-  return () => (getTheme = originalGetTheme);
+  mockedTheme = mock;
+  return () => (mockedTheme = null);
 };
 
 module.exports = {
   getTheme,
-  mockTheme
+  mockTheme,
 };
diff --git a/scripts/webpack/getThemeVariable.js b/scripts/webpack/getThemeVariable.js
index 6726f95d47c..3bd9b2a53d0 100644
--- a/scripts/webpack/getThemeVariable.js
+++ b/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;
   }
 
diff --git a/scripts/webpack/getThemeVariable.test.js b/scripts/webpack/getThemeVariable.test.js
new file mode 100644
index 00000000000..78083330890
--- /dev/null
+++ b/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();
+  });
+});