diff --git a/test/unit/style.js b/test/unit/style.js index b4816e4cdb..968f19db98 100644 --- a/test/unit/style.js +++ b/test/unit/style.js @@ -1,4 +1,5 @@ import Style, { cacheStyle } from 'Core/Style'; +import { FEATURE_TYPES } from 'Core/Feature'; import assert from 'assert'; describe('Style', function () { @@ -8,6 +9,11 @@ describe('Style', function () { style1.stroke.color = 'black'; style1.text.haloWidth = 1; + const sprites = { + img: '', + 'fill-pattern': { x: 0, y: 0, width: 10, height: 10 }, + }; + it('Copy style', () => { const style2 = new Style().copy(style1); assert.equal(style1.point.color, style2.point.color); @@ -45,7 +51,6 @@ describe('Style', function () { const img = cacheStyle.get('icon', 1); img.emitEvent('load'); delete style1.icon; - // console.log(dom.children[0].style); assert.equal(dom.children[0].style['z-index'], -1); }); @@ -54,14 +59,81 @@ describe('Style', function () { style1.icon = { key: 'fill-pattern', }; - const sprites = { - img: '', - 'fill-pattern': { x: 0, y: 0, width: 10, height: 10 }, - }; + style1.applyToHTML(dom, sprites); const img = cacheStyle.get('fill-pattern', 1); img.emitEvent('load'); assert.equal(dom.children[0].style['z-index'], -1); }); }); + + describe('setFromGeojsonProperties', () => { + it('FEATURE_TYPES.POINT', () => { + const geoJsonProperties = { + radius: 2, + 'label-color': '#eba55f', + 'icon-color': '#eba55f', + }; + const style = Style.setFromGeojsonProperties(geoJsonProperties, FEATURE_TYPES.POINT); + assert.equal(style.point.radius, 2); + assert.equal(style.text.color, '#eba55f'); + assert.equal(style.icon.color, '#eba55f'); + }); + it('FEATURE_TYPES.POLYGONE', () => { + const geoJsonProperties = { + fill: '#eba55f', + stroke: '#eba55f', + }; + const style = Style.setFromGeojsonProperties(geoJsonProperties, FEATURE_TYPES.POLYGONE); + assert.equal(style.stroke.color, '#eba55f'); + assert.equal(style.fill.color, '#eba55f'); + }); + }); + + describe('setFromVectorTileLayer', () => { + it("layer.type==='fill'", () => { + const vectorTileLayer = { + type: 'fill', + paint: { + 'fill-pattern': 'filler', + 'fill-outline-color': '#eba55f', + }, + }; + const style = Style.setFromVectorTileLayer(vectorTileLayer, sprites); + // fill-pattern + assert.equal(style.fill.pattern.constructor.name, 'DOMElement'); + // fill-outline-color + assert.equal(style.stroke.color, '#eba55f'); + }); + it("layer.type==='line'", () => { + const vectorTileLayer = { + type: 'line', + paint: { + 'line-color': '#eba55f', + }, + }; + const style = Style.setFromVectorTileLayer(vectorTileLayer); + assert.equal(style.stroke.color, '#eba55f'); + }); + it("layer.type==='circle'", () => { + const vectorTileLayer = { + type: 'circle', + paint: { + 'circle-color': '#eba55f', + }, + }; + const style = Style.setFromVectorTileLayer(vectorTileLayer); + assert.equal(style.point.color, '#eba55f'); + }); + it("layer.type==='symbol'", () => { + const vectorTileLayer = { + type: 'symbol', + layout: { + 'symbol-z-order': 'auto', + }, + }; + const style = Style.setFromVectorTileLayer(vectorTileLayer); + assert.equal(style.text.zOrder, 'Y'); + }); + }); });