Skip to content

Commit

Permalink
Fix setSelected Deprecations
Browse files Browse the repository at this point in the history 
Convert uses of `setSelected` in Vue tests to equivalent uses of
`setValue` to clean up deprecation warnings.
  • Loading branch information
@heathharrelson
heathharrelson committed May 18, 2020
1 parent b036347 commit 7daae98
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 45 deletions.
80 changes: 44 additions & 36 deletions test/components/ChartForm_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,10 @@ describe('ChartForm.vue', () => {
});

// change the group
form.findAll(`${selector.groupingFieldSelect} > option`).at(0).setSelected();
const firstGroupingField = form
.findAll(`${selector.groupingFieldSelect} > option`)
.at(0);
form.find(selector.groupingFieldSelect).setValue(firstGroupingField.element.value);

expect(form.vm.model.group).toEqual('');
expect(form.vm.model.targets).toEqual(defaultTargetsObject());
Expand All @@ -213,7 +216,10 @@ describe('ChartForm.vue', () => {
});

// change the group and target
form.findAll(`${selector.groupingFieldSelect} > option`).at(0).setSelected();
const firstGroupingField = form
.findAll(`${selector.groupingFieldSelect} > option`)
.at(0);
form.find(selector.groupingFieldSelect).setValue(firstGroupingField.element.value);
await Vue.nextTick();
form.find('input[name=target_count]').setValue('60');
await Vue.nextTick();
Expand Down Expand Up @@ -407,23 +413,24 @@ describe('ChartForm.vue', () => {
expect(dateFieldOptions.at(1).text().trim()).toEqual('survey_date (Survey date)');
});

it('changes date field options when event is changed and removes selection', done => {
it('changes date field options when event is changed and removes selection', async () => {
const dateFieldEventOptions = wrapper.findAll(
`${selector.dateFieldEventSelect} > option`
);
dateFieldEventOptions.at(1).setSelected();

wrapper.vm.$nextTick(() => {
expect(wrapper.vm.model.field).toEqual('');
const dateFieldOptions = wrapper.findAll(`${selector.dateFieldSelect} > option`);
// 3 options plus prompt
expect(dateFieldOptions.length).toEqual(4);
// sorted by label
expect(dateFieldOptions.at(1).text().trim()).toEqual(
'enroll_date (Enrollment date)'
);
done();
});

wrapper
.find(selector.dateFieldEventSelect)
.setValue(dateFieldEventOptions.at(1).element.value);
await wrapper.vm.$nextTick();

expect(wrapper.vm.model.field).toEqual('');
const dateFieldOptions = wrapper.findAll(`${selector.dateFieldSelect} > option`);
// 3 options plus prompt
expect(dateFieldOptions.length).toEqual(4);
// sorted by label
expect(dateFieldOptions.at(1).text().trim()).toEqual(
'enroll_date (Enrollment date)'
);
});

it('creates the expected grouping field options for the selected event', () => {
Expand All @@ -436,25 +443,24 @@ describe('ChartForm.vue', () => {
expect(groupFieldOptions.at(2).text().trim()).toEqual('screened (Screened)');
});

it('changes grouping options when event is changed and removes selection', done => {
it('changes grouping options when event is changed and removes selection', async () => {
const groupFieldEventOptions = wrapper.findAll(
`${selector.groupFieldEventSelect} > option`
);
groupFieldEventOptions.at(3).setSelected();

wrapper.vm.$nextTick(() => {
expect(wrapper.vm.model.group).toEqual('');
const groupFieldOptions = wrapper.findAll(
`${selector.groupingFieldSelect} > option`
);
// 2 options plus prompt
expect(groupFieldOptions.length).toEqual(3);
// sorted by label
expect(groupFieldOptions.at(1).text().trim()).toEqual(
'dropdown (Dropdown field)'
);
done();
});
wrapper
.find(selector.groupFieldEventSelect)
.setValue(groupFieldEventOptions.at(3).element.value);
await wrapper.vm.$nextTick();

expect(wrapper.vm.model.group).toEqual('');
const groupFieldOptions = wrapper.findAll(
`${selector.groupingFieldSelect} > option`
);
// 2 options plus prompt
expect(groupFieldOptions.length).toEqual(3);
// sorted by label
expect(groupFieldOptions.at(1).text().trim()).toEqual('dropdown (Dropdown field)');
});

describe('longitudinalValidation', () => {
Expand All @@ -479,7 +485,7 @@ describe('ChartForm.vue', () => {

it('disables saving when date field event is missing', async () => {
// unselect the event
form.findAll(`${selector.dateFieldEventSelect} > option`).at(0).setSelected();
form.find(selector.dateFieldEventSelect).setValue('');
await Vue.nextTick();

// date event is invalid
Expand All @@ -491,8 +497,9 @@ describe('ChartForm.vue', () => {

it('validates date field event selected if date field selected', async () => {
// Unselect date field event - select date field
form.findAll(`${selector.dateFieldEventSelect} > option`).at(0).setSelected();
form.findAll(`${selector.dateFieldSelect} > option`).at(1).setSelected();
form.find(selector.dateFieldEventSelect).setValue('');
const dateFieldOption = form.findAll(`${selector.dateFieldSelect} > option`).at(1);
form.find(selector.dateFieldSelect).setValue(dateFieldOption.element.value);
await Vue.nextTick();

// date event and date field are invalid
Expand All @@ -505,8 +512,9 @@ describe('ChartForm.vue', () => {

it('validates group event selected if group selected', async () => {
// Unselect group event - select group field
form.findAll(`${selector.groupFieldEventSelect} > option`).at(0).setSelected();
form.findAll(`${selector.groupingFieldSelect} > option`).at(1).setSelected();
form.find(selector.groupFieldEventSelect).setValue('');
const groupFieldOption = form.findAll(`${selector.groupingFieldSelect} > option`).at(1);
form.find(selector.groupingFieldSelect).setValue(groupFieldOption.element.value);
await Vue.nextTick();

expect(form.findAll(selector.validationError).length).toEqual(1);
Expand Down
10 changes: 7 additions & 3 deletions test/components/Chart_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ describe('Chart.vue', () => {
expect(wrapper.find('.vizr-event-select').isEmpty()).toBe(false);
});

it('filters the data when event is selected', () => {
it('filters the data when event is selected', async () => {
const allEventData = wrapper.vm.chartData;
const allEventGrouped = wrapper.vm.grouped;
const allEventSummary = wrapper.vm.summary;
Expand All @@ -268,13 +268,17 @@ describe('Chart.vue', () => {
expect(wrapper.vm.filteredData).toEqual(allEventData);

// Select an event - data should change
wrapper.find('option[value=visit_1]').setSelected();
const visit1Option = wrapper.find('option[value=visit_1]');
wrapper.find('select').setValue(visit1Option.element.value);
await wrapper.vm.$nextTick();
expect(wrapper.vm.filteredData).not.toEqual(allEventData);
expect(wrapper.vm.grouped).not.toEqual(allEventGrouped);
expect(wrapper.vm.summary).not.toEqual(allEventSummary);

// Select all events again - data should revert
wrapper.findAll('option').at(0).setSelected();
const allEventsOption = wrapper.findAll('option').at(0);
wrapper.find('select').setValue(allEventsOption.element.value);
await wrapper.vm.$nextTick();
expect(wrapper.vm.filteredData).toEqual(allEventData);
expect(wrapper.vm.grouped).toEqual(allEventGrouped);
expect(wrapper.vm.summary).toEqual(allEventSummary);
Expand Down
12 changes: 6 additions & 6 deletions test/components/Vizr_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,20 +59,20 @@ describe('Vizr.vue', () => {
const heading = wrapper.find('h1');
expect(heading.text()).toBe('Vizr Charts');

expect(wrapper.find(Instructions).exists()).toBe(true);
expect(wrapper.find(ExampleChart).exists()).toBe(true);
expect(wrapper.find(VizrVersion).exists()).toBe(true);
expect(wrapper.findComponent(Instructions).exists()).toBe(true);
expect(wrapper.findComponent(ExampleChart).exists()).toBe(true);
expect(wrapper.findComponent(VizrVersion).exists()).toBe(true);

// renders a chart component for each chart
expect(wrapper.findAll(Chart).length).toEqual(exampleChartConfig.charts.length);
expect(wrapper.findAllComponents(Chart).length).toEqual(exampleChartConfig.charts.length);
});

it('shows the example chart if no charts are defined yet', async () => {
expect(wrapper.find(ExampleChart).isVisible()).toBe(false);
expect(wrapper.findComponent(ExampleChart).isVisible()).toBe(false);

wrapper.setData({ config: { charts: [] } });
await Vue.nextTick();
expect(wrapper.find(ExampleChart).isVisible()).toBe(true);
expect(wrapper.findComponent(ExampleChart).isVisible()).toBe(true);
});

describe('when the user can edit', () => {
Expand Down

0 comments on commit 7daae98

Please sign in to comment.