Element: Update logic for getWrapperDisplayName method

WordPress · Dec 6, 2017 · 26f0e59 · 26f0e59
1 parent e11cba0
commit 26f0e59
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/element/index.js b/element/index.js
@@ -4,7 +4,7 @@
 import { createElement, Component, cloneElement, Children } from 'react';
 import { render, findDOMNode, createPortal, unmountComponentAtNode } from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { flowRight, isString, startCase } from 'lodash';
+import { camelCase, flowRight, isString, upperFirst } from 'lodash';
 
 /**
  * Returns a new element of given type. Type can be either a string tag name or
@@ -135,5 +135,5 @@ export { flowRight as compose };
 export function getWrapperDisplayName( BaseComponent, wrapperName ) {
 	const { displayName = BaseComponent.name || 'Component' } = BaseComponent;
 
-	return `${ startCase( wrapperName ) }(${ displayName })`;
+	return `${ upperFirst( camelCase( wrapperName ) ) }(${ displayName })`;
 }
diff --git a/element/test/index.js b/element/test/index.js
@@ -99,6 +99,10 @@ describe( 'element', () => {
 			expect( getWrapperDisplayName( () => <div />, 'test' ) ).toBe( 'Test(Component)' );
 		} );
 
+		it( 'should use camel case starting with upper for wrapper prefix ', () => {
+			expect( getWrapperDisplayName( () => <div />, 'one-two_threeFOUR' ) ).toBe( 'OneTwoThreeFour(Component)' );
+		} );
+
 		it( 'should use function name', () => {
 			function SomeComponent() {
 				return <div />;