Skip to content

Commit

Permalink
Merge a12749b into bff4003
Browse files Browse the repository at this point in the history
  • Loading branch information
@juandjara
juandjara committed Mar 18, 2024
2 parents bff4003 + a12749b commit 1f8587b
Show file tree
Hide file tree
Showing 39 changed files with 1,866 additions and 1,064 deletions.
154 changes: 64 additions & 90 deletions packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,25 @@
import React from 'react';
import Typography from '../../src/components/atoms/Typography';
import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI';
import { fireEvent, render, screen } from '../widgets/utils/testUtils';

const CUSTOM_CHILDREN = <Typography>Legend custom</Typography>;

const MY_CUSTOM_LEGEND_KEY = 'my-custom-legend';

const LAYER_OPTIONS = {
PALETTE_SELECTOR: 'PALETTE_SELECTOR'
};

const LAYER_OPTIONS_COMPONENTS = {
[LAYER_OPTIONS.PALETTE_SELECTOR]: PaletteSelector
};

function PaletteSelector() {
return <p>PaletteSelector</p>;
}

describe('LegendWidgetUI', () => {
const DATA = [
{
// 0
id: 'category',
title: 'Category Layer',
visible: true,
helperText: 'lorem',
legend: {
type: 'category',
note: 'lorem',
colors: ['#000', '#00F', '#0F0'],
labels: ['Category 1', 'Category 2', 'Category 3']
}
},
{
// 1
id: 'icon',
title: 'Icon Layer',
visible: true,
Expand All @@ -47,6 +34,7 @@ describe('LegendWidgetUI', () => {
}
},
{
// 2
id: 'bins',
title: 'Ramp Layer',
visible: true,
Expand All @@ -57,6 +45,7 @@ describe('LegendWidgetUI', () => {
}
},
{
// 3
id: 'continuous',
title: 'Ramp Layer',
visible: true,
Expand All @@ -67,6 +56,7 @@ describe('LegendWidgetUI', () => {
}
},
{
// 4
id: 'proportion',
title: 'Proportion Layer',
visible: true,
Expand All @@ -76,14 +66,7 @@ describe('LegendWidgetUI', () => {
}
},
{
id: 'custom',
title: 'Single Layer',
visible: true,
legend: {
children: CUSTOM_CHILDREN
}
},
{
// 5
id: 'custom_key',
title: 'Single Layer',
visible: true,
Expand All @@ -95,33 +78,10 @@ describe('LegendWidgetUI', () => {
colors: ['#000', '#00F', '#0F0'],
labels: ['Category 1', 'Category 2', 'Category 3']
}
},
{
id: 'custom_children',
title: 'Single Layer',
visible: true,
showOpacityControl: true,
opacity: 0.6,
legend: {
children: CUSTOM_CHILDREN
}
},
{
id: 'palette',
title: 'Store types',
visible: true,
options: [LAYER_OPTIONS.PALETTE_SELECTOR],
legend: {
children: CUSTOM_CHILDREN
}
}
];
const Widget = (props) => <LegendWidgetUI {...props} />;

test('single legend', () => {
render(<Widget layers={[DATA[0]]}></Widget>);
expect(screen.queryByText('Layers')).not.toBeInTheDocument();
});
const Widget = (props) => <LegendWidgetUI {...props} />;

test('multiple legends', () => {
render(<Widget layers={DATA}></Widget>);
Expand All @@ -131,10 +91,33 @@ describe('LegendWidgetUI', () => {

test('multiple legends with collapsed as true', () => {
render(<Widget layers={DATA} collapsed={true}></Widget>);
expect(screen.queryByText('Layers')).toBeInTheDocument();
// expanded legend toggle
expect(screen.queryByText('Layers')).not.toBeInTheDocument();
// collapsed legend toggle
expect(screen.queryByLabelText('Layers')).toBeInTheDocument();
expect(screen.queryByTestId('categories-legend')).not.toBeInTheDocument();
});

test('layer with no legend is not shown on widget', () => {
const layers = [
{
id: 'test-layer-no-legend',
title: 'Test layer hidden',
visible: true
},
{
id: 'test-layer-no-legend-2',
title: 'Test layer shown',
visible: true,
legend: {}
}
];
render(<Widget layers={layers}></Widget>);
expect(screen.queryByText('Layers')).toBeInTheDocument();
expect(screen.queryByText('Test layer hidden')).not.toBeInTheDocument();
expect(screen.queryByText('Test layer shown')).toBeInTheDocument();
});

test('Category legend', () => {
render(<Widget layers={[DATA[0]]}></Widget>);
expect(screen.getByTestId('categories-legend')).toBeInTheDocument();
Expand All @@ -160,11 +143,6 @@ describe('LegendWidgetUI', () => {
expect(screen.getByTestId('proportion-legend')).toBeInTheDocument();
});

test('Custom legend', () => {
render(<Widget layers={[DATA[5]]}></Widget>);
expect(screen.getByText('Legend custom')).toBeInTheDocument();
});

test('Empty legend', () => {
const EMPTY_LAYER = { id: 'empty', title: 'Empty Layer', legend: {} };
render(<Widget layers={[EMPTY_LAYER]}></Widget>);
Expand All @@ -184,42 +162,53 @@ describe('LegendWidgetUI', () => {
test('with custom legend types', () => {
const MyCustomLegendComponent = jest.fn();
MyCustomLegendComponent.mockReturnValue(<p>Test</p>);

render(
<Widget
layers={[DATA[6]]}
layers={[DATA[5]]}
customLegendTypes={{ [MY_CUSTOM_LEGEND_KEY]: MyCustomLegendComponent }}
></Widget>
);

expect(MyCustomLegendComponent).toHaveBeenCalled();
expect(MyCustomLegendComponent).toHaveBeenCalledWith(
{ layer: DATA[6], legend: DATA[6].legend },
{ layer: DATA[5], legend: DATA[5].legend },
{}
);
expect(screen.getByText('Test')).toBeInTheDocument();
});

test('legend with opacity control', async () => {
const legendConfig = DATA[7];
const legendConfig = {
id: 'test-opacity-control',
title: 'Test opacity control',
visible: true,
showOpacityControl: true,
opacity: 0.8,
legend: {}
};
const onChangeOpacity = jest.fn();
const container = render(
<Widget layers={[legendConfig]} onChangeOpacity={onChangeOpacity}></Widget>
);
const layerOptionsBtn = await screen.findByLabelText('Layer options');
expect(layerOptionsBtn).toBeInTheDocument();
layerOptionsBtn.click();
expect(screen.getByText('Opacity')).toBeInTheDocument();

const toggleButton = screen.getByRole('button', { name: 'Opacity' });
expect(toggleButton).toBeInTheDocument();
toggleButton.click();

const opacitySelectorInput = container.getByTestId('opacity-slider');
expect(opacitySelectorInput.value).toBe('' + legendConfig.opacity * 100);
expect(opacitySelectorInput).toBeInTheDocument();

expect(opacitySelectorInput.value).toBe(String(legendConfig.opacity * 100));

fireEvent.change(opacitySelectorInput, { target: { value: '50' } });
fireEvent.change(opacitySelectorInput, { target: { value: 50 } });

expect(onChangeOpacity).toHaveBeenCalledTimes(1);
expect(onChangeOpacity).toHaveBeenCalledWith({ id: legendConfig.id, opacity: 0.5 });
});

test('should manage legend collapsed state correctly', () => {
let legendConfig = { ...DATA[7], legend: { ...DATA[7].legend, collapsed: true } };
let legendConfig = { ...DATA[0], collapsed: true };
const onChangeLegendRowCollapsed = jest.fn();

const { rerender } = render(
Expand All @@ -229,48 +218,33 @@ describe('LegendWidgetUI', () => {
></Widget>
);

expect(screen.queryByText('Legend custom')).not.toBeInTheDocument();
expect(screen.queryByTestId('legend-layer-variable-list')).not.toBeInTheDocument();

const layerOptionsBtn = screen.getByText('Single Layer');
expect(layerOptionsBtn).toBeInTheDocument();
layerOptionsBtn.click();
const toggleButton = screen.getByRole('button', { name: 'Expand layer' });
expect(toggleButton).toBeInTheDocument();
toggleButton.click();

expect(onChangeLegendRowCollapsed).toHaveBeenCalledTimes(1);
expect(onChangeLegendRowCollapsed).toHaveBeenCalledWith({
id: legendConfig.id,
collapsed: false
});

legendConfig = { ...DATA[7], legend: { ...DATA[7].legend, collapsed: false } };
legendConfig = { ...DATA[0], collapsed: false };

rerender(
<Widget
layers={[legendConfig]}
onChangeLegendRowCollapsed={onChangeLegendRowCollapsed}
></Widget>
);

expect(screen.getByText('Legend custom')).toBeInTheDocument();
expect(screen.getByTestId('legend-layer-variable-list')).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Collapse layer' })).toBeInTheDocument();
});

test('with custom layer options', async () => {
const layer = DATA[8];
render(
<Widget layers={[layer]} customLayerOptions={LAYER_OPTIONS_COMPONENTS}></Widget>
);
const layerOptionsBtn = await screen.findByLabelText('Layer options');
expect(layerOptionsBtn).toBeInTheDocument();
layerOptionsBtn.click();
expect(screen.getByText('PaletteSelector')).toBeInTheDocument();
});

test('with custom layer options - unknown option', async () => {
const layer = { ...DATA[8], options: ['unknown'] };
render(
<Widget layers={[layer]} customLayerOptions={LAYER_OPTIONS_COMPONENTS}></Widget>
);
const layerOptionsBtn = await screen.findByLabelText('Layer options');
expect(layerOptionsBtn).toBeInTheDocument();
layerOptionsBtn.click();
expect(screen.getByText('Unknown layer option')).toBeInTheDocument();
test('helper text', () => {
render(<Widget layers={[{ ...DATA[0], helperText: 'helperText' }]}></Widget>);
expect(screen.getByText('helperText')).toBeInTheDocument();
});
});
2 changes: 1 addition & 1 deletion packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { render, screen } from '../utils/testUtils';
import LegendCategories from '../../../src/widgets/legend/LegendCategories';
import LegendCategories from '../../../src/widgets/legend/legend-types/LegendCategories';
import { getPalette } from '../../../src/utils/palette';
import { hexToRgb } from '@mui/material';

Expand Down
2 changes: 1 addition & 1 deletion packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 20 additions & 2 deletions packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,37 @@
import React from 'react';
import { render, screen } from '../../widgets/utils/testUtils';
import LegendProportion from '../../../src/widgets/legend/LegendProportion';
import LegendProportion from '../../../src/widgets/legend/legend-types/LegendProportion';
import { IntlProvider } from 'react-intl';

const DEFAULT_LEGEND = {
labels: ['0', '200']
};

describe('LegendProportion', () => {
test('renders correctly', () => {
render(<LegendProportion legend={DEFAULT_LEGEND} />);
render(
<IntlProvider locale='en'>
<LegendProportion legend={DEFAULT_LEGEND} />
</IntlProvider>
);
expect(screen.queryByText('Max: 200')).toBeInTheDocument();
expect(screen.queryByText('150')).toBeInTheDocument();
expect(screen.queryByText('50')).toBeInTheDocument();
expect(screen.queryByText('Min: 0')).toBeInTheDocument();
});
test('renders correctly without min and max', () => {
render(
<IntlProvider locale='en'>
<LegendProportion legend={{ ...DEFAULT_LEGEND, showMinMax: false }} />
</IntlProvider>
);
expect(screen.queryByText('Max')).not.toBeInTheDocument();
expect(screen.queryByText('Min')).not.toBeInTheDocument();
expect(screen.queryByText('200')).toBeInTheDocument();
expect(screen.queryByText('150')).toBeInTheDocument();
expect(screen.queryByText('50')).toBeInTheDocument();
expect(screen.queryByText('0')).toBeInTheDocument();
});
test('renders error if neither labels is defined', () => {
render(<LegendProportion legend={{}} />);
expect(
Expand Down

0 comments on commit 1f8587b

Please sign in to comment.