diff --git a/packages/frontend/src/pages/Models.spec.ts b/packages/frontend/src/pages/Models.spec.ts index d83709de0..056068581 100644 --- a/packages/frontend/src/pages/Models.spec.ts +++ b/packages/frontend/src/pages/Models.spec.ts @@ -16,7 +16,7 @@ * SPDX-License-Identifier: Apache-2.0 ***********************************************************************/ -import { vi, test, expect } from 'vitest'; +import { vi, test, expect, describe } from 'vitest'; import { screen, render, waitFor, within } from '@testing-library/svelte'; import Models from './Models.svelte'; import { router } from 'tinro'; @@ -145,91 +145,182 @@ test('should display one model', async () => { expect(name).toBeDefined(); }); -test('should display no model in downloaded tab', async () => { - mocks.modelsInfoSubscribeMock.mockReturnValue([ - { - id: 'dummy-id', - name: 'dummy-name', - memory: 1024, - }, - ]); - mocks.tasksSubscribeMock.mockReturnValue([]); +describe('downloaded models', () => { + test('should display no model in downloaded tab', async () => { + mocks.modelsInfoSubscribeMock.mockReturnValue([ + { + id: 'dummy-id', + name: 'dummy-name', + memory: 1024, + }, + ]); + mocks.tasksSubscribeMock.mockReturnValue([]); - render(Models); + render(Models); - router.goto('downloaded'); + router.goto('downloaded'); - await waitFor(() => { - const status = screen.getByRole('status'); - expect(status).toBeDefined(); + await waitFor(() => { + const status = screen.getByRole('status'); + expect(status).toBeDefined(); + }); }); -}); -test('should display a model in downloaded tab', async () => { - mocks.modelsInfoSubscribeMock.mockReturnValue([ - { - id: 'dummy-id', - name: 'dummy-name', - file: { - file: 'dummy', - path: 'dummy', + test('should display a model in downloaded tab', async () => { + mocks.modelsInfoSubscribeMock.mockReturnValue([ + { + id: 'dummy-id', + name: 'dummy-name', + file: { + file: 'dummy', + path: 'dummy', + }, + memory: 1024, + url: 'http://url', }, - memory: 1024, - }, - ]); - mocks.tasksSubscribeMock.mockReturnValue([]); + ]); + mocks.tasksSubscribeMock.mockReturnValue([]); - render(Models); + render(Models); - router.goto('downloaded'); + router.goto('downloaded'); - await waitFor(() => { - const table = screen.getByRole('table'); - expect(table).toBeDefined(); + await waitFor(() => { + const table = screen.getByRole('table'); + expect(table).toBeDefined(); + }); + }); + + test('should display only downloaded models', async () => { + mocks.modelsInfoSubscribeMock.mockReturnValue([ + { + id: 'dummy-id-downloaded', + name: 'dummy-downloaded-1', + file: { + file: 'dummy', + path: 'dummy', + }, + memory: 1024, + url: 'http://url', + }, + { + id: 'dummy-id-downloaded-2', + name: 'dummy-downloaded-2', + file: { + file: 'dummy', + path: 'dummy', + }, + memory: 1024, + url: 'http://url', + }, + { + id: 'dummy-id-imported', + name: 'dummy-imported', + file: { + file: 'dummy', + path: 'dummy', + }, + memory: 1024, + }, + ]); + mocks.tasksSubscribeMock.mockReturnValue([]); + + render(Models); + + router.goto('downloaded'); + + await waitFor(() => expect(screen.getByRole('table')).toBeDefined()); + + const rows = screen.getAllByRole('cell', { name: 'Model Name' }); + expect(rows.length).toBe(2); + expect((rows[0].firstChild as HTMLElement).title).toBe('dummy-downloaded-1'); + expect((rows[1].firstChild as HTMLElement).title).toBe('dummy-downloaded-2'); }); }); -test('should display a model in available tab', async () => { - mocks.modelsInfoSubscribeMock.mockReturnValue([ - { - id: 'dummy-id', - name: 'dummy-name', - memory: 1024, - }, - ]); - mocks.tasksSubscribeMock.mockReturnValue([]); +describe('imported models', () => { + test('should display no model in imported tab', async () => { + mocks.modelsInfoSubscribeMock.mockReturnValue([]); + mocks.tasksSubscribeMock.mockReturnValue([]); - render(Models); + render(Models); - router.goto('available'); + router.goto('imported'); - await waitFor(() => { - const table = screen.getByRole('table'); - expect(table).toBeDefined(); + await waitFor(() => { + const status = screen.getByRole('status'); + expect(status).toBeDefined(); + }); + }); + + test('should display a model in imported tab', async () => { + mocks.modelsInfoSubscribeMock.mockReturnValue([ + { + id: 'dummy-id', + name: 'dummy-name', + file: { + file: 'dummy', + path: 'dummy', + }, + memory: 1024, + }, + ]); + mocks.tasksSubscribeMock.mockReturnValue([]); + + render(Models); + + router.goto('imported'); + + await waitFor(() => { + const table = screen.getByRole('table'); + expect(table).toBeDefined(); + }); }); }); -test('should display no model in available tab', async () => { - mocks.modelsInfoSubscribeMock.mockReturnValue([ - { - id: 'dummy-id', - name: 'dummy-name', - file: { - file: 'dummy', - path: 'dummy', +describe('available models', () => { + test('should display a model in available tab', async () => { + mocks.modelsInfoSubscribeMock.mockReturnValue([ + { + id: 'dummy-id', + name: 'dummy-name', + memory: 1024, }, - memory: 1024, - }, - ]); - mocks.tasksSubscribeMock.mockReturnValue([]); + ]); + mocks.tasksSubscribeMock.mockReturnValue([]); - render(Models); + render(Models); - router.goto('available'); + router.goto('available'); - await waitFor(() => { - const status = screen.getByRole('status'); - expect(status).toBeDefined(); + await waitFor(() => { + const table = screen.getByRole('table'); + expect(table).toBeDefined(); + }); + }); + + test('should display no model in available tab', async () => { + mocks.modelsInfoSubscribeMock.mockReturnValue([ + { + id: 'dummy-id', + name: 'dummy-name', + file: { + file: 'dummy', + path: 'dummy', + }, + memory: 1024, + }, + ]); + mocks.tasksSubscribeMock.mockReturnValue([]); + + render(Models); + + router.goto('available'); + + await waitFor(() => { + const status = screen.getByRole('status'); + expect(status).toBeDefined(); + }); }); }); diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte index f691faacd..f776b4efd 100644 --- a/packages/frontend/src/pages/Models.svelte +++ b/packages/frontend/src/pages/Models.svelte @@ -51,8 +51,9 @@ let models: ModelInfo[] = []; // filtered mean, we remove the models that are being downloaded let filteredModels: ModelInfo[] = []; -$: localModels = filteredModels.filter(model => model.file); +$: localModels = filteredModels.filter(model => model.file && model.url); $: remoteModels = filteredModels.filter(model => !model.file); +$: importedModels = filteredModels.filter(model => !model.url); function filterModels(): void { // Let's collect the models we do not want to show (loading, error). @@ -108,6 +109,7 @@ async function importModel() { + @@ -145,6 +147,15 @@ async function importModel() { {/if} + + + {#if importedModels.length > 0} +
+ {:else} +
There are no models yet
+ {/if} +
+ {#if remoteModels.length > 0}