Repository: uber-web/baseui
Pull request #702 (2019-01-03 00:58:31)

feat(overrides): export `mergeStyleOverrides` and add tests
#### Description

Export `mergeStyleOverrides`, `StyleOverrideT`, and add tests. Can be helpful for dealing with style overrides outside of Base UI.

#### Scope

- [ ] Patch: Bug Fix
- [x] Minor: New Feature
- [ ] Major: Breaking Change


leyanlo: Updated the test with `$FlowFixMe`s..

Patch:
diff --git a/src/helpers/overrides.js b/src/helpers/overrides.js
index e263b608f..684341a1f 100644
--- a/src/helpers/overrides.js
+++ b/src/helpers/overrides.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import deepMerge from '../utils/deep-merge.js';
 
-type StyleOverrideT = {} | (({}) => ?{});
+export type StyleOverrideT = {} | (({}) => ?{});
 
 export type OverrideObjectT<T> = {|
   component?: ?React.ComponentType<T>,
@@ -133,7 +133,10 @@ export function mergeOverride<T>(
  * the case that one of them is a function. We do this by returning a new
  * function that deep merges the result of each style override
  */
-function mergeStyleOverrides(target: StyleOverrideT, source: StyleOverrideT) {
+export function mergeStyleOverrides(
+  target: StyleOverrideT,
+  source: StyleOverrideT,
+): StyleOverrideT {
   // Simple case of both objects
   if (typeof target === 'object' && typeof source === 'object') {
     return deepMerge({}, target, source);


Test patch:
diff --git a/src/helpers/__tests__/overrides.test.js b/src/helpers/__tests__/overrides.test.js
index 0ecea746d..cb48e6bdc 100644
--- a/src/helpers/__tests__/overrides.test.js
+++ b/src/helpers/__tests__/overrides.test.js
@@ -12,6 +12,7 @@ import {
   toObjectOverride,
   mergeOverrides,
   mergeOverride,
+  mergeStyleOverrides,
   getOverrides,
 } from '../overrides.js';
 
@@ -137,6 +138,37 @@ describe('Helpers - Overrides', () => {
     });
   });
 
+  test('mergeStyleOverrides', () => {
+    const overrideObject1 = {color: 'red', textTransform: 'uppercase'};
+    const overrideObject2 = {color: 'blue'};
+    const overrideFunction1 = () => overrideObject1;
+    const overrideFunction2 = () => overrideObject2;
+    const expectedResult = {
+      color: 'blue',
+      textTransform: 'uppercase',
+    };
+
+    const result1 = mergeStyleOverrides(overrideObject1, overrideObject2);
+    const result2 = mergeStyleOverrides(overrideObject1, overrideFunction2);
+    const result3 = mergeStyleOverrides(overrideFunction1, overrideObject2);
+    const result4 = mergeStyleOverrides(overrideFunction1, overrideFunction2);
+
+    expect(typeof result1).toBe('object');
+    expect(result1).toEqual(expectedResult);
+
+    expect(typeof result2).toBe('function');
+    // $FlowFixMe result should be a function here
+    expect(result2()).toEqual(expectedResult);
+
+    expect(typeof result3).toBe('function');
+    // $FlowFixMe result should be a function here
+    expect(result3()).toEqual(expectedResult);
+
+    expect(typeof result4).toBe('function');
+    // $FlowFixMe result should be a function here
+    expect(result4()).toEqual(expectedResult);
+  });
+
   test('getOverrides', () => {
     const DefaultComponent = getMockComponent();
     const OverrideComponent = getMockComponent();