Skip to content

Commit 15caeba

Browse files
mikieyxMichael PavlikMichael Pavlikmatthoward366
authored
#2117 Use React Testing Library for common-properties tests - Part 1 - Controls + conditions (#2118)
Signed-off-by: Michael Pavlik <[email protected]> Signed-off-by: Michael Pavlik <[email protected]> Co-authored-by: Michael Pavlik <[email protected]> Co-authored-by: Michael Pavlik <[email protected]> Co-authored-by: Matt Howard <[email protected]>
1 parent 212e6fe commit 15caeba

31 files changed

+4300
-3481
lines changed

‎canvas_modules/common-canvas/__tests__/_utils_/control-utilsRTL.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* Copyright 2017-2023 Elyra Authors
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
const { fireEvent } = require("@testing-library/react");
18+
19+
// Retrieve the dropdown items from a non-filterable dropdown control
20+
function getDropdownItems(container, parameterId) {
21+
let dropdownWrapper = container.querySelector(`div[data-id='properties-${parameterId}']`);
22+
const dropdownButton = dropdownWrapper.querySelector("button");
23+
fireEvent.click(dropdownButton);
24+
dropdownWrapper = container.querySelector(`div[data-id='properties-${parameterId}']`);
25+
const dropdownList = dropdownWrapper.querySelectorAll("li.cds--list-box__menu-item");
26+
return dropdownList;
27+
}
28+
29+
module.exports = {
30+
getDropdownItems: getDropdownItems
31+
};

‎canvas_modules/common-canvas/__tests__/_utils_/table-utilsRTL.js

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@ function openFieldPicker(container, dataIdName) {
2424
return container.querySelector("div.properties-fp-table");
2525
}
2626

27+
// When table has 0 rows, click on Add columns button to open FieldPicker
28+
function openFieldPickerForEmptyTable(container, dataIdName) {
29+
const tableWrapper = container.querySelector("div[data-id=\"" + dataIdName + "\"]");
30+
const emptyTableButton = tableWrapper.querySelector("button.properties-empty-table-button");
31+
fireEvent.click(emptyTableButton); // open field picker
32+
return container.querySelector("div.properties-fp-table");
33+
}
34+
2735
// expectedFields is optional
2836
// fieldsToSelect is an array of field names or objects with name and schema. ex: { "name": "age", "schema": "schema1" }
2937
function fieldPicker(fieldpickerContainer, fieldsToSelect, expectedFields) {
@@ -108,6 +116,18 @@ function clickTableRows(container, rows) {
108116
}
109117
}
110118

119+
/*
120+
* @param wrapper
121+
* @param rows - array of row numbers to check
122+
*/
123+
function dblClickTableRows(container, rows) {
124+
const tableRows = container.querySelectorAll(".properties-vt-double-click");
125+
for (const row of rows) {
126+
fireEvent.dblClick(tableRows[row]);
127+
}
128+
}
129+
130+
111131
/*
112132
* @param wrapper
113133
* @param col - index of column to sort
@@ -133,6 +153,17 @@ function selectCheckboxes(container, rows) {
133153
}
134154
}
135155

156+
// Select checkbox using space or enter keys
157+
function selectCheckboxesUsingKeyboard(container, rows) {
158+
const checkboxes = getTableRows(container);
159+
for (const row of rows) {
160+
const checkbox = checkboxes[row].querySelector(".properties-vt-row-checkbox");
161+
fireEvent.focus(checkbox);
162+
fireEvent.keyDown(checkbox, { code: "Enter" });
163+
fireEvent.blur(checkbox);
164+
}
165+
}
166+
136167
function selectCheckboxesRows(tableRows, rows) {
137168
for (const row of rows) {
138169
const checkbox = tableRows[row].querySelector(".properties-vt-row-checkbox");
@@ -142,7 +173,24 @@ function selectCheckboxesRows(tableRows, rows) {
142173
}
143174
}
144175

145-
function shiftSelectCheckbox(rows, rowNumber) {
176+
/*
177+
* Select/deselect multiple rows by shift + selecting row number
178+
* @param wrapper
179+
* @param rows - single row number.
180+
*/
181+
function shiftSelectCheckbox(container, rowNumber) {
182+
const rows = getTableRows(container);
183+
const checkboxes = [];
184+
rows.forEach((row) => {
185+
checkboxes.push(row.querySelector(".properties-vt-row-checkbox"));
186+
});
187+
// row index start from 0 instead of 1 so subtract 1 from rowNumber
188+
fireEvent.mouseEnter(checkboxes[rowNumber - 1]);
189+
fireEvent.mouseDown(checkboxes[rowNumber - 1], { shiftKey: true });
190+
fireEvent.mouseLeave(checkboxes[rowNumber - 1]);
191+
}
192+
193+
function shiftSelectCheckboxRows(rows, rowNumber) {
146194
const checkboxes = [];
147195
for (const row of rows) {
148196
checkboxes.push(row.querySelector(".properties-vt-row-checkbox"));
@@ -153,6 +201,23 @@ function shiftSelectCheckbox(rows, rowNumber) {
153201
fireEvent.mouseLeave(checkboxes[rowNumber - 1]);
154202
}
155203

204+
/*
205+
* Select the checkbox from the table header that is not the `Select row` column
206+
* @param wrapper
207+
* @param index - the column index that contains a checkbox to select
208+
* @param checked - true to select the checkbox, false to deselect checkbox
209+
*/
210+
function selectHeaderColumnCheckbox(container, index, checked) {
211+
const columns = getTableHeaderRows(container)[0]
212+
.querySelectorAll(".properties-vt-column");
213+
const column = columns[index];
214+
const tableCheckboxHeader = column.querySelector(".tooltip-trigger").querySelector("input");
215+
fireEvent.click(tableCheckboxHeader);
216+
if (!checked) {
217+
fireEvent.click(tableCheckboxHeader);
218+
}
219+
}
220+
156221
function selectFieldPickerHeaderCheckbox(container) {
157222
const checkboxes = getTableHeaderRows(container);
158223
const checkbox = checkboxes[0].querySelector(".properties-vt-header-checkbox").querySelector("input");
@@ -181,18 +246,34 @@ function validateSelectedRowNumRows(rows) {
181246
return res;
182247
}
183248

249+
function validateSelectedCheckbox(checkboxes) {
250+
const res = [];
251+
for (const checkbox of checkboxes) {
252+
if (checkbox.checked === true) {
253+
res.push(checkbox);
254+
}
255+
}
256+
return res;
257+
}
258+
184259
module.exports = {
185260
openFieldPicker: openFieldPicker,
261+
openFieldPickerForEmptyTable: openFieldPickerForEmptyTable,
186262
fieldPicker: fieldPicker,
187263
verifyFieldPickerRow: verifyFieldPickerRow,
188264
getTableHeaderRows: getTableHeaderRows,
189265
getTableRows: getTableRows,
190266
clickTableRows: clickTableRows,
267+
dblClickTableRows: dblClickTableRows,
191268
clickHeaderColumnSort: clickHeaderColumnSort,
192269
selectCheckboxes: selectCheckboxes,
270+
selectCheckboxesUsingKeyboard: selectCheckboxesUsingKeyboard,
193271
selectCheckboxesRows: selectCheckboxesRows,
194272
shiftSelectCheckbox: shiftSelectCheckbox,
273+
shiftSelectCheckboxRows: shiftSelectCheckboxRows,
274+
selectHeaderColumnCheckbox: selectHeaderColumnCheckbox,
195275
selectFieldPickerHeaderCheckbox: selectFieldPickerHeaderCheckbox,
196276
validateSelectedRowNum: validateSelectedRowNum,
197-
validateSelectedRowNumRows: validateSelectedRowNumRows
277+
validateSelectedRowNumRows: validateSelectedRowNumRows,
278+
validateSelectedCheckbox: validateSelectedCheckbox,
198279
};

‎canvas_modules/common-canvas/__tests__/common-properties/components/fieldpicker-test.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -924,35 +924,35 @@ describe("field-picker control multiple rows selection", () => {
924924
expect(selected).to.have.length(0);
925925

926926
// Shift + select 8th row
927-
tableUtilsRTL.shiftSelectCheckbox(tableRows, 8);
927+
tableUtilsRTL.shiftSelectCheckboxRows(tableRows, 8);
928928
fieldPicker = container.querySelector("div.properties-fp-table");
929929
tableRows = tableUtilsRTL.getTableRows(fieldPicker);
930930
// Verify 1-8 rows are selected
931931
expect(tableUtilsRTL.validateSelectedRowNumRows(tableRows)).to.have.length(8);
932932

933933
// shift + select 15th row
934-
tableUtilsRTL.shiftSelectCheckbox(tableRows, 15);
934+
tableUtilsRTL.shiftSelectCheckboxRows(tableRows, 15);
935935
fieldPicker = container.querySelector("div.properties-fp-table");
936936
tableRows = tableUtilsRTL.getTableRows(fieldPicker);
937937
// Verify 1-15 rows are selected
938938
expect(tableUtilsRTL.validateSelectedRowNumRows(tableRows)).to.have.length(15);
939939

940940
// shift + select 5th row -- this will deselect 5-15 rows.
941-
tableUtilsRTL.shiftSelectCheckbox(tableRows, 5);
941+
tableUtilsRTL.shiftSelectCheckboxRows(tableRows, 5);
942942
fieldPicker = container.querySelector("div.properties-fp-table");
943943
tableRows = tableUtilsRTL.getTableRows(fieldPicker);
944944
// 5-15 rows will be deselected. And 1-4 rows will remain selected
945945
expect(tableUtilsRTL.validateSelectedRowNumRows(tableRows)).to.have.length(4);
946946

947947
// shift + select 1st row -- this will deselect all rows
948-
tableUtilsRTL.shiftSelectCheckbox(tableRows, 1);
948+
tableUtilsRTL.shiftSelectCheckboxRows(tableRows, 1);
949949
fieldPicker = container.querySelector("div.properties-fp-table");
950950
tableRows = tableUtilsRTL.getTableRows(fieldPicker);
951951
// Verify all rows are deselected
952952
expect(tableUtilsRTL.validateSelectedRowNumRows(tableRows)).to.have.length(0);
953953

954954
// shift + select 29th row -- this will select all rows
955-
tableUtilsRTL.shiftSelectCheckbox(tableRows, 29);
955+
tableUtilsRTL.shiftSelectCheckboxRows(tableRows, 29);
956956
fieldPicker = container.querySelector("div.properties-fp-table");
957957
tableRows = tableUtilsRTL.getTableRows(fieldPicker);
958958
// Verify all rows are selected

‎canvas_modules/common-canvas/__tests__/common-properties/conditions/shared-fields-test.js

Lines changed: 64 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,17 @@
1414
* limitations under the License.
1515
*/
1616

17-
import propertyUtils from "../../_utils_/property-utils";
18-
import tableUtils from "./../../_utils_/table-utils";
17+
import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
18+
import tableUtilsRTL from "./../../_utils_/table-utilsRTL";
1919
import { expect } from "chai";
2020
import sharedFieldsParamDef from "../../test_resources/paramDefs/sharedFields_paramDef.json";
21+
import { fireEvent } from "@testing-library/react";
2122

2223

2324
describe("Condition dmSharedFields test cases", () => {
2425
let wrapper;
2526
beforeEach(() => {
26-
const renderedObject = propertyUtils.flyoutEditorForm(sharedFieldsParamDef);
27+
const renderedObject = propertyUtilsRTL.flyoutEditorForm(sharedFieldsParamDef);
2728
wrapper = renderedObject.wrapper;
2829
});
2930
afterEach(() => {
@@ -32,86 +33,94 @@ describe("Condition dmSharedFields test cases", () => {
3233

3334

3435
it("Test the available fields.", () => {
36+
const { container } = wrapper;
3537
// Validate the available fields in the selectColumns control
36-
let fieldPicker = tableUtils.openFieldPicker(wrapper, "properties-ft-input_fields");
37-
tableUtils.fieldPicker(fieldPicker, [], ["Age", "BP", "Cholesterol"]);
38+
let fieldPicker = tableUtilsRTL.openFieldPicker(container, "properties-ft-input_fields");
39+
tableUtilsRTL.fieldPicker(fieldPicker, [], ["Age", "BP", "Cholesterol"]);
3840

3941
// Validate the available fields in the table control
40-
const summaryPanel = propertyUtils.openSummaryPanel(wrapper, "structuretable_filter-summary-panel");
41-
fieldPicker = tableUtils.openFieldPicker(wrapper, "properties-ft-structuretable_filter");
42-
const tableRows = tableUtils.getTableRows(fieldPicker);
42+
const summaryPanel = propertyUtilsRTL.openSummaryPanel(wrapper, "structuretable_filter-summary-panel");
43+
fieldPicker = tableUtilsRTL.openFieldPicker(container, "properties-ft-structuretable_filter");
44+
const tableRows = tableUtilsRTL.getTableRows(fieldPicker);
4345
expect(tableRows).to.have.length(3); // Other fields should be filtered out
4446
// close summary panel
45-
summaryPanel.find("button.properties-apply-button").simulate("click");
47+
fireEvent.click(summaryPanel.querySelector("button.properties-apply-button"));
4648

4749
// Check the available fields in the weight dropdown
48-
const weightDropDown = wrapper.find("div[data-id='properties-regression_weight_field'] Dropdown");
49-
let options = weightDropDown.prop("items"); // by Type
50-
let expectedOptions = [
51-
{ label: "...", value: "" },
52-
{ label: "K", value: "K" },
53-
{ label: "BP", value: "BP" }
54-
];
50+
const weightDropDown = container.querySelector("div[data-id='properties-regression_weight_field']");
51+
const weightDropDownButton = weightDropDown.querySelector("button.cds--list-box__field");
52+
fireEvent.click(weightDropDownButton);
53+
const weightDropDownItems = container.querySelectorAll(".cds--list-box__menu-item__option");
54+
let options = [];
55+
weightDropDownItems.forEach((element) => {
56+
options.push(element.textContent);
57+
});
58+
let expectedOptions = ["...", "K", "BP"];
5559
expect(options).to.eql(expectedOptions);
5660

5761
// Check the available fields in the offset dropdown
58-
const offsetDropDown = wrapper.find("div[data-id='properties-offset_field'] Dropdown");
59-
options = offsetDropDown.prop("items"); // by Type
60-
expectedOptions = [
61-
{ label: "...", value: "" },
62-
{ label: "Na", value: "Na" }
63-
];
62+
const offsetDropDown = container.querySelector("div[data-id='properties-offset_field']");
63+
const offSetDropDownButton = offsetDropDown.querySelector("button.cds--list-box__field");
64+
fireEvent.click(offSetDropDownButton);
65+
const offsetDropDownItems = offsetDropDown.querySelectorAll(".cds--list-box__menu-item__option");
66+
options = [];
67+
offsetDropDownItems.forEach((element) => {
68+
options.push(element.textContent);
69+
});
70+
expectedOptions = ["...", "Na"];
6471
expect(options).to.eql(expectedOptions);
6572
});
6673

6774
it("Test allow a change to a field to filter another field's choices.", () => {
68-
let selectedFields = tableUtils.getTableRows(wrapper.find("div[data-id='properties-input_fields']"));
75+
const { container } = wrapper;
76+
let selectedFields = tableUtilsRTL.getTableRows(container.querySelector("div[data-id='properties-input_fields']"));
6977
expect(selectedFields).to.have.length(2); // Age and Cholesterol already selected
7078
// Select another field `BP` in the selectColumns control
71-
const fieldPicker = tableUtils.openFieldPicker(wrapper, "properties-ft-input_fields");
72-
tableUtils.fieldPicker(fieldPicker, ["BP"], ["Age", "BP", "Cholesterol"]);
73-
selectedFields = tableUtils.getTableRows(wrapper.find("div[data-id='properties-input_fields']"));
79+
const fieldPicker = tableUtilsRTL.openFieldPicker(container, "properties-ft-input_fields");
80+
tableUtilsRTL.fieldPicker(fieldPicker, ["BP"], ["Age", "BP", "Cholesterol"]);
81+
selectedFields = tableUtilsRTL.getTableRows(container.querySelector("div[data-id='properties-input_fields']"));
7482
expect(selectedFields).to.have.length(3); // Age, BP, and Cholesterol selected
7583

76-
const weightDropDown = wrapper.find("div[data-id='properties-regression_weight_field'] Dropdown");
77-
const options = weightDropDown.prop("items"); // by Type
78-
const expectedOptions = [
79-
{ label: "...", value: "" },
80-
{ label: "K", value: "K" }
81-
];
84+
const weightDropDown = container.querySelector("div[data-id='properties-regression_weight_field']");
85+
const weightDropDownButton = weightDropDown.querySelector("button.cds--list-box__field");
86+
fireEvent.click(weightDropDownButton);
87+
const weightDropDownItems = container.querySelectorAll(".cds--list-box__menu-item__option");
88+
const options = [];
89+
weightDropDownItems.forEach((element) => {
90+
options.push(element.textContent);
91+
});
92+
const expectedOptions = ["...", "K"];
8293
expect(options).to.eql(expectedOptions);
8394
});
8495

8596
it("Shares fields between dmSharedFields and columnSelection panel", () => {
97+
const { container } = wrapper;
8698
// Validate the available fields in the selectColumns control
87-
const fieldPicker = tableUtils.openFieldPicker(wrapper, "properties-column_selection_fields");
88-
tableUtils.fieldPicker(fieldPicker, [], ["Age", "Sex", "BP", "Na", "K", "Drug"]);
99+
const fieldPicker = tableUtilsRTL.openFieldPicker(container, "properties-column_selection_fields");
100+
tableUtilsRTL.fieldPicker(fieldPicker, [], ["Age", "Sex", "BP", "Na", "K", "Drug"]);
89101

90102
// Check the available fields in the single chooser dropdown
91-
const weightDropDown = wrapper.find("div[data-id='properties-column_selection_chooser'] Dropdown");
92-
let options = weightDropDown.prop("items"); // by Type
93-
let expectedOptions = [
94-
{ label: "...", value: "" },
95-
{ label: "Sex", value: "Sex" },
96-
{ label: "Cholesterol", value: "Cholesterol" },
97-
{ label: "Na", value: "Na" },
98-
{ label: "K", value: "K" },
99-
{ label: "Drug", value: "Drug" }
100-
];
103+
const weightDropDown = container.querySelector("div[data-id='properties-column_selection_chooser']");
104+
const weightDropDownButton = weightDropDown.querySelector("button.cds--list-box__field");
105+
fireEvent.click(weightDropDownButton);
106+
const weightDropDownItems = container.querySelectorAll(".cds--list-box__menu-item__option");
107+
let options = [];
108+
weightDropDownItems.forEach((element) => {
109+
options.push(element.textContent);
110+
});
111+
let expectedOptions = ["...", "Sex", "Cholesterol", "Na", "K", "Drug"];
101112
expect(options).to.eql(expectedOptions);
102113

103114
// Check the available fields in the offset dropdown
104-
const offsetDropDown = wrapper.find("div[data-id='properties-dmSharedFields_chooser'] Dropdown");
105-
options = offsetDropDown.prop("items"); // by Type
106-
expectedOptions = [
107-
{ label: "...", value: "" },
108-
{ label: "Age", value: "Age" },
109-
{ label: "Sex", value: "Sex" },
110-
{ label: "BP", value: "BP" },
111-
{ label: "Na", value: "Na" },
112-
{ label: "K", value: "K" },
113-
{ label: "Drug", value: "Drug" }
114-
];
115+
const offsetDropDown = container.querySelector("div[data-id='properties-dmSharedFields_chooser']");
116+
const offSetDropDownButton = offsetDropDown.querySelector("button.cds--list-box__field");
117+
fireEvent.click(offSetDropDownButton);
118+
const offsetDropDownItems = offsetDropDown.querySelectorAll(".cds--list-box__menu-item__option");
119+
options = [];
120+
offsetDropDownItems.forEach((element) => {
121+
options.push(element.textContent);
122+
});
123+
expectedOptions = ["...", "Age", "Sex", "BP", "Na", "K", "Drug"];
115124
expect(options).to.eql(expectedOptions);
116125
});
117126
});

0 commit comments

Comments
 (0)