From b3e43324f1baf7358d41b43941c2b323adb2c460 Mon Sep 17 00:00:00 2001 From: viddity Date: Mon, 9 Aug 2021 16:57:26 +0200 Subject: [PATCH 1/4] fix: apply to lint rule no-inline-styles The inline styles in GradienLine led to a linter error which prevents from commiting via cli. --- .../src/examples/LineLayer/GradientLine.js | 53 ++++++++++--------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/example/src/examples/LineLayer/GradientLine.js b/example/src/examples/LineLayer/GradientLine.js index 372692479..f06fefe44 100644 --- a/example/src/examples/LineLayer/GradientLine.js +++ b/example/src/examples/LineLayer/GradientLine.js @@ -6,6 +6,32 @@ import sheet from '../../styles/sheet'; import BaseExamplePropTypes from '../common/BaseExamplePropTypes'; import Page from '../common/Page'; +const styles = { + lineLayer: { + lineColor: 'red', + lineCap: 'round', + lineJoin: 'round', + lineWidth: 14, + lineGradient: [ + 'interpolate', + ['linear'], + ['line-progress'], + 0, + 'blue', + 0.1, + 'royalblue', + 0.3, + 'cyan', + 0.5, + 'lime', + 0.7, + 'yellow', + 1, + 'red', + ], + }, +}; + class GradientLine extends React.Component { static propTypes = { ...BaseExamplePropTypes, @@ -47,32 +73,7 @@ class GradientLine extends React.Component { ], }, }}> - + From 8c0b19ed110d45f9ce1af5b2be35954b9e139b92 Mon Sep 17 00:00:00 2001 From: viddity Date: Mon, 9 Aug 2021 15:00:46 +0200 Subject: [PATCH 2/4] test: add unit tests for Light component --- __tests__/components/Light.test.js | 39 ++++++++++++++++++++++++++++++ javascript/components/Light.js | 1 + 2 files changed, 40 insertions(+) create mode 100644 __tests__/components/Light.test.js diff --git a/__tests__/components/Light.test.js b/__tests__/components/Light.test.js new file mode 100644 index 000000000..96105c0cc --- /dev/null +++ b/__tests__/components/Light.test.js @@ -0,0 +1,39 @@ +import React from 'react'; +import {render} from '@testing-library/react-native'; + +import Light from '../../javascript/components/Light'; + +export const NATIVE_MODULE_NAME = 'RCTMGLLight'; + +describe('Light', () => { + test('renders correctly', () => { + const {queryByTestId} = render(); + const light = queryByTestId('rctmglLight'); + expect(light).toBeDefined(); + }); + + test('renders correctly with custom styles', () => { + const testStyles = { + position: [1234, 1234, 1234], + color: '#FA0000', // === ProcessedTestColor + anchor: 'map', + intensity: 1, + }; + const processedTestColor = 4294574080; + + const {queryByTestId} = render(); + + const customStyles = queryByTestId('rctmglLight').props.reactStyle; + const {anchor} = customStyles; + const {color} = customStyles; + const {position} = customStyles; + const {intensity} = customStyles; + + expect(anchor.stylevalue.value).toStrictEqual(testStyles.anchor); + expect(color.stylevalue.value).toStrictEqual(processedTestColor); + expect(intensity.stylevalue.value).toStrictEqual(testStyles.intensity); + expect(position.stylevalue.value[0].value).toStrictEqual( + testStyles.position[0], + ); + }); +}); diff --git a/javascript/components/Light.js b/javascript/components/Light.js index e7c236084..c7410c12a 100644 --- a/javascript/components/Light.js +++ b/javascript/components/Light.js @@ -31,6 +31,7 @@ class Light extends AbstractLayer { return ( Date: Mon, 9 Aug 2021 17:22:25 +0200 Subject: [PATCH 3/4] chore: update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c1f56910..6a05ea015 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ Feat(android): dynamically update tintColor & add example ([#1469](https://githu Docs: make background in example pngs transparent ([#1483](https://github.com/react-native-mapbox-gl/maps/pull/1483) Examples: align install steps with yarn, ignore created env files ([#1484](https://github.com/react-native-mapbox-gl/maps/pull/1484) Style: run yarn lint ([#1486](https://github.com/react-native-mapbox-gl/maps/pull/1486) +Test: add unit tests for component light ([#1489](https://github.com/react-native-mapbox-gl/maps/pull/1489)) --- From 8985147fc803dd0489e8fb37bbaad733d3d6b559 Mon Sep 17 00:00:00 2001 From: viddity Date: Mon, 9 Aug 2021 17:24:33 +0200 Subject: [PATCH 4/4] fix: add missing closing brackets in CHANGELOG --- CHANGELOG.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a05ea015..b3229e167 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,10 +14,10 @@ Feat(camera): maxBounds/(min|max)ZoomLevel can be updated dynamically ([#1462](h Refactor(example): clean up folder structure ([#1464](https://github.com/react-native-mapbox-gl/maps/pull/1464)) Fix lineGradient showing wrong colors ([#1471](https://github.com/react-native-mapbox-gl/maps/pull/1471)) Support tintColor on Android ([#1465](https://github.com/react-native-mapbox-gl/maps/pull/1465)) -Feat(android): dynamically update tintColor & add example ([#1469](https://github.com/react-native-mapbox-gl/maps/pull/1469) -Docs: make background in example pngs transparent ([#1483](https://github.com/react-native-mapbox-gl/maps/pull/1483) -Examples: align install steps with yarn, ignore created env files ([#1484](https://github.com/react-native-mapbox-gl/maps/pull/1484) -Style: run yarn lint ([#1486](https://github.com/react-native-mapbox-gl/maps/pull/1486) +Feat(android): dynamically update tintColor & add example ([#1469](https://github.com/react-native-mapbox-gl/maps/pull/1469)) +Docs: make background in example pngs transparent ([#1483](https://github.com/react-native-mapbox-gl/maps/pull/1483)) +Examples: align install steps with yarn, ignore created env files ([#1484](https://github.com/react-native-mapbox-gl/maps/pull/1484)) +Style: run yarn lint ([#1486](https://github.com/react-native-mapbox-gl/maps/pull/1486)) Test: add unit tests for component light ([#1489](https://github.com/react-native-mapbox-gl/maps/pull/1489)) ---