-
Notifications
You must be signed in to change notification settings - Fork 557
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add convert to DTCG spec utility WIP
- Loading branch information
1 parent
96439c7
commit 38f1a4d
Showing
3 changed files
with
407 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,350 @@ | ||
| /* | ||
| * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with | ||
| * the License. A copy of the License is located at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR | ||
| * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions | ||
| * and limitations under the License. | ||
| */ | ||
| import { expect } from 'chai'; | ||
| import { convertToDTCG } from '../../lib/utils/convertToDTCG.js'; | ||
|
|
||
| describe('utils', () => { | ||
| describe('convertToDTCG', () => { | ||
| it('should swap value, type and description to use $ property prefix', () => { | ||
| const result = convertToDTCG( | ||
| { | ||
| colors: { | ||
| red: { | ||
| value: '#ff0000', | ||
| type: 'color', | ||
| description: 'A red color', | ||
| }, | ||
| green: { | ||
| value: '#00ff00', | ||
| type: 'color', | ||
| description: 'A green color', | ||
| }, | ||
| blue: { | ||
| value: '#0000ff', | ||
| type: 'color', | ||
| description: 'A blue color', | ||
| }, | ||
| }, | ||
| }, | ||
| { applyTypesToGroup: false }, | ||
| ); | ||
| expect(result).to.eql({ | ||
| colors: { | ||
| red: { | ||
| $value: '#ff0000', | ||
| $type: 'color', | ||
| $description: 'A red color', | ||
| }, | ||
| green: { | ||
| $value: '#00ff00', | ||
| $type: 'color', | ||
| $description: 'A green color', | ||
| }, | ||
| blue: { | ||
| $value: '#0000ff', | ||
| $type: 'color', | ||
| $description: 'A blue color', | ||
| }, | ||
| }, | ||
| }); | ||
| }); | ||
|
|
||
| it('should apply type to the upper most common ancestor', () => { | ||
| const result = convertToDTCG({ | ||
| colors: { | ||
| red: { | ||
| value: '#ff0000', | ||
| type: 'color', | ||
| }, | ||
| green: { | ||
| value: '#00ff00', | ||
| type: 'color', | ||
| }, | ||
| blue: { | ||
| value: '#0000ff', | ||
| type: 'color', | ||
| }, | ||
| }, | ||
| dimensions: { | ||
| sm: { | ||
| value: '2px', | ||
| type: 'dimension', | ||
| }, | ||
| md: { | ||
| value: '8px', | ||
| type: 'dimension', | ||
| }, | ||
| lg: { | ||
| value: '16px', | ||
| type: 'dimension', | ||
| }, | ||
| }, | ||
| }); | ||
| expect(result).to.eql({ | ||
| colors: { | ||
| red: { | ||
| $value: '#ff0000', | ||
| }, | ||
| green: { | ||
| $value: '#00ff00', | ||
| }, | ||
| blue: { | ||
| $value: '#0000ff', | ||
| }, | ||
| $type: 'color', | ||
| }, | ||
| dimensions: { | ||
| sm: { | ||
| $value: '2px', | ||
| }, | ||
| md: { | ||
| $value: '8px', | ||
| }, | ||
| lg: { | ||
| $value: '16px', | ||
| }, | ||
| $type: 'dimension', | ||
| }, | ||
| }); | ||
| }); | ||
|
|
||
| it('should keep types as is when not shared with all siblings', () => { | ||
| const result = convertToDTCG({ | ||
| colors: { | ||
| red: { | ||
| value: '#ff0000', | ||
| type: 'color', | ||
| }, | ||
| green: { | ||
| value: '#00ff00', | ||
| type: 'color', | ||
| }, | ||
| blue: { | ||
| value: '#0000ff', | ||
| type: 'color2', | ||
| }, | ||
| }, | ||
| dimensions: { | ||
| sm: { | ||
| value: '2px', | ||
| type: 'dimension', | ||
| }, | ||
| md: { | ||
| value: '8px', | ||
| type: 'dimension', | ||
| }, | ||
| lg: { | ||
| value: '16px', | ||
| type: 'dimension', | ||
| }, | ||
| }, | ||
| }); | ||
| expect(result).to.eql({ | ||
| colors: { | ||
| red: { | ||
| $value: '#ff0000', | ||
| $type: 'color', | ||
| }, | ||
| green: { | ||
| $value: '#00ff00', | ||
| $type: 'color', | ||
| }, | ||
| blue: { | ||
| $value: '#0000ff', | ||
| $type: 'color2', | ||
| }, | ||
| }, | ||
| dimensions: { | ||
| sm: { | ||
| $value: '2px', | ||
| }, | ||
| md: { | ||
| $value: '8px', | ||
| }, | ||
| lg: { | ||
| $value: '16px', | ||
| }, | ||
| $type: 'dimension', | ||
| }, | ||
| }); | ||
| }); | ||
|
|
||
| it('should work with any number of nestings', () => { | ||
| const result = convertToDTCG({ | ||
| colors: { | ||
| red: { | ||
| value: '#ff0000', | ||
| type: 'color', | ||
| }, | ||
| grey: { | ||
| 100: { | ||
| value: '#aaaaaa', | ||
| type: 'color', | ||
| }, | ||
| 200: { | ||
| deeper: { | ||
| value: '#cccccc', | ||
| type: 'color', | ||
| }, | ||
| }, | ||
| 400: { | ||
| value: '#dddddd', | ||
| type: 'color', | ||
| }, | ||
| 500: { | ||
| foo: { | ||
| bar: { | ||
| qux: { | ||
| value: '#eeeeee', | ||
| type: 'color', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| green: { | ||
| value: '#00ff00', | ||
| type: 'color', | ||
| }, | ||
| blue: { | ||
| value: '#0000ff', | ||
| type: 'color', | ||
| }, | ||
| }, | ||
| }); | ||
| expect(result).to.eql({ | ||
| $type: 'color', | ||
| colors: { | ||
| red: { | ||
| $value: '#ff0000', | ||
| }, | ||
| grey: { | ||
| 100: { | ||
| $value: '#aaaaaa', | ||
| }, | ||
| 200: { | ||
| deeper: { | ||
| $value: '#cccccc', | ||
| }, | ||
| }, | ||
| 400: { | ||
| $value: '#dddddd', | ||
| }, | ||
| 500: { | ||
| foo: { | ||
| bar: { | ||
| qux: { | ||
| $value: '#eeeeee', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| green: { | ||
| $value: '#00ff00', | ||
| }, | ||
| blue: { | ||
| $value: '#0000ff', | ||
| }, | ||
| }, | ||
| }); | ||
| }); | ||
|
|
||
| it('should handle scenarios where not all types are the same', () => { | ||
| const result = convertToDTCG({ | ||
| colors: { | ||
| red: { | ||
| value: '#ff0000', | ||
| type: 'color', | ||
| }, | ||
| grey: { | ||
| 100: { | ||
| value: '#aaaaaa', | ||
| type: 'color', | ||
| }, | ||
| 200: { | ||
| deeper: { | ||
| value: '#cccccc', | ||
| type: 'color', | ||
| }, | ||
| }, | ||
| 400: { | ||
| value: '#dddddd', | ||
| type: 'color', | ||
| }, | ||
| 500: { | ||
| foo: { | ||
| bar: { | ||
| qux: { | ||
| value: '#eeeeee', | ||
| type: 'color2', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| green: { | ||
| value: '#00ff00', | ||
| type: 'color', | ||
| }, | ||
| blue: { | ||
| value: '#0000ff', | ||
| type: 'color', | ||
| }, | ||
| }, | ||
| }); | ||
| expect(result).to.eql({ | ||
| colors: { | ||
| red: { | ||
| $value: '#ff0000', | ||
| $type: 'color', | ||
| }, | ||
| grey: { | ||
| 100: { | ||
| $value: '#aaaaaa', | ||
| $type: 'color', | ||
| }, | ||
| 200: { | ||
| deeper: { | ||
| $value: '#cccccc', | ||
| }, | ||
| $type: 'color', | ||
| }, | ||
| 400: { | ||
| $value: '#dddddd', | ||
| $type: 'color', | ||
| }, | ||
| 500: { | ||
| foo: { | ||
| bar: { | ||
| qux: { | ||
| $value: '#eeeeee', | ||
| }, | ||
| }, | ||
| }, | ||
| $type: 'color2', | ||
| }, | ||
| }, | ||
| green: { | ||
| $value: '#00ff00', | ||
| $type: 'color', | ||
| }, | ||
| blue: { | ||
| $value: '#0000ff', | ||
| $type: 'color', | ||
| }, | ||
| }, | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.