Repository: teleporthq/teleport-code-generators (ts)

Issue:
Component names are not same as specified in UIDL
After this #168, I tried exporting a project from CLI too code sandbox using ``codesandbox cli`` and a sandbox is created here --> https://codesandbox.io/s/8zz2kr8118 and then here is the bug the component name is not the same as that is specified in the UIDL is 
~~~
        {
            "value": "contact-us",
            "meta": {
              "path": "/here-we-are",
              "componentName": "Us"
            }
          }
~~~

And the import statement is being generated properly
~~~
import Us from './pages/contact-us'
~~~

But the file name that is being generated is something like this 
~~~
contactus.css
contactus.js
~~~

Pull request description:
Fix/#175 file names
Update to the string conversion functions + tests. We will go with a standard from now on:
- all component names when used in JS will be camelCase or UpperCamelCase
- all file names will be dashCase (including the import statements for local dependencies)

Fix #175 

Patch:
diff --git a/examples/uidl-samples/project.json b/examples/uidl-samples/project.json
index c7442c55..e7e587e4 100644
--- a/examples/uidl-samples/project.json
+++ b/examples/uidl-samples/project.json
@@ -244,7 +244,7 @@
       }
     },
     "OneComponent": {
-      "name": "New UIDL",
+      "name": "OneComponent",
       "propDefinitions": {
         "title": {
           "type": "string",
diff --git a/packages/teleport-component-generator/src/index.ts b/packages/teleport-component-generator/src/index.ts
index 6b16a16a..2c1d2f1a 100644
--- a/packages/teleport-component-generator/src/index.ts
+++ b/packages/teleport-component-generator/src/index.ts
@@ -7,7 +7,7 @@ import {
 } from '@teleporthq/teleport-generator-core'
 
 import { createFile } from '@teleporthq/teleport-generator-shared/lib/utils/project-utils'
-import { sanitizeVariableName } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
+import { camelCaseToDashCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
 
 import {
   ComponentGenerator,
@@ -89,7 +89,7 @@ export default createGenerator()
 
 const fileBundler = (uidl: ComponentUIDL, codeChunks: any) => {
   let fileName = uidl.meta && uidl.meta.fileName ? uidl.meta.fileName : uidl.name
-  fileName = sanitizeVariableName(fileName)
+  fileName = camelCaseToDashCase(fileName)
 
   return Object.keys(codeChunks).map((fileId) => {
     return createFile(fileName, fileId, codeChunks[fileId])
diff --git a/packages/teleport-generator-core/src/resolver/index.ts b/packages/teleport-generator-core/src/resolver/index.ts
index a21c5489..da065744 100644
--- a/packages/teleport-generator-core/src/resolver/index.ts
+++ b/packages/teleport-generator-core/src/resolver/index.ts
@@ -44,9 +44,11 @@ export default class Resolver {
     utils.createNodesLookup(node, nodesLookup)
     utils.generateUniqueKeys(node, nodesLookup)
 
+    const name = sanitizeVariableName(uidl.name)
+
     return {
       ...uidl,
-      name: sanitizeVariableName(uidl.name),
+      name,
       node,
     }
   }
diff --git a/packages/teleport-generator-core/src/resolver/utils.ts b/packages/teleport-generator-core/src/resolver/utils.ts
index 10f02e45..23763de3 100644
--- a/packages/teleport-generator-core/src/resolver/utils.ts
+++ b/packages/teleport-generator-core/src/resolver/utils.ts
@@ -16,6 +16,7 @@ import {
   Mapping,
 } from '@teleporthq/teleport-generator-shared/lib/typings/uidl'
 import { GeneratorOptions } from '@teleporthq/teleport-generator-shared/lib/typings/generators'
+import { camelCaseToDashCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
 
 const STYLE_PROPERTIES_WITH_URL = ['background', 'backgroundImage']
 
@@ -343,8 +344,17 @@ const resolveDependency = (
   const nodeDependency = uidlDependency || mappedElement.dependency
   if (nodeDependency && nodeDependency.type === 'local') {
     // When a dependency is specified without a path, we infer it is a local import.
-    // This might be removed at a later point
-    nodeDependency.path = nodeDependency.path || localDependenciesPrefix + mappedElement.elementType
+
+    // ex: PrimaryButton component should be written in a file called primary-button
+    const componentName = mappedElement.elementType
+    const componentFileName = camelCaseToDashCase(componentName)
+
+    // concatenate a trailing slash in case it's missing
+    if (localDependenciesPrefix[localDependenciesPrefix.length - 1] !== '/') {
+      localDependenciesPrefix = localDependenciesPrefix + '/'
+    }
+
+    nodeDependency.path = nodeDependency.path || localDependenciesPrefix + componentFileName
   }
 
   return nodeDependency
diff --git a/packages/teleport-generator-shared/src/utils/string-utils.ts b/packages/teleport-generator-shared/src/utils/string-utils.ts
index 9e85a687..c1506074 100644
--- a/packages/teleport-generator-shared/src/utils/string-utils.ts
+++ b/packages/teleport-generator-shared/src/utils/string-utils.ts
@@ -1,26 +1,12 @@
-export const cammelCaseToDashCase = (name: string): string => {
-  let ret = ''
-  let prevLowercase = false
-
-  for (const s of name) {
-    const isUppercase = s.toUpperCase() === s
-    if (isUppercase && prevLowercase) {
-      ret += '-'
-    }
-
-    ret += s
-    prevLowercase = !isUppercase
-  }
-
-  return ret.replace(/-+/g, '-').toLowerCase()
-}
+export const camelCaseToDashCase = (str: string): string =>
+  str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase()
 
-export const stringToCamelCase = (str: string): string =>
-  str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase())
+export const dashCaseToCamelCase = (str: string): string =>
+  str.replace(/[-_]+(.)?/g, (_, chr) => (chr ? chr.toUpperCase() : ''))
 
 export const capitalize = (str: string): string => str[0].toUpperCase() + str.slice(1)
 
-export const stringToUpperCamelCase = (str: string) => capitalize(stringToCamelCase(str))
+export const dashCaseToUpperCamelCase = (str: string) => capitalize(dashCaseToCamelCase(str))
 
 // Replaces all ocurrences of non alpha-numeric characters in the string (except _)
 export const sanitizeVariableName = (str: string): string => str.replace(/\W/g, '')
diff --git a/packages/teleport-plugin-react-css-modules/src/index.ts b/packages/teleport-plugin-react-css-modules/src/index.ts
index aada0dc2..489c5253 100644
--- a/packages/teleport-plugin-react-css-modules/src/index.ts
+++ b/packages/teleport-plugin-react-css-modules/src/index.ts
@@ -1,8 +1,8 @@
 import * as t from '@babel/types'
 import { ParsedASTNode } from '@teleporthq/teleport-generator-shared/lib/utils/ast-js-utils'
 import {
-  cammelCaseToDashCase,
-  stringToCamelCase,
+  camelCaseToDashCase,
+  dashCaseToCamelCase,
 } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
 import {
   addJSXTagStyles,
@@ -68,8 +68,8 @@ export const createPlugin: ComponentPluginFactory<ReactCSSModulesConfig> = (conf
       const { style, key } = element
       if (style) {
         const root = astNodesLookup[key]
-        const className = cammelCaseToDashCase(key)
-        const classNameInJS = stringToCamelCase(className)
+        const className = camelCaseToDashCase(key)
+        const classNameInJS = dashCaseToCamelCase(className)
         const { staticStyles, dynamicStyles } = splitDynamicAndStaticStyles(style)
 
         if (Object.keys(dynamicStyles).length) {
@@ -109,7 +109,7 @@ export const createPlugin: ComponentPluginFactory<ReactCSSModulesConfig> = (conf
      * The name of the file is either in the meta of the component generator
      * or we fallback to the name of the component
      */
-    const cssFileName = (meta && meta.fileName) || name
+    const cssFileName = (meta && meta.fileName) || camelCaseToDashCase(name)
     dependencies[styleObjectImportName] = {
       type: 'local',
       path: `./${cssFileName}.css`,
diff --git a/packages/teleport-plugin-react-jss/src/index.ts b/packages/teleport-plugin-react-jss/src/index.ts
index b13da932..95a38b23 100644
--- a/packages/teleport-plugin-react-jss/src/index.ts
+++ b/packages/teleport-plugin-react-jss/src/index.ts
@@ -8,7 +8,7 @@ import {
 } from '@teleporthq/teleport-generator-shared/lib/utils/ast-js-utils'
 import { makeJSSDefaultExport } from './utils'
 
-import { cammelCaseToDashCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
+import { camelCaseToDashCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
 import {
   traverseElements,
   transformDynamicStyles,
@@ -51,7 +51,7 @@ export const createPlugin: ComponentPluginFactory<JSSConfig> = (config) => {
       const { style, key } = element
       if (style) {
         const root = jsxNodesLookup[key]
-        const className = cammelCaseToDashCase(key)
+        const className = camelCaseToDashCase(key)
         jssStyleMap[className] = transformDynamicStyles(style, (styleValue) => {
           if (styleValue.content.referenceType === 'prop') {
             return new ParsedASTNode(
diff --git a/packages/teleport-plugin-react-styled-components/src/index.ts b/packages/teleport-plugin-react-styled-components/src/index.ts
index 1b4adf8f..c442ac5b 100644
--- a/packages/teleport-plugin-react-styled-components/src/index.ts
+++ b/packages/teleport-plugin-react-styled-components/src/index.ts
@@ -7,7 +7,7 @@ import {
   traverseElements,
   transformDynamicStyles,
 } from '@teleporthq/teleport-generator-shared/lib/utils/uidl-utils'
-import { stringToUpperCamelCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
+import { dashCaseToUpperCamelCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
 import {
   createJSXSpreadAttribute,
   addDynamicAttributeOnTag,
@@ -36,7 +36,7 @@ export const createPlugin: ComponentPluginFactory<StyledComponentsConfig> = (con
       const { style, key, elementType } = element
       if (style) {
         const root = jsxNodesLookup[key]
-        const className = `${stringToUpperCamelCase(key)}`
+        const className = `${dashCaseToUpperCamelCase(key)}`
         // @ts-ignore-next-line
         const timesReferred = countPropReferences(style, 0)
 
diff --git a/packages/teleport-plugin-react-styled-components/src/utils.ts b/packages/teleport-plugin-react-styled-components/src/utils.ts
index 4e5fd454..37bf008b 100644
--- a/packages/teleport-plugin-react-styled-components/src/utils.ts
+++ b/packages/teleport-plugin-react-styled-components/src/utils.ts
@@ -1,5 +1,5 @@
 import * as t from '@babel/types'
-import { cammelCaseToDashCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
+import { camelCaseToDashCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
 import { stringAsTemplateLiteral } from '@teleporthq/teleport-generator-shared/lib/utils/ast-jsx-utils'
 import { UIDLStyleValue } from '@teleporthq/teleport-generator-shared/lib/typings/uidl'
 
@@ -20,7 +20,7 @@ const mapStyles = (styles: object) => {
   Object.keys(styles).forEach((item) => {
     if (typeof styles[item] === 'string') {
       style = `${style}
-      ${cammelCaseToDashCase(item)}: ${styles[item]};`
+      ${camelCaseToDashCase(item)}: ${styles[item]};`
     } else {
       style = `${style}
       ${item} {
diff --git a/packages/teleport-plugin-react-styled-jsx/src/index.ts b/packages/teleport-plugin-react-styled-jsx/src/index.ts
index c471832b..c5675cf5 100644
--- a/packages/teleport-plugin-react-styled-jsx/src/index.ts
+++ b/packages/teleport-plugin-react-styled-jsx/src/index.ts
@@ -3,7 +3,7 @@ import {
   generateStyledJSXTag,
 } from '@teleporthq/teleport-generator-shared/lib/utils/ast-jsx-utils'
 
-import { cammelCaseToDashCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
+import { camelCaseToDashCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
 import {
   transformDynamicStyles,
   traverseElements,
@@ -40,7 +40,7 @@ export const createPlugin: ComponentPluginFactory<StyledJSXConfig> = (config) =>
       const { style, key } = element
       if (style) {
         const root = jsxNodesLookup[key]
-        const className = cammelCaseToDashCase(key)
+        const className = camelCaseToDashCase(key)
         // Generating the string templates for the dynamic styles
         const styleRules = transformDynamicStyles(style, (styleValue) => {
           if (styleValue.content.referenceType === 'prop') {
diff --git a/packages/teleport-plugin-vue-base-component/src/utils.ts b/packages/teleport-plugin-vue-base-component/src/utils.ts
index 5f729ea6..344043f3 100644
--- a/packages/teleport-plugin-vue-base-component/src/utils.ts
+++ b/packages/teleport-plugin-vue-base-component/src/utils.ts
@@ -7,7 +7,7 @@ import {
 } from '@teleporthq/teleport-generator-shared/lib/utils/ast-js-utils'
 import {
   capitalize,
-  stringToUpperCamelCase,
+  dashCaseToUpperCamelCase,
 } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
 import {
   UIDLPropDefinition,
@@ -85,7 +85,7 @@ export const generateElementNode = (
           )
         }
       } else {
-        const methodName = `handle${stringToUpperCamelCase(name)}${stringToUpperCamelCase(
+        const methodName = `handle${dashCaseToUpperCamelCase(name)}${dashCaseToUpperCamelCase(
           eventKey
         )}`
         methodsObject[methodName] = events[eventKey]
diff --git a/packages/teleport-plugin-vue-css/src/index.ts b/packages/teleport-plugin-vue-css/src/index.ts
index d88aa280..e1339442 100644
--- a/packages/teleport-plugin-vue-css/src/index.ts
+++ b/packages/teleport-plugin-vue-css/src/index.ts
@@ -1,4 +1,4 @@
-import { cammelCaseToDashCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
+import { camelCaseToDashCase } from '@teleporthq/teleport-generator-shared/lib/utils/string-utils'
 import {
   splitDynamicAndStaticStyles,
   cleanupNestedStyles,
@@ -46,7 +46,7 @@ export const createPlugin: ComponentPluginFactory<VueStyleChunkConfig> = (config
       if (style) {
         const { staticStyles, dynamicStyles } = splitDynamicAndStaticStyles(style)
         const root = templateLookup[key]
-        const className = cammelCaseToDashCase(key)
+        const className = camelCaseToDashCase(key)
         jssStylesArray.push(createCSSClass(className, staticStyles))
 
         if (Object.keys(dynamicStyles).length) {
diff --git a/yarn.lock b/yarn.lock
index d4570680..6dea02e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5219,7 +5219,7 @@ right-pad@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/right-pad/-/right-pad-1.0.1.tgz#8ca08c2cbb5b55e74dafa96bf7fd1a27d568c8d0"
 
-rimraf@2, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2:
+rimraf@2, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
   dependencies:
@@ -5913,6 +5913,10 @@ typescript@^3.4.3:
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.4.tgz#aac4a08abecab8091a75f10842ffa0631818f785"
 
+typescript@^3.4.5:
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.5.tgz#2d2618d10bb566572b8d7aad5180d84257d70a99"
+
 uglify-js@^3.1.4:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.5.4.tgz#4a64d57f590e20a898ba057f838dcdfb67a939b9"


Test patch:
diff --git a/packages/teleport-generator-shared/__tests__/utils/string-utils.ts b/packages/teleport-generator-shared/__tests__/utils/string-utils.ts
index d804d144..7d53dc92 100644
--- a/packages/teleport-generator-shared/__tests__/utils/string-utils.ts
+++ b/packages/teleport-generator-shared/__tests__/utils/string-utils.ts
@@ -3,94 +3,161 @@ import {
   addSpacesToEachLine,
   removeLastEmptyLine,
   sanitizeVariableName,
+  camelCaseToDashCase,
+  dashCaseToUpperCamelCase,
+  dashCaseToCamelCase,
 } from '../../src/utils/string-utils'
 
-describe('Shared Utils string helpers', () => {
-  describe('slugify tests', () => {
-    it('check null input', async () => {
-      expect(slugify(null)).toBe(null)
-    })
-    it('check empty input', async () => {
-      expect(slugify('')).toBe('')
-    })
-    it('check uppercase', async () => {
-      expect(slugify('TEST')).toBe('test')
-    })
-    it('check multiple words', async () => {
-      expect(slugify('test multiple-words')).toBe('test-multiple-words')
-    })
-    it('check multiple ---', async () => {
-      expect(slugify('---')).toBe('')
-    })
-    it('check multiple -- in string', async () => {
-      expect(slugify('test--name')).toBe('test-name')
-    })
-
-    it('check trim', async () => {
-      expect(slugify('   test   ')).toBe('test')
-    })
-    it('should return correct slug', async () => {
-      expect(slugify('Project Name')).toBe('project-name')
-    })
-  })
-
-  describe('addSpacesToEachLine', () => {
-    it('works on a single line', () => {
-      expect(addSpacesToEachLine('  ', 'test')).toBe('  test')
-    })
-
-    it('works on multiple lines', () => {
-      const multilineText = `This
+describe('slugify tests', () => {
+  it('check null input', async () => {
+    expect(slugify(null)).toBe(null)
+  })
+  it('check empty input', async () => {
+    expect(slugify('')).toBe('')
+  })
+  it('check uppercase', async () => {
+    expect(slugify('TEST')).toBe('test')
+  })
+  it('check multiple words', async () => {
+    expect(slugify('test multiple-words')).toBe('test-multiple-words')
+  })
+  it('check multiple ---', async () => {
+    expect(slugify('---')).toBe('')
+  })
+  it('check multiple -- in string', async () => {
+    expect(slugify('test--name')).toBe('test-name')
+  })
+
+  it('check trim', async () => {
+    expect(slugify('   test   ')).toBe('test')
+  })
+  it('should return correct slug', async () => {
+    expect(slugify('Project Name')).toBe('project-name')
+  })
+})
+
+describe('addSpacesToEachLine', () => {
+  it('works on a single line', () => {
+    expect(addSpacesToEachLine('  ', 'test')).toBe('  test')
+  })
+
+  it('works on multiple lines', () => {
+    const multilineText = `This
 is a multiline
 text`
 
-      const expectedResult = `  This
+    const expectedResult = `  This
   is a multiline
   text`
 
-      expect(addSpacesToEachLine('  ', multilineText)).toBe(expectedResult)
-    })
+    expect(addSpacesToEachLine('  ', multilineText)).toBe(expectedResult)
+  })
 
-    it('adds to existing spaces', () => {
-      const multilineText = `This
+  it('adds to existing spaces', () => {
+    const multilineText = `This
 is a multiline
 text
   with some indentation
 here
     and there`
 
-      const expectedResult = `  This
+    const expectedResult = `  This
   is a multiline
   text
     with some indentation
   here
       and there`
 
-      expect(addSpacesToEachLine('  ', multilineText)).toBe(expectedResult)
-    })
+    expect(addSpacesToEachLine('  ', multilineText)).toBe(expectedResult)
+  })
+})
+
+describe('removeLastEmptyLine', () => {
+  it('does not change the string is there is no empty line', () => {
+    expect(removeLastEmptyLine('test\ntest')).toBe('test\ntest')
+  })
+
+  it('removes empty line at the end', () => {
+    expect(removeLastEmptyLine('test\n')).toBe('test')
+  })
+
+  it('removes only empty line at the end', () => {
+    expect(removeLastEmptyLine('test\ntest\n')).toBe('test\ntest')
+  })
+})
+
+describe('sanitizeVariableName', () => {
+  it('does not change a valid string', () => {
+    expect(sanitizeVariableName('ComponentName')).toBe('ComponentName')
+  })
+
+  it('removes spaces and other characters, but keeps underscore', () => {
+    expect(sanitizeVariableName('Component_ Name-')).toBe('Component_Name')
+  })
+})
+
+describe('camelCaseToDashCase', () => {
+  it('works with upper case', () => {
+    expect(camelCaseToDashCase('PrimaryButton')).toBe('primary-button')
+  })
+
+  it('works with lower case', () => {
+    expect(camelCaseToDashCase('primaryButton')).toBe('primary-button')
+  })
+
+  it('does not affect a dash case string', () => {
+    expect(camelCaseToDashCase('primary-button')).toBe('primary-button')
+  })
+
+  it('ignores numbers', () => {
+    expect(camelCaseToDashCase('1prim12arybutton')).toBe('1prim12arybutton')
+  })
+
+  it('should revert a dash to camel case transition', () => {
+    expect(camelCaseToDashCase(dashCaseToCamelCase('primary-button'))).toBe('primary-button')
+  })
+})
+
+describe('dashCaseToUpperCamelCase', () => {
+  it('works', () => {
+    expect(dashCaseToUpperCamelCase('primary-button')).toBe('PrimaryButton')
   })
 
-  describe('removeLastEmptyLine', () => {
-    it('does not change the string is there is no empty line', () => {
-      expect(removeLastEmptyLine('test\ntest')).toBe('test\ntest')
-    })
+  it('works with a dash at the end', () => {
+    expect(dashCaseToUpperCamelCase('primary-button-')).toBe('PrimaryButton')
+  })
 
-    it('removes empty line at the end', () => {
-      expect(removeLastEmptyLine('test\n')).toBe('test')
-    })
+  it('works with a dash at the beginning', () => {
+    expect(dashCaseToUpperCamelCase('-primary-button')).toBe('PrimaryButton')
+  })
 
-    it('removes only empty line at the end', () => {
-      expect(removeLastEmptyLine('test\ntest\n')).toBe('test\ntest')
-    })
+  it('does not change a camel case string', () => {
+    expect(dashCaseToUpperCamelCase('PrimaryButton')).toBe('PrimaryButton')
   })
 
-  describe('sanitizeVariableName', () => {
-    it('does not change a valid string', () => {
-      expect(sanitizeVariableName('ComponentName')).toBe('ComponentName')
-    })
+  it('does change a lower camel case to upper camel case string', () => {
+    expect(dashCaseToUpperCamelCase('primaryButton')).toBe('PrimaryButton')
+  })
+})
+
+describe('dashCaseToCamelCase', () => {
+  it('works', () => {
+    expect(dashCaseToCamelCase('primary-button')).toBe('primaryButton')
+  })
+
+  it('works with a dash at the end', () => {
+    expect(dashCaseToCamelCase('primary-button-')).toBe('primaryButton')
+  })
+
+  it('works with a dash at the beginning', () => {
+    expect(dashCaseToCamelCase('-primary-button')).toBe('PrimaryButton')
+  })
+
+  it('does not change a camel case string', () => {
+    expect(dashCaseToCamelCase('primaryButton')).toBe('primaryButton')
+  })
 
-    it('removes spaces and other characters, but keeps underscore', () => {
-      expect(sanitizeVariableName('Component_ Name-')).toBe('Component_Name')
-    })
+  it('doesn`t change a upper camel case to lower camel case', () => {
+    expect(dashCaseToCamelCase('PrimaryButton')).toBe('PrimaryButton')
   })
 })
diff --git a/packages/teleport-project-generator-react-next/__tests__/end2end/index.ts b/packages/teleport-project-generator-react-next/__tests__/end2end/index.ts
index ebdfa1e1..68a74fd4 100644
--- a/packages/teleport-project-generator-react-next/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-react-next/__tests__/end2end/index.ts
@@ -21,7 +21,7 @@ describe('React Next Project Generator', () => {
     const components = result.outputFolder.subFolders[1]
     const pages = result.outputFolder.subFolders[0]
 
-    expect(components.files[0].name).toBe('OneComponent')
+    expect(components.files[0].name).toBe('one-component')
     expect(pages.files[0].name).toBe('_document')
     expect(pages.files[1].name).toBe('index')
   })
@@ -41,7 +41,7 @@ describe('React Next Project Generator', () => {
     const components = result.outputFolder.subFolders[1]
     const pages = result.outputFolder.subFolders[0]
 
-    expect(components.files[0].name).toBe('OneComponent')
+    expect(components.files[0].name).toBe('one-component')
     expect(pages.files[0].name).toBe('_document')
     expect(pages.files[1].name).toBe('index')
   })