diff --git a/exporters/variables-scss/src/generators/__tests__/cssGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/cssGenerator.test.ts index 2be51ddc55..fc60d106fb 100644 --- a/exporters/variables-scss/src/generators/__tests__/cssGenerator.test.ts +++ b/exporters/variables-scss/src/generators/__tests__/cssGenerator.test.ts @@ -34,7 +34,7 @@ const dataProvider = [ token: { id: '3', name: 'unsupportedToken', - tokenType: TokenType.color, + tokenType: TokenType.duration, } as Token, expectedCss: null, hasParentPrefix: true, @@ -53,9 +53,16 @@ describe('cssGenerator', () => { describe('generateCssFromTokens', () => { it('should generate CSS from tokens', () => { - const css = generateCssFromTokens(Array.from(exampleMockedTokens.values()), mappedTokens, tokenGroups, true); + const css = generateCssFromTokens( + Array.from(exampleMockedTokens.values()), + mappedTokens, + tokenGroups, + 'Grid', + true, + false, + ); - expect(css).toBe('$grid-spacing-desktop: 32px !default;\n$grid-columns: 12 !default;'); + expect(css).toBe('$grid-columns: 12 !default;\n\n$grid-spacing-desktop: 32px !default;'); }); }); }); diff --git a/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts index 62cb276428..f40e054881 100644 --- a/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts +++ b/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts @@ -25,6 +25,7 @@ describe('fileGenerator', () => { { fileName: '_other.scss', content: mockedExpectedResult }, { fileName: '_radii.scss', content: emptyFile }, { fileName: '_spacing.scss', content: emptyFile }, + { fileName: '_colors.scss', content: emptyFile }, ]); }); }); diff --git a/exporters/variables-scss/src/helpers/__tests__/colorHelper.test.ts b/exporters/variables-scss/src/helpers/__tests__/colorHelper.test.ts new file mode 100644 index 0000000000..b63b809b3d --- /dev/null +++ b/exporters/variables-scss/src/helpers/__tests__/colorHelper.test.ts @@ -0,0 +1,44 @@ +import { canHexBeShortened, normalizeColor, shortHex } from '../colorHelper'; + +const dataProviderItems = [ + { + originalColor: 'ffffffff', + expectedColor: '#fff', + }, + { + originalColor: '96969', + expectedColor: '#96969', + }, + { + originalColor: '835ea1', + expectedColor: '#835ea1', + }, + { + originalColor: '00000040', + expectedColor: '#00000040', + }, +]; + +describe('colorHelper', () => { + describe.each(dataProviderItems)('normalizeColor', ({ originalColor, expectedColor }) => { + it('should normalize color', () => { + expect(normalizeColor(originalColor)).toBe(expectedColor); + }); + }); + + describe('canHexBeShortened', () => { + it('should return true if hex can be shortened', () => { + expect(canHexBeShortened('ffffff')).toBe(true); + }); + + it('should return false if hex cannot be shortened', () => { + expect(canHexBeShortened('00000040')).toBe(false); + }); + }); + + describe('shortHex', () => { + it('should shorten hex', () => { + expect(shortHex('ffffff')).toBe('fff'); + }); + }); +}); diff --git a/exporters/variables-scss/src/helpers/__tests__/cssObjectHelper.test.ts b/exporters/variables-scss/src/helpers/__tests__/cssObjectHelper.test.ts new file mode 100644 index 0000000000..c51479a66b --- /dev/null +++ b/exporters/variables-scss/src/helpers/__tests__/cssObjectHelper.test.ts @@ -0,0 +1,53 @@ +import { convertToScss, mergeObjects } from '../cssObjectHelper'; + +const object1 = { + $grids: { + spacing: { + desktop: '$grid-spacing-desktop', + mobile: '$grid-spacing-mobile', + tablet: '$grid-spacing-tablet', + }, + }, +}; + +const object2 = { + $grids: { columns: '$grid-columns' }, +}; + +const mergedObject = { + $grids: { + spacing: { + desktop: '$grid-spacing-desktop', + mobile: '$grid-spacing-mobile', + tablet: '$grid-spacing-tablet', + }, + columns: '$grid-columns', + }, +}; + +const scssObject = `$grids: ( +spacing: ( +desktop: $grid-spacing-desktop, +mobile: $grid-spacing-mobile, +tablet: $grid-spacing-tablet, +), +columns: $grid-columns, +),`; + +describe('cssObjectHelper', () => { + describe('mergeObjects', () => { + it('should merge objects', () => { + const result = mergeObjects(object1, object2); + + expect(result).toStrictEqual(mergedObject); + }); + }); + + describe('convertToScss', () => { + it('should convert object to SCSS', () => { + const result = convertToScss(mergedObject); + + expect(result).toBe(scssObject); + }); + }); +}); diff --git a/exporters/variables-scss/src/helpers/__tests__/tokenHelper.test.ts b/exporters/variables-scss/src/helpers/__tests__/tokenHelper.test.ts index 9b7c0af375..b97c646f57 100644 --- a/exporters/variables-scss/src/helpers/__tests__/tokenHelper.test.ts +++ b/exporters/variables-scss/src/helpers/__tests__/tokenHelper.test.ts @@ -1,5 +1,5 @@ import { Token, TokenGroup } from '@supernovaio/sdk-exporters'; -import { formatTokenName, tokenVariableName } from '../tokenHelper'; +import { addEmptyLineBetweenTokenGroups, formatTokenName, sortTokens, tokenVariableName } from '../tokenHelper'; import { exampleMockedGroups, exampleMockedTokens } from '../../formatters/__fixtures__/mockedExampleTokens'; const dataProvider = [ @@ -47,4 +47,32 @@ describe('tokenHelper', () => { expect(result).toBe('$grid-columns: 12 !default;'); }); }); + + describe('sortTokens', () => { + it('should sort tokens by variable name', () => { + const tokens = Array.from(exampleMockedTokens.values()); + const tokenGroups = exampleMockedGroups; + const hasParentPrefix = true; + const group = 'Grid'; + const sortByNumValue = false; + + const result = sortTokens(tokens, tokenGroups, hasParentPrefix, group, sortByNumValue); + + expect(result[0]?.origin?.name).toBe('Grid/Columns'); + expect(result[1]?.origin?.name).toBe('Grid/spacing/desktop'); + }); + }); + + describe('addEmptyLineBetweenTokenGroups', () => { + it('should add empty line between token groups', () => { + const cssTokens = [ + { css: '$grid-columns: 12 !default;', parentGroupId: '1' }, + { css: '$grid-spacing-desktop: 32px !default;', parentGroupId: '2' }, + ]; + + const result = addEmptyLineBetweenTokenGroups(cssTokens); + + expect(result).toBe('$grid-columns: 12 !default;\n\n$grid-spacing-desktop: 32px !default;'); + }); + }); }); diff --git a/exporters/variables-scss/src/helpers/colorHelper.ts b/exporters/variables-scss/src/helpers/colorHelper.ts index a5caf61960..7f71316500 100644 --- a/exporters/variables-scss/src/helpers/colorHelper.ts +++ b/exporters/variables-scss/src/helpers/colorHelper.ts @@ -2,11 +2,11 @@ const SHORT_HEX_WITHOUT_ALPHA_LENGTH = 3; const SHORT_HEX_WITH_ALPHA_LENGTH = 4; const LONG_HEX_WITH_ALPHA_LENGTH = 8; -const canHexBeShortened = (hex: string) => { +export const canHexBeShortened = (hex: string) => { return hex.length % 2 === 0 && hex.split('').every((ch, i, arr) => (i % 2 === 0 ? ch === arr[i + 1] : true)); }; -const shortHex = (hex: string): string => { +export const shortHex = (hex: string): string => { return hex .split('') .map((char, index) => (index % 2 === 0 ? char : ''))