From c58d5964b18893fa3dc3f06098e8bc130a7f1b46 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 17 Jan 2024 17:23:40 +0100 Subject: [PATCH 1/7] Test Popover API attributes --- .../AttributeTableSnapshot.md | 75 +++++++++++++++++++ fixtures/attribute-behavior/src/attributes.js | 7 ++ 2 files changed, 82 insertions(+) diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md index 8db00f818fbb3..e022d5de2d986 100644 --- a/fixtures/attribute-behavior/AttributeTableSnapshot.md +++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md @@ -8448,6 +8448,81 @@ | `pointsAtZ=(null)`| (initial)| `` | | `pointsAtZ=(undefined)`| (initial)| `` | +## `popover` (on `
` inside `
`) +| Test Case | Flags | Result | +| --- | --- | --- | +| `popover=(string)`| (changed)| `"manual"` | +| `popover=(empty string)`| (changed)| `"auto"` | +| `popover=(array with string)`| (changed)| `"manual"` | +| `popover=(empty array)`| (changed)| `"auto"` | +| `popover=(object)`| (changed)| `"manual"` | +| `popover=(numeric string)`| (changed)| `"manual"` | +| `popover=(-1)`| (changed)| `"manual"` | +| `popover=(0)`| (changed)| `"manual"` | +| `popover=(integer)`| (changed)| `"manual"` | +| `popover=(NaN)`| (changed, warning)| `"manual"` | +| `popover=(float)`| (changed)| `"manual"` | +| `popover=(true)`| (initial, warning)| `` | +| `popover=(false)`| (initial, warning)| `` | +| `popover=(string 'true')`| (changed)| `"manual"` | +| `popover=(string 'false')`| (changed)| `"manual"` | +| `popover=(string 'on')`| (changed)| `"manual"` | +| `popover=(string 'off')`| (changed)| `"manual"` | +| `popover=(symbol)`| (initial, warning)| `` | +| `popover=(function)`| (initial, warning)| `` | +| `popover=(null)`| (initial)| `` | +| `popover=(undefined)`| (initial)| `` | + +## `popoverTarget` (on ` +
+ popover content +
+ , + ); + }); + + const target = container.querySelector('#popover'); + target.dispatchEvent( + new ToggleEvent('toggle', { + bubbles: false, + cancelable: true, + oldState: 'closed', + newState: 'open', + }), + ); + + expect(onToggle).toHaveBeenCalledTimes(1); + let event = onToggle.mock.calls[0][0]; + expect(event).toEqual( + expect.objectContaining({ + oldState: 'closed', + newState: 'open', + }), + ); + + target.dispatchEvent( + new ToggleEvent('toggle', { + bubbles: false, + cancelable: true, + oldState: 'open', + newState: 'closed', + }), + ); + + expect(onToggle).toHaveBeenCalledTimes(2); + event = onToggle.mock.calls[1][0]; + expect(event).toEqual( + expect.objectContaining({ + oldState: 'open', + newState: 'closed', + }), + ); + }); + + it('dispatches synthetic toggle events when
is used', async () => { + // This test just replays browser behavior. + // The real test would be if browsers dispatch ToggleEvent on
. + // This case only exists because MDN claims
doesn't receive ToggleEvent. + // However, Chrome dispatches ToggleEvent on
and the spec confirms that behavior: https://html.spec.whatwg.org/multipage/indices.html#event-toggle + + container = document.createElement('div'); + + const onToggle = jest.fn(); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( +
+ Summary + Details +
, + ); + }); + + const target = container.querySelector('#details'); + target.dispatchEvent( + new ToggleEvent('toggle', { + bubbles: false, + cancelable: true, + oldState: 'closed', + newState: 'open', + }), + ); + + expect(onToggle).toHaveBeenCalledTimes(1); + let event = onToggle.mock.calls[0][0]; + expect(event).toEqual( + expect.objectContaining({ + oldState: 'closed', + newState: 'open', + }), + ); + + target.dispatchEvent( + new ToggleEvent('toggle', { + bubbles: false, + cancelable: true, + oldState: 'open', + newState: 'closed', + }), + ); + + expect(onToggle).toHaveBeenCalledTimes(2); + event = onToggle.mock.calls[1][0]; + expect(event).toEqual( + expect.objectContaining({ + oldState: 'open', + newState: 'closed', + }), + ); + }); }); }); From f74fb57f87832af99696214075e48246018678ec Mon Sep 17 00:00:00 2001 From: eps1lon Date: Fri, 17 May 2024 12:02:50 -0700 Subject: [PATCH 6/7] Revert "popoverTarget -> popoverTargetElement" This reverts commit b394c001c7544b366820380952c281b77c90eab9. --- .../AttributeTableSnapshot.md | 31 ++----------------- fixtures/attribute-behavior/src/attributes.js | 5 --- .../src/client/ReactDOMComponent.js | 2 -- .../src/shared/getAttributeAlias.js | 1 - .../src/shared/possibleStandardNames.js | 3 +- .../src/__tests__/ReactDOMComponent-test.js | 19 ------------ .../__tests__/SimpleEventPlugin-test.js | 2 +- 7 files changed, 5 insertions(+), 58 deletions(-) diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md index 427036879e1e8..112bf4ebfca63 100644 --- a/fixtures/attribute-behavior/AttributeTableSnapshot.md +++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md @@ -8476,7 +8476,7 @@ ## `popoverTarget` (on ` +
popover content
From 085028133f5b4ceddaa5df37a7733f3b4048d2d6 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Mon, 20 May 2024 20:09:09 +0200 Subject: [PATCH 7/7] Add warning when using popoverTarget={Element} --- .../AttributeTableSnapshot.md | 8 ++--- fixtures/attribute-behavior/public/index.html | 1 + fixtures/attribute-behavior/src/attributes.js | 11 ++++++- .../src/client/ReactDOMComponent.js | 15 ++++++++++ .../__tests__/DOMPropertyOperations-test.js | 30 ++++++++++++++++++- 5 files changed, 59 insertions(+), 6 deletions(-) diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md index 112bf4ebfca63..004a35db8d405 100644 --- a/fixtures/attribute-behavior/AttributeTableSnapshot.md +++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md @@ -8476,11 +8476,11 @@ ## `popoverTarget` (on `