Skip to content

G
gitlab-ce
Commit a846c20d authored by Tim Zallmann's avatar Tim Zallmann
Browse files
Options

Merge branch '39173-add-optional-options-param-to-convertobjectpropstosnakecase' into 'master' 

Add `options` parameter to `convertObjectPropsToSnakeCase`

See merge request gitlab-org/gitlab!25569
parents 1438907f 527be3be
Hide whitespace changes
Inline Side-by-side
Showing with 397 additions and 183 deletions
app/assets/javascripts/lib/utils/common_utils.js
View file @ a846c20d
......@@ -8,6 +8,7 @@ import axios from './axios_utils';
import { getLocationHash } from './url_utility';
import { convertToCamelCase, convertToSnakeCase } from './text_utility';
import { isObject } from './type_utility';
import { isFunction } from 'lodash';
export const getPagePath = (index = 0) => {
const page = $('body').attr('data-page') || '';
......@@ -667,30 +668,34 @@ export const spriteIcon = (icon, className = '') => {
};
/**
* This method takes in object with snake_case property names
* and returns a new object with camelCase property names
*
* Reasoning for this method is to ensure consistent property
* naming conventions across JS code.
* @callback ConversionFunction
* @param {string} prop
*/
/**
* This function takes a conversion function as the first parameter
* and applies this function to each prop in the provided object.
*
* This method also supports additional params in `options` object
*
* @param {ConversionFunction} conversionFunction - Function to apply to each prop of the object.
* @param {Object} obj - Object to be converted.
* @param {Object} options - Object containing additional options.
* @param {boolean} options.deep - FLag to allow deep object converting
* @param {Array[]} dropKeys - List of properties to discard while building new object
* @param {Array[]} ignoreKeyNames - List of properties to leave intact (as snake_case) while building new object
* @param {Array[]} options.dropKeys - List of properties to discard while building new object
* @param {Array[]} options.ignoreKeyNames - List of properties to leave intact (as snake_case) while building new object
*/
export const convertObjectPropsToCamelCase = (obj = {}, options = {}) => {
if (obj === null) {
export const convertObjectProps = (conversionFunction, obj = {}, options = {}) => {
if (!isFunction(conversionFunction) || obj === null) {
return {};
}
const initial = Array.isArray(obj) ? [] : {};
const { deep = false, dropKeys = [], ignoreKeyNames = [] } = options;
const isObjParameterArray = Array.isArray(obj);
const initialValue = isObjParameterArray ? [] : {};
return Object.keys(obj).reduce((acc, prop) => {
const result = acc;
const val = obj[prop];
// Drop properties from new object if
......@@ -702,34 +707,54 @@ export const convertObjectPropsToCamelCase = (obj = {}, options = {}) => {
// Skip converting properties in new object
// if there are any mentioned in options
if (ignoreKeyNames.indexOf(prop) > -1) {
result[prop] = obj[prop];
acc[prop] = val;
return acc;
}
if (deep && (isObject(val) || Array.isArray(val))) {
result[convertToCamelCase(prop)] = convertObjectPropsToCamelCase(val, options);
if (isObjParameterArray) {
acc[prop] = convertObjectProps(conversionFunction, val, options);
} else {
acc[conversionFunction(prop)] = convertObjectProps(conversionFunction, val, options);
}
} else {
result[convertToCamelCase(prop)] = obj[prop];
acc[conversionFunction(prop)] = val;
}
return acc;
}, initial);
}, initialValue);
};
/**
* This method takes in object with snake_case property names
* and returns a new object with camelCase property names
*
* Reasoning for this method is to ensure consistent property
* naming conventions across JS code.
*
* This method also supports additional params in `options` object
*
* @param {Object} obj - Object to be converted.
* @param {Object} options - Object containing additional options.
* @param {boolean} options.deep - FLag to allow deep object converting
* @param {Array[]} options.dropKeys - List of properties to discard while building new object
* @param {Array[]} options.ignoreKeyNames - List of properties to leave intact (as snake_case) while building new object
*/
export const convertObjectPropsToCamelCase = (obj = {}, options = {}) =>
convertObjectProps(convertToCamelCase, obj, options);
/**
* Converts all the object keys to snake case
*
* @param {Object} obj Object to transform
* @returns {Object}
* This method also supports additional params in `options` object
*
* @param {Object} obj - Object to be converted.
* @param {Object} options - Object containing additional options.
* @param {boolean} options.deep - FLag to allow deep object converting
* @param {Array[]} options.dropKeys - List of properties to discard while building new object
* @param {Array[]} options.ignoreKeyNames - List of properties to leave intact (as snake_case) while building new object
*/
// Follow up to add additional options param:
// https://gitlab.com/gitlab-org/gitlab/issues/39173
export const convertObjectPropsToSnakeCase = (obj = {}) =>
obj
? Object.entries(obj).reduce(
(acc, [key, value]) => ({ ...acc, [convertToSnakeCase(key)]: value }),
{},
)
: {};
export const convertObjectPropsToSnakeCase = (obj = {}, options = {}) =>
convertObjectProps(convertToSnakeCase, obj, options);
export const imagePath = imgUrl =>
`${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
......
spec/frontend/lib/utils/common_utils_spec.js
View file @ a846c20d
......@@ -539,193 +539,382 @@ describe('common_utils', () => {
});
});
describe('convertObjectPropsToCamelCase', () => {
it('returns new object with camelCase property names by converting object with snake_case names', () => {
const snakeRegEx = /(_\w)/g;
const mockObj = {
id: 1,
group_name: 'GitLab.org',
absolute_web_url: 'https://gitlab.com/gitlab-org/',
};
const mappings = {
id: 'id',
groupName: 'group_name',
absoluteWebUrl: 'absolute_web_url',
};
describe('convertObjectProps*', () => {
const mockConversionFunction = prop => `${prop}_converted`;
const isEmptyObject = obj =>
typeof obj === 'object' && obj !== null && Object.keys(obj).length === 0;
const mockObjects = {
convertObjectProps: {
obj: {
id: 1,
group_name: 'GitLab.org',
absolute_web_url: 'https://gitlab.com/gitlab-org/',
},
objNested: {
project_name: 'GitLab CE',
group_name: 'GitLab.org',
license_type: 'MIT',
tech_stack: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
},
},
convertObjectPropsToCamelCase: {
obj: {
id: 1,
group_name: 'GitLab.org',
absolute_web_url: 'https://gitlab.com/gitlab-org/',
},
objNested: {
project_name: 'GitLab CE',
group_name: 'GitLab.org',
license_type: 'MIT',
tech_stack: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
},
},
convertObjectPropsToSnakeCase: {
obj: {
id: 1,
groupName: 'GitLab.org',
absoluteWebUrl: 'https://gitlab.com/gitlab-org/',
},
objNested: {
projectName: 'GitLab CE',
groupName: 'GitLab.org',
licenseType: 'MIT',
techStack: {
backend: 'Ruby',
frontendFramework: 'Vue',
database: 'PostgreSQL',
},
},
},
};
const convertedObj = commonUtils.convertObjectPropsToCamelCase(mockObj);
describe('convertObjectProps', () => {
it('returns an empty object if `conversionFunction` parameter is not a function', () => {
const result = commonUtils.convertObjectProps(null, mockObjects.convertObjectProps.obj);
Object.keys(convertedObj).forEach(prop => {
expect(snakeRegEx.test(prop)).toBeFalsy();
expect(convertedObj[prop]).toBe(mockObj[mappings[prop]]);
expect(isEmptyObject(result)).toBeTruthy();
});
});
it('return empty object if method is called with null or undefined', () => {
expect(Object.keys(commonUtils.convertObjectPropsToCamelCase(null)).length).toBe(0);
expect(Object.keys(commonUtils.convertObjectPropsToCamelCase()).length).toBe(0);
expect(Object.keys(commonUtils.convertObjectPropsToCamelCase({})).length).toBe(0);
});
it('does not deep-convert by default', () => {
const obj = {
snake_key: {
child_snake_key: 'value',
},
};
expect(commonUtils.convertObjectPropsToCamelCase(obj)).toEqual({
snakeKey: {
child_snake_key: 'value',
},
describe.each`
functionName | mockObj | mockObjNested
${'convertObjectProps'} | ${mockObjects.convertObjectProps.obj} | ${mockObjects.convertObjectProps.objNested}
${'convertObjectPropsToCamelCase'} | ${mockObjects.convertObjectPropsToCamelCase.obj} | ${mockObjects.convertObjectPropsToCamelCase.objNested}
${'convertObjectPropsToSnakeCase'} | ${mockObjects.convertObjectPropsToSnakeCase.obj} | ${mockObjects.convertObjectPropsToSnakeCase.objNested}
`('$functionName', ({ functionName, mockObj, mockObjNested }) => {
const testFunction =
functionName === 'convertObjectProps'
? (obj, options = {}) =>
commonUtils.convertObjectProps(mockConversionFunction, obj, options)
: commonUtils[functionName];
it('returns an empty object if `obj` parameter is null, undefined or an empty object', () => {
expect(isEmptyObject(testFunction(null))).toBeTruthy();
expect(isEmptyObject(testFunction())).toBeTruthy();
expect(isEmptyObject(testFunction({}))).toBeTruthy();
});
});
describe('convertObjectPropsToSnakeCase', () => {
it('converts each object key to snake case', () => {
const obj = {
some: 'some',
'cool object': 'cool object',
likeThisLongOne: 'likeThisLongOne',
it('converts object properties', () => {
const expected = {
convertObjectProps: {
id_converted: 1,
group_name_converted: 'GitLab.org',
absolute_web_url_converted: 'https://gitlab.com/gitlab-org/',
},
convertObjectPropsToCamelCase: {
id: 1,
groupName: 'GitLab.org',
absoluteWebUrl: 'https://gitlab.com/gitlab-org/',
},
convertObjectPropsToSnakeCase: {
id: 1,
group_name: 'GitLab.org',
absolute_web_url: 'https://gitlab.com/gitlab-org/',
},
};
expect(commonUtils.convertObjectPropsToSnakeCase(obj)).toEqual({
some: 'some',
cool_object: 'cool object',
like_this_long_one: 'likeThisLongOne',
});
expect(testFunction(mockObj)).toEqual(expected[functionName]);
});
it('returns an empty object if there are no keys', () => {
['', {}, [], null].forEach(badObj => {
expect(commonUtils.convertObjectPropsToSnakeCase(badObj)).toEqual({});
});
});
});
describe('with options', () => {
const objWithoutChildren = {
project_name: 'GitLab CE',
group_name: 'GitLab.org',
license_type: 'MIT',
};
it('does not deep-convert by default', () => {
const expected = {
convertObjectProps: {
project_name_converted: 'GitLab CE',
group_name_converted: 'GitLab.org',
license_type_converted: 'MIT',
tech_stack_converted: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
},
convertObjectPropsToCamelCase: {
projectName: 'GitLab CE',
groupName: 'GitLab.org',
licenseType: 'MIT',
techStack: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
},
convertObjectPropsToSnakeCase: {
project_name: 'GitLab CE',
group_name: 'GitLab.org',
license_type: 'MIT',
tech_stack: {
backend: 'Ruby',
frontendFramework: 'Vue',
database: 'PostgreSQL',
},
},
};
const objWithChildren = {
project_name: 'GitLab CE',
group_name: 'GitLab.org',
license_type: 'MIT',
tech_stack: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
};
expect(testFunction(mockObjNested)).toEqual(expected[functionName]);
});
describe('when options.deep is true', () => {
it('converts object with child objects', () => {
const obj = {
snake_key: {
child_snake_key: 'value',
describe('with options', () => {
describe('when options.deep is true', () => {
const expected = {
convertObjectProps: {
project_name_converted: 'GitLab CE',
group_name_converted: 'GitLab.org',
license_type_converted: 'MIT',
tech_stack_converted: {
backend_converted: 'Ruby',
frontend_framework_converted: 'Vue',
database_converted: 'PostgreSQL',
},
},
convertObjectPropsToCamelCase: {
projectName: 'GitLab CE',
groupName: 'GitLab.org',
licenseType: 'MIT',
techStack: {
backend: 'Ruby',
frontendFramework: 'Vue',
database: 'PostgreSQL',
},
},
convertObjectPropsToSnakeCase: {
project_name: 'GitLab CE',
group_name: 'GitLab.org',
license_type: 'MIT',
tech_stack: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
},
};
expect(commonUtils.convertObjectPropsToCamelCase(obj, { deep: true })).toEqual({
snakeKey: {
childSnakeKey: 'value',
},
it('converts nested objects', () => {
expect(testFunction(mockObjNested, { deep: true })).toEqual(expected[functionName]);
});
});
it('converts array with child objects', () => {
const arr = [
{
child_snake_key: 'value',
},
];
it('converts array of nested objects', () => {
expect(testFunction([mockObjNested], { deep: true })).toEqual([expected[functionName]]);
});
expect(commonUtils.convertObjectPropsToCamelCase(arr, { deep: true })).toEqual([
{
childSnakeKey: 'value',
},
]);
it('converts array with child arrays', () => {
expect(testFunction([[mockObjNested]], { deep: true })).toEqual([
[expected[functionName]],
]);
});
});
it('converts array with child arrays', () => {
const arr = [
[
{
child_snake_key: 'value',
describe('when options.dropKeys is provided', () => {
it('discards properties mentioned in `dropKeys` array', () => {
const expected = {
convertObjectProps: {
project_name_converted: 'GitLab CE',
license_type_converted: 'MIT',
tech_stack_converted: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
},
],
];
expect(commonUtils.convertObjectPropsToCamelCase(arr, { deep: true })).toEqual([
[
{
childSnakeKey: 'value',
convertObjectPropsToCamelCase: {
projectName: 'GitLab CE',
licenseType: 'MIT',
techStack: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
},
],
]);
});
});
describe('when options.dropKeys is provided', () => {
it('discards properties mentioned in `dropKeys` array', () => {
expect(
commonUtils.convertObjectPropsToCamelCase(objWithoutChildren, {
dropKeys: ['group_name'],
}),
).toEqual({
projectName: 'GitLab CE',
licenseType: 'MIT',
convertObjectPropsToSnakeCase: {
project_name: 'GitLab CE',
license_type: 'MIT',
tech_stack: {
backend: 'Ruby',
frontendFramework: 'Vue',
database: 'PostgreSQL',
},
},
};
const dropKeys = {
convertObjectProps: ['group_name'],
convertObjectPropsToCamelCase: ['group_name'],
convertObjectPropsToSnakeCase: ['groupName'],
};
expect(
testFunction(mockObjNested, {
dropKeys: dropKeys[functionName],
}),
).toEqual(expected[functionName]);
});
});
it('discards properties mentioned in `dropKeys` array when `deep` is true', () => {
expect(
commonUtils.convertObjectPropsToCamelCase(objWithChildren, {
deep: true,
dropKeys: ['group_name', 'database'],
}),
).toEqual({
projectName: 'GitLab CE',
licenseType: 'MIT',
techStack: {
backend: 'Ruby',
frontendFramework: 'Vue',
},
it('discards properties mentioned in `dropKeys` array when `deep` is true', () => {
const expected = {
convertObjectProps: {
project_name_converted: 'GitLab CE',
license_type_converted: 'MIT',
tech_stack_converted: {
backend_converted: 'Ruby',
frontend_framework_converted: 'Vue',
},
},
convertObjectPropsToCamelCase: {
projectName: 'GitLab CE',
licenseType: 'MIT',
techStack: {
backend: 'Ruby',
frontendFramework: 'Vue',
},
},
convertObjectPropsToSnakeCase: {
project_name: 'GitLab CE',
license_type: 'MIT',
tech_stack: {
backend: 'Ruby',
frontend_framework: 'Vue',
},
},
};
const dropKeys = {
convertObjectProps: ['group_name', 'database'],
convertObjectPropsToCamelCase: ['group_name', 'database'],
convertObjectPropsToSnakeCase: ['groupName', 'database'],
};
expect(
testFunction(mockObjNested, {
dropKeys: dropKeys[functionName],
deep: true,
}),
).toEqual(expected[functionName]);
});
});
});
describe('when options.ignoreKeyNames is provided', () => {
it('leaves properties mentioned in `ignoreKeyNames` array intact', () => {
expect(
commonUtils.convertObjectPropsToCamelCase(objWithoutChildren, {
ignoreKeyNames: ['group_name'],
}),
).toEqual({
projectName: 'GitLab CE',
licenseType: 'MIT',
group_name: 'GitLab.org',
describe('when options.ignoreKeyNames is provided', () => {
it('leaves properties mentioned in `ignoreKeyNames` array intact', () => {
const expected = {
convertObjectProps: {
project_name_converted: 'GitLab CE',
group_name: 'GitLab.org',
license_type_converted: 'MIT',
tech_stack_converted: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
},
convertObjectPropsToCamelCase: {
projectName: 'GitLab CE',
group_name: 'GitLab.org',
licenseType: 'MIT',
techStack: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
},
convertObjectPropsToSnakeCase: {
project_name: 'GitLab CE',
groupName: 'GitLab.org',
license_type: 'MIT',
tech_stack: {
backend: 'Ruby',
frontendFramework: 'Vue',
database: 'PostgreSQL',
},
},
};
const ignoreKeyNames = {
convertObjectProps: ['group_name'],
convertObjectPropsToCamelCase: ['group_name'],
convertObjectPropsToSnakeCase: ['groupName'],
};
expect(
testFunction(mockObjNested, {
ignoreKeyNames: ignoreKeyNames[functionName],
}),
).toEqual(expected[functionName]);
});
});
it('leaves properties mentioned in `ignoreKeyNames` array intact when `deep` is true', () => {
expect(
commonUtils.convertObjectPropsToCamelCase(objWithChildren, {
deep: true,
ignoreKeyNames: ['group_name', 'frontend_framework'],
}),
).toEqual({
projectName: 'GitLab CE',
group_name: 'GitLab.org',
licenseType: 'MIT',
techStack: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
it('leaves properties mentioned in `ignoreKeyNames` array intact when `deep` is true', () => {
const expected = {
convertObjectProps: {
project_name_converted: 'GitLab CE',
group_name: 'GitLab.org',
license_type_converted: 'MIT',
tech_stack_converted: {
backend_converted: 'Ruby',
frontend_framework: 'Vue',
database_converted: 'PostgreSQL',
},
},
convertObjectPropsToCamelCase: {
projectName: 'GitLab CE',
group_name: 'GitLab.org',
licenseType: 'MIT',
techStack: {
backend: 'Ruby',
frontend_framework: 'Vue',
database: 'PostgreSQL',
},
},
convertObjectPropsToSnakeCase: {
project_name: 'GitLab CE',
groupName: 'GitLab.org',
license_type: 'MIT',
tech_stack: {
backend: 'Ruby',
frontendFramework: 'Vue',
database: 'PostgreSQL',
},
},
};
const ignoreKeyNames = {
convertObjectProps: ['group_name', 'frontend_framework'],
convertObjectPropsToCamelCase: ['group_name', 'frontend_framework'],
convertObjectPropsToSnakeCase: ['groupName', 'frontendFramework'],
};
expect(
testFunction(mockObjNested, {
deep: true,
ignoreKeyNames: ignoreKeyNames[functionName],
}),
).toEqual(expected[functionName]);
});
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7