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

feat: events names form elements #650

Merged
merged 1 commit into from
May 7, 2024
Merged

feat: events names form elements #650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 49 additions & 46 deletions src/components/form-elements/index.test.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading