Add test for flattenComponents, bump eslint-plugin-github

Author: TylerJDev

package-lock.json

@@ -35,7 +35,7 @@
   "prettier": "@github/prettier-config",
   "dependencies": {
     "@styled-system/props": "^5.1.5",
-    "eslint-plugin-github": "^4.9.1",
+    "eslint-plugin-github": "^4.9.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-traverse": "^1.0.0",
     "lodash": "^4.17.21",

package.json

@@ -1,9 +1,10 @@
-const components = {
+const flattenComponents = require('../utils/flatten-components');
+
+const components = flattenComponents({
     Button: 'button',
     IconButton: 'button',
     Link: 'a',
     Spinner: 'svg',
-    Octicon: 'svg',
     ToggleSwitch: 'button',
     Radio: 'input',
     TextInput: {
@@ -18,23 +19,6 @@ const components = {
         Link: 'a',
         self: 'nav',
     },
-}
-
-const flattenComponents = (componentObj) => {
-    let result = {};
-
-    Object.keys(componentObj).forEach((key) => {
-        if (typeof componentObj[key] === 'object') {
-            const test = Object.keys(componentObj[key]).forEach((item) => {
-                result = { ...result, [`${key}${item !== 'self' ? `.${item}` : ''}`]: componentObj[key][item] };        
-            });
-        } else {
-            result = {...result, [key]: componentObj[key]}
-        }
-    });
-
-    return result;
-}
-
+})
 
-module.exports = flattenComponents(components);
+module.exports = components;

src/configs/components.js

@@ -0,0 +1,62 @@
+const {flattenComponents} = require('../flatten-components')
+
+const mockComponents = function(passedObj) {
+  return {
+    Button: 'button',
+    Link: 'a',
+    Spinner: 'svg',
+    Radio: 'input',
+    TextInput: {
+      Action: 'button',
+      self: 'input'
+    },
+    ...passedObj
+  }
+}
+
+describe('getElementType', function() {
+  it('flattens passed object 1-level deep', function() {
+    const result = flattenComponents(mockComponents())
+
+    const expectedResult = {
+      Button: 'button',
+      Link: 'a',
+      Spinner: 'svg',
+      Radio: 'input',
+      TextInput: 'input',
+      'TextInput.Action': 'button'
+    }
+
+    expect(result).toEqual(expectedResult)
+  })
+
+  it('ignores objects nested deeper than 1-level', function() {
+    const result = flattenComponents(
+      mockComponents({
+        Select: {
+          Items: {
+            self: 'div'
+          },
+          Option: 'option',
+          self: 'select'
+        }
+      })
+    )
+
+    const expectedResult = {
+      Button: 'button',
+      Link: 'a',
+      Spinner: 'svg',
+      Radio: 'input',
+      TextInput: 'input',
+      'TextInput.Action': 'button',
+      'Select.Items': {
+        self: 'div'
+      },
+      Select: 'select',
+      'Select.Option': 'option'
+    }
+
+    expect(result).toEqual(expectedResult)
+  })
+})

src/utils/__tests__/flatten-components.test.js

@@ -0,0 +1,17 @@
+function flattenComponents(componentObj) {
+    let result = {};
+
+    Object.keys(componentObj).forEach((key) => {
+        if (typeof componentObj[key] === 'object') {
+            const test = Object.keys(componentObj[key]).forEach((item) => {
+                result = { ...result, [`${key}${item !== 'self' ? `.${item}` : ''}`]: componentObj[key][item] };        
+            });
+        } else {
+            result = {...result, [key]: componentObj[key]}
+        }
+    });
+
+    return result;
+}
+
+exports.flattenComponents = flattenComponents