Skip to content

Commit

Permalink
[ONL-8261] Migrate smart-table and filters to TS (#1865)
Browse files Browse the repository at this point in the history 
* [ONL-8261] chore: Migrated ec-amount-filter-input.

* [ONL-8261] chore: Migrated ec-filter-popover. Added type safety for popover's events.

* [ONL-8261] chore: Migrated date-range-filter.

* [ONL-8261] chore: Migrated multiple-values-selection.

* [ONL-8261] chore: Migrated sync-multiple-values-filter

* [ONL-8261] chore: Migrated ec-badge needed in filter-popover

* [ONL-8261] chore: Migrated currency-filter including submenu.

* [ONL-8261] chore: Migrated table-filter

* [ONL-8261] chore: Migrated table-pagination

* [ONL-8261] chore: Migrated smart-table-heading.

* [ONL-8261] chore: Migrated smart-table.

* [ONL-8261] fix: Fixed smart-table colX slots are not type safe.

* [ONL-8261] fix: Adjusted required fields.

* [ONL-8261] chore: Fixed generics in tests and removed mountAsTemplate function.

* [ONL-8261] chore: Removed unused code.

* 2.7.9
  • Loading branch information
@mcibique
mcibique authored Feb 22, 2024
1 parent 897751e commit 0d94f61
Show file tree
Hide file tree
Showing 93 changed files with 4,356 additions and 1,585 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

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

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ebury/chameleon-components",
"version": "2.7.8",
"version": "2.7.9",
"main": "src/main.ts",
"sideEffects": false,
"author": "Ebury Team (http://labs.ebury.rocks/)",
Expand Down
0 ...ots__/ec-amount-filter-input.spec.js.snap → ...ots__/ec-amount-filter-input.spec.ts.snap
View file
File renamed without changes.
226 changes: 106 additions & 120 deletions ...lter-input/ec-amount-filter-input.spec.js → ...lter-input/ec-amount-filter-input.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { mount } from '@vue/test-utils';
import { type ComponentMountingOptions, mount, VueWrapper } from '@vue/test-utils';
import { defineComponent } from 'vue';

import EcAmountFilterInput from './ec-amount-filter-input.vue';
import type { AmountFilterInputProps, ComparisonSymbolItem } from './types';

const comparisonSymbolItems = [
const comparisonSymbolItems: ComparisonSymbolItem[] = [
{
text: 'More than',
value: '>',
Expand All @@ -19,30 +20,20 @@ const comparisonSymbolItems = [
];

describe('EcAmountFilterInput', () => {
function mountAmountFilterInput(props, mountOpts) {
function mountAmountFilterInput(props?: Partial<AmountFilterInputProps>, mountOpts?: ComponentMountingOptions<typeof EcAmountFilterInput>) {
return mount(EcAmountFilterInput, {
props: {
comparisonSymbolItems,
modelValue: {},
modelValue: {
comparisonSymbol: undefined,
amount: undefined,
},
...props,
},
...mountOpts,
});
}

function mountAmountFilterInputAsTemplate(template, props, wrapperComponentOpts, mountOpts) {
const Component = defineComponent({
components: { EcAmountFilterInput },
template,
...wrapperComponentOpts,
});

return mount(Component, {
props,
...mountOpts,
});
}

it('should render properly', () => {
const wrapper = mountAmountFilterInput();
expect(wrapper.element).toMatchSnapshot();
Expand Down Expand Up @@ -138,10 +129,10 @@ describe('EcAmountFilterInput', () => {
const wrapper = mountAmountFilterInput({ locale: 'es' });
await wrapper.findByDataTest('ec-amount-filter-input__amount').setValue('1111,11');

expect(wrapper.findByDataTest('ec-amount-filter-input__amount').element.value).toEqual('1.111,11');
expect(wrapper.findByDataTest<HTMLInputElement>('ec-amount-filter-input__amount').element.value).toEqual('1.111,11');

await wrapper.setProps({ locale: 'en' });
expect(wrapper.findByDataTest('ec-amount-filter-input__amount').element.value).toEqual('1,111.11');
expect(wrapper.findByDataTest<HTMLInputElement>('ec-amount-filter-input__amount').element.value).toEqual('1,111.11');
});
});

Expand All @@ -150,60 +141,59 @@ describe('EcAmountFilterInput', () => {
const wrapper = mountAmountFilterInput();

await selectComparisonSymbol(wrapper, 1);
expect(wrapper.emitted('change').length).toEqual(1);
expect(wrapper.emitted('focus').length).toEqual(1);
expect(wrapper.emitted('open').length).toEqual(1);
expect(wrapper.emitted('after-open').length).toEqual(1);
expect(wrapper.emitted('update:modelValue').length).toEqual(1);
expect(wrapper.emitted('comparison-symbol-change').length).toEqual(1);
expect(wrapper.emitted('close').length).toEqual(1);
expect(wrapper.emitted('after-close').length).toEqual(1);
expect(wrapper.emitted('change')?.length).toEqual(1);
expect(wrapper.emitted('focus')?.length).toEqual(1);
expect(wrapper.emitted('open')?.length).toEqual(1);
expect(wrapper.emitted('after-open')?.length).toEqual(1);
expect(wrapper.emitted('update:modelValue')?.length).toEqual(1);
expect(wrapper.emitted('comparison-symbol-change')?.length).toEqual(1);
expect(wrapper.emitted('close')?.length).toEqual(1);
expect(wrapper.emitted('after-close')?.length).toEqual(1);
await selectComparisonSymbol(wrapper, 2);
expect(wrapper.emitted('change').length).toEqual(2);
expect(wrapper.emitted('focus').length).toEqual(1);
expect(wrapper.emitted('open').length).toEqual(2);
expect(wrapper.emitted('after-open').length).toEqual(2);
expect(wrapper.emitted('update:modelValue').length).toEqual(2);
expect(wrapper.emitted('comparison-symbol-change').length).toEqual(2);
expect(wrapper.emitted('close').length).toEqual(2);
expect(wrapper.emitted('after-close').length).toEqual(2);
expect(wrapper.emitted('change')?.length).toEqual(2);
expect(wrapper.emitted('focus')?.length).toEqual(1);
expect(wrapper.emitted('open')?.length).toEqual(2);
expect(wrapper.emitted('after-open')?.length).toEqual(2);
expect(wrapper.emitted('update:modelValue')?.length).toEqual(2);
expect(wrapper.emitted('comparison-symbol-change')?.length).toEqual(2);
expect(wrapper.emitted('close')?.length).toEqual(2);
expect(wrapper.emitted('after-close')?.length).toEqual(2);
});

it('should emit the correct events when amount is set', async () => {
const wrapper = mountAmountFilterInput();

await wrapper.findByDataTest('ec-amount-filter-input__amount').trigger('focus');
await wrapper.findByDataTest('ec-amount-filter-input__amount').setValue('11');
expect(wrapper.emitted('change').length).toEqual(1);
expect(wrapper.emitted('focus').length).toEqual(1);
expect(wrapper.emitted('amount-change').length).toEqual(1);
expect(wrapper.emitted('update:modelValue').length).toEqual(1);
expect(wrapper.emitted('change')?.length).toEqual(1);
expect(wrapper.emitted('focus')?.length).toEqual(1);
expect(wrapper.emitted('amount-change')?.length).toEqual(1);
expect(wrapper.emitted('update:modelValue')?.length).toEqual(1);

await wrapper.findByDataTest('ec-amount-filter-input__amount').setValue('111');
expect(wrapper.emitted('change').length).toEqual(2);
expect(wrapper.emitted('amount-change').length).toEqual(2);
expect(wrapper.emitted('update:modelValue').length).toEqual(2);
expect(wrapper.emitted('change')?.length).toEqual(2);
expect(wrapper.emitted('amount-change')?.length).toEqual(2);
expect(wrapper.emitted('update:modelValue')?.length).toEqual(2);
});
});

describe('v-model', () => {
it('should use the v-model with the comparison symbol and emit the changes', async () => {
const wrapper = mountAmountFilterInputAsTemplate(
'<ec-amount-filter-input :comparison-symbol-items="comparisonSymbolItems" v-model="value" />',
{},
{
data() {
return {
comparisonSymbolItems,
value: {
comparisonSymbol: null,
amount: 0,
},
};
},
const Component = defineComponent({
components: { EcAmountFilterInput },
data() {
return {
comparisonSymbolItems,
value: {
comparisonSymbol: undefined,
amount: 0,
},
};
},
);
template: '<ec-amount-filter-input :comparison-symbol-items="comparisonSymbolItems" v-model="value" />',
});

const wrapper = mount(Component);
await selectComparisonSymbol(wrapper, 0);
expect(wrapper.vm.value.comparisonSymbol).toEqual({
text: comparisonSymbolItems[0].text,
Expand All @@ -217,95 +207,91 @@ describe('EcAmountFilterInput', () => {
});

it('should preselect the comparison symbol and the amount from the v-model', () => {
const wrapper = mountAmountFilterInputAsTemplate(
'<ec-amount-filter-input :comparison-symbol-items-items="comparisonSymbolItems" v-model="value" />',
{},
{
data() {
return {
comparisonSymbolItems,
value: {
comparisonSymbol: comparisonSymbolItems[2],
amount: 1234.56,
},
};
},
const Component = defineComponent({
components: { EcAmountFilterInput },
data() {
return {
comparisonSymbolItems,
value: {
comparisonSymbol: comparisonSymbolItems[2],
amount: 1234.56,
},
};
},
);
template: '<ec-amount-filter-input :comparison-symbol-items="comparisonSymbolItems" v-model="value" />',
});

expect(wrapper.findByDataTest('ec-amount-filter-input__comparison-symbol-selector').element.value).toBe(comparisonSymbolItems[2].value);
expect(wrapper.findByDataTest('ec-amount-filter-input__amount').element.value).toBe('1,234.56');
const wrapper = mount(Component);
expect(wrapper.findByDataTest<HTMLInputElement>('ec-amount-filter-input__comparison-symbol-selector').element.value).toBe(comparisonSymbolItems[2].value);
expect(wrapper.findByDataTest<HTMLInputElement>('ec-amount-filter-input__amount').element.value).toBe('1,234.56');
});

it('should update the v-model correctly when we change the amount', async () => {
const wrapper = mountAmountFilterInputAsTemplate(
'<ec-amount-filter-input :comparison-symbol-items="comparisonSymbolItems" v-model="value" />',
{},
{
data() {
return {
comparisonSymbolItems,
value: {
comparisonSymbol: comparisonSymbolItems[2],
amount: 1234.56,
},
};
},
const Component = defineComponent({
components: { EcAmountFilterInput },
data() {
return {
comparisonSymbolItems,
value: {
comparisonSymbol: comparisonSymbolItems[2],
amount: 1234.56,
},
};
},
);
template: '<ec-amount-filter-input :comparison-symbol-items="comparisonSymbolItems" v-model="value" />',
});

const wrapper = mount(Component);
await wrapper.findByDataTest('ec-amount-filter-input__amount').setValue('11');
expect(wrapper.vm.value.amount).toEqual(11);
});

it('should preserve the amount when we change the comparison symbol', async () => {
const wrapper = mountAmountFilterInputAsTemplate(
'<ec-amount-filter-input :comparison-symbol-items="comparisonSymbolItems" v-model="value" />',
{},
{
data() {
return {
comparisonSymbolItems,
value: {
comparisonSymbol: comparisonSymbolItems[2],
amount: 1234.56,
},
};
},
const Component = defineComponent({
components: { EcAmountFilterInput },
data() {
return {
comparisonSymbolItems,
value: {
comparisonSymbol: comparisonSymbolItems[2],
amount: 1234.56,
},
};
},
);
template: '<ec-amount-filter-input :comparison-symbol-items="comparisonSymbolItems" v-model="value" />',
});

expect(wrapper.findByDataTest('ec-amount-filter-input__amount').element.value).toEqual('1,234.56');
const wrapper = mount(Component);
expect(wrapper.findByDataTest<HTMLInputElement>('ec-amount-filter-input__amount').element.value).toEqual('1,234.56');
await selectComparisonSymbol(wrapper, 2);
expect(wrapper.findByDataTest('ec-amount-filter-input__amount').element.value).toEqual('1,234.56');
expect(wrapper.findByDataTest<HTMLInputElement>('ec-amount-filter-input__amount').element.value).toEqual('1,234.56');
});

it('should reflect the changes of locale', async () => {
const wrapper = mountAmountFilterInputAsTemplate(
'<ec-amount-filter-input :comparison-symbol-items="comparisonSymbolItems" :locale="locale" v-model="value" />',
{},
{
data() {
return {
comparisonSymbolItems,
value: {
comparisonSymbol: comparisonSymbolItems[2],
amount: 1234.56,
},
locale: 'en',
};
},
const Component = defineComponent({
components: { EcAmountFilterInput },
data() {
return {
comparisonSymbolItems,
value: {
comparisonSymbol: comparisonSymbolItems[2],
amount: 1234.56,
},
locale: 'en',
};
},
);
template: '<ec-amount-filter-input :comparison-symbol-items="comparisonSymbolItems" :locale="locale" v-model="value" />',
});

expect(wrapper.findByDataTest('ec-amount-filter-input__amount').element.value).toEqual('1,234.56');
const wrapper = mount(Component);
expect(wrapper.findByDataTest<HTMLInputElement>('ec-amount-filter-input__amount').element.value).toEqual('1,234.56');
await wrapper.setData({ locale: 'es' });
expect(wrapper.findByDataTest('ec-amount-filter-input__amount').element.value).toEqual('1.234,56');
expect(wrapper.findByDataTest<HTMLInputElement>('ec-amount-filter-input__amount').element.value).toEqual('1.234,56');
});
});
});

async function selectComparisonSymbol(wrapper, index) {
async function selectComparisonSymbol(wrapper: VueWrapper, index: number) {
await wrapper.findByDataTest('ec-amount-filter-input__comparison-symbol-selector').trigger('mousedown');
await wrapper.findByDataTest('ec-popover-stub').trigger('show');
await wrapper.findByDataTest('ec-amount-filter-input__comparison-symbol-selector').trigger('focus');
Expand Down
10 changes: 7 additions & 3 deletions ...ter-input/ec-amount-filter-input.story.js → ...ter-input/ec-amount-filter-input.story.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { action } from '@storybook/addon-actions';
import type { Meta, StoryFn } from '@storybook/vue3';
import { ref } from 'vue';

import EcAmountFilterInput from './ec-amount-filter-input.vue';
import type { AmountFilterInputModel } from './types';

export default {
const meta: Meta = {
title: 'Filters/Amount Filter Input',
component: EcAmountFilterInput,
argTypes: {
Expand All @@ -14,12 +16,14 @@ export default {
},
};

const Template = args => ({
export default meta;

const Template: StoryFn<typeof EcAmountFilterInput> = args => ({
components: {
EcAmountFilterInput,
},
setup() {
const value = ref({
const value = ref<AmountFilterInputModel>({
comparisonSymbol: {
text: 'Equal to',
value: '=',
Expand Down
Loading

0 comments on commit 0d94f61

Please sign in to comment.