From 0a0432cb032454486dc778556cd6ea1094e5e404 Mon Sep 17 00:00:00 2001
From: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>
Date: Tue, 1 Sep 2020 09:23:42 -0700
Subject: [PATCH] fix(style): throw if there is no theme (#761)

* fix(style): throw if there is no theme

* tests

* factor out SupersetTheme type

* fix test
---
 .../packages/superset-ui-style/package.json   |  4 ++
 .../packages/superset-ui-style/src/index.ts   | 20 +++++++--
 .../superset-ui-style/test/index.test.ts      | 18 --------
 .../superset-ui-style/test/index.test.tsx     | 44 +++++++++++++++++++
 4 files changed, 65 insertions(+), 21 deletions(-)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/test/index.test.ts
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/test/index.test.tsx

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/package.json b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/package.json
index 29c711f9f533..9d3b08f3d616 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/package.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/package.json
@@ -32,5 +32,9 @@
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "emotion-theming": "^10.0.27"
+  },
+  "devDependencies": {
+    "react": "^16.13.1",
+    "enzyme": "^3.11.0"
   }
 }
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts
index 185e2bb97b70..5e5cfe9d6634 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts
@@ -17,10 +17,22 @@
  * under the License.
  */
 import emotionStyled, { CreateStyled } from '@emotion/styled';
+import { useTheme as useThemeBasic } from 'emotion-theming';
 
-export { useTheme, ThemeProvider, withTheme } from 'emotion-theming';
+export { ThemeProvider, withTheme } from 'emotion-theming';
 export { css } from '@emotion/core';
 
+export function useTheme() {
+  const theme = useThemeBasic<SupersetTheme>();
+  // in the case there is no theme, useTheme returns an empty object
+  if (Object.keys(theme).length === 0 && theme.constructor === Object) {
+    throw new Error(
+      'useTheme() could not find a ThemeContext. The <ThemeProvider/> component is likely missing from the app.',
+    );
+  }
+  return theme;
+}
+
 const defaultTheme = {
   borderRadius: 4,
   colors: {
@@ -127,11 +139,13 @@ const defaultTheme = {
   gridUnit: 4,
 };
 
+export type SupersetTheme = typeof defaultTheme;
+
 export interface SupersetThemeProps {
-  theme: typeof defaultTheme;
+  theme: SupersetTheme;
 }
 
-export const styled: CreateStyled<typeof defaultTheme> = emotionStyled;
+export const styled: CreateStyled<SupersetTheme> = emotionStyled;
 export const supersetTheme = defaultTheme;
 
 export default styled;
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/test/index.test.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/test/index.test.ts
deleted file mode 100644
index e2b882c3845b..000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/test/index.test.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import styled, { supersetTheme, SupersetThemeProps } from '../src';
-
-describe('@superset-ui/style package', () => {
-  it('exports a theme', () => {
-    expect(typeof supersetTheme).toBe('object');
-  });
-
-  it('exports styled component templater', () => {
-    expect(typeof styled.div).toBe('function');
-  });
-
-  it('exports SupersetThemeProps', () => {
-    const props: SupersetThemeProps = {
-      theme: supersetTheme,
-    };
-    expect(typeof props).toBe('object');
-  });
-});
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/test/index.test.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/test/index.test.tsx
new file mode 100644
index 000000000000..dc102b04aa40
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/test/index.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import styled, { supersetTheme, SupersetThemeProps, useTheme, ThemeProvider } from '../src';
+
+describe('@superset-ui/style package', () => {
+  it('exports a theme', () => {
+    expect(typeof supersetTheme).toBe('object');
+  });
+
+  it('exports styled component templater', () => {
+    expect(typeof styled.div).toBe('function');
+  });
+
+  it('exports SupersetThemeProps', () => {
+    const props: SupersetThemeProps = {
+      theme: supersetTheme,
+    };
+    expect(typeof props).toBe('object');
+  });
+
+  describe('useTheme()', () => {
+    it('returns the theme', () => {
+      function ThemeUser() {
+        expect(useTheme()).toStrictEqual(supersetTheme);
+        return <div>test</div>;
+      }
+      mount(<ThemeUser />, {
+        wrappingComponent: ({ children }) => (
+          <ThemeProvider theme={supersetTheme}>{children}</ThemeProvider>
+        ),
+      });
+    });
+
+    it('throws when a theme is not present', () => {
+      function ThemeUser() {
+        expect(useTheme).toThrow(/could not find a ThemeContext/);
+        return <div>test</div>;
+      }
+      mount(<ThemeUser />, {
+        wrappingComponent: ({ children }) => <div>{children}</div>,
+      });
+    });
+  });
+});