fix: uncaught errors in ModelPlayground (#256)

* fix: uncaught errors in ModelPlayground Signed-off-by: axel7083 <[email protected]> * fix: missing mocked resolved value Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]>
containers · Feb 9, 2024 · d23e549 · d23e549
1 parent d105f16
commit d23e549
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/packages/frontend/src/pages/ModelPlayground.spec.ts b/packages/frontend/src/pages/ModelPlayground.spec.ts
@@ -64,6 +64,7 @@ beforeEach(() => {
 
 test('playground should start when clicking on the play button', async () => {
   mocks.playgroundQueriesSubscribeMock.mockReturnValue([]);
+  mocks.startPlaygroundMock.mockResolvedValue(undefined);
   render(ModelPlayground, {
     model: {
       id: 'model1',
@@ -87,6 +88,35 @@ test('playground should start when clicking on the play button', async () => {
   });
 });
 
+test('playground should display error when clicking on the play button and an error occurs', async () => {
+  mocks.playgroundQueriesSubscribeMock.mockReturnValue([]);
+  mocks.startPlaygroundMock.mockRejectedValue('bad error');
+  render(ModelPlayground, {
+    model: {
+      id: 'model1',
+      name: 'Model 1',
+      description: 'A description',
+      hw: 'CPU',
+      registry: 'Hugging Face',
+      popularity: 3,
+      license: '?',
+      url: 'https://huggingface.co/TheBloke/Llama-2-7B-Chat-GGUF/resolve/main/llama-2-7b-chat.Q5_K_S.gguf',
+    } as ModelInfo,
+  });
+
+  const play = screen.getByTitle('playground-action');
+  expect(play).toBeDefined();
+
+  await fireEvent.click(play);
+
+  await waitFor(() => {
+    expect(mocks.startPlaygroundMock).toHaveBeenCalledOnce();
+    const alert = screen.getByRole('alert');
+    expect(alert).toBeDefined();
+    expect(alert.textContent).toBe('Something went wrong while trying to start playground: bad error');
+  });
+});
+
 test('should display query without response', async () => {
   mocks.playgroundQueriesSubscribeMock.mockReturnValue([
     {

diff --git a/packages/frontend/src/pages/ModelPlayground.svelte b/packages/frontend/src/pages/ModelPlayground.svelte
@@ -105,16 +105,20 @@
   }
 
   const onAction = () => {
-    if(playgroundState === undefined)
+    if(playgroundState === undefined || model?.id === undefined)
       return;
 
     switch (playgroundState.status) {
       case "none":
       case "stopped":
-        studioClient.startPlayground(model.id);
+        studioClient.startPlayground(model.id).catch((err: unknown) => {
+          error = `Something went wrong while trying to start playground: ${String(err)}`;
+        });
         break;
       case "running":
-        studioClient.stopPlayground(model.id);
+        studioClient.stopPlayground(model.id).catch((err: unknown) => {
+          error = `Something went wrong while trying to stop playground: ${String(err)}`;
+        });
         break;
       case "starting":
       case "stopping":