Repository: teleporthq/teleport-code-generators
Pull request #216 (2019-05-09 04:36:57)

fix(react-styled-components): Fixed of adding styled by default


Patch:
diff --git a/packages/teleport-generator-shared/src/builders/uidl-builders.ts b/packages/teleport-generator-shared/src/builders/uidl-builders.ts
index 2ed4a713..17d6b6a8 100644
--- a/packages/teleport-generator-shared/src/builders/uidl-builders.ts
+++ b/packages/teleport-generator-shared/src/builders/uidl-builders.ts
@@ -7,6 +7,7 @@ import {
   ReferenceType,
   ComponentUIDL,
   UIDLSlotNode,
+  UIDLStyleValue,
 } from '../typings/uidl'
 
 export const component = (name: string, node: UIDLNode): ComponentUIDL => {
@@ -19,23 +20,28 @@ export const component = (name: string, node: UIDLNode): ComponentUIDL => {
 export const elementNode = (
   elementType: string,
   attrs?: Record<string, UIDLAttributeValue>,
-  children?: UIDLNode[]
+  children?: UIDLNode[],
+  style?: Record<string, UIDLStyleValue>
 ): UIDLElementNode => {
   return {
     type: 'element',
-    content: element(elementType, attrs, children),
+    content: style
+      ? element(elementType, attrs, children, style)
+      : element(elementType, attrs, children),
   }
 }
 
 export const element = (
   elementType: string,
   attrs?: Record<string, UIDLAttributeValue>,
-  children?: UIDLNode[]
+  children?: UIDLNode[],
+  style?: Record<string, UIDLStyleValue>
 ) => {
   return {
     elementType,
     name: elementType,
     attrs,
+    style,
     children,
   }
 }
diff --git a/packages/teleport-plugin-react-styled-components/src/index.ts b/packages/teleport-plugin-react-styled-components/src/index.ts
index ae2e7bc1..1b4adf8f 100644
--- a/packages/teleport-plugin-react-styled-components/src/index.ts
+++ b/packages/teleport-plugin-react-styled-components/src/index.ts
@@ -74,6 +74,10 @@ export const createPlugin: ComponentPluginFactory<StyledComponentsConfig> = (con
       }
     })
 
+    if (!Object.keys(jssStyleMap).length) {
+      return structure
+    }
+
     dependencies.styled = {
       type: 'library',
       path: 'styled-components',


Test patch:
diff --git a/packages/teleport-component-generator-react/__tests__/end2end/index.ts b/packages/teleport-component-generator-react/__tests__/end2end/index.ts
index a340019b..4f7a545e 100644
--- a/packages/teleport-component-generator-react/__tests__/end2end/index.ts
+++ b/packages/teleport-component-generator-react/__tests__/end2end/index.ts
@@ -48,6 +48,22 @@ describe('React Component Generator', () => {
     })
   })
 
+  describe('with StyledComponents', () => {
+    const generator = createReactComponentGenerator({
+      variation: 'StyledComponents',
+    })
+
+    it('should return the files containing the code as string', async () => {
+      const result = await generator.generateComponent(uidlSample)
+      const jsFile = findFileByType(result.files, JS_FILE)
+
+      expect(jsFile).toBeDefined()
+      expect(result.files.length).toBe(1)
+      expect(jsFile.content).toContain('import React')
+      expect(result.dependencies).toBeDefined()
+    })
+  })
+
   describe('with InlineStyles', () => {
     const generator = createReactComponentGenerator()
 
diff --git a/packages/teleport-plugin-react-styled-components/__tests__/index.ts b/packages/teleport-plugin-react-styled-components/__tests__/index.ts
new file mode 100644
index 00000000..dbb226f4
--- /dev/null
+++ b/packages/teleport-plugin-react-styled-components/__tests__/index.ts
@@ -0,0 +1,93 @@
+import {
+  component,
+  elementNode,
+  staticNode,
+} from '@teleporthq/teleport-generator-shared/lib/builders/uidl-builders'
+import {
+  ComponentStructure,
+  ChunkDefinition,
+} from '@teleporthq/teleport-generator-shared/lib/typings/generators'
+import { createPlugin } from '../src/index'
+
+describe('Testing the functionality for StyledComponents', () => {
+  const plugin = createPlugin()
+  const componentChunk: ChunkDefinition = {
+    name: 'react-component',
+    meta: {
+      nodesLookup: {
+        container: {
+          openingElement: {
+            name: {
+              name: '',
+            },
+          },
+        },
+      },
+    },
+    type: 'js',
+    linkAfter: ['import-local'],
+    content: {},
+  }
+
+  it('Should not add styled as dependency', async () => {
+    const uidlSample = component('StyledComponents', elementNode('container'))
+    const structure: ComponentStructure = {
+      uidl: uidlSample,
+      chunks: [componentChunk],
+      dependencies: {},
+    }
+
+    const { dependencies } = await plugin(structure)
+
+    expect(Object.keys(dependencies).length).toBe(0)
+  })
+
+  it('Should add styled as dependency', async () => {
+    const style = {
+      height: staticNode('100px'),
+    }
+    const element = elementNode('container', {}, [], style)
+    const elementWithKey = {
+      ...element,
+      content: {
+        ...element.content,
+        key: 'container',
+      },
+    }
+    const uidlSample = component('StyledComponents', elementWithKey)
+    const structure: ComponentStructure = {
+      uidl: uidlSample,
+      chunks: [componentChunk],
+      dependencies: {},
+    }
+
+    const { dependencies } = await plugin(structure)
+    const { styled } = dependencies
+
+    expect(Object.keys(dependencies).length).toBeGreaterThan(0)
+    expect(styled.type).toBe('library')
+    expect(styled.path).toBe('styled-components')
+  })
+
+  it('Generator should not break when chunks are missing', async () => {
+    const element = elementNode('container', {}, [], {})
+    const elementWithKey = {
+      ...element,
+      content: {
+        ...element.content,
+        key: 'container',
+      },
+    }
+    const uidlSample = component('StyledComponents', elementWithKey)
+
+    const structure: ComponentStructure = {
+      uidl: uidlSample,
+      chunks: [],
+      dependencies: {},
+    }
+
+    const { dependencies } = await plugin(structure)
+
+    expect(Object.keys(dependencies).length).toBe(0)
+  })
+})