@toptal/picasso-tooltip 100.0.0 → 100.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-package/src/Tooltip/Tooltip.d.ts +10 -0
- package/dist-package/src/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist-package/src/Tooltip/Tooltip.js +14 -2
- package/dist-package/src/Tooltip/Tooltip.js.map +1 -1
- package/package.json +7 -7
- package/src/Tooltip/Tooltip.tsx +30 -0
- package/src/Tooltip/test.tsx +32 -0
|
@@ -49,6 +49,16 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
|
|
|
49
49
|
container?: ContainerValue;
|
|
50
50
|
/** Offset to allow shifting tooltip's position from left and top. */
|
|
51
51
|
offset?: OffsetType;
|
|
52
|
+
/** Testids of the `Tooltip` internal elements */
|
|
53
|
+
testIds?: {
|
|
54
|
+
/**
|
|
55
|
+
* Testid of the anchor — the element the tooltip's open/close listeners
|
|
56
|
+
* are attached to (the rendered trigger child). Hover this element in
|
|
57
|
+
* tests: a natively disabled child swallows pointer events, so hovering
|
|
58
|
+
* the child itself never opens the tooltip.
|
|
59
|
+
*/
|
|
60
|
+
anchor?: string;
|
|
61
|
+
};
|
|
52
62
|
}
|
|
53
63
|
export declare const Tooltip: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
|
|
54
64
|
export default Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EAET,WAAW,EACX,cAAc,EACf,MAAM,OAAO,CAAA;AACd,OAAO,KAA0C,MAAM,OAAO,CAAA;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAK9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAM7C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GACrB,YAAY,GACZ,cAAc,GACd,QAAQ,GACR,UAAU,GACV,YAAY,GACZ,MAAM,GACN,WAAW,GACX,aAAa,GACb,OAAO,GACP,SAAS,GACT,WAAW,GACX,KAAK,CAAA;AAET,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,GAAG,CAAC,EAAE,cAAc,CAAA;CACrB,CAAA;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EAET,WAAW,EACX,cAAc,EACf,MAAM,OAAO,CAAA;AACd,OAAO,KAA0C,MAAM,OAAO,CAAA;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAK9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAM7C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GACrB,YAAY,GACZ,cAAc,GACd,QAAQ,GACR,UAAU,GACV,YAAY,GACZ,MAAM,GACN,WAAW,GACX,aAAa,GACb,OAAO,GACP,SAAS,GACT,WAAW,GACX,KAAK,CAAA;AAET,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,GAAG,CAAC,EAAE,cAAc,CAAA;CACrB,CAAA;AA0ED,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAA;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,oCAAoC;IACpC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IACzC,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IAC1C,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4GAA4G;IAC5G,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,sDAAsD;IACtD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,yDAAyD;IACzD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,sBAAsB;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;IACtC,2GAA2G;IAC3G,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,qEAAqE;IACrE,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE;QACR;;;;;WAKG;QACH,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;CACF;AAED,eAAO,MAAM,OAAO,2EAkNnB,CAAA;AAID,eAAe,OAAO,CAAA"}
|
|
@@ -37,6 +37,17 @@ const composeHandlers = (theirs, ours) => (event) => {
|
|
|
37
37
|
theirs === null || theirs === void 0 ? void 0 : theirs(event);
|
|
38
38
|
ours(event);
|
|
39
39
|
};
|
|
40
|
+
// Both testids stamp the anchor (the rendered trigger child) — the only
|
|
41
|
+
// element the Tooltip owns while closed; `testIds.anchor` names it
|
|
42
|
+
// explicitly, the top-level `data-testid` keeps flowing for backwards
|
|
43
|
+
// compatibility. Returns the attribute only when set: an explicit
|
|
44
|
+
// `data-testid: undefined` would clobber the child's own testid in the
|
|
45
|
+
// trigger's prop merge.
|
|
46
|
+
const buildAnchorTestIdProps = (testIds, dataTestId) => {
|
|
47
|
+
var _a;
|
|
48
|
+
const anchorTestId = (_a = testIds === null || testIds === void 0 ? void 0 : testIds.anchor) !== null && _a !== void 0 ? _a : dataTestId;
|
|
49
|
+
return anchorTestId === undefined ? {} : { 'data-testid': anchorTestId };
|
|
50
|
+
};
|
|
40
51
|
let fallbackIdCounter = 0;
|
|
41
52
|
// The tooltip primitive wires no `aria-describedby` of its own, so a tooltip
|
|
42
53
|
// with no explicit `id` would leave its trigger unlinked to the popup and
|
|
@@ -60,7 +71,7 @@ export const Tooltip = forwardRef((_a, ref) => {
|
|
|
60
71
|
left: SPACING_0,
|
|
61
72
|
top: SPACING_0,
|
|
62
73
|
} } = _a, props = __rest(_a, ["preventOverflow", "placement", "disablePortal", "maxWidth", "delay", "followCursor", "offset"]);
|
|
63
|
-
const { content, children, interactive, className, style, id, open, onOpen, onClose, onTransitionExiting, onTransitionExited, disableListeners, compact, tooltipRef, container, 'data-private': dataPrivate } = props, rest = __rest(props, ["content", "children", "interactive", "className", "style", "id", "open", "onOpen", "onClose", "onTransitionExiting", "onTransitionExited", "disableListeners", "compact", "tooltipRef", "container", 'data-private']);
|
|
74
|
+
const { content, children, interactive, className, style, id, open, onOpen, onClose, onTransitionExiting, onTransitionExited, disableListeners, compact, tooltipRef, container, 'data-private': dataPrivate, 'data-testid': dataTestId, testIds } = props, rest = __rest(props, ["content", "children", "interactive", "className", "style", "id", "open", "onOpen", "onClose", "onTransitionExiting", "onTransitionExited", "disableListeners", "compact", "tooltipRef", "container", 'data-private', 'data-testid', "testIds"]);
|
|
64
75
|
const picassoRootContainer = usePicassoRoot();
|
|
65
76
|
// Non-empty even when the consumer omits `id` (see useFallbackId), so the
|
|
66
77
|
// popup↔trigger aria-describedby link below always holds.
|
|
@@ -93,6 +104,7 @@ export const Tooltip = forwardRef((_a, ref) => {
|
|
|
93
104
|
fallback: picassoRootContainer,
|
|
94
105
|
});
|
|
95
106
|
const triggerRest = rest;
|
|
107
|
+
const anchorTestIdProps = buildAnchorTestIdProps(testIds, dataTestId);
|
|
96
108
|
const positioner = (React.createElement(BaseTooltip.Positioner, { ref: tooltipRef, anchor: anchor,
|
|
97
109
|
// Menu-item anchors disable the resize + layout-shift observers (scroll
|
|
98
110
|
// tracking stays on); see useTooltipAnchor for why it is scoped to them
|
|
@@ -119,7 +131,7 @@ export const Tooltip = forwardRef((_a, ref) => {
|
|
|
119
131
|
// enter fade. Hover/tap opens always happen with the trigger long
|
|
120
132
|
// mounted, so they're unaffected.
|
|
121
133
|
open: actualOpen && triggerMounted, onOpenChange: handleOpenChange, onOpenChangeComplete: handleOpenChangeComplete, disableHoverablePopup: !interactive, trackCursorAxis: followCursor ? 'both' : 'none' },
|
|
122
|
-
React.createElement(BaseTooltip.Trigger, Object.assign({}, triggerRest, { ref: setTriggerRef, className: className, style: style, "aria-describedby": (_b = triggerRest['aria-describedby']) !== null && _b !== void 0 ? _b : (actualOpen ? tooltipId : undefined), disabled: disableListeners, closeOnClick: false, onClick: handleTriggerClick,
|
|
134
|
+
React.createElement(BaseTooltip.Trigger, Object.assign({}, triggerRest, { ref: setTriggerRef, className: className, style: style }, anchorTestIdProps, { "aria-describedby": (_b = triggerRest['aria-describedby']) !== null && _b !== void 0 ? _b : (actualOpen ? tooltipId : undefined), disabled: disableListeners, closeOnClick: false, onClick: handleTriggerClick,
|
|
123
135
|
// Tap-to-open (arms on touchstart, opens on touchend; a gesture that
|
|
124
136
|
// scrolls past the tap slop is disarmed by touchmove). Also the open
|
|
125
137
|
// path for DISABLED anchors, which dispatch touch events but never a
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAG/D,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAGvD,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AACvE,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAyBvD,MAAM,cAAc,GAAiC;IACnD,KAAK,EAAE,GAAG;IACV,IAAI,EAAE,GAAG;CACV,CAAA;AAED,8EAA8E;AAC9E,+EAA+E;AAC/E,MAAM,gBAAgB,GAAG,CAAC,EACxB,aAAa,EACb,aAAa,EACb,SAAS,EACT,QAAQ,GAMT,EAAkC,EAAE;IACnC,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,aAAa,CAAA;IACtB,CAAC;IAED,MAAM,QAAQ,GAAG,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;IAE1E,OAAO,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,QAAQ,CAAA;AAC7B,CAAC,CAAA;AAED,2EAA2E;AAC3E,wEAAwE;AACxE,MAAM,eAAe,GACnB,CAAK,MAAwC,EAAE,IAAwB,EAAE,EAAE,CAC3E,CAAC,KAAQ,EAAQ,EAAE;IACjB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,KAAK,CAAC,CAAA;IACf,IAAI,CAAC,KAAK,CAAC,CAAA;AACb,CAAC,CAAA;AAEH,IAAI,iBAAiB,GAAG,CAAC,CAAA;AAEzB,6EAA6E;AAC7E,0EAA0E;AAC1E,8EAA8E;AAC9E,uEAAuE;AACvE,+EAA+E;AAC/E,yDAAyD;AACzD,MAAM,aAAa,GAAG,CAAC,MAAe,EAAsB,EAAE;IAC5D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,IAAI,IAAI,EAAE,CAAC;YACvB,iBAAiB,IAAI,CAAC,CAAA;YACtB,aAAa,CAAC,mBAAmB,iBAAiB,EAAE,CAAC,CAAA;QACvD,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,UAAU,CAAA;AAC7B,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-tooltip",
|
|
3
|
-
"version": "100.
|
|
3
|
+
"version": "100.1.0",
|
|
4
4
|
"description": "Toptal UI components library - Tooltip",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@base-ui/react": "^1.6.0",
|
|
22
|
-
"@toptal/picasso-shared": "100.
|
|
23
|
-
"@toptal/picasso-typography": "100.0.
|
|
24
|
-
"@toptal/picasso-utils": "100.0.
|
|
22
|
+
"@toptal/picasso-shared": "100.1.0",
|
|
23
|
+
"@toptal/picasso-typography": "100.0.1",
|
|
24
|
+
"@toptal/picasso-utils": "100.0.1"
|
|
25
25
|
},
|
|
26
26
|
"sideEffects": [
|
|
27
27
|
"**/styles.ts",
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
],
|
|
30
30
|
"peerDependencies": {
|
|
31
31
|
"react": ">=17.0.0 < 19.0.0",
|
|
32
|
-
"@toptal/picasso-provider": "^100.0.0",
|
|
33
32
|
"@toptal/picasso-tailwind": "^100.0.0",
|
|
33
|
+
"@toptal/picasso-provider": "^100.0.0",
|
|
34
34
|
"@toptal/picasso-tailwind-merge": "^100.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@toptal/picasso-provider": "100.0.0",
|
|
38
38
|
"@toptal/picasso-tailwind": "100.0.0",
|
|
39
|
-
"@toptal/picasso-
|
|
40
|
-
"@toptal/picasso-
|
|
39
|
+
"@toptal/picasso-tailwind-merge": "100.0.0",
|
|
40
|
+
"@toptal/picasso-test-utils": "100.0.1"
|
|
41
41
|
},
|
|
42
42
|
"exports": {
|
|
43
43
|
".": "./dist-package/src/index.js"
|
package/src/Tooltip/Tooltip.tsx
CHANGED
|
@@ -77,6 +77,21 @@ const composeHandlers =
|
|
|
77
77
|
ours(event)
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
// Both testids stamp the anchor (the rendered trigger child) — the only
|
|
81
|
+
// element the Tooltip owns while closed; `testIds.anchor` names it
|
|
82
|
+
// explicitly, the top-level `data-testid` keeps flowing for backwards
|
|
83
|
+
// compatibility. Returns the attribute only when set: an explicit
|
|
84
|
+
// `data-testid: undefined` would clobber the child's own testid in the
|
|
85
|
+
// trigger's prop merge.
|
|
86
|
+
const buildAnchorTestIdProps = (
|
|
87
|
+
testIds: Props['testIds'],
|
|
88
|
+
dataTestId: string | undefined
|
|
89
|
+
): { 'data-testid'?: string } => {
|
|
90
|
+
const anchorTestId = testIds?.anchor ?? dataTestId
|
|
91
|
+
|
|
92
|
+
return anchorTestId === undefined ? {} : { 'data-testid': anchorTestId }
|
|
93
|
+
}
|
|
94
|
+
|
|
80
95
|
let fallbackIdCounter = 0
|
|
81
96
|
|
|
82
97
|
// The tooltip primitive wires no `aria-describedby` of its own, so a tooltip
|
|
@@ -137,6 +152,16 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
|
|
|
137
152
|
container?: ContainerValue
|
|
138
153
|
/** Offset to allow shifting tooltip's position from left and top. */
|
|
139
154
|
offset?: OffsetType
|
|
155
|
+
/** Testids of the `Tooltip` internal elements */
|
|
156
|
+
testIds?: {
|
|
157
|
+
/**
|
|
158
|
+
* Testid of the anchor — the element the tooltip's open/close listeners
|
|
159
|
+
* are attached to (the rendered trigger child). Hover this element in
|
|
160
|
+
* tests: a natively disabled child swallows pointer events, so hovering
|
|
161
|
+
* the child itself never opens the tooltip.
|
|
162
|
+
*/
|
|
163
|
+
anchor?: string
|
|
164
|
+
}
|
|
140
165
|
}
|
|
141
166
|
|
|
142
167
|
export const Tooltip = forwardRef<HTMLElement, Props>(
|
|
@@ -173,6 +198,8 @@ export const Tooltip = forwardRef<HTMLElement, Props>(
|
|
|
173
198
|
tooltipRef,
|
|
174
199
|
container,
|
|
175
200
|
'data-private': dataPrivate,
|
|
201
|
+
'data-testid': dataTestId,
|
|
202
|
+
testIds,
|
|
176
203
|
...rest
|
|
177
204
|
} = props
|
|
178
205
|
|
|
@@ -237,6 +264,8 @@ export const Tooltip = forwardRef<HTMLElement, Props>(
|
|
|
237
264
|
'className' | 'style' | 'disabled' | 'closeOnClick' | 'onClick' | 'render'
|
|
238
265
|
>
|
|
239
266
|
|
|
267
|
+
const anchorTestIdProps = buildAnchorTestIdProps(testIds, dataTestId)
|
|
268
|
+
|
|
240
269
|
const positioner = (
|
|
241
270
|
<BaseTooltip.Positioner
|
|
242
271
|
ref={tooltipRef}
|
|
@@ -297,6 +326,7 @@ export const Tooltip = forwardRef<HTMLElement, Props>(
|
|
|
297
326
|
ref={setTriggerRef}
|
|
298
327
|
className={className}
|
|
299
328
|
style={style}
|
|
329
|
+
{...anchorTestIdProps}
|
|
300
330
|
// Associate the popup with the trigger while open, preferring any
|
|
301
331
|
// consumer-supplied value (tooltipId is never empty).
|
|
302
332
|
aria-describedby={
|
package/src/Tooltip/test.tsx
CHANGED
|
@@ -758,4 +758,36 @@ describe('Tooltip', () => {
|
|
|
758
758
|
})
|
|
759
759
|
})
|
|
760
760
|
})
|
|
761
|
+
|
|
762
|
+
describe('testIds', () => {
|
|
763
|
+
it('places testIds.anchor on the trigger child — the element owning the tooltip listeners', async () => {
|
|
764
|
+
const { getByTestId, getByRole } = render(
|
|
765
|
+
<Tooltip content={<TestContent />} testIds={{ anchor: 'anchor' }}>
|
|
766
|
+
<button type='button'>Trigger</button>
|
|
767
|
+
</Tooltip>
|
|
768
|
+
)
|
|
769
|
+
|
|
770
|
+
const anchor = getByTestId('anchor')
|
|
771
|
+
|
|
772
|
+
expect(anchor).toBe(getByRole('button', { name: 'Trigger' }))
|
|
773
|
+
|
|
774
|
+
fireEvent.mouseOver(anchor)
|
|
775
|
+
|
|
776
|
+
await waitFor(() => {
|
|
777
|
+
expect(getByTestId('tooltip-content')).toBeInTheDocument()
|
|
778
|
+
})
|
|
779
|
+
})
|
|
780
|
+
|
|
781
|
+
it('keeps the top-level data-testid flowing to the anchor', () => {
|
|
782
|
+
const { getByTestId, getByRole } = render(
|
|
783
|
+
<Tooltip content={<TestContent />} data-testid='anchor'>
|
|
784
|
+
<button type='button'>Trigger</button>
|
|
785
|
+
</Tooltip>
|
|
786
|
+
)
|
|
787
|
+
|
|
788
|
+
expect(getByTestId('anchor')).toBe(
|
|
789
|
+
getByRole('button', { name: 'Trigger' })
|
|
790
|
+
)
|
|
791
|
+
})
|
|
792
|
+
})
|
|
761
793
|
})
|