Skip to content

Commit

Permalink
✅ Add more tests at different levels
Browse files Browse the repository at this point in the history
  • Loading branch information
@dej611
dej611 committed Sep 1, 2021
1 parent 1c8b68e commit 01f9249
Show file tree
Hide file tree
Showing 3 changed files with 213 additions and 104 deletions.
223 changes: 119 additions & 104 deletions x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,121 +129,136 @@ describe('palette panel', () => {
});
});

describe('reverse option', () => {
beforeEach(() => {
props = {
activePalette: { type: 'palette', name: 'positive' },
palettes: paletteRegistry,
setPalette: jest.fn(),
dataBounds: { min: 0, max: 100 },
};
});
it('should rewrite the min/max range values on palette change', () => {
const instance = mountWithIntl(<CustomizablePalette {...props} />);

changePaletteIn(instance, 'custom');

function toggleReverse(instance: ReactWrapper, checked: boolean) {
return instance
.find('[data-test-subj="lnsPalettePanel_dynamicColoring_reverse"]')
.first()
.prop('onClick')!({} as React.MouseEvent);
}

it('should reverse the colorStops on click', () => {
const instance = mountWithIntl(<CustomizablePalette {...props} />);

toggleReverse(instance, true);

expect(props.setPalette).toHaveBeenCalledWith(
expect.objectContaining({
params: expect.objectContaining({
reverse: true,
}),
})
);
expect(props.setPalette).toHaveBeenCalledWith({
type: 'palette',
name: 'custom',
params: expect.objectContaining({
rangeMin: 0,
rangeMax: 50,
}),
});
});
});

describe('percentage / number modes', () => {
beforeEach(() => {
props = {
activePalette: { type: 'palette', name: 'positive' },
palettes: paletteRegistry,
setPalette: jest.fn(),
dataBounds: { min: 5, max: 200 },
};
});
describe('reverse option', () => {
beforeEach(() => {
props = {
activePalette: { type: 'palette', name: 'positive' },
palettes: paletteRegistry,
setPalette: jest.fn(),
dataBounds: { min: 0, max: 100 },
};
});

it('should switch mode and range boundaries on click', () => {
const instance = mountWithIntl(<CustomizablePalette {...props} />);
act(() => {
instance
.find('[data-test-subj="lnsPalettePanel_dynamicColoring_custom_range_groups"]')
.find(EuiButtonGroup)
.prop('onChange')!('number');
});

act(() => {
instance
.find('[data-test-subj="lnsPalettePanel_dynamicColoring_custom_range_groups"]')
.find(EuiButtonGroup)
.prop('onChange')!('percent');
});

expect(props.setPalette).toHaveBeenNthCalledWith(
1,
expect.objectContaining({
params: expect.objectContaining({
rangeType: 'number',
rangeMin: 5,
rangeMax: 102.5 /* (200 - (200-5)/ colors.length: 2) */,
}),
})
);

expect(props.setPalette).toHaveBeenNthCalledWith(
2,
expect.objectContaining({
params: expect.objectContaining({
rangeType: 'percent',
rangeMin: 0,
rangeMax: 50 /* 100 - (100-0)/ colors.length: 2 */,
}),
})
);
});
function toggleReverse(instance: ReactWrapper, checked: boolean) {
return instance
.find('[data-test-subj="lnsPalettePanel_dynamicColoring_reverse"]')
.first()
.prop('onClick')!({} as React.MouseEvent);
}

it('should reverse the colorStops on click', () => {
const instance = mountWithIntl(<CustomizablePalette {...props} />);

toggleReverse(instance, true);

expect(props.setPalette).toHaveBeenCalledWith(
expect.objectContaining({
params: expect.objectContaining({
reverse: true,
}),
})
);
});
});

describe('custom stops', () => {
beforeEach(() => {
props = {
activePalette: { type: 'palette', name: 'positive' },
palettes: paletteRegistry,
setPalette: jest.fn(),
dataBounds: { min: 0, max: 100 },
};
describe('percentage / number modes', () => {
beforeEach(() => {
props = {
activePalette: { type: 'palette', name: 'positive' },
palettes: paletteRegistry,
setPalette: jest.fn(),
dataBounds: { min: 5, max: 200 },
};
});

it('should switch mode and range boundaries on click', () => {
const instance = mountWithIntl(<CustomizablePalette {...props} />);
act(() => {
instance
.find('[data-test-subj="lnsPalettePanel_dynamicColoring_custom_range_groups"]')
.find(EuiButtonGroup)
.prop('onChange')!('number');
});
it('should be visible for predefined palettes', () => {
const instance = mountWithIntl(<CustomizablePalette {...props} />);
expect(
instance.find('[data-test-subj="lnsPalettePanel_dynamicColoring_custom_stops"]').exists()
).toEqual(true);

act(() => {
instance
.find('[data-test-subj="lnsPalettePanel_dynamicColoring_custom_range_groups"]')
.find(EuiButtonGroup)
.prop('onChange')!('percent');
});

it('should be visible for custom palettes', () => {
const instance = mountWithIntl(
<CustomizablePalette
{...props}
activePalette={{
type: 'palette',
expect(props.setPalette).toHaveBeenNthCalledWith(
1,
expect.objectContaining({
params: expect.objectContaining({
rangeType: 'number',
rangeMin: 5,
rangeMax: 102.5 /* (200 - (200-5)/ colors.length: 2) */,
}),
})
);

expect(props.setPalette).toHaveBeenNthCalledWith(
2,
expect.objectContaining({
params: expect.objectContaining({
rangeType: 'percent',
rangeMin: 0,
rangeMax: 50 /* 100 - (100-0)/ colors.length: 2 */,
}),
})
);
});
});

describe('custom stops', () => {
beforeEach(() => {
props = {
activePalette: { type: 'palette', name: 'positive' },
palettes: paletteRegistry,
setPalette: jest.fn(),
dataBounds: { min: 0, max: 100 },
};
});
it('should be visible for predefined palettes', () => {
const instance = mountWithIntl(<CustomizablePalette {...props} />);
expect(
instance.find('[data-test-subj="lnsPalettePanel_dynamicColoring_custom_stops"]').exists()
).toEqual(true);
});

it('should be visible for custom palettes', () => {
const instance = mountWithIntl(
<CustomizablePalette
{...props}
activePalette={{
type: 'palette',
name: 'custom',
params: {
name: 'custom',
params: {
name: 'custom',
},
}}
/>
);
expect(
instance.find('[data-test-subj="lnsPalettePanel_dynamicColoring_custom_stops"]').exists()
).toEqual(true);
});
},
}}
/>
);
expect(
instance.find('[data-test-subj="lnsPalettePanel_dynamicColoring_custom_stops"]').exists()
).toEqual(true);
});
});
});
73 changes: 73 additions & 0 deletions x-pack/plugins/lens/public/shared_components/coloring/utils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import { chartPluginMock } from 'src/plugins/charts/public/mocks';
import {
applyPaletteParams,
getColorStops,
getContrastColor,
getDataMinMax,
getPaletteStops,
Expand Down Expand Up @@ -59,6 +60,78 @@ describe('applyPaletteParams', () => {
});
});

describe('getColorStops', () => {
const paletteRegistry = chartPluginMock.createPaletteRegistry();
it('should return the same colorStops if a custom palette is passed, avoiding recomputation', () => {
const colorStops = [
{ stop: 0, color: 'red' },
{ stop: 100, color: 'blue' },
];
expect(
getColorStops(
paletteRegistry,
colorStops,
{ name: 'custom', type: 'palette' },
{ min: 0, max: 100 }
)
).toBe(colorStops);
});

it('should get a fresh list of colors', () => {
expect(
getColorStops(
paletteRegistry,
[
{ stop: 0, color: 'red' },
{ stop: 100, color: 'blue' },
],
{ name: 'mocked', type: 'palette' },
{ min: 0, max: 100 }
)
).toEqual([
{ color: 'blue', stop: 0 },
{ color: 'yellow', stop: 50 },
]);
});

it('should get a fresh list of colors even if custom palette but empty colorStops', () => {
expect(
getColorStops(paletteRegistry, [], { name: 'mocked', type: 'palette' }, { min: 0, max: 100 })
).toEqual([
{ color: 'blue', stop: 0 },
{ color: 'yellow', stop: 50 },
]);
});

it('should correctly map the new colorStop to the current data bound and minValue', () => {
expect(
getColorStops(
paletteRegistry,
[],
{ name: 'mocked', type: 'palette', params: { rangeType: 'number' } },
{ min: 100, max: 1000 }
)
).toEqual([
{ color: 'blue', stop: 100 },
{ color: 'yellow', stop: 550 },
]);
});

it('should reverse the colors', () => {
expect(
getColorStops(
paletteRegistry,
[],
{ name: 'mocked', type: 'palette', params: { reverse: true } },
{ min: 100, max: 1000 }
)
).toEqual([
{ color: 'yellow', stop: 0 },
{ color: 'blue', stop: 50 },
]);
});
});

describe('remapStopsByNewInterval', () => {
it('should correctly remap the current palette from 0..1 to 0...100', () => {
expect(
Expand Down
21 changes: 21 additions & 0 deletions x-pack/test/functional/apps/lens/table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,28 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
expect(styleObj['background-color']).to.be('rgb(235, 239, 245)');
});

it('should keep the coloring consistent when changing mode', async () => {
// Change mode from percent to number
await testSubjects.click('lnsPalettePanel_dynamicColoring_rangeType_groups_number');
await PageObjects.header.waitUntilLoadingHasFinished();
// check that all remained the same
const styleObj = await PageObjects.lens.getDatatableCellStyle(0, 2);
expect(styleObj['background-color']).to.be('rgb(235, 239, 245)');
});

it('should keep the coloring consistent when moving to custom palette from default', async () => {
await PageObjects.lens.changePaletteTo('custom');
await PageObjects.header.waitUntilLoadingHasFinished();
// check that all remained the same
const styleObj = await PageObjects.lens.getDatatableCellStyle(0, 2);
expect(styleObj['background-color']).to.be('rgb(235, 239, 245)');
});

it('tweak the color stops numeric value', async () => {
// restore default palette and percent mode
await PageObjects.lens.changePaletteTo('temperature');
await testSubjects.click('lnsPalettePanel_dynamicColoring_rangeType_groups_percent');
// now tweak the value
await testSubjects.setValue('lnsPalettePanel_dynamicColoring_stop_value_0', '30', {
clearWithKeyboard: true,
});
Expand Down

0 comments on commit 01f9249

Please sign in to comment.