Skip to content
This repository has been archived by the owner on Oct 18, 2024. It is now read-only.

Commit

Permalink
Merge pull request #650 from SuperViz/feat/events-names-form-elements
Browse files Browse the repository at this point in the history 
feat: events names form elements
  • Loading branch information
@carlossantos74
carlossantos74 authored May 7, 2024
2 parents 1b8981d + 663dd18 commit bcdc862
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 72 deletions.
95 changes: 49 additions & 46 deletions src/components/form-elements/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { MOCK_CONFIG } from '../../../__mocks__/config.mock';
import { EVENT_BUS_MOCK } from '../../../__mocks__/event-bus.mock';
import { MOCK_LOCAL_PARTICIPANT } from '../../../__mocks__/participants.mock';
import { ABLY_REALTIME_MOCK } from '../../../__mocks__/realtime.mock';
import { StoreType } from '../../common/types/stores.types';
import { useStore } from '../../common/utils/use-store';
import { IOC } from '../../services/io';
import { ComponentNames } from '../types';
Expand All @@ -26,7 +27,7 @@ describe('form elements', () => {

instance.attach({
ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
realtime: Object.assign({}, ABLY_REALTIME_MOCK, { isJoinedRoom: true }),
realtime: Object.assign({}, ABLY_REALTIME_MOCK, { hasJoinedRoom: true }),
config: MOCK_CONFIG,
eventBus: EVENT_BUS_MOCK,
useStore,
Expand Down Expand Up @@ -174,19 +175,19 @@ describe('form elements', () => {

expect(instance['room'].on).toHaveBeenCalledTimes(4);
expect(instance['room'].on).toHaveBeenCalledWith(
'field.inputfield-1',
`${FieldEvents.CONTENT_CHANGE}field-1`,
instance['updateFieldContent'],
);
expect(instance['room'].on).toHaveBeenCalledWith(
'field.keyboard-interactionfield-1',
`${FieldEvents.INTERACTION}field-1`,
instance['publishTypedEvent'],
);
expect(instance['room'].on).toHaveBeenCalledWith(
'field.focusfield-1',
`${FieldEvents.FOCUS}field-1`,
instance['updateFieldColor'],
);
expect(instance['room'].on).toHaveBeenCalledWith(
'field.blurfield-1',
`${FieldEvents.BLUR}field-1`,
instance['removeFieldColor'],
);
});
Expand All @@ -205,11 +206,11 @@ describe('form elements', () => {

expect(instance['room'].on).toHaveBeenCalledTimes(2);
expect(instance['room'].on).toHaveBeenCalledWith(
'field.inputfield-1',
`${FieldEvents.CONTENT_CHANGE}field-1`,
instance['updateFieldContent'],
);
expect(instance['room'].on).toHaveBeenCalledWith(
'field.keyboard-interactionfield-1',
`${FieldEvents.INTERACTION}field-1`,
instance['publishTypedEvent'],
);
});
Expand Down Expand Up @@ -282,22 +283,22 @@ describe('form elements', () => {
expect(instance['room'].off).toHaveBeenCalledTimes(4);
expect(instance['room'].off).toHaveBeenNthCalledWith(
1,
'field.inputfield-1',
`${FieldEvents.CONTENT_CHANGE}field-1`,
instance['updateFieldContent'],
);
expect(instance['room'].off).toHaveBeenNthCalledWith(
2,
'field.keyboard-interactionfield-1',
`${FieldEvents.INTERACTION}field-1`,
instance['publishTypedEvent'],
);
expect(instance['room'].off).toHaveBeenNthCalledWith(
3,
'field.focusfield-1',
`${FieldEvents.FOCUS}field-1`,
instance['updateFieldColor'],
);
expect(instance['room'].off).toHaveBeenNthCalledWith(
4,
'field.blurfield-1',
`${FieldEvents.BLUR}field-1`,
instance['removeFieldColor'],
);
});
Expand Down Expand Up @@ -330,12 +331,12 @@ describe('form elements', () => {
expect(instance['room'].off).toHaveBeenCalledTimes(2);
expect(instance['room'].off).toHaveBeenNthCalledWith(
1,
'field.inputfield-1',
`${FieldEvents.CONTENT_CHANGE}field-1`,
instance['updateFieldContent'],
);
expect(instance['room'].off).toHaveBeenNthCalledWith(
2,
'field.keyboard-interactionfield-1',
`${FieldEvents.INTERACTION}field-1`,
instance['publishTypedEvent'],
);
});
Expand Down Expand Up @@ -409,7 +410,7 @@ describe('form elements', () => {
instance['deregisterField']('field-1');

expect(instance['room'].emit).toHaveBeenCalledTimes(1);
expect(instance['room'].emit).toHaveBeenCalledWith('field.blurfield-1', {
expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.BLUR}field-1`, {
fieldId: 'field-1',
});
});
Expand All @@ -432,12 +433,12 @@ describe('form elements', () => {

expect(instance['room'].emit).toHaveBeenCalledTimes(2);

expect(instance['room'].emit).toHaveBeenCalledWith('field.keyboard-interactionfield-1', {
expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.INTERACTION}field-1`, {
fieldId: 'field-1',
color: 'red',
});

expect(instance['room'].emit).toHaveBeenCalledWith('field.inputfield-1', {
expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.CONTENT_CHANGE}field-1`, {
value: 'some value',
color: 'red',
fieldId: 'field-1',
Expand Down Expand Up @@ -465,7 +466,7 @@ describe('form elements', () => {

expect(instance['room'].emit).toHaveBeenCalledTimes(1);

expect(instance['room'].emit).toHaveBeenCalledWith('field.keyboard-interactionfield-1', {
expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.INTERACTION}field-1`, {
fieldId: 'field-1',
color: 'red',
});
Expand All @@ -489,7 +490,7 @@ describe('form elements', () => {

expect(instance['room'].emit).toHaveBeenCalledTimes(1);

expect(instance['room'].emit).toHaveBeenCalledWith('field.inputfield-1', {
expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.CONTENT_CHANGE}field-1`, {
value: true,
color: 'red',
fieldId: 'field-1',
Expand Down Expand Up @@ -535,7 +536,7 @@ describe('form elements', () => {
instance['handleFocus'](event);

expect(instance['room'].emit).toHaveBeenCalledTimes(1);
expect(instance['room'].emit).toHaveBeenCalledWith('field.focusfield-1', {
expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.FOCUS}field-1`, {
color: 'red',
fieldId: 'field-1',
});
Expand All @@ -555,7 +556,7 @@ describe('form elements', () => {
instance['handleBlur'](event);

expect(instance['room'].emit).toHaveBeenCalledTimes(1);
expect(instance['room'].emit).toHaveBeenCalledWith('field.blurfield-1', {
expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.BLUR}field-1`, {
fieldId: 'field-1',
});
});
Expand Down Expand Up @@ -906,28 +907,12 @@ describe('form elements', () => {

instance['publishTypedEvent']({ presence, data });

expect(instance['publish']).toHaveBeenCalledWith(
FieldEvents.KEYBOARD_INTERACTION,
{
fieldId,
userId: '123',
userName: undefined,
color,
},
);
});

test('should not publish event if presence id is local participant id', () => {
const fieldId = 'field-1';
const color = 'red';
const presence = { id: '123' };
const data = { fieldId, color };
instance['localParticipant'] = { id: '123' } as any;
instance['publish'] = jest.fn();

instance['publishTypedEvent']({ presence, data });

expect(instance['publish']).not.toHaveBeenCalled();
expect(instance['publish']).toHaveBeenCalledWith(FieldEvents.INTERACTION, {
fieldId,
userId: '123',
userName: undefined,
color,
});
});
});

Expand Down Expand Up @@ -1045,9 +1030,18 @@ describe('form elements', () => {
instance['hasCheckedProperty'] = jest.fn().mockReturnValue(false);
instance['sync']('field-1');

expect(instance['room'].emit).toHaveBeenCalledTimes(1);
expect(instance['room'].emit).toHaveBeenCalledTimes(2);

expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.CONTENT_CHANGE}field-1`, {
value: 'some value',
color: 'red',
fieldId: 'field-1',
showOutline: true,
syncContent: true,
attribute: 'value',
});

expect(instance['room'].emit).toHaveBeenCalledWith('field.inputfield-1', {
expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.INTERACTION}field-1`, {
value: 'some value',
color: 'red',
fieldId: 'field-1',
Expand All @@ -1072,9 +1066,18 @@ describe('form elements', () => {
instance['hasCheckedProperty'] = jest.fn().mockReturnValue(true);
instance['sync']('checkbox');

expect(instance['room'].emit).toHaveBeenCalledTimes(1);
expect(instance['room'].emit).toHaveBeenCalledTimes(2);

expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.CONTENT_CHANGE}checkbox`, {
value: true,
color: 'red',
fieldId: 'checkbox',
showOutline: true,
syncContent: true,
attribute: 'checked',
});

expect(instance['room'].emit).toHaveBeenCalledWith('field.inputcheckbox', {
expect(instance['room'].emit).toHaveBeenCalledWith(`${FieldEvents.INTERACTION}checkbox`, {
value: true,
color: 'red',
fieldId: 'checkbox',
Expand Down
44 changes: 21 additions & 23 deletions src/components/form-elements/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,8 @@ export class FormElements extends BaseComponent {
attribute: hasCheckedProperty ? 'checked' : 'value',
};

this.room?.emit(FieldEvents.INPUT + fieldId, payload);
this.room?.emit(FieldEvents.CONTENT_CHANGE + fieldId, payload);
this.room?.emit(FieldEvents.INTERACTION + fieldId, payload);
};

/**
Expand Down Expand Up @@ -321,8 +322,8 @@ export class FormElements extends BaseComponent {
private addRealtimeListenersToField(fieldId: string) {
if (!this.room) return;

this.room.on<InputPayload>(FieldEvents.INPUT + fieldId, this.updateFieldContent);
this.room.on<FocusPayload>(FieldEvents.KEYBOARD_INTERACTION + fieldId, this.publishTypedEvent);
this.room.on<InputPayload>(FieldEvents.CONTENT_CHANGE + fieldId, this.updateFieldContent);
this.room.on<FocusPayload>(FieldEvents.INTERACTION + fieldId, this.publishTypedEvent);

if (this.flags.disableOutline) return;

Expand Down Expand Up @@ -358,8 +359,8 @@ export class FormElements extends BaseComponent {
private removeRealtimeListenersFromField(fieldId: string) {
if (!this.room) return;

this.room.off(FieldEvents.INPUT + fieldId, this.updateFieldContent);
this.room.off<FocusPayload>(FieldEvents.KEYBOARD_INTERACTION + fieldId, this.publishTypedEvent);
this.room.off(FieldEvents.CONTENT_CHANGE + fieldId, this.updateFieldContent);
this.room.off<FocusPayload>(FieldEvents.INTERACTION + fieldId, this.publishTypedEvent);

if (this.flags.disableOutline) return;

Expand Down Expand Up @@ -391,7 +392,7 @@ export class FormElements extends BaseComponent {
private handleInput = (event: InputEvent) => {
const target = event.target as HTMLInputElement;

this.room?.emit(FieldEvents.KEYBOARD_INTERACTION + target.id, {
this.room?.emit(FieldEvents.INTERACTION + target.id, {
fieldId: target.id,
color: this.localParticipant.slot.color,
});
Expand All @@ -408,7 +409,7 @@ export class FormElements extends BaseComponent {
attribute: 'value',
};

this.room?.emit(FieldEvents.INPUT + target.id, payload);
this.room?.emit(FieldEvents.CONTENT_CHANGE + target.id, payload);
};

/**
Expand All @@ -432,7 +433,7 @@ export class FormElements extends BaseComponent {
attribute: 'checked',
};

this.room?.emit(FieldEvents.INPUT + target.id, payload);
this.room?.emit(FieldEvents.CONTENT_CHANGE + target.id, payload);
};

/**
Expand Down Expand Up @@ -603,18 +604,17 @@ export class FormElements extends BaseComponent {
timestamp,
...params
}: SocketEvent<InputPayload>) => {
if (presence.id === this.localParticipant.id) return;

this.publish(FieldEvents.INPUT, {
value,
fieldId,
attribute,
userId: presence.id,
userName: presence.name,
timestamp,
});

if (syncContent && this.canSyncContent(fieldId)) this.fields[fieldId][attribute] = value;
if (syncContent && this.canSyncContent(fieldId)) {
this.fields[fieldId][attribute] = value;
this.publish(FieldEvents.CONTENT_CHANGE, {
value,
fieldId,
attribute,
userId: presence.id,
userName: presence.name,
timestamp,
});
}

if (showOutline && this.canUpdateColor(fieldId)) {
this.updateFieldColor({ presence, data: { color, fieldId }, timestamp, ...params });
Expand All @@ -625,9 +625,7 @@ export class FormElements extends BaseComponent {
presence,
data: { fieldId, color },
}: SocketEvent<FocusPayload>) => {
if (presence.id === this.localParticipant.id) return;

this.publish(FieldEvents.KEYBOARD_INTERACTION, {
this.publish(FieldEvents.INTERACTION, {
fieldId,
userId: presence.id,
userName: presence.name,
Expand Down
5 changes: 2 additions & 3 deletions src/components/form-elements/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,10 @@ export type Flags = {
export type Field = HTMLInputElement | HTMLTextAreaElement;

export enum FieldEvents {
INPUT = 'field.input',
BLUR = 'field.blur',
FOCUS = 'field.focus',
CHANGE = 'field.change',
KEYBOARD_INTERACTION = 'field.keyboard-interaction',
CONTENT_CHANGE = 'field.content-change',
INTERACTION = 'field.interaction',
}

export interface FocusPayload {
Expand Down

0 comments on commit bcdc862

Please sign in to comment.