chore(config): add properties exemple to hello-world component and implement a sleep to wtr tests

src/common/utils/sleep.test.ts

@@ -0,0 +1,10 @@
+import sleep from './sleep';
+
+describe('sleep', () => {
+  test('should resolve after the specified time', async () => {
+    const start = Date.now();
+    await sleep(1000);
+    const end = Date.now();
+    expect(end - start).toBeGreaterThanOrEqual(1000);
+  });
+});

src/common/utils/sleep.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line
+const sleep = (ms: number = 100) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export default sleep;

src/components/base/index.test.ts

@@ -49,7 +49,7 @@ describe('BaseComponent', () => {
       });
 
       expect(DummyComponentInstance['localParticipant']).toEqual(MOCK_LOCAL_PARTICIPANT);
-      expect(DummyComponentInstance['realitme']).toEqual(MOCK_REALTIME_SERVICE);
+      expect(DummyComponentInstance['realtime']).toEqual(MOCK_REALTIME_SERVICE);
       expect(DummyComponentInstance['isAttached']).toBeTruthy();
       expect(DummyComponentInstance['start']).toBeCalled();
     });
@@ -79,7 +79,7 @@ describe('BaseComponent', () => {
       DummyComponentInstance.detach();
 
       expect(DummyComponentInstance['localParticipant']).toBeUndefined();
-      expect(DummyComponentInstance['realitme']).toBeUndefined();
+      expect(DummyComponentInstance['realtime']).toBeUndefined();
       expect(DummyComponentInstance['isAttached']).toBeFalsy();
       expect(DummyComponentInstance['destroy']).toBeCalled();
     });

src/components/base/index.ts

@@ -1,12 +1,12 @@
 import { Participant } from '../../common/types/participant.types';
 import { Logger } from '../../common/utils';
-import { AblyRealtime } from '../../services/realtime/ably/types';
+import { AblyRealtimeService } from '../../services/realtime';
 
 import { DefaultAttachComponentOptions } from './types';
 
 export abstract class BaseComponent {
   protected localParticipant: Participant;
-  protected realitme: AblyRealtime;
+  protected realtime: AblyRealtimeService;
   protected abstract name: string;
   protected abstract logger: Logger;
 
@@ -26,7 +26,7 @@ export abstract class BaseComponent {
     }
 
     this.logger.log('attached');
-    this.realitme = realtime;
+    this.realtime = realtime;
     this.localParticipant = localParticipant;
     this.isAttached = true;
     this.start();
@@ -43,7 +43,7 @@ export abstract class BaseComponent {
       return;
     }
 
-    this.realitme = undefined;
+    this.realtime = undefined;
     this.localParticipant = undefined;
     this.isAttached = false;
 

src/components/base/types.ts

@@ -1,7 +1,8 @@
 import { Participant } from '../../common/types/participant.types';
+import { AblyRealtimeService } from '../../services/realtime';
 import { AblyRealtime } from '../../services/realtime/ably/types';
 
 export interface DefaultAttachComponentOptions {
-  realtime: AblyRealtime;
+  realtime: AblyRealtimeService;
   localParticipant: Participant;
 }

src/web-components/hello-world/index.test.ts

@@ -1,14 +1,19 @@
 import '.';
+import sleep from '../../common/utils/sleep';
 
 const element = document.createElement('superviz-hello-world');
 document.body.appendChild(element);
 
 describe('hello-world', () => {
-  it('should have a div with text', async () => {
+  test('should have a div with text', async () => {
     const renderedElement = document.getElementsByTagName('superviz-hello-world')[0];
 
+    renderedElement.setAttribute('name', 'John');
+
+    await sleep();
+
     expect(renderedElement.shadowRoot?.querySelector('div')?.textContent).toEqual(
-      'Hello from SuperViz!',
+      'Hello from SuperViz, John',
     );
   });
 });

src/web-components/hello-world/index.ts

@@ -3,6 +3,12 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('superviz-hello-world')
 export class HelloWorld extends LitElement {
+  declare name: string;
+
+  static properties = {
+    name: { type: String },
+  };
+
   static styles = css`
     div {
       position: absolute;
@@ -16,6 +22,6 @@ export class HelloWorld extends LitElement {
   `;
 
   protected render() {
-    return html` <div>Hello from SuperViz!</div> `;
+    return html` <div>Hello from SuperViz, ${this.name}</div> `;
   }
 }