fix(style): throw if there is no theme (apache#761)

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

* tests

* factor out SupersetTheme type

* fix test

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"
   }
 }

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;

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