No Deck instance when using testLayer{,Async}?

[cneumann]

Hello,
I'm trying to write a test for a CompositeLayer that makes use of nebula.gl's EditableGeoJsonLayer, but it hits an error (Cannot read property 'eventManager' of undefined). In EditableLayer._addEventHandlers this.context.deck is accessed, but does not exist on the layer instance. Unfortunately nebula.gl does not seem to have tests for the layer as far as I've seen, so I couldn't just borrow from there 😉

Is there a way to get a Deck instance created when using testLayer{,Async}? Or any other ideas how I can test my layer - I'm mostly interested in doing lifecycle testing. Thanks!

[AdriSolid]

Hey @cneumann!

First, I would like to see you layer code, or at least a minimal example.

In the meantime, maybe you are interested in simply pass that error using something like:

const spy = makeSpy(EditableLayer.prototype, '_addEventHandlers');
spy.returns('whatever');

You have some layer tests examples here.

Hope it helps!

[cneumann]

Below is a reduced version of my layer, it does not do a whole lot and the problem most likely already manifests if you create a CompositeLayer that simply returns a EditableGeoJsonLayer. As mentioned the whole thing goes wrong because EditableGeoJsonLayer._addEventHandlers (called from initializeState) does:

const { eventManager } = this.context.deck;

which fails because this.context.deck is undefined.

Thanks for the suggestion of replacing _addEventHandlers with a mock, I'll give it a try.

const INITIAL_STATE = {
  selectedFeatureIndexes: [],
  featureCollection: {
    type: 'FeatureCollection',
    features: [],
  },
}

function getLineColorFn(feature, isSelected, mode) {
  return isSelected ? [255, 0, 0, 255] : [0, 0, 0, 255];
}

function getFillColorFn(feature, isSelected, mode) {
  return isSelected ? [255, 0, 0, 128] : [0, 0, 0, 128];
}

export default class MyEditLayer extends CompositeLayer {
  initializeState(context) {
    super(context);
    this.state.selectedFeatureIndexes = INITIAL_STATE.selectedFeatureIndexes;
    this.state.featureCollection = INITIAL_STATE.featureCollection;
  }

  renderLayers() {
    const { featureCollection, selectedFeatureIndexes } = this.state;

    const editLayer = new EditableGeoJsonLayer(this.getSubLayerProps({
      id: `geojson`,
      data: featureCollection,
      pickable: true,
      selectedFeatureIndexes: selectedFeatureIndexes,
      onEdit: (editAction) => this._handleOnEdit(editAction),
      getLineColor: getLineColorFn,
      getFillColor: getFillColorFn,
    };
    const textLayer = new TextLayer(/* ... */);

    return [editLayer, textLayer];
  }

  _handleOnEdit(editAction) {
    const { editType, udpateData, editContext } = editAction;

    if (editType === 'addFeature') {
      this.setState({
        featureCollection: updatedData
      });
    }
  }
}

[AdriSolid]

Hope mocking that method solves your test!

[jeffpeck10x]

Thanks @AdriSolid !

Fyi to the next person who finds this, you also need to mock _removeEventHandlers.

Something like this if you are using jest:

import { EditableGeoJsonLayer } from "@nebula.gl/layers";

describe("MyLayer", () => {
  it("renders layer", async () => {
    jest.spyOn(EditableGeoJsonLayer.prototype, '_addEventHandlers').mockImplementation();
    jest.spyOn(EditableGeoJsonLayer.prototype, '_removeEventHandlers').mockImplementation();

    testLayer({
      Layer: MyLayer
      testCases: [
        {
          onAfterUpdate({ layer }: OnAfterUpdateParams) {
            // test here
          },
          props: { data: [] },
        },
        // ...
      ],
    });
  });
});,