diff --git a/assets/components.d.ts b/assets/components.d.ts index 52878756..f5b9999d 100644 --- a/assets/components.d.ts +++ b/assets/components.d.ts @@ -60,7 +60,6 @@ declare module 'vue' { 'Mdi:cog': typeof import('~icons/mdi/cog')['default'] 'Mdi:hamburgerMenu': typeof import('~icons/mdi/hamburger-menu')['default'] 'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default'] - 'Mdi:logout': typeof import('~icons/mdi/logout')['default'] 'Mdi:magnify': typeof import('~icons/mdi/magnify')['default'] MobileMenu: typeof import('./components/common/MobileMenu.vue')['default'] 'Octicon:container24': typeof import('~icons/octicon/container24')['default'] diff --git a/assets/components/FuzzySearchModal.spec.ts b/assets/components/FuzzySearchModal.spec.ts new file mode 100644 index 00000000..34244d11 --- /dev/null +++ b/assets/components/FuzzySearchModal.spec.ts @@ -0,0 +1,60 @@ +import { createTestingPinia } from "@pinia/testing"; +import { mount } from "@vue/test-utils"; + +import FuzzySearchModal from "./FuzzySearchModal.vue"; + +import { Container } from "@/models/Container"; +import { describe, expect, test, vi } from "vitest"; +import { createI18n } from "vue-i18n"; + +// @ts-ignore +import EventSource, { sources } from "eventsourcemock"; + +vi.mock("@/stores/config", () => ({ + __esModule: true, + default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] }, + withBase: (path: string) => path, +})); + +function createFuzzySearchModal() { + global.EventSource = EventSource; + const wrapper = mount(FuzzySearchModal, { + global: { + plugins: [ + createI18n({}), + createTestingPinia({ + createSpy: vi.fn, + initialState: { + container: { + containers: [ + new Container("123", new Date(), "image", "test", "command", "host", {}, "status", "running"), + new Container("123", new Date(), "image", "foo bar", "command", "host", {}, "status", "running"), + new Container("123", new Date(), "image", "baz", "command", "host", {}, "status", "exited"), + ], + }, + }, + }), + ], + }, + }); + return wrapper; +} + +/** + * @vitest-environment jsdom + */ +describe("", () => { + test("shows all", async () => { + const wrapper = createFuzzySearchModal(); + expect(wrapper.findAll("li").length).toBe(3); + }); + + test("search for foo", async () => { + const wrapper = createFuzzySearchModal(); + await wrapper.find("input").setValue("foo"); + expect(wrapper.findAll("li").length).toBe(1); + expect(wrapper.find("ul [data-name]").html()).toMatchInlineSnapshot( + `"foo bar"`, + ); + }); +}); diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue index 068fb7cf..91b0c5c7 100644 --- a/assets/components/FuzzySearchModal.vue +++ b/assets/components/FuzzySearchModal.vue @@ -16,24 +16,28 @@