Convert Factory to non-static class

App.Tests/FactoryTests.ts

@@ -0,0 +1,50 @@
+import { Test, TestSuite } from "xunit.ts";
+import Factory from "../App/Factory";
+import Signal from "../App/Signal";
+import SignalService from "../App/SignalService";
+import MockFactory from "./MockFactory";
+import Mockito from "ts-mockito";
+import Renderer from "../App/Renderer";
+import ImageLoader from "../App/ImageLoader";
+
+export default class FactoryTests extends TestSuite {
+	@Test()
+	async canCreateSignalService() {
+		//arrange
+		const signals: Signal[] = [];
+
+		const factory = new Factory(false);
+
+		//act
+		const signal_service = factory.signalService(signals);
+
+		//assert
+		this.assert.instanceOf(SignalService, signal_service);
+	}
+
+	@Test()
+	async canCreateRenderer() {
+		//arrange
+		const canvas = MockFactory.canvas();
+
+		const factory = new Factory(true);
+
+		//act
+		const renderer = factory.renderer(Mockito.instance(canvas));
+
+		//assert
+		this.assert.instanceOf(Renderer, renderer);
+	}
+
+	@Test()
+	async canCreateImageLoader() {
+		//arrange
+		const factory = new Factory(true);
+
+		//act
+		const loader = factory.imageLoader();
+
+		//assert
+		this.assert.instanceOf(ImageLoader, loader);
+	}
+}

App.Tests/SignalServiceTests.ts

@@ -6,6 +6,20 @@ import { HubConnection } from "@microsoft/signalr";
 import Mockito from "ts-mockito";
 
 export default class SignalServiceTests extends TestSuite {
+	@Test()
+	async startConnectsToHub() {
+		//arrange
+		const connection = Mockito.mock<HubConnection>();
+		const signals: Signal[] = [];
+		const service = new SignalService(Mockito.instance(connection), signals);
+
+		//act
+		await service.start();
+
+		//assert
+		Mockito.verify(connection.start()).once();
+	}
+
 	@Test()
 	async signalsAreUpdatedOnNewMessage() {
 		//arrange
@@ -14,13 +28,13 @@ export default class SignalServiceTests extends TestSuite {
 
 		const signal1 = new Signal("mac1", "ssid1", 2, -50);
 		const signal2 = new Signal("mac2", "ssid2", 2, -40);
-		const signals = [ signal1, signal2 ];
+		const signals = [signal1, signal2];
 		const service = new SignalService(Mockito.instance(connection), signals);
 
 		const message = new Message();
 		const new1 = new Signal("mac1", "ssid1", 2, -45);
 		const new2 = new Signal("mac2", "ssid2", 2, -44);
-		message.signals = [ new1, new2 ];
+		message.signals = [new1, new2];
 
 		//act
 		service.update(message);

App/Factory.ts

@@ -5,22 +5,27 @@ import Signal from "./Signal";
 import ImageLoader from "./ImageLoader";
 
 export default class Factory {
-	static signalService(signals: Signal[]): SignalService {
-		const server = process.env.NODE_ENV === "production" ? "" : "http://localhost:5000";
+
+	private readonly server: string;
 
+	constructor(is_local: boolean) {
+		this.server = is_local ? "" : "http://localhost:5000";
+	}
+
+	signalService(signals: Signal[]): SignalService {
 		const connection = new HubConnectionBuilder()
-			.withUrl(`${server}/signals`)
+			.withUrl(`${this.server}/signals`)
 			.withAutomaticReconnect()
 			.build();
 
 		return new SignalService(connection, signals);
 	}
 
-	static renderer(canvas: HTMLCanvasElement): Renderer {
+	renderer(canvas: HTMLCanvasElement): Renderer {
 		return new Renderer(canvas);
 	}
 
-	static imageLoader(): ImageLoader {
+	imageLoader(): ImageLoader {
 		const file_reader = new FileReader();
 		return new ImageLoader(file_reader);
 	}

App/SignalService.ts

@@ -4,22 +4,30 @@ import Signal from "./Signal";
 
 export default class SignalService {
 	private static readonly error_message = "Could not connect to server, please try restarting";
+	private readonly connection: HubConnection;
 	readonly signals: Signal[];
 	status: string = "Connecting...";
 	last_updated: string = "";
 
 	constructor(connection: HubConnection, signals: Signal[]) {
+		this.connection = connection;
 		this.signals = signals;
+	}
 
-		connection.onreconnecting(() => this.status = "Reconnecting...");
-		connection.onreconnected(() => this.status = "");
-		connection.onclose(() => this.status = SignalService.error_message);
+	async start() {
+		this.connection.onreconnecting(() => this.status = "Reconnecting...");
+		this.connection.onreconnected(() => this.status = "");
+		this.connection.onclose(() => this.status = SignalService.error_message);
 
-		connection.on("Update", (message: Message) => this.update(message));
+		this.connection.on("Update", (message: Message) => this.update(message));
 
-		connection.start()
-			.then(() => this.status = "")
-			.catch(() => this.status = SignalService.error_message);
+		try {
+			await this.connection.start();
+			this.status = "";
+		}
+		catch {
+			this.status = SignalService.error_message;
+		}
 	}
 
 	update(message: Message): void {

App/app.ts

@@ -4,12 +4,15 @@ import Factory from "./Factory";
 
 Vue.config.devtools = true;
 
+const local = process.env.NODE_ENV === "production";
+const factory = new Factory(local);
+
 export default new Vue({
 	el: "app",
 	render: (r: Vue.CreateElement) => r(app),
 	provide: {
-		signal_service: Factory.signalService,
-		renderer: Factory.renderer,
-		image_loader: Factory.imageLoader
+		signal_service: factory.signalService,
+		renderer: factory.renderer,
+		image_loader: factory.imageLoader
 	}
 });

App/app.vue

@@ -3,7 +3,7 @@
 		<status :status="connection_status"></status>
 		<header-menu :last_updated="last_updated" @background="setBackground($event)"></header-menu>
 		<main-area :enabled="!connection_status"></main-area>
-		<debug-panel/>
+		<debug-panel />
 	</div>
 </template>
 
@@ -24,26 +24,29 @@ export default Vue.extend({
 	},
 	inject: {
 		signal_service_factory: "signal_service",
-	  renderer_factory: "renderer",
-	  image_loader_factory: "image_loader",
+		renderer_factory: "renderer",
+		image_loader_factory: "image_loader",
 	},
 	data: () => SharedState,
 	computed: {
 		connection_status(): string {
 			return this.signal_service != null
-					? this.signal_service.status
-					: "(loading...)"
+				? this.signal_service.status
+				: "(loading...)"
 		},
 		last_updated(): string {
 			return this.signal_service != null
-					? this.signal_service.last_updated
-					: "";
+				? this.signal_service.last_updated
+				: "";
 		}
 	},
 	mounted(): void {
-		const canvas = document.getElementById("webglcanvas") as HTMLCanvasElement;
 		this.signal_service = this.signal_service_factory(this.current.signals);
+		this.signal_service?.start();
+
+		const canvas = document.getElementById("webglcanvas") as HTMLCanvasElement;
 		this.renderer = this.renderer_factory(canvas);
+
 		this.image_loader = this.image_loader_factory();
 	},
 	watch: {