Create stories for layout testing (#2722)

* Inject services with useContext

* Extract service for video settings

* Create mock factories for services

* Create test data for chat history

* Add story to visualize different layouts

* Fix renaming mistake

* Add landscape and portrait viewports

* Add landscape stories

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/services/chat-service.mock.ts

@@ -0,0 +1,18 @@
+import { ChatMessage } from '../interfaces/chat-message.model';
+import { ChatStaticService, UserRegistrationResponse } from './chat-service';
+
+export const chatServiceMockOf = (
+  chatHistory: ChatMessage[],
+  userRegistrationResponse: UserRegistrationResponse,
+): ChatStaticService =>
+  class ChatServiceMock {
+    public static async getChatHistory(): Promise<ChatMessage[]> {
+      return chatHistory;
+    }
+
+    public static async registerUser(): Promise<UserRegistrationResponse> {
+      return userRegistrationResponse;
+    }
+  };
+
+export default chatServiceMockOf;

web/services/chat-service.ts

@@ -1,16 +1,22 @@
+import { createContext } from 'react';
 import { ChatMessage } from '../interfaces/chat-message.model';
 import { getUnauthedData } from '../utils/apis';
 
 const ENDPOINT = `/api/chat`;
 const URL_CHAT_REGISTRATION = `/api/chat/register`;
 
-interface UserRegistrationResponse {
+export interface UserRegistrationResponse {
   id: string;
   accessToken: string;
   displayName: string;
   displayColor: number;
 }
 
+export interface ChatStaticService {
+  getChatHistory(accessToken: string): Promise<ChatMessage[]>;
+  registerUser(username: string): Promise<UserRegistrationResponse>;
+}
+
 class ChatService {
   public static async getChatHistory(accessToken: string): Promise<ChatMessage[]> {
     const response = await getUnauthedData(`${ENDPOINT}?accessToken=${accessToken}`);
@@ -31,4 +37,4 @@ class ChatService {
   }
 }
 
-export default ChatService;
+export const ChatServiceContext = createContext<ChatStaticService>(ChatService);

web/services/client-config-service.mock.ts

@@ -0,0 +1,11 @@
+import { ClientConfig } from '../interfaces/client-config.model';
+import { ClientConfigStaticService } from './client-config-service';
+
+export const clientConfigServiceMockOf = (config: ClientConfig): ClientConfigStaticService =>
+  class ClientConfigServiceMock {
+    public static async getConfig(): Promise<ClientConfig> {
+      return config;
+    }
+  };
+
+export default clientConfigServiceMockOf;

web/services/client-config-service.ts

@@ -1,7 +1,12 @@
+import { createContext } from 'react';
 import { ClientConfig } from '../interfaces/client-config.model';
 
 const ENDPOINT = `/api/config`;
 
+export interface ClientConfigStaticService {
+  getConfig(): Promise<ClientConfig>;
+}
+
 class ClientConfigService {
   public static async getConfig(): Promise<ClientConfig> {
     const response = await fetch(ENDPOINT);
@@ -10,4 +15,5 @@ class ClientConfigService {
   }
 }
 
-export default ClientConfigService;
+export const ClientConfigServiceContext =
+  createContext<ClientConfigStaticService>(ClientConfigService);

web/services/status-service.mock.ts

@@ -0,0 +1,13 @@
+import { ServerStatus } from '../interfaces/server-status.model';
+import { ServerStatusStaticService } from './status-service';
+
+export const serverStatusServiceMockOf = (
+  serverStatus: ServerStatus,
+): ServerStatusStaticService =>
+  class ServerStatusServiceMock {
+    public static async getStatus(): Promise<ServerStatus> {
+      return serverStatus;
+    }
+  };
+
+export default serverStatusServiceMockOf;

web/services/status-service.ts

@@ -1,7 +1,12 @@
+import { createContext } from 'react';
 import { ServerStatus } from '../interfaces/server-status.model';
 
 const ENDPOINT = `/api/status`;
 
+export interface ServerStatusStaticService {
+  getStatus(): Promise<ServerStatus>;
+}
+
 class ServerStatusService {
   public static async getStatus(): Promise<ServerStatus> {
     const response = await fetch(ENDPOINT);
@@ -10,4 +15,5 @@ class ServerStatusService {
   }
 }
 
-export default ServerStatusService;
+export const ServerStatusServiceContext =
+  createContext<ServerStatusStaticService>(ServerStatusService);

web/services/video-settings-service.mock.ts

@@ -0,0 +1,12 @@
+import { VideoSettingsStaticService, VideoQuality } from './video-settings-service';
+
+export const videoSettingsServiceMockOf = (
+  videoQualities: Array<VideoQuality>,
+): VideoSettingsStaticService =>
+  class VideoSettingsServiceMock {
+    public static async getVideoQualities(): Promise<Array<VideoQuality>> {
+      return videoQualities;
+    }
+  };
+
+export default videoSettingsServiceMockOf;

web/services/video-settings-service.ts

@@ -0,0 +1,36 @@
+import { createContext } from 'react';
+
+export type VideoQuality = {
+  index: number;
+  /**
+   * This property is not just for display or so
+   * but it holds information
+   *
+   * @example '1.2Mbps@24fps'
+   */
+  name: string;
+};
+
+export interface VideoSettingsStaticService {
+  getVideoQualities(): Promise<Array<VideoQuality>>;
+}
+
+class VideoSettingsService {
+  private static readonly VIDEO_CONFIG_URL = '/api/video/variants';
+
+  public static async getVideoQualities(): Promise<Array<VideoQuality>> {
+    let qualities: Array<VideoQuality> = [];
+
+    try {
+      const response = await fetch(VideoSettingsService.VIDEO_CONFIG_URL);
+      qualities = await response.json();
+      console.log(qualities);
+    } catch (e) {
+      console.error(e);
+    }
+    return qualities;
+  }
+}
+
+export const VideoSettingsServiceContext =
+  createContext<VideoSettingsStaticService>(VideoSettingsService);