Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enrich parser test #284

Merged
merged 7 commits into from
Mar 25, 2019
Merged

Enrich parser test #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
043e083
test: refactor parser name
shikanime Mar 20, 2019
0e74111
chore: remove missed type todo
shikanime Mar 20, 2019
81790d0
test: add parse point test
shikanime Mar 20, 2019
4d06d6e
test: add parse set text test
shikanime Mar 20, 2019
7977592
test: add set solid test
shikanime Mar 20, 2019
b1e9bc9
test: reorder sketch parser test
shikanime Mar 20, 2019
8ae1979
chore: update sketchapp type
shikanime Mar 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
"@ngxs/logger-plugin": "^3.4.1",
"@types/highlight.js": "^9.12.3",
"@types/node": "~11.9.2",
"@types/sketchapp": "^1.0.0",
"@types/sketchapp": "^1.0.3",
"codelyzer": "~4.5.0",
"conventional-changelog-cli": "^2.0.12",
"husky": "^1.3.1",
Expand Down
290 changes: 265 additions & 25 deletions packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ describe('SketchStyleParserService', () => {
expect(sketchStyleParserService).toBeTruthy();
});

describe('when parse text', () => {
it('should parse text font', () => {
describe('when transform text', () => {
it('should output font', () => {
const obj = {
style: {
textStyle: {
Expand All @@ -35,14 +35,14 @@ describe('SketchStyleParserService', () => {
}
}
}
} as any;
} as SketchMSLayer;
expect(sketchStyleParserService.transformTextFont(obj)).toEqual({
'font-family': '\'Roboto-Medium\', \'Roboto\', \'sans-serif\'',
'font-size': '14px',
});
});

it('should not parse not configured font', () => {
it('should not output font when empty attribute', () => {
const obj = {
style: {
textStyle: {
Expand All @@ -56,7 +56,7 @@ describe('SketchStyleParserService', () => {
expect(sketchStyleParserService.transformTextFont(obj)).toEqual({});
});

it('should parse color', () => {
it('should output color', () => {
const obj = {
style: {
textStyle: {
Expand Down Expand Up @@ -90,7 +90,7 @@ describe('SketchStyleParserService', () => {
});
});

describe('when parse color', () => {
describe('when transform color', () => {
it('should parse', () => {
const color = {
red: 0.53,
Expand Down Expand Up @@ -128,16 +128,7 @@ describe('SketchStyleParserService', () => {
});
});

it('should set style', () => {
const color = getSketchColorMock();
const obj = { css: {} };
const root = {};
sketchStyleParserService.setStyle(obj, root, { 'background-color': color.toString() });
expect(obj).toEqual({ css: { 'background-color': color.toString() } });
expect(root).toEqual({ css: { 'background-color': color.toString() } });
});

it('should parse shadow', () => {
it('should transform shadow', () => {
const obj = {
shadows: [{
offsetX: 123,
Expand All @@ -151,8 +142,8 @@ describe('SketchStyleParserService', () => {
expect(sketchStyleParserService.transformShadows(obj)).toEqual({ 'box-shadow': `123px 53px 12px 23px ${color.rgba}`});
});

describe('when parse blur', () => {
it('should parse positive radius blur', () => {
describe('when transform blur', () => {
it('should output positive radius blur', () => {
const obj = {blur: {radius: 96}} as SketchMSStyle;
expect(sketchStyleParserService.transformBlur(obj)).toEqual({filter: `blur(${obj.blur.radius}px);`});
});
Expand All @@ -173,8 +164,8 @@ describe('SketchStyleParserService', () => {
});
});

describe('when parse border', () => {
it('should parse border', () => {
describe('when transform border', () => {
it('should output box shadow', () => {
const obj = {
borders: [{
thickness: 129,
Expand Down Expand Up @@ -244,8 +235,8 @@ describe('SketchStyleParserService', () => {
});
});

describe('when parse fill', () => {
it('should parse fill', () => {
describe('when transform fill', () => {
it('should output background', () => {
const obj = {
fills: [{
color: getSketchColorMock(),
Expand All @@ -257,7 +248,7 @@ describe('SketchStyleParserService', () => {
}]
}
}]
} as SketchMSStyle;
} as any; // TODO: migrate @type isEnable to boolean
const color = sketchStyleParserService['parseColors'](obj.fills[0].color);
const colorStop = sketchStyleParserService['parseColors'](obj.fills[0].gradient.stops[0].color);
expect(sketchStyleParserService.transformFills(obj)).toEqual({
Expand All @@ -270,7 +261,7 @@ describe('SketchStyleParserService', () => {
const obj = {
fills: [{
color: getSketchColorMock(),
isEnabled: true,
isEnabled: 1, // TODO: migrate @type isEnable to boolean
manekinekko marked this conversation as resolved.
Show resolved Hide resolved
gradient: {
stops: [{
color: getSketchColorMock(),
Expand All @@ -291,7 +282,7 @@ describe('SketchStyleParserService', () => {
const obj = {
fills: [{
color: getSketchColorMock(),
isEnabled: true,
isEnabled: 1, // TODO: migrate @type isEnable to boolean
gradient: {
stops: [{
color: getSketchColorMock(),
Expand All @@ -308,4 +299,253 @@ describe('SketchStyleParserService', () => {
});
});
});

describe('when parse solid', () => {
it('should transform triangle solid', () => {
const obj = {
style: {},
frame: {
width: 1,
height: 2
},
points: [{
point: '{0, 0}'
}, {
point: '{0, 1}'
}, {
point: '{1, 1}'
}, {
point: '{1, 0}'
}]
} as SketchMSPath;
expect(sketchStyleParserService.transformTriangleSolid(obj, {})).toEqual({
shape: `<svg width="${obj.frame.width}" height="${obj.frame.height}"><polygon fill="none" points="0.000, 0.000 0.000, 2.000 1.000, 2.000 1.000, 0.000" /></svg>`,
style: {
left: '0px',
position: 'absolute',
top: '0px'
}
});
});

it('should transform triangle solid with solid solid transformer', () => {
const obj = {
style: {},
frame: {
width: 1,
height: 2
},
points: [{
curveFrom: '{0, 0}',
curveMode: 1,
curveTo: '{0, 0}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{0, 0}'
}, {
curveFrom: '{0, 1}',
curveMode: 1,
curveTo: '{0, 1}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{0, 1}'
}, {
curveFrom: '{1, 1}',
curveMode: 1,
curveTo: '{1, 1}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{1, 1}'
}, {
curveFrom: '{1, 0}',
curveMode: 1,
curveTo: '{1, 0}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{1, 0}'
}],
} as SketchMSPath;
expect(sketchStyleParserService.transformShapeSolid(obj, {})).toEqual({
shape: `<svg width="${obj.frame.width}" height="${obj.frame.height}"><path fill="none" d="M0.000 0.000,L 0.000 2.000,L 1.000 2.000,L 1.000 0.000" /></svg>`,
style: {
left: '0px',
position: 'absolute',
top: '0px'
}
});
});

it('should transform triangle solid with solid solid transformer', () => {
const obj = {
style: {},
frame: {
width: 432,
height: 123
},
points: [{
curveFrom: '{0.9932432432432432, 0}',
curveTo: '{0.9932432432432432, 0}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{0.9932432432432432, 0}'
}, {
curveFrom: '{0.0030405405405404635, 0}',
curveTo: '{0.0067567567567567571, 0}',
hasCurveFrom: true,
hasCurveTo: false,
point: '{0.0067567567567567571, 0}'
}, {
curveFrom: '{0, 0.027777777777777776}',
curveTo: '{0, 0.012499999999999685}',
hasCurveFrom: false,
hasCurveTo: true,
point: '{0, 0.027777777777777776}'
}, {
curveFrom: '{0, 1}',
curveTo: '{0, 1}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{0, 1}'
}, {
curveFrom: '{1, 1}',
curveTo: '{1, 1}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{1, 1}'
}, {
curveFrom: '{1, 0.012499999999999685}',
curveTo: '{1, 0.027777777777777776}',
hasCurveFrom: true,
hasCurveTo: false,
point: '{1, 0.027777777777777776}'
}, {
curveFrom: '{0.9932432432432432, 0}',
curveTo: '{0.99695945945945952, 0}',
hasCurveFrom: false,
hasCurveTo: true,
point: '{0.9932432432432432, 0}'
}]
} as SketchMSPath;
expect(sketchStyleParserService.transformShapeSolid(obj, {})).toEqual({
shape: `<svg width="${obj.frame.width}" height="${obj.frame.height}"><path fill="none" d="` +
`M429.081 0.000,S 2.919 0.000, 2.919 0.000,S 0.000 1.537, 0.000 3.417,` +
`L 0.000 123.000,L 432.000 123.000,S 432.000 3.417, 432.000 3.417,S 430.686 0.000, 429.081 0.000` +
`" /></svg>`,
style: {
left: '0px',
position: 'absolute',
top: '0px'
}
});
});

it('should transform oval solid', () => {
expect(sketchStyleParserService.transformOvalSolid()).toEqual({
'border-radius': '50%'
});
});
});

it('should parse point', () => {
const node = {
frame: {
width: 10,
height: 10
}
} as SketchMSPath;
expect(sketchStyleParserService.parsePoint('{1, 0}', 2, node)).toEqual({
x: '12.000',
y: '2.000'
});
});

it('should parse 0 height point', () => {
const node = {
frame: {
width: 18,
height: 0
}
} as SketchMSPath;
expect(sketchStyleParserService.parsePoint('{1, 0}', 4, node)).toEqual({
x: '22.000',
y: '4.000'
});
});

it('should parse point with negative offset', () => {
const node = {
frame: {
width: 18,
height: 0
}
} as SketchMSPath;
expect(sketchStyleParserService.parsePoint('{1, 0}', -4, node)).toEqual({
x: '14.000',
y: '-4.000'
});
});

it('should set style', () => {
const color = getSketchColorMock();
const obj = { css: {} };
const root = {};
sketchStyleParserService.setStyle(obj, root, { 'background-color': color.toString() });
expect(obj).toEqual({ css: { 'background-color': color.toString() } });
expect(root).toEqual({ css: { 'background-color': color.toString() } });
});

it('should set text', () => {
const text = 'hello there';
const obj = {};
const root = {};
sketchStyleParserService.setText(obj, root, text);
expect(obj).toEqual({ text });
expect(root).toEqual({ text });
});

it('should set solid', () => {
const def = {
style: {},
frame: {
width: 1,
height: 2
},
points: [{
curveFrom: '{0, 0}',
curveMode: 1,
curveTo: '{0, 0}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{0, 0}'
}, {
curveFrom: '{0, 1}',
curveMode: 1,
curveTo: '{0, 1}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{0, 1}'
}, {
curveFrom: '{1, 1}',
curveMode: 1,
curveTo: '{1, 1}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{1, 1}'
}, {
curveFrom: '{1, 0}',
curveMode: 1,
curveTo: '{1, 0}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{1, 0}'
}],
} as SketchMSPath;
const shape = sketchStyleParserService.transformShapeSolid(def, {}).shape;
const obj = {};
const root = {};
sketchStyleParserService.setSolid(obj, root, shape);
expect(obj).toEqual({ shape });
expect(root).toEqual({ shape });
});

});