fix(withCamelCaseProps): make exception for className

dnbexperience · Aug 26, 2022 · 3cd5def · 3cd5def
1 parent 6c169b4
commit 3cd5def
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/packages/dnb-eufemia/src/shared/helpers/__tests__/withCamelCaseProps.test.tsx b/packages/dnb-eufemia/src/shared/helpers/__tests__/withCamelCaseProps.test.tsx
@@ -92,6 +92,41 @@ describe('withCamelCaseProps', () => {
     `)
   })
 
+  it('will handle className correctly', () => {
+    type ExtraTypes = {
+      className?: string
+    }
+    const Component = withCamelCaseProps(
+      (props: IncludeCamelCase<OriginalProps> & ExtraTypes) => {
+        return <Original {...props} />
+      }
+    )
+
+    const { asFragment } = render(<Component className="value" />)
+
+    expect(screen.queryByTestId('props').textContent).toMatch(
+      '{"className":"value"}'
+    )
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div
+          data-testid="content"
+        >
+          <div
+            data-testid="props"
+          >
+            {"className":"value"}
+          </div>
+          <div
+            data-testid="context"
+          >
+            {}
+          </div>
+        </div>
+      </DocumentFragment>
+    `)
+  })
+
   it('will render with enzyme', () => {
     const Comp = mount(<Component snake_case={false} camelCase={1} />)
 

diff --git a/packages/dnb-eufemia/src/shared/helpers/__tests__/withSnakeCaseProps.test.tsx b/packages/dnb-eufemia/src/shared/helpers/__tests__/withSnakeCaseProps.test.tsx
@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react'
 import React from 'react'
 import {
   withSnakeCaseProps,
+  convertSnakeCaseProps,
   classWithSnakeCaseProps,
   IncludeSnakeCase,
 } from '../withSnakeCaseProps'
@@ -423,3 +424,18 @@ describe('classWithSnakeCaseProps', () => {
     expect(onUpdate).toHaveBeenCalledTimes(2)
   })
 })
+
+describe('convertSnakeCaseProps', () => {
+  it('will convert', () => {
+    const props = {
+      foo_bar: 'value',
+      snake_case: { foo_bar: 123 },
+    }
+    const result = convertSnakeCaseProps(props)
+
+    expect(result).toEqual({
+      fooBar: 'value',
+      snakeCase: { foo_bar: 123 },
+    })
+  })
+})
diff --git a/packages/dnb-eufemia/src/shared/helpers/withCamelCaseProps.tsx b/packages/dnb-eufemia/src/shared/helpers/withCamelCaseProps.tsx
@@ -88,6 +88,12 @@ function convertCamelCaseProps<P>(props: P) {
   const newProps = { ...props }
 
   for (const key in props) {
+    switch (key) {
+      case 'className': {
+        continue
+      }
+    }
+
     if (/^[a-z]+[A-Z]/.test(key)) {
       newProps[toSnakeCase(key)] = props[key]
       delete newProps[key]