An issue cropped up where the legend was not properly rendering a given layer that has multiple geometry styles. This issue was easily reproducible with the Redline widget.
We were expecting to see this after creating a redline layer and drawing some objects.
But we got this instead
Because this legend is a react component, we can inspect it (and the problem layer node) with the React developer tools
Remember the important React motto:
The UI is a function of props and state. The HTML content of the LayerNode should be reflective of the props and state given to it. We should've seen something that resembled 3 style icons. But nothing's there.
So let's just check that the layer model for this LayerNode component is indeed a layer with multiple geometry styles
Indeed it is, so that means that the LayerNode component is the culprit. It is not handling the case of multiple geometry styles properly.
As we've already set up our test infrastructure to make it easy to write and run tests, it should be easy to write up an
enzyme unit test that shows what we were actually expecting to see when a LayerNode renders a layer that has multiple geometry styles
component.legend.spec.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| import * as React from "react";
import { shallow, mount, render } from "enzyme";
import { MapLayer } from "../src/api/contracts/runtime-map";
import { LayerNode } from "../src/components/legend";
import { ILegendContext } from "../src/components/context";
// Mocks the ILegendContext needed by LayerNode and other legend sub-components
function mockContext(): ILegendContext {
return {
getIconMimeType: () => "image/png",
getStdIcon: (path: string) => path,
getChildren: (id) => [],
getCurrentScale: () => this.props.currentScale,
getTree: () => {},
getGroupVisibility: (group) => group.ActuallyVisible,
getLayerVisibility: (layer) => layer.ActuallyVisible,
setGroupVisibility: () => {},
setLayerVisibility: () => {},
getLayerSelectability: (layer) => true,
setLayerSelectability: () => {},
getGroupExpanded: (group) => true,
setGroupExpanded: () => {},
getLayerExpanded: (layer) => true,
setLayerExpanded: () => {}
};
}
describe("components/legend", () => {
it("renders a multi-geom-style layer with a rule for each geom style", () => {
const layer: MapLayer = {
Type: 1,
Selectable: true,
LayerDefinition: "Session:841258e8-63f9-11e7-8000-0a002700000f_en_MTI3LjAuMC4x0AFC0AFB0AFA//testing.LayerDefinition",
Name: "_testing",
LegendLabel: "testing",
ObjectId: "abcd12345",
DisplayInLegend: true,
ExpandInLegend: true,
Visible: true,
ActuallyVisible: true,
ScaleRange: [
{
MinScale: 0,
MaxScale: 10000,
FeatureStyle: [
{
Type: 4,
Rule: [
{
Icon: "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAB1JREFUOI1j/M/A8J+BAsBEieZRA0YNGDVgMBkAAFhtAh6Zl924AAAAAElFTkSuQmCC"
}
]
},
{
Type: 4,
Rule: [
{
Icon: "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAACVJREFUOI1jYBgFwwAwMjD8bcAjL8rAwKCNR56LibruGQVDFAAACkEBy4yPOpAAAAAASUVORK5CYII="
}
]
},
{
Type: 4,
Rule: [
{
Icon: "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAFhJREFUOI3t0D0OQFAUROHPIwoNS7ZJe5BoKJR+OpVH4jUkTjv3TDI3w6Z2zooNeSSfKNQYIwd3NISH6sFfQLCkFmQJdkVIGlG+44mfLyjMaCPpgO7C7tkBAXgKXzBhmUQAAAAASUVORK5CYII="
}
]
}
]
}
]
};
const wrapper = shallow(<LayerNode layer={layer} />, {
context: mockContext()
});
const rules = wrapper.find("RuleNode");
expect(rules.length).toBe(3); //One for each geom style
});
});
|
Running this in jest confirms our expectations were not met:
Summary of all failing tests
FAIL test\component.legend.spec.tsx (6.75s)
● components/legend › renders a multi-geom-style layer with a rule for each geom style
expect(received).toBe(expected)
Expected value to be (using ===):
3
Received:
0
at Object. (test/component.legend.spec.tsx:149:30)
at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
at process._tickCallback (internal/process/next_tick.js:103:7)
Test Suites: 1 failed, 22 passed, 23 total
Tests: 1 failed, 94 passed, 95 total
Snapshots: 0 total
Time: 14.532s
Ran all test suites.
We expected 3 RuleNode components (one for each geometry style) to have been rendered, but we only got nothing.
A look at the LayerNode rendering shows why. It only considered the first feature style of any layer's scale range.
So once that was fixed, not only does our test pass, but we have visual confirmation that multi-geometry-style layers now render like they did in the Fusion and AJAX viewers.
So the reason for writing this post was just a re-affirmation of my choice for using React to build this viewer.
- The top-quality developer/debugging experience.
- The react way of thinking about UIs that allowed me to easily identify the culprit (the LayerNode component)
- The top-quality testing ecosystem around React (Jest, enzyme) that allowed me to easily write a unit test on this component to confirm and verify my expectations
Posts
