fixup! refactor(core): Remove jsaction from element after handling th…

…e event.
angular · May 1, 2024 · 3e80de8 · 3e80de8
1 parent ebdb449
commit 3e80de8
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 65 deletions.
diff --git a/goldens/public-api/core/primitives/event-dispatch/index.md b/goldens/public-api/core/primitives/event-dispatch/index.md
@@ -4,17 +4,6 @@
 
 ```ts
 
-// @public (undocumented)
-export enum Attribute {
- JSACTION = "jsaction",
- JSINSTANCE = "jsinstance",
- JSNAMESPACE = "jsnamespace",
- JSTRACK = "jstrack",
- OI = "oi",
- VED = "ved",
- VET = "vet"
-}
-
 // @public
 export function bootstrapEventContract(field: string, container: Element, appId: string, events: string[], anyWindow?: any): EventContract;
 

diff --git a/packages/core/primitives/event-dispatch/index.ts b/packages/core/primitives/event-dispatch/index.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export {Attribute} from './src/attribute';
 export {Dispatcher, registerDispatcher} from './src/dispatcher';
 export {EventContractContainer} from './src/event_contract_container';
 export {EventContract} from './src/eventcontract';

diff --git a/packages/core/src/hydration/event_replay.ts b/packages/core/src/hydration/event_replay.ts
@@ -7,7 +7,6 @@
  */
 
 import {
- Attribute,
  Dispatcher,
  EventContract,
  EventInfoWrapper,
@@ -36,6 +35,8 @@ declare global {
  var ngContracts: {[key: string]: EventContract};
 }
 
+const JSACTION_ATTRIBUTE = 'jsaction';
+
 /**
  * Returns a set of providers required to setup support for event replay.
  * Requires hydration to be enabled separately.
@@ -50,8 +51,8 @@ export function withEventReplay(): Provider[] {
  provide: ENVIRONMENT_INITIALIZER,
  useValue: () => {
  setDisableEventReplayImpl((el: RElement) => {
- if (el.hasAttribute(Attribute.JSACTION)) {
- el.removeAttribute(Attribute.JSACTION);
+ if (el.hasAttribute(JSACTION_ATTRIBUTE)) {
+ el.removeAttribute(JSACTION_ATTRIBUTE);
  }
  });
  },
@@ -141,7 +142,7 @@ export function setJSActionAttribute(
  const events = nativeElementToEvents.get(nativeElement) ?? [];
  const parts = events.map((event) => `${event}:`);
  if (parts.length > 0) {
- nativeElement.setAttribute('jsaction', parts.join(';'));
+ nativeElement.setAttribute(JSACTION_ATTRIBUTE, parts.join(';'));
  }
  }
 }

diff --git a/packages/platform-server/test/event_replay_spec.ts b/packages/platform-server/test/event_replay_spec.ts
@@ -147,7 +147,7 @@ describe('event replay', () => {
  expect(clickSpy).toHaveBeenCalled();
  });
 
- it('should remove jsaction attributes and stop listening after hydration.', async () => {
+ it('should remove jsaction attributes, but continue listening to events.', async () => {
  @Component({
  standalone: true,
  selector: 'app',
@@ -164,16 +164,10 @@ describe('event replay', () => {
  const docContents = `<html><head></head><body>${EVENT_DISPATCH_SCRIPT}<app></app></body></html>`;
  const html = await ssr(SimpleComponent, {doc: docContents});
  const ssrContents = getAppContents(html);
- const originalRemoveEventListener = doc.body.removeEventListener;
- const removeEventListenerSpy = jasmine.createSpy();
- doc.body.removeEventListener = function (
- type: string,
- listener: EventListenerOrEventListenerObject,
- options: boolean | EventListenerOptions | undefined,
- ) {
- originalRemoveEventListener.call(doc.body, type, listener, options);
- removeEventListenerSpy();
- };
+ const removeEventListenerSpy = spyOn(
+ document.body,
+ 'removeEventListener',
+ ).and.callThrough();
  render(doc, ssrContents);
  const el = doc.getElementById('1')!;
  expect(el.hasAttribute('jsaction')).toBeTrue();
@@ -190,44 +184,6 @@ describe('event replay', () => {
  expect(removeEventListenerSpy).not.toHaveBeenCalled();
  });
 
- describe('bubbling behavior', () => {
- it('should remove jsaction attributes and stop listening after hydration.', async () => {
- const clickSpyOne = jasmine.createSpy();
- const clickSpyTwo = jasmine.createSpy();
- @Component({
- standalone: true,
- selector: 'app',
- template: `
- <div (click)="onClick()" id="1">
- <div (click)="onClick2()" id="2"></div>
- </div>
- `,
- })
- class SimpleComponent {
- onClick = clickSpyOne;
- onClick2 = clickSpyTwo;
- }
-
- const docContents = `<html><head></head><body>${EVENT_DISPATCH_SCRIPT}<app></app></body></html>`;
- const html = await ssr(SimpleComponent, {doc: docContents});
- const ssrContents = getAppContents(html);
- render(doc, ssrContents);
- const el = doc.getElementById('2')!;
- const clickEvent = new CustomEvent('click', {bubbles: true});
- el.dispatchEvent(clickEvent);
- resetTViewsFor(SimpleComponent);
- const appRef = await hydrate(doc, SimpleComponent, {
- hydrationFeatures: [withEventReplay()],
- });
- appRef.tick();
- expect(clickSpyTwo).toHaveBeenCalledTimes(1);
- expect(clickSpyOne).toHaveBeenCalledTimes(0);
- el.dispatchEvent(clickEvent);
- expect(clickSpyTwo).toHaveBeenCalledTimes(2);
- expect(clickSpyOne).toHaveBeenCalledTimes(1);
- });
- });
-
  it(`should add 'nonce' attribute to event record script when 'ngCspNonce' is provided`, async () => {
  @Component({
  standalone: true,