update libraries & correction oruga (frontend) - #1815
This commit is contained in:
Laurent GAY
@@ -0,0 +1,151 @@
|
||||
import { beforeEach, describe, it, expect } from "vitest";
|
||||
import { enUS } from "date-fns/locale";
|
||||
import { routes } from "@/router";
|
||||
import { createRouter, createWebHistory, Router } from "vue-router";
|
||||
import { config, mount } from "@vue/test-utils";
|
||||
import { Oruga } from "@oruga-ui/oruga-next";
|
||||
import flushPromises from "flush-promises";
|
||||
import { getMockClient, requestHandlers } from "../../mocks/client";
|
||||
import { htmlRemoveId } from "../../common";
|
||||
import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
|
||||
import { ADDRESS } from "@/graphql/address";
|
||||
|
||||
config.global.plugins.push(Oruga);
|
||||
|
||||
let router: Router;
|
||||
|
||||
beforeEach(async () => {
|
||||
router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: routes,
|
||||
});
|
||||
|
||||
// await router.isReady();
|
||||
});
|
||||
|
||||
const generateWrapper = (mock_addr: any = {}) => {
|
||||
const global_data = getMockClient([[ADDRESS, mock_addr]]);
|
||||
global_data.provide.dateFnsLocale = enUS;
|
||||
global_data.plugins = [router];
|
||||
return mount(FullAddressAutoComplete, {
|
||||
props: {},
|
||||
global: {
|
||||
...global_data,
|
||||
stubs: {
|
||||
RouterLink: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const mock_address = {
|
||||
data: {
|
||||
searchAddress: [
|
||||
{
|
||||
__typename: "Address",
|
||||
country: "France",
|
||||
description: "Lyon",
|
||||
geom: "4.8320114;45.7578137",
|
||||
id: null,
|
||||
locality: "Lyon",
|
||||
originId: "nominatim:120965",
|
||||
pictureInfo: null,
|
||||
postalCode: null,
|
||||
region: "Auvergne-Rhône-Alpes",
|
||||
street: " ",
|
||||
timezone: null,
|
||||
type: "city",
|
||||
url: null,
|
||||
},
|
||||
{
|
||||
__typename: "Address",
|
||||
country: "États-Unis d'Amérique",
|
||||
description: "Lyon County",
|
||||
geom: "-96.1683124;38.4573987",
|
||||
id: null,
|
||||
locality: null,
|
||||
originId: "nominatim:1070375",
|
||||
pictureInfo: null,
|
||||
postalCode: null,
|
||||
region: "Kansas",
|
||||
street: " ",
|
||||
timezone: null,
|
||||
type: "county",
|
||||
url: null,
|
||||
},
|
||||
{
|
||||
__typename: "Address",
|
||||
country: "France",
|
||||
description: "Lyon",
|
||||
geom: "4.735948;45.6963425",
|
||||
id: null,
|
||||
locality: "Rhône",
|
||||
originId: "nominatim:1663048",
|
||||
pictureInfo: null,
|
||||
postalCode: null,
|
||||
region: "Auvergne-Rhône-Alpes",
|
||||
street: " ",
|
||||
timezone: null,
|
||||
type: "city",
|
||||
url: null,
|
||||
},
|
||||
{
|
||||
__typename: "Address",
|
||||
country: "États-Unis d'Amérique",
|
||||
description: "Lyon",
|
||||
geom: "-90.5420429;34.2178865",
|
||||
id: null,
|
||||
locality: "Coahoma County",
|
||||
originId: "nominatim:109907",
|
||||
pictureInfo: null,
|
||||
postalCode: null,
|
||||
region: "Mississippi",
|
||||
street: " ",
|
||||
timezone: null,
|
||||
type: "city",
|
||||
url: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
describe("FullAddressAutoComplete", () => {
|
||||
it("Show simple", async () => {
|
||||
const wrapper = generateWrapper();
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
it("Show list", async () => {
|
||||
const wrapper = generateWrapper(mock_address);
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
|
||||
const input = wrapper.find("input");
|
||||
expect(input.exists()).toBeTruthy();
|
||||
await input.trigger("focus");
|
||||
await input.setValue("lyon");
|
||||
await input.trigger("input");
|
||||
await input.trigger("blur");
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
|
||||
|
||||
await input.trigger("keydown", { key: "Down" });
|
||||
await input.trigger("keydown", { key: "Enter" });
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
|
||||
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledWith({
|
||||
locale: "en_US",
|
||||
query: "lyon",
|
||||
type: undefined,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,138 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`FullAddressAutoComplete > Show list 1`] = `
|
||||
"<div class="address-autocomplete">
|
||||
<div data-oruga="field" class="o-field o-field--filled !-mt-2 flex" id="FullAddressAutoComplete-o-field"><label id="v-0-0" for="full-address-autocomplete-1" class="o-field__label">Find an address</label>
|
||||
<!--v-if-->
|
||||
<div data-oruga="autocomplete" class="o-dropdown o-dropdown--expanded o-dropdown--position-auto o-autocomplete">
|
||||
<div class="o-dropdown__trigger" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-disabled="false" aria-controls="v-0-2" aria-labelledby="v-0-0">
|
||||
<div data-oruga="input" class="o-input o-input--expanded"><span data-oruga="icon" class="o-icon o-input__icon-left"><i class="mdi mdi-map-marker mdi-24px"></i></span><input aria-labelledby="v-0-0" class="FullAddressAutoComplete-o-autocomplete !mt-0 !h-full o-input__input o-input__input--iconspace-left" aria-autocomplete="list" aria-controls="v-0-2" enterkeyhint="enter" id="full-address-autocomplete-1" type="text" data-oruga-input="text" autocomplete="off" placeholder="e.g. 10 Rue Jangot">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
<!---->
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<div id="v-0-2" tabindex="-1" class="o-dropdown__menu o-dropdown__menu--auto" style="max-height: 200px; overflow: auto; display: none;" role="listbox" aria-labelledby="v-0-0" aria-multiselectable="false">
|
||||
<!---->
|
||||
<!---->
|
||||
<div id="v-0-2-2" data-oruga="dropdown-item" data-id="dropdown-2" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item" role="option" tabindex="-1" aria-selected="false" aria-disabled="false">
|
||||
<p class="flex gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-city mdi-24px"></i></span><b>Lyon</b></p>
|
||||
<p class="text-small">Auvergne-Rhône-Alpes, France</p>
|
||||
</div>
|
||||
<div id="v-0-2-3" data-oruga="dropdown-item" data-id="dropdown-3" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item" role="option" tabindex="-1" aria-selected="false" aria-disabled="false">
|
||||
<p class="flex gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-map-marker mdi-24px"></i></span><b>Lyon County</b></p>
|
||||
<p class="text-small">Kansas, États-Unis d'Amérique</p>
|
||||
</div>
|
||||
<div id="v-0-2-4" data-oruga="dropdown-item" data-id="dropdown-4" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item" role="option" tabindex="-1" aria-selected="false" aria-disabled="false">
|
||||
<p class="flex gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-city mdi-24px"></i></span><b>Lyon</b></p>
|
||||
<p class="text-small">Auvergne-Rhône-Alpes, France</p>
|
||||
</div>
|
||||
<div id="v-0-2-5" data-oruga="dropdown-item" data-id="dropdown-5" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item" role="option" tabindex="-1" aria-selected="false" aria-disabled="false">
|
||||
<p class="flex gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-city mdi-24px"></i></span><b>Lyon</b></p>
|
||||
<p class="text-small">Mississippi, États-Unis d'Amérique</p>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</transition-stub>
|
||||
<!--teleport end-->
|
||||
</div><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--disabled reset-area !h-auto" disabled="" title="Clear address field"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-close mdi-24px"></i></span>
|
||||
<!---->
|
||||
<!----></span>
|
||||
</button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->"
|
||||
`;
|
||||
|
||||
exports[`FullAddressAutoComplete > Show list 2`] = `
|
||||
"<div class="address-autocomplete">
|
||||
<div data-oruga="field" class="o-field o-field--filled !-mt-2 flex" id="FullAddressAutoComplete-o-field"><label id="v-0-0" for="full-address-autocomplete-1" class="o-field__label">Find an address</label>
|
||||
<!--v-if-->
|
||||
<div data-oruga="autocomplete" class="o-dropdown o-dropdown--expanded o-dropdown--position-bottom o-dropdown--active o-autocomplete">
|
||||
<div class="o-dropdown__trigger" role="combobox" aria-haspopup="listbox" aria-expanded="true" aria-disabled="false" aria-controls="v-0-2" aria-labelledby="v-0-0">
|
||||
<div data-oruga="input" class="o-input o-input--expanded"><span data-oruga="icon" class="o-icon o-input__icon-left"><i class="mdi mdi-map-marker mdi-24px"></i></span><input aria-labelledby="v-0-0" class="FullAddressAutoComplete-o-autocomplete !mt-0 !h-full o-input__input o-input__input--iconspace-left" aria-autocomplete="list" aria-controls="v-0-2" enterkeyhint="enter" id="full-address-autocomplete-1" type="text" data-oruga-input="text" autocomplete="off" placeholder="e.g. 10 Rue Jangot">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
<!---->
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<div id="v-0-2" tabindex="-1" class="o-dropdown__menu o-dropdown__menu--bottom o-dropdown__menu--active" style="max-height: 200px; overflow: auto;" role="listbox" aria-labelledby="v-0-0" aria-multiselectable="false">
|
||||
<!---->
|
||||
<!---->
|
||||
<div id="v-0-2-2" data-oruga="dropdown-item" data-id="dropdown-2" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item" role="option" tabindex="-1" aria-selected="false" aria-disabled="false">
|
||||
<p class="flex gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-city mdi-24px"></i></span><b>Lyon</b></p>
|
||||
<p class="text-small">Auvergne-Rhône-Alpes, France</p>
|
||||
</div>
|
||||
<div id="v-0-2-3" data-oruga="dropdown-item" data-id="dropdown-3" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item" role="option" tabindex="-1" aria-selected="false" aria-disabled="false">
|
||||
<p class="flex gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-map-marker mdi-24px"></i></span><b>Lyon County</b></p>
|
||||
<p class="text-small">Kansas, États-Unis d'Amérique</p>
|
||||
</div>
|
||||
<div id="v-0-2-4" data-oruga="dropdown-item" data-id="dropdown-4" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item" role="option" tabindex="-1" aria-selected="false" aria-disabled="false">
|
||||
<p class="flex gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-city mdi-24px"></i></span><b>Lyon</b></p>
|
||||
<p class="text-small">Auvergne-Rhône-Alpes, France</p>
|
||||
</div>
|
||||
<div id="v-0-2-5" data-oruga="dropdown-item" data-id="dropdown-5" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item" role="option" tabindex="-1" aria-selected="false" aria-disabled="false">
|
||||
<p class="flex gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-city mdi-24px"></i></span><b>Lyon</b></p>
|
||||
<p class="text-small">Mississippi, États-Unis d'Amérique</p>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</transition-stub>
|
||||
<!--teleport end-->
|
||||
</div><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--disabled reset-area !h-auto" disabled="" title="Clear address field"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-close mdi-24px"></i></span>
|
||||
<!---->
|
||||
<!----></span>
|
||||
</button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->"
|
||||
`;
|
||||
|
||||
exports[`FullAddressAutoComplete > Show simple 1`] = `
|
||||
"<div class="address-autocomplete">
|
||||
<div data-oruga="field" class="o-field !-mt-2 flex" id="FullAddressAutoComplete-o-field"><label id="v-0-0" for="full-address-autocomplete-1" class="o-field__label">Find an address</label>
|
||||
<!--v-if-->
|
||||
<div data-oruga="autocomplete" class="o-dropdown o-dropdown--expanded o-dropdown--position-auto o-autocomplete">
|
||||
<div class="o-dropdown__trigger" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-disabled="false" aria-controls="v-0-2" aria-labelledby="v-0-0">
|
||||
<div data-oruga="input" class="o-input o-input--expanded"><span data-oruga="icon" class="o-icon o-input__icon-left"><i class="mdi mdi-map-marker mdi-24px"></i></span><input aria-labelledby="v-0-0" class="FullAddressAutoComplete-o-autocomplete !mt-0 !h-full o-input__input o-input__input--iconspace-left o-input__input--placeholder" aria-autocomplete="list" aria-controls="v-0-2" enterkeyhint="enter" id="full-address-autocomplete-1" type="text" data-oruga-input="text" autocomplete="off" placeholder="e.g. 10 Rue Jangot">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
<!---->
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<div id="v-0-2" tabindex="-1" class="o-dropdown__menu o-dropdown__menu--auto" style="max-height: 200px; overflow: auto; display: none;" role="listbox" aria-labelledby="v-0-0" aria-multiselectable="false">
|
||||
<!---->
|
||||
<!---->
|
||||
<div id="v-0-2-1" data-oruga="dropdown-item" data-id="dropdown-1" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item o-autocomplete__item--empty" role="option" tabindex="-1" aria-selected="false" aria-disabled="false"></div>
|
||||
<!---->
|
||||
</div>
|
||||
</transition-stub>
|
||||
<!--teleport end-->
|
||||
</div><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--disabled reset-area !h-auto" disabled="" title="Clear address field"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-close mdi-24px"></i></span>
|
||||
<!---->
|
||||
<!----></span>
|
||||
</button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->"
|
||||
`;
|
||||
Reference in New Issue
Block a user