improvement(createwithuserthemes): add styled themeMap functionality,…

… tests

This adds the actual functionality for createWithUserThemes in the styled package, including a
couple tests to make sure it works

jest.config.base.js

@@ -15,7 +15,7 @@ module.exports = {
     '^.+\\.css$': path.join(__dirname, '/test/mockCssTransform.js'),
   },
   transformIgnorePatterns: [
-    '/node_modules/',
+    '/node_modules/(?!@irvingjs)',
     '<rootDir>/packages/[^/]+/lib/',
   ],
 };

packages/styled/components/hoc/createWithUserThemes.js

@@ -0,0 +1,17 @@
+import withThemes from './withThemes';
+
+const createWithUserThemes = (
+  WrappedComponent,
+  defaultThemeMap = {}
+) => (themeMap) => {
+  // Merge user theme map with defaults.
+  const mergedThemeMap = {
+    default: defaultThemeMap,
+    ...themeMap,
+  };
+
+  return withThemes(mergedThemeMap)(WrappedComponent);
+};
+
+/** @component */
+export default createWithUserThemes;

packages/styled/components/hoc/createWithUserThemes.test.js

@@ -1,31 +1,61 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import styled from 'styled-components';
 import createWithUserThemes from './createWithUserThemes';
 
 describe('withUserThemes', () => {
-  const ThemeableComponent = ({ theme }) => (
-    <div>
-      <span className={theme.testClass}>Content One</span>
-      <span className={theme.testClass2}>Content Two</span>
-    </div>
-  );
+  const ThemeableComponent = ({ theme }) => {
+    const {
+      Wrapper,
+      ContentItem,
+    } = theme;
+
+    return (
+      <Wrapper>
+        <ContentItem>Content One</ContentItem>
+        <ContentItem>Content Two</ContentItem>
+      </Wrapper>
+    );
+  };
   const userThemes = {
-    theme1: {
-      testClass: 'theme1__testClass__12345',
-      testClass2: 'theme1__testClass2__asdfg',
+    default: {
+      Wrapper: styled.div`
+        background-color: blue;
+      `,
+      ContentItem: styled.span`
+        color: green;
+      `,
     },
-    theme2: {
-      testClass: 'theme2__testClass__34567',
-      testClass2: 'theme2__testClass2__qwert',
+    theme1: {
+      Wrapper: styled.div`
+        background-color: orange;
+      `,
+      ContentItem: styled.span`
+        color: black;
+      `,
     },
   };
   const ThemedComponent = createWithUserThemes(ThemeableComponent)(userThemes);
 
   it('Should use a themeMap and themeName provided by a user', () => {
     const wrapper = mount(<ThemedComponent themeName="theme1" />);
-    expect(wrapper.contains([
-      <span className="theme1__testClass__12345">Content One</span>,
-      <span className="theme1__testClass2__asdfg">Content Two</span>,
-    ])).toBe(true);
+
+    expect(
+      wrapper.exists(`.${userThemes.theme1.Wrapper.styledComponentId}`)
+    ).toBe(true);
+    expect(
+      wrapper.exists(`.${userThemes.theme1.ContentItem.styledComponentId}`)
+    ).toBe(true);
+  });
+
+  it('Should override default with user theme if a default key is used in user themeMap', () => {
+    const wrapper = mount(<ThemedComponent />);
+
+    expect(
+      wrapper.exists(`.${userThemes.default.Wrapper.styledComponentId}`)
+    ).toBe(true);
+    expect(
+      wrapper.exists(`.${userThemes.default.ContentItem.styledComponentId}`)
+    ).toBe(true);
   });
 });