Skip to content

Commit 3f22180

Browse files
mxschllmxschll
committed
feat: add test utils
1 parent 30f8bad commit 3f22180

File tree

5 files changed

+283
-7
lines changed

5 files changed

+283
-7
lines changed

‎src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap‎

Lines changed: 194 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37261,7 +37261,113 @@ wrapper.selectOptionByValue('option_1');
3726137261
"name": "DrawerWrapper",
3726237262
},
3726337263
{
37264-
"methods": [],
37264+
"methods": [
37265+
{
37266+
"name": "findContent",
37267+
"parameters": [
37268+
{
37269+
"defaultValue": "{ expandToViewport: false }",
37270+
"flags": {
37271+
"isOptional": false,
37272+
},
37273+
"name": "options",
37274+
"typeName": "{ expandToViewport: boolean; }",
37275+
},
37276+
],
37277+
"returnType": {
37278+
"isNullable": true,
37279+
"name": "ElementWrapper",
37280+
"typeArguments": [
37281+
{
37282+
"name": "HTMLElement",
37283+
},
37284+
],
37285+
},
37286+
},
37287+
{
37288+
"name": "findDropdown",
37289+
"parameters": [
37290+
{
37291+
"defaultValue": "{ expandToViewport: false }",
37292+
"description": "* expandToViewport (boolean) - Use this when the component under test is rendered with an \`expandToViewport\` flag.",
37293+
"flags": {
37294+
"isOptional": false,
37295+
},
37296+
"name": "options",
37297+
"typeName": "{ expandToViewport: boolean; }",
37298+
},
37299+
],
37300+
"returnType": {
37301+
"isNullable": false,
37302+
"name": "DropdownContentWrapper",
37303+
},
37304+
},
37305+
{
37306+
"name": "findFooter",
37307+
"parameters": [
37308+
{
37309+
"defaultValue": "{ expandToViewport: false }",
37310+
"flags": {
37311+
"isOptional": false,
37312+
},
37313+
"name": "options",
37314+
"typeName": "{ expandToViewport: boolean; }",
37315+
},
37316+
],
37317+
"returnType": {
37318+
"isNullable": true,
37319+
"name": "ElementWrapper",
37320+
"typeArguments": [
37321+
{
37322+
"name": "HTMLElement",
37323+
},
37324+
],
37325+
},
37326+
},
37327+
{
37328+
"name": "findHeader",
37329+
"parameters": [
37330+
{
37331+
"defaultValue": "{ expandToViewport: false }",
37332+
"flags": {
37333+
"isOptional": false,
37334+
},
37335+
"name": "options",
37336+
"typeName": "{ expandToViewport: boolean; }",
37337+
},
37338+
],
37339+
"returnType": {
37340+
"isNullable": true,
37341+
"name": "ElementWrapper",
37342+
"typeArguments": [
37343+
{
37344+
"name": "HTMLElement",
37345+
},
37346+
],
37347+
},
37348+
},
37349+
{
37350+
"name": "findTrigger",
37351+
"parameters": [],
37352+
"returnType": {
37353+
"isNullable": false,
37354+
"name": "ElementWrapper",
37355+
"typeArguments": [
37356+
{
37357+
"name": "HTMLElement",
37358+
},
37359+
],
37360+
},
37361+
},
37362+
{
37363+
"name": "openDropdown",
37364+
"parameters": [],
37365+
"returnType": {
37366+
"isNullable": false,
37367+
"name": "void",
37368+
},
37369+
},
37370+
],
3726537371
"name": "DropdownWrapper",
3726637372
},
3726737373
{
@@ -47213,7 +47319,93 @@ The mode selector is only rendered as a Select on narrow viewports. On wide view
4721347319
"name": "DrawerWrapper",
4721447320
},
4721547321
{
47216-
"methods": [],
47322+
"methods": [
47323+
{
47324+
"name": "findContent",
47325+
"parameters": [
47326+
{
47327+
"defaultValue": "{
47328+
expandToViewport: false
47329+
}",
47330+
"flags": {
47331+
"isOptional": false,
47332+
},
47333+
"name": "options",
47334+
"typeName": "{ expandToViewport: boolean; }",
47335+
},
47336+
],
47337+
"returnType": {
47338+
"isNullable": false,
47339+
"name": "ElementWrapper",
47340+
},
47341+
},
47342+
{
47343+
"name": "findDropdown",
47344+
"parameters": [
47345+
{
47346+
"defaultValue": "{
47347+
expandToViewport: false
47348+
}",
47349+
"description": "* expandToViewport (boolean) - Use this when the component under test is rendered with an \`expandToViewport\` flag.",
47350+
"flags": {
47351+
"isOptional": false,
47352+
},
47353+
"name": "options",
47354+
"typeName": "{ expandToViewport: boolean; }",
47355+
},
47356+
],
47357+
"returnType": {
47358+
"isNullable": false,
47359+
"name": "DropdownContentWrapper",
47360+
},
47361+
},
47362+
{
47363+
"name": "findFooter",
47364+
"parameters": [
47365+
{
47366+
"defaultValue": "{
47367+
expandToViewport: false
47368+
}",
47369+
"flags": {
47370+
"isOptional": false,
47371+
},
47372+
"name": "options",
47373+
"typeName": "{ expandToViewport: boolean; }",
47374+
},
47375+
],
47376+
"returnType": {
47377+
"isNullable": false,
47378+
"name": "ElementWrapper",
47379+
},
47380+
},
47381+
{
47382+
"name": "findHeader",
47383+
"parameters": [
47384+
{
47385+
"defaultValue": "{
47386+
expandToViewport: false
47387+
}",
47388+
"flags": {
47389+
"isOptional": false,
47390+
},
47391+
"name": "options",
47392+
"typeName": "{ expandToViewport: boolean; }",
47393+
},
47394+
],
47395+
"returnType": {
47396+
"isNullable": false,
47397+
"name": "ElementWrapper",
47398+
},
47399+
},
47400+
{
47401+
"name": "findTrigger",
47402+
"parameters": [],
47403+
"returnType": {
47404+
"isNullable": false,
47405+
"name": "ElementWrapper",
47406+
},
47407+
},
47408+
],
4721747409
"name": "DropdownWrapper",
4721847410
},
4721947411
{

‎src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,8 +252,12 @@ exports[`test-utils selectors 1`] = `
252252
"awsui_test-utils-drawer-content_1sxt8",
253253
],
254254
"dropdown": [
255+
"awsui_dropdown-content_9duf6",
255256
"awsui_dropdown_9duf6",
257+
"awsui_footer_1hezk",
258+
"awsui_header_1hezk",
256259
"awsui_root_9duf6",
260+
"awsui_trigger_1hezk",
257261
],
258262
"error-boundary": [
259263
"awsui_action_11u4a",

‎src/dropdown/internal.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ interface InternalDropdownProps extends DropdownProps, InternalBaseComponentProp
4242
}
4343

4444
import styles from './styles.css.js';
45+
import testutilStyles from './test-classes/styles.css.js';
4546

4647
interface DropdownContainerProps {
4748
triggerRef: React.RefObject<HTMLElement>;
@@ -172,9 +173,9 @@ const TransitionContent = ({
172173
>
173174
<div ref={verticalContainerRef} className={styles['dropdown-content']}>
174175
<DropdownContextProvider position={position}>
175-
{header}
176+
{header && <div className={testutilStyles.header}>{header}</div>}
176177
{content}
177-
{footer}
178+
{footer && <div className={testutilStyles.footer}>{footer}</div>}
178179
</DropdownContextProvider>
179180
</div>
180181
</div>
@@ -517,7 +518,11 @@ const InternalDropdown = ({
517518
onFocus={focusHandler}
518519
onBlur={blurHandler}
519520
>
520-
<div id={referrerId} className={clsx(stretchTriggerHeight && styles['stretch-trigger-height'])} ref={triggerRef}>
521+
<div
522+
id={referrerId}
523+
className={clsx(stretchTriggerHeight && styles['stretch-trigger-height'], testutilStyles.trigger)}
524+
ref={triggerRef}
525+
>
521526
{trigger}
522527
</div>
523528

‎src/dropdown/test-classes/styles.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3+
SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
.trigger {
7+
/* used in test-utils */
8+
}
9+
10+
.header {
11+
/* used in test-utils */
12+
}
13+
14+
.footer {
15+
/* used in test-utils */
16+
}

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

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,68 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3-
import { ComponentWrapper } from '@cloudscape-design/test-utils-core/dom';
3+
import { ComponentWrapper, createWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom';
4+
import { act } from '@cloudscape-design/test-utils-core/utils-dom';
45

56
import styles from '../../../dropdown/styles.selectors.js';
7+
import testutilStyles from '../../../dropdown/test-classes/styles.selectors.js';
68

7-
export default class DropdownComponentWrapper extends ComponentWrapper {
9+
export class DropdownContentWrapper extends ComponentWrapper {
10+
findOpenDropdown(): ElementWrapper | null {
11+
return this.find(`.${styles.dropdown}[data-open=true]`);
12+
}
13+
14+
findContent(): ElementWrapper | null {
15+
return this.findOpenDropdown()?.findByClassName(styles['dropdown-content']) ?? null;
16+
}
17+
18+
findHeader(): ElementWrapper | null {
19+
return this.findOpenDropdown()?.findByClassName(testutilStyles.header) ?? null;
20+
}
21+
22+
findFooter(): ElementWrapper | null {
23+
return this.findOpenDropdown()?.findByClassName(testutilStyles.footer) ?? null;
24+
}
25+
}
26+
27+
class PortalDropdownContentWrapper extends DropdownContentWrapper {
28+
findOpenDropdown(): ElementWrapper | null {
29+
return createWrapper().find(`.${styles.dropdown}[data-open=true]`);
30+
}
31+
}
32+
33+
export default class DropdownWrapper extends ComponentWrapper {
834
static rootSelector: string = styles.root;
35+
36+
findTrigger(): ElementWrapper {
37+
return this.findByClassName(testutilStyles.trigger)!;
38+
}
39+
40+
/**
41+
* @param options
42+
* * expandToViewport (boolean) - Use this when the component under test is rendered with an `expandToViewport` flag.
43+
*/
44+
findDropdown(options = { expandToViewport: false }): DropdownContentWrapper {
45+
return options.expandToViewport
46+
? createWrapper().findComponent(`.${styles.dropdown}[data-open=true]`, PortalDropdownContentWrapper)!
47+
: new DropdownContentWrapper(this.getElement());
48+
}
49+
50+
findContent(options = { expandToViewport: false }): ElementWrapper | null {
51+
return this.findDropdown(options).findContent();
52+
}
53+
54+
findHeader(options = { expandToViewport: false }): ElementWrapper | null {
55+
return this.findDropdown(options).findHeader();
56+
}
57+
58+
findFooter(options = { expandToViewport: false }): ElementWrapper | null {
59+
return this.findDropdown(options).findFooter();
60+
}
61+
62+
@usesDom
63+
openDropdown(): void {
64+
act(() => {
65+
this.findTrigger().fireEvent(new MouseEvent('click', { bubbles: true }));
66+
});
67+
}
968
}

0 commit comments

Comments
 (0)