Add more tests

app/api/ShlinkApiProxyClient.client.ts

@@ -22,7 +22,7 @@ import type {
 } from '@shlinkio/shlink-js-sdk/api-contract';
 
 export class ShlinkApiProxyClient implements ShlinkApiClient {
-  constructor(private readonly serverId: string) {
+  constructor(private readonly serverId: string, private readonly fetch = window.fetch.bind(window)) {
   }
 
   createShortUrl(options: ShlinkCreateShortUrlData): Promise<ShlinkShortUrl> {
@@ -126,7 +126,7 @@ export class ShlinkApiProxyClient implements ShlinkApiClient {
   }
 
   private async performRequest<T>(action: string, ...args: unknown[]): Promise<T> {
-    const resp = await fetch(`/server/${this.serverId}/shlink-api/${action}`, {
+    const resp = await this.fetch(`/server/${this.serverId}/shlink-api/${action}`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

app/routes/server.$serverId.shlink-api.$method.tsx → app/routes/server.$serverId.shlink-api.$method.ts

@@ -2,8 +2,8 @@
 import { json } from '@remix-run/node';
 import { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
 import { NodeHttpClient } from '@shlinkio/shlink-js-sdk/node';
-import { appDataSource } from '../db/data-source.server';
-import { ServerEntity } from '../entities/Server';
+import type { Server } from '../entities/Server';
+import { ServersService } from '../servers/ServersService.server';
 
 type Callback = (...args: unknown[]) => unknown;
 
@@ -19,17 +19,18 @@
   return args.length >= callback.length;
 }
 
-export async function action({ params, request }: ActionFunctionArgs) {
+export async function action(
+  { params, request }: ActionFunctionArgs,
+  serversService = new ServersService(),
+  createApiClient = (server: Server) => new ShlinkApiClient(new NodeHttpClient(), server),
+) {
   try {
-    const { method, serverId } = params;
+    const { method, serverId = '' } = params;
 
     // TODO Make sure current user has access for this server
-    const server = await appDataSource.manager.findOneBy(ServerEntity, { publicId: serverId });
-    if (!server) {
-      return json({}, 404); // TODO Return some useful info in Problem Details format
-    }
+    const server = await serversService.getByPublicId(serverId);
 
-    const client = new ShlinkApiClient(new NodeHttpClient(), server);
+    const client = createApiClient(server);
     if (!method || !actionInApiClient(method, client)) {
       return json({}, 404); // TODO Return some useful info in Problem Details format
     }
@@ -48,7 +49,7 @@
 
     return json(response);
   } catch (e) {
     console.error(e);
     return json({}, 500); // TODO Return some useful info in Problem Details format
   }
 }

app/routes/server.$serverId.tags.colors.tsx → app/routes/server.$serverId.tags.colors.ts

@@ -1,5 +1,4 @@
 import type { ActionFunctionArgs } from '@remix-run/node';
-import { json } from '@remix-run/node';
 import { TagsService } from '../tags/TagsService.server';
 
 export async function action({ params, request }: ActionFunctionArgs, tagsService = new TagsService()) {
@@ -10,6 +9,5 @@ export async function action({ params, request }: ActionFunctionArgs, tagsServic
 
   await tagsService.updateTagColors({ colors, userId, serverPublicId });
 
-  // TODO Return new colors
-  return json({});
+  return new Response(null, { status: 204 });
 }

app/servers/ServersService.server.ts

@@ -0,0 +1,17 @@
+import type { EntityManager } from 'typeorm';
+import { appDataSource } from '../db/data-source.server';
+import type { Server } from '../entities/Server';
+import { ServerEntity } from '../entities/Server';
+
+export class ServersService {
+  constructor(private readonly em: EntityManager = appDataSource.manager) {}
+
+  public async getByPublicId(publicId: string): Promise<Server> {
+    const server = await this.em.findOneBy(ServerEntity, { publicId });
+    if (!server) {
+      throw new Error(`Server with public ID ${publicId} not found`);
+    }
+
+    return server;
+  }
+}

app/tags/TagsService.server.ts

@@ -15,6 +15,11 @@ export type UpdateTagColorsParam = FindTagsParam & {
   colors: Record<string, string>;
 };
 
+type ServerAndUserResult = {
+  server: Server | null;
+  user: User | null;
+};
+
 export class TagsService {
   constructor(private readonly em: EntityManager = appDataSource.manager) {
   }
@@ -42,22 +47,31 @@ export class TagsService {
       return;
     }
 
-    // FIXME MS SQL Server does not support upsert
-    await this.em.transaction((em) => em.upsert(
-      TagEntity,
-      Object.entries(colors).map(([tag, color]) => ({
-        tag,
-        color: color as string,
-        user,
-        server,
-      })),
-      ['tag', 'user', 'server'],
-    ));
+    const isMs = this.em.connection.options.type === 'mssql';
+    await this.em.transaction((em): Promise<unknown> => {
+      if (!isMs) {
+        return em.upsert(
+          TagEntity,
+          Object.entries(colors).map(([tag, color]) => ({ tag, color, user, server })),
+          ['tag', 'user', 'server'],
+        );
+      }
+
+      // MS SQL Server does not support upsert
+      return Promise.all(Object.entries(colors).map(async ([tag, color]) => {
+        const tagEntity = await em.findOneBy(TagEntity, { user, server, tag }).then(
+          // If a tag was not found, create it
+          (result) => result ?? em.create(TagEntity, { user, server, tag, color }),
+        );
+
+        tagEntity.color = color;
+
+        await em.save(tagEntity);
+      }));
+    });
   }
 
-  private async resolveServerAndUser(
-    { userId, serverPublicId }: FindTagsParam,
-  ): Promise<{ server: Server | null; user: User | null }> {
+  private async resolveServerAndUser({ userId, serverPublicId }: FindTagsParam): Promise<ServerAndUserResult> {
     const [server, user] = await Promise.all([
       serverPublicId ? this.em.findOneBy(ServerEntity, { publicId: serverPublicId }) : null,
       this.em.findOneBy(UserEntity, { id: userId }),

app/tags/TagsStorage.client.ts

@@ -13,7 +13,11 @@
 }
 
 export class TagsStorage implements TagColorsStorage {
-  constructor(private colors: Record<string, string>, private readonly saveEndpoint: string) {
+  constructor(
+    private colors: Record<string, string>,
+    private readonly saveEndpoint: string,
+    private readonly fetch = window.fetch.bind(window),
+  ) {
   }
 
   getTagColors(): Record<string, string> {
@@ -30,10 +34,10 @@
       return;
     }
 
-    fetch(this.saveEndpoint, {
+    this.fetch(this.saveEndpoint, {
       method: 'POST',
       body: JSON.stringify(changedColors),
       headers: { 'Content-Type': 'application/json' },
     }).catch(console.error); // TODO Handle error
   }
 }

app/utils/env.server.ts

@@ -5,7 +5,7 @@ const supportedDbEngines = ['mysql', 'postgres', 'mariadb', 'sqlite', 'mssql'] a
 export type DbEngine = typeof supportedDbEngines[number];
 
 const envVariables = z.object({
-  NODE_ENV: z.enum(['production', 'development']).optional(),
+  NODE_ENV: z.enum(['production', 'development', 'test']).optional(),
 
   // Database connection options
   SHLINK_DASHBOARD_DB_DRIVER: z.enum(supportedDbEngines).optional(),

docker-compose.yml

@@ -9,6 +9,7 @@ services:
       - ./:/home/shlink-dashboard
     ports:
       - "3005:3005"
+      - "24678:24678" # Vite dev server web socket port
     links:
       - shlink_dashboard_db_postgres
     environment: