Skip to content

Commit 413c0f4

Browse files
pan-kotpan-kot
authored
chore: Updates selectors test-utils to match dom utils (#46)
* chore: Updates selectors test-utils to match dom utils * update functional test descriptions
1 parent 426c539 commit 413c0f4

File tree

5 files changed

+110
-65
lines changed

5 files changed

+110
-65
lines changed

‎src/__tests__/__snapshots__/test-utils-wrappers.test.tsx.snap‎

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -56,16 +56,16 @@ declare module "@cloudscape-design/test-utils-core/dist/dom" {
5656
}
5757
5858
ElementWrapper.prototype.findCartesianHighcharts = function (selector) {
59-
return (this as any).findComponent(getComponentSelector(CartesianChartWrapper, selector), CartesianChartWrapper);
59+
return this.findComponent(getComponentSelector(CartesianChartWrapper, selector), CartesianChartWrapper);
6060
};
6161
ElementWrapper.prototype.findPieHighcharts = function (selector) {
62-
return (this as any).findComponent(getComponentSelector(PieChartWrapper, selector), PieChartWrapper);
62+
return this.findComponent(getComponentSelector(PieChartWrapper, selector), PieChartWrapper);
6363
};
6464
ElementWrapper.prototype.findAllCartesianHighcharts = function (selector) {
65-
return (this as any).findAllComponents(CartesianChartWrapper, selector);
65+
return this.findAllComponents(CartesianChartWrapper, selector);
6666
};
6767
ElementWrapper.prototype.findAllPieHighcharts = function (selector) {
68-
return (this as any).findAllComponents(PieChartWrapper, selector);
68+
return this.findAllComponents(PieChartWrapper, selector);
6969
};
7070
7171
function getComponentSelector(wrapper: { rootSelector: string }, selector?: string) {
@@ -100,45 +100,55 @@ export { CartesianChartWrapper, PieChartWrapper };
100100
declare module "@cloudscape-design/test-utils-core/dist/selectors" {
101101
interface ElementWrapper {
102102
/**
103-
* Returns a wrapper that matches charts of the given type with the specified CSS selector.
104-
* If no CSS selector is specified, returns a wrapper that matches charts.
103+
* Returns the wrapper of the first cartesian chart that matches the specified CSS selector.
104+
* If no CSS selector is specified, returns the wrapper of the first cartesian chart.
105+
* If no matching chart is found, returns \`null\`.
105106
*
106-
* @param {"cartesian" | "pie"} [type] Chart type
107107
* @param {string} [selector] CSS Selector
108-
* @returns {CartesianChartWrapper | PieChartWrapper}
108+
* @returns {CartesianChartWrapper | null}
109109
*/
110-
findChart(type: "cartesian", selector?: string): CartesianChartWrapper | null;
111-
findChart(type: "pie", selector?: string): PieChartWrapper | null;
112-
110+
findCartesianHighcharts(selector?: string): CartesianChartWrapper;
111+
/**
112+
* Returns the wrapper of the first pie chart that matches the specified CSS selector.
113+
* If no CSS selector is specified, returns the wrapper of the first pie chart.
114+
* If no matching chart is found, returns \`null\`.
115+
*
116+
* @param {string} [selector] CSS Selector
117+
* @returns {PieChartWrapper | null}
118+
*/
119+
findPieHighcharts(selector?: string): PieChartWrapper;
120+
/**
121+
* Returns an array of cartesian chart wrappers that matches the specified CSS selector.
122+
* If no CSS selector is specified, returns all cartesian charts inside the current wrapper.
123+
* If no matching chart is found, returns an empty array.
124+
*
125+
* @param {string} [selector] CSS Selector
126+
* @returns {CartesianChartWrapper[]}
127+
*/
128+
findAllCartesianHighcharts(selector?: string): MultiElementWrapper<CartesianChartWrapper>;
113129
/**
114-
* Returns a multi-element wrapper that matches charts of the given type with the specified CSS selector.
115-
* If no CSS selector is specified, returns a multi-element wrapper that matches charts.
130+
* Returns an array of pie chart wrappers that matches the specified CSS selector.
131+
* If no CSS selector is specified, returns all pie charts inside the current wrapper.
132+
* If no matching chart is found, returns an empty array.
116133
*
117-
* @param {"cartesian" | "pie"} [type] Chart type
118134
* @param {string} [selector] CSS Selector
119-
* @returns {MultiElementWrapper<CartesianChartWrapper> | MultiElementWrapper<PieChartWrapper>}
135+
* @returns {PieChartWrapper[]}
120136
*/
121-
findAllCharts(type: "cartesian", selector?: string): Array<CartesianChartWrapper>;
122-
findAllCharts(type: "pie", selector?: string): Array<PieChartWrapper>;
137+
findAllPieHighcharts(selector?: string): MultiElementWrapper<PieChartWrapper>;
123138
}
124139
}
125140
126-
ElementWrapper.prototype.findChart = function (type, selector) {
127-
switch (type) {
128-
case "cartesian":
129-
return (this as any).findComponent(getComponentSelector(CartesianChartWrapper, selector), CartesianChartWrapper);
130-
case "pie":
131-
return (this as any).findComponent(getComponentSelector(PieChartWrapper, selector), PieChartWrapper);
132-
}
141+
ElementWrapper.prototype.findCartesianHighcharts = function (selector) {
142+
return this.findComponent(getComponentSelector(CartesianChartWrapper, selector), CartesianChartWrapper);
133143
};
134-
135-
ElementWrapper.prototype.findAllCharts = function (type, selector) {
136-
switch (type) {
137-
case "cartesian":
138-
return (this as any).findAllComponents(CartesianChartWrapper, selector);
139-
case "pie":
140-
return (this as any).findAllComponents(PieChartWrapper, selector);
141-
}
144+
ElementWrapper.prototype.findPieHighcharts = function (selector) {
145+
return this.findComponent(getComponentSelector(PieChartWrapper, selector), PieChartWrapper);
146+
};
147+
ElementWrapper.prototype.findAllCartesianHighcharts = function (selector) {
148+
return this.findAllComponents(CartesianChartWrapper, selector);
149+
};
150+
ElementWrapper.prototype.findAllPieHighcharts = function (selector) {
151+
return this.findAllComponents(PieChartWrapper, selector);
142152
};
143153
144154
function getComponentSelector(wrapper: { rootSelector: string }, selector?: string) {

‎src/test-utils/dom/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,16 @@ declare module "@cloudscape-design/test-utils-core/dist/dom" {
5353
}
5454

5555
ElementWrapper.prototype.findCartesianHighcharts = function (selector) {
56-
return (this as any).findComponent(getComponentSelector(CartesianChartWrapper, selector), CartesianChartWrapper);
56+
return this.findComponent(getComponentSelector(CartesianChartWrapper, selector), CartesianChartWrapper);
5757
};
5858
ElementWrapper.prototype.findPieHighcharts = function (selector) {
59-
return (this as any).findComponent(getComponentSelector(PieChartWrapper, selector), PieChartWrapper);
59+
return this.findComponent(getComponentSelector(PieChartWrapper, selector), PieChartWrapper);
6060
};
6161
ElementWrapper.prototype.findAllCartesianHighcharts = function (selector) {
62-
return (this as any).findAllComponents(CartesianChartWrapper, selector);
62+
return this.findAllComponents(CartesianChartWrapper, selector);
6363
};
6464
ElementWrapper.prototype.findAllPieHighcharts = function (selector) {
65-
return (this as any).findAllComponents(PieChartWrapper, selector);
65+
return this.findAllComponents(PieChartWrapper, selector);
6666
};
6767

6868
function getComponentSelector(wrapper: { rootSelector: string }, selector?: string) {

‎src/test-utils/selectors/index.ts‎

Lines changed: 38 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,45 +14,55 @@ export { CartesianChartWrapper, PieChartWrapper };
1414
declare module "@cloudscape-design/test-utils-core/dist/selectors" {
1515
interface ElementWrapper {
1616
/**
17-
* Returns a wrapper that matches charts of the given type with the specified CSS selector.
18-
* If no CSS selector is specified, returns a wrapper that matches charts.
17+
* Returns the wrapper of the first cartesian chart that matches the specified CSS selector.
18+
* If no CSS selector is specified, returns the wrapper of the first cartesian chart.
19+
* If no matching chart is found, returns `null`.
1920
*
20-
* @param {"cartesian" | "pie"} [type] Chart type
2121
* @param {string} [selector] CSS Selector
22-
* @returns {CartesianChartWrapper | PieChartWrapper}
22+
* @returns {CartesianChartWrapper | null}
2323
*/
24-
findChart(type: "cartesian", selector?: string): CartesianChartWrapper | null;
25-
findChart(type: "pie", selector?: string): PieChartWrapper | null;
26-
24+
findCartesianHighcharts(selector?: string): CartesianChartWrapper;
25+
/**
26+
* Returns the wrapper of the first pie chart that matches the specified CSS selector.
27+
* If no CSS selector is specified, returns the wrapper of the first pie chart.
28+
* If no matching chart is found, returns `null`.
29+
*
30+
* @param {string} [selector] CSS Selector
31+
* @returns {PieChartWrapper | null}
32+
*/
33+
findPieHighcharts(selector?: string): PieChartWrapper;
34+
/**
35+
* Returns an array of cartesian chart wrappers that matches the specified CSS selector.
36+
* If no CSS selector is specified, returns all cartesian charts inside the current wrapper.
37+
* If no matching chart is found, returns an empty array.
38+
*
39+
* @param {string} [selector] CSS Selector
40+
* @returns {CartesianChartWrapper[]}
41+
*/
42+
findAllCartesianHighcharts(selector?: string): MultiElementWrapper<CartesianChartWrapper>;
2743
/**
28-
* Returns a multi-element wrapper that matches charts of the given type with the specified CSS selector.
29-
* If no CSS selector is specified, returns a multi-element wrapper that matches charts.
44+
* Returns an array of pie chart wrappers that matches the specified CSS selector.
45+
* If no CSS selector is specified, returns all pie charts inside the current wrapper.
46+
* If no matching chart is found, returns an empty array.
3047
*
31-
* @param {"cartesian" | "pie"} [type] Chart type
3248
* @param {string} [selector] CSS Selector
33-
* @returns {MultiElementWrapper<CartesianChartWrapper> | MultiElementWrapper<PieChartWrapper>}
49+
* @returns {PieChartWrapper[]}
3450
*/
35-
findAllCharts(type: "cartesian", selector?: string): Array<CartesianChartWrapper>;
36-
findAllCharts(type: "pie", selector?: string): Array<PieChartWrapper>;
51+
findAllPieHighcharts(selector?: string): MultiElementWrapper<PieChartWrapper>;
3752
}
3853
}
3954

40-
ElementWrapper.prototype.findChart = function (type, selector) {
41-
switch (type) {
42-
case "cartesian":
43-
return (this as any).findComponent(getComponentSelector(CartesianChartWrapper, selector), CartesianChartWrapper);
44-
case "pie":
45-
return (this as any).findComponent(getComponentSelector(PieChartWrapper, selector), PieChartWrapper);
46-
}
55+
ElementWrapper.prototype.findCartesianHighcharts = function (selector) {
56+
return this.findComponent(getComponentSelector(CartesianChartWrapper, selector), CartesianChartWrapper);
4757
};
48-
49-
ElementWrapper.prototype.findAllCharts = function (type, selector) {
50-
switch (type) {
51-
case "cartesian":
52-
return (this as any).findAllComponents(CartesianChartWrapper, selector);
53-
case "pie":
54-
return (this as any).findAllComponents(PieChartWrapper, selector);
55-
}
58+
ElementWrapper.prototype.findPieHighcharts = function (selector) {
59+
return this.findComponent(getComponentSelector(PieChartWrapper, selector), PieChartWrapper);
60+
};
61+
ElementWrapper.prototype.findAllCartesianHighcharts = function (selector) {
62+
return this.findAllComponents(CartesianChartWrapper, selector);
63+
};
64+
ElementWrapper.prototype.findAllPieHighcharts = function (selector) {
65+
return this.findAllComponents(PieChartWrapper, selector);
5666
};
5767

5868
function getComponentSelector(wrapper: { rootSelector: string }, selector?: string) {

‎test/functional/index.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { setupTest } from "../utils";
1212
const wrapper = createWrapper();
1313

1414
test(
15-
"sample",
15+
"index page",
1616
setupTest("#", BasePageObject, async (page) => {
1717
await expect(page.getText("h1")).resolves.toBe("Welcome!");
1818
await expect(page.getElementsCount(wrapper.findLink().toSelector())).resolves.toBeGreaterThan(5);

‎test/functional/selectors.test.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import { expect, test } from "vitest";
5+
6+
import { BasePageObject } from "@cloudscape-design/browser-test-tools/page-objects";
7+
8+
import "@cloudscape-design/components/test-utils/selectors";
9+
import "../../lib/components/test-utils/selectors";
10+
import createWrapper from "../../lib/components/test-utils/selectors";
11+
import { setupTest } from "../utils";
12+
13+
const w = createWrapper();
14+
15+
test(
16+
"root selectors",
17+
setupTest("#/05-demos/website-playground-examples", BasePageObject, async (page) => {
18+
await expect(page.getElementsCount(w.findCartesianHighcharts().toSelector())).resolves.toBe(11);
19+
await expect(page.getElementsCount(w.findAllCartesianHighcharts().toSelector())).resolves.toBe(11);
20+
await expect(page.getElementsCount(w.findAllCartesianHighcharts().get(1).toSelector())).resolves.toBe(11);
21+
await expect(page.getElementsCount(w.findPieHighcharts().toSelector())).resolves.toBe(3);
22+
await expect(page.getElementsCount(w.findAllPieHighcharts().toSelector())).resolves.toBe(3);
23+
await expect(page.getElementsCount(w.findAllPieHighcharts().get(1).toSelector())).resolves.toBe(3);
24+
}),
25+
);

0 commit comments

Comments
 (0)