test: add unit tests for component light

CHANGELOG.md

@@ -14,10 +14,11 @@ 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))
 
 ---
 

__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(<Light />);
+    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(<Light style={testStyles} />);
+
+    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],
+    );
+  });
+});

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 {
                 ],
               },
             }}>
-            <MapboxGL.LineLayer
-              id="layer1"
-              style={{
-                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',
-                ],
-              }}
-            />
+            <MapboxGL.LineLayer id="layer1" style={styles.lineLayer} />
           </MapboxGL.ShapeSource>
         </MapboxGL.MapView>
       </Page>

javascript/components/Light.js

@@ -31,6 +31,7 @@ class Light extends AbstractLayer {
     return (
       <RCTMGLLight
         ref="nativeLight"
+        testID="rctmglLight"
         {...this.props}
         style={undefined}
         reactStyle={this.getStyle()}