hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

update frontend lib : remove histoire (obselete) + update vitest - #1815

Browse Source
This commit is contained in:
Laurent GAY
2025-10-24 13:00:15 +02:00
committed by setop
parent ffa3e0ebd7
commit d971fd77af
192 changed files with 4767 additions and 5300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
tests/unit/specs/components/Event/DateCalendarIcon.spec.ts Normal file
View File

@@ -0,0 +1,59 @@
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 } from "../../mocks/client";
import { htmlRemoveId } from "../../common";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
config.global.plugins.push(Oruga);
let router: Router;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
// await router.isReady();
});
const generateWrapper = (props: any) => {
const global_data = getMockClient([]);
global_data.provide.dateFnsLocale = enUS;
global_data.plugins = [router];
return mount(DateCalendarIcon, {
props: props,
global: {
...global_data,
stubs: {
RouterLink: false,
},
},
});
};
describe("DateCalendarIcon", () => {
it("Show new", async () => {
const wrapper = generateWrapper({
date: new Date().toString(),
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show small", async () => {
const wrapper = generateWrapper({
date: new Date().toString(),
small: true,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
});

219
tests/unit/specs/components/Event/EventCard.spec.ts Normal file
View File

@@ -0,0 +1,219 @@
import { beforeEach, describe, it, expect, vi } 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 } from "../../mocks/client";
import { htmlRemoveId } from "../../common";
import EventCard from "@/components/Event/EventCard.vue";
import { IActor } from "@/types/actor";
import {
ActorType,
CommentModeration,
EventJoinOptions,
EventStatus,
EventVisibility,
} from "@/types/enums";
import { IEvent } from "@/types/event.model";
import { reactive } from "vue";
config.global.plugins.push(Oruga);
let router: Router;
class MockIntersectionObserver implements IntersectionObserver {
root: Document | Element | null = null;
rootMargin: string = ``;
thresholds: readonly number[] = [];
disconnect = vi.fn();
observe = vi.fn();
takeRecords = vi.fn();
unobserve = vi.fn();
}
window.IntersectionObserver = MockIntersectionObserver;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
});
const generateWrapper = (props: any) => {
const global_data = getMockClient([]);
global_data.provide.dateFnsLocale = enUS;
global_data.plugins = [router];
return mount(EventCard, {
props: props,
global: {
...global_data,
stubs: {
RouterLink: false,
},
},
});
};
const baseActorAvatar = {
id: "",
name: "",
alt: "",
metadata: {},
url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
};
const baseActor: IActor = {
name: "Thomas Citharel",
preferredUsername: "tcit",
avatar: baseActorAvatar,
domain: null,
url: "",
summary: "",
suspended: false,
type: ActorType.PERSON,
};
const baseEvent: IEvent = {
uuid: "0123456789",
title: "A very interesting event",
description: "Things happen",
beginsOn: "2022-02-02T02:04:00.000Z",
endsOn: "2022-02-02T02:04:00.000Z",
physicalAddress: {
description: "Somewhere",
street: "",
locality: "",
region: "",
country: "",
type: "",
postalCode: "",
},
picture: {
id: "",
name: "",
alt: "",
metadata: {},
url: "https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png",
},
url: "",
local: true,
slug: "",
publishAt: new Date().toISOString(),
status: EventStatus.CONFIRMED,
visibility: EventVisibility.PUBLIC,
joinOptions: EventJoinOptions.FREE,
draft: false,
participantStats: {
notApproved: 0,
notConfirmed: 0,
rejected: 0,
participant: 0,
creator: 0,
moderator: 0,
administrator: 0,
going: 0,
},
participants: { total: 0, elements: [] },
relatedEvents: [],
tags: [{ slug: "something", title: "Something" }],
attributedTo: undefined,
organizerActor: {
...baseActor,
name: "Hello",
avatar: {
...baseActorAvatar,
url: "https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png",
},
},
comments: [],
options: {
maximumAttendeeCapacity: 0,
remainingAttendeeCapacity: 0,
showRemainingAttendeeCapacity: false,
anonymousParticipation: false,
hideOrganizerWhenGroupEvent: false,
offers: [],
participationConditions: [],
attendees: [],
program: "",
commentModeration: CommentModeration.ALLOW_ALL,
showParticipationPrice: false,
showStartTime: false,
showEndTime: false,
timezone: null,
isOnline: false,
},
metadata: [],
contacts: [],
language: "en",
category: "hello",
};
const event = reactive<IEvent>(baseEvent);
const longEvent = reactive<IEvent>({
...baseEvent,
title:
"A very long title that will have trouble to display because it will take multiple lines but where will it stop ?! Maybe after 3 lines is enough. Let's say so. But if it doesn't work, we really need to truncate it at some point. Definitively.",
});
const tentativeEvent = reactive<IEvent>({
...baseEvent,
status: EventStatus.TENTATIVE,
});
const cancelledEvent = reactive<IEvent>({
...baseEvent,
status: EventStatus.CANCELLED,
});
describe("EventCard", () => {
it("Show default", async () => {
const wrapper = generateWrapper({
event: event,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show long", async () => {
const wrapper = generateWrapper({
event: longEvent,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show tentative", async () => {
const wrapper = generateWrapper({
event: tentativeEvent,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show cancelled", async () => {
const wrapper = generateWrapper({
event: cancelledEvent,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show Row mode", async () => {
const wrapper = generateWrapper({
event: longEvent,
mode: "row",
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
});

169
tests/unit/specs/components/Event/EventListViewCard.spec.ts Normal file
View File

@@ -0,0 +1,169 @@
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 } from "../../mocks/client";
import { htmlRemoveId } from "../../common";
import EventListViewCard from "@/components/Event/EventListViewCard.vue";
import { IActor } from "@/types/actor";
import {
ActorType,
CommentModeration,
EventJoinOptions,
EventStatus,
EventVisibility,
} from "@/types/enums";
import { IEvent } from "@/types/event.model";
import { reactive } from "vue";
config.global.plugins.push(Oruga);
let router: Router;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
// await router.isReady();
});
const generateWrapper = (props: any) => {
const global_data = getMockClient([]);
global_data.provide.dateFnsLocale = enUS;
global_data.plugins = [router];
return mount(EventListViewCard, {
props: props,
global: {
...global_data,
stubs: {
RouterLink: false,
},
},
});
};
const baseActorAvatar = {
id: "",
name: "",
alt: "",
metadata: {},
url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
};
const baseActor: IActor = {
name: "Thomas Citharel",
preferredUsername: "tcit",
avatar: baseActorAvatar,
domain: null,
url: "",
summary: "",
suspended: false,
type: ActorType.PERSON,
};
const baseEvent: IEvent = {
uuid: "0123456789",
title: "A very interesting event",
description: "Things happen",
beginsOn: "2022-02-02T02:04:00.000Z",
endsOn: "2022-02-04T02:04:00.000Z",
physicalAddress: {
description: "Somewhere",
street: "",
locality: "",
region: "",
country: "",
type: "",
postalCode: "",
},
picture: {
id: "",
name: "",
alt: "",
metadata: {},
url: "https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png",
},
url: "",
local: true,
slug: "",
publishAt: "2022-02-02T02:04:00.000Z",
status: EventStatus.CONFIRMED,
visibility: EventVisibility.PUBLIC,
joinOptions: EventJoinOptions.FREE,
draft: false,
participantStats: {
notApproved: 0,
notConfirmed: 0,
rejected: 0,
participant: 0,
creator: 0,
moderator: 0,
administrator: 0,
going: 0,
},
participants: { total: 0, elements: [] },
relatedEvents: [],
tags: [{ slug: "something", title: "Something" }],
attributedTo: undefined,
organizerActor: {
...baseActor,
name: "Hello",
avatar: {
...baseActorAvatar,
url: "https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png",
},
},
comments: [],
options: {
maximumAttendeeCapacity: 0,
remainingAttendeeCapacity: 0,
showRemainingAttendeeCapacity: false,
anonymousParticipation: false,
hideOrganizerWhenGroupEvent: false,
offers: [],
participationConditions: [],
attendees: [],
program: "",
commentModeration: CommentModeration.ALLOW_ALL,
showParticipationPrice: false,
showStartTime: false,
showEndTime: false,
timezone: null,
isOnline: false,
},
metadata: [],
contacts: [],
language: "en",
category: "hello",
};
const longEvent = reactive<IEvent>({
...baseEvent,
title:
"A very long title that will have trouble to display because it will take multiple lines but where will it stop ?! Maybe after 3 lines is enough. Let's say so.",
});
describe("EventListViewCard", () => {
it("Show default", async () => {
const wrapper = generateWrapper({
event: baseEvent,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show long", async () => {
const wrapper = generateWrapper({
event: longEvent,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
});

78
tests/unit/specs/components/Event/OrganizerPicker.spec.ts Normal file
View File

@@ -0,0 +1,78 @@
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 } from "../../mocks/client";
import { htmlRemoveId } from "../../common";
import OrganizerPicker from "@/components/Event/OrganizerPicker.vue";
import { reactive, ref } from "vue";
import { ActorType } from "@/types/enums";
config.global.plugins.push(Oruga);
let router: Router;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
// await router.isReady();
});
const currentActor = reactive({
id: "59",
preferredUsername: "me",
name: "Someone",
type: ActorType.PERSON,
});
const actor = reactive({
id: "5",
preferredUsername: "hello",
name: "Sigmund",
type: ActorType.PERSON,
});
const group = reactive({
id: "89",
preferredUsername: "congregation",
name: "College",
type: ActorType.GROUP,
});
const identities = [actor, group];
const generateWrapper = () => {
const global_data = getMockClient([]);
global_data.provide.dateFnsLocale = enUS;
global_data.plugins = [router];
return mount(OrganizerPicker, {
props: {
modelValue: actor,
identities: identities,
actorFilter: "",
groupMemberships: [],
currentActor: currentActor,
},
global: {
...global_data,
stubs: {
RouterLink: false,
},
},
});
};
describe("OrganizerPicker", () => {
it("Show simple", async () => {
const wrapper = generateWrapper();
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
});

73
tests/unit/specs/components/Event/OrganizerPickerWrapper.spec.ts Normal file
View File

@@ -0,0 +1,73 @@
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 OrganizerPickerWrapper from "@/components/Event/OrganizerPickerWrapper.vue";
import { PERSON_GROUP_MEMBERSHIPS } from "@/graphql/actor";
import { IDENTITIES } from "@/graphql/actor";
config.global.plugins.push(Oruga);
let router: Router;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
// await router.isReady();
});
const mock_person = {
data: {
person: { id: "5", memberships: { total: 0, elements: [] } },
},
};
const mock_loggeduser = {
data: {
loggedUser: {
actors: [{ id: "9", preferredUsername: "sam", name: "Samuel" }],
},
},
};
const generateWrapper = () => {
const global_data = getMockClient([
[PERSON_GROUP_MEMBERSHIPS, mock_person],
[IDENTITIES, mock_loggeduser],
]);
global_data.provide.dateFnsLocale = enUS;
global_data.plugins = [router];
return mount(OrganizerPickerWrapper, {
props: {
modelValue: {
id: "5",
preferredUsername: "hello",
name: "Sigmund",
},
},
global: {
...global_data,
stubs: {
RouterLink: false,
},
},
});
};
describe("OrganizerPickerWrapper", () => {
it("Show simple", async () => {
const wrapper = generateWrapper();
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
expect(requestHandlers.handle_1).toHaveBeenCalledTimes(0);
});
});

160
tests/unit/specs/components/Event/ParticipationButton.spec.ts Normal file
View File

@@ -0,0 +1,160 @@
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 } from "../../mocks/client";
import { htmlRemoveId } from "../../common";
import ParticipationButton from "@/components/Event/ParticipationButton.vue";
import { IPerson } from "@/types/actor";
import { EventJoinOptions, ParticipantRole } from "@/types/enums";
import { IEvent } from "@/types/event.model";
import { IParticipant } from "@/types/participant.model";
config.global.plugins.push(Oruga);
let router: Router;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
// await router.isReady();
});
const generateWrapper = (props) => {
const global_data = getMockClient([]);
global_data.provide.dateFnsLocale = enUS;
global_data.plugins = [router];
return mount(ParticipationButton, {
props: props,
global: {
...global_data,
stubs: {
RouterLink: false,
},
},
});
};
const emptyCurrentActor: IPerson = {};
const currentActor: IPerson = {
id: "1",
preferredUsername: "tcit",
name: "Thomas",
avatar: {
url: "https://mobilizon.fr/media/3a5f18c058a8193b1febfaf561f94ae8b91f85ac64c01ddf5ad7b251fb43baf5.jpg?name=profil.jpg",
},
};
const participation: IParticipant = {
actor: currentActor,
role: ParticipantRole.PARTICIPANT,
};
const identities: IPerson[] = [
currentActor,
{
id: "2",
preferredUsername: "another",
name: "Another",
avatar: {
url: "https://mobilizon.fr/media/95ab5ba92287ab4857bb517cadae2a7ab6a553748d1c48cefc27e2b7ab640fea.jpg?name=FB_IMG_16150214351371162.jpg",
},
},
];
const event: IEvent = {
uuid: "0123456789",
title: "hello",
url: "https://mobilizon.fr/events/an-uuid",
options: {
anonymousParticipation: false,
},
joinOptions: EventJoinOptions.FREE,
};
describe("ParticipationButton", () => {
it("Show Unlogged", async () => {
const wrapper = generateWrapper({
event: event,
currentActor: emptyCurrentActor,
participation: undefined,
identities: [],
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show Basic", async () => {
const wrapper = generateWrapper({
event: event,
currentActor: currentActor,
participation: undefined,
identities: identities,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show Basic with confirmation", async () => {
const wrapper = generateWrapper({
event: { ...event, joinOptions: EventJoinOptions.RESTRICTED },
currentActor: currentActor,
participation: undefined,
identities: identities,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show Participating", async () => {
const wrapper = generateWrapper({
event: event,
currentActor: currentActor,
participation: participation,
identities: identities,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show Pending approval", async () => {
const wrapper = generateWrapper({
event: event,
currentActor: currentActor,
participation: {
...participation,
role: ParticipantRole.NOT_APPROVED,
},
identities: identities,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show Rejected", async () => {
const wrapper = generateWrapper({
event: event,
currentActor: currentActor,
participation: {
...participation,
role: ParticipantRole.REJECTED,
},
identities: identities,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
});

92
tests/unit/specs/components/Event/ShareEventModal.spec.ts Normal file
View File

@@ -0,0 +1,92 @@
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 ShareEventModal from "@/components/Event/ShareEventModal.vue";
import { EventVisibility, EventStatus } from "@/types/enums";
config.global.plugins.push(Oruga);
let router: Router;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
// await router.isReady();
});
const generateWrapper = (event: any, eventCapacityOK: boolean = true) => {
const global_data = getMockClient([]);
global_data.provide.dateFnsLocale = enUS;
global_data.plugins = [router];
return mount(ShareEventModal, {
props: {
event: event,
eventCapacityOK: eventCapacityOK,
},
global: {
...global_data,
stubs: {
RouterLink: false,
},
},
});
};
describe("ShareEventModal", () => {
it("Show Public", async () => {
const wrapper = generateWrapper({
title: "hello",
url: "https://mobilizon.fr/events/an-uuid",
visibility: EventVisibility.PUBLIC,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show Private", async () => {
const wrapper = generateWrapper({
title: "hello",
url: "https://mobilizon.fr/events/an-uuid",
visibility: EventVisibility.PRIVATE,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show Cancelled", async () => {
const wrapper = generateWrapper({
title: "hello",
url: "https://mobilizon.fr/events/an-uuid",
visibility: EventVisibility.PUBLIC,
status: EventStatus.CANCELLED,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show No seats left", async () => {
const wrapper = generateWrapper(
{
title: "hello",
url: "https://mobilizon.fr/events/an-uuid",
visibility: EventVisibility.PUBLIC,
},
false
);
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
});

65
tests/unit/specs/components/Event/SkeletonEventResult.spec.ts Normal file
View File

@@ -0,0 +1,65 @@
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 } from "../../mocks/client";
import { htmlRemoveId } from "../../common";
import SkeletonEventResult from "@/components/Event/SkeletonEventResult.vue";
config.global.plugins.push(Oruga);
let router: Router;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
// await router.isReady();
});
const generateWrapper = (props: any = {}) => {
const global_data = getMockClient([]);
global_data.provide.dateFnsLocale = enUS;
global_data.plugins = [router];
return mount(SkeletonEventResult, {
props: props,
global: {
...global_data,
stubs: {
RouterLink: false,
},
},
});
};
describe("SkeletonEventResult", () => {
it("Show row", async () => {
const wrapper = generateWrapper();
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show column", async () => {
const wrapper = generateWrapper({
viewMode: "column",
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
it("Show not minimal", async () => {
const wrapper = generateWrapper({
minimal: false,
});
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
});
});

55
tests/unit/specs/components/Event/TagInput.spec.ts Normal file
View File

@@ -0,0 +1,55 @@
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 TagInput from "@/components/Event/TagInput.vue";
import { FILTER_TAGS } from "@/graphql/tags";
import { ITag } from "@/types/tag.model";
import { reactive } from "vue";
config.global.plugins.push(Oruga);
let router: Router;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
// await router.isReady();
});
const tags = reactive<ITag[]>([{ title: "Hello", slug: "hello" }]);
const generateWrapper = () => {
const global_data = getMockClient([FILTER_TAGS]);
global_data.provide.dateFnsLocale = enUS;
global_data.plugins = [router];
return mount(TagInput, {
props: {
modelValue: tags,
},
global: {
...global_data,
stubs: {
RouterLink: false,
},
},
});
};
describe("TagInput", () => {
it("Show new", async () => {
const wrapper = generateWrapper();
await wrapper.vm.$nextTick();
await flushPromises();
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
});
});

17
tests/unit/specs/components/Event/__snapshots__/DateCalendarIcon.spec.ts.snap Normal file
View File

@@ -0,0 +1,17 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`DateCalendarIcon > Show new 1`] = `
"<div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black dark:text-white" style="--small: 2;">
<div data-v-1df97f42="" class="datetime-container-header bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
<div data-v-1df97f42="" class="datetime-container-footer bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="year">2022</time></div>
</div>"
`;
exports[`DateCalendarIcon > Show small 1`] = `
"<div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black dark:text-white small" style="--small: 1.2;">
<div data-v-1df97f42="" class="datetime-container-header bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
<div data-v-1df97f42="" class="datetime-container-footer bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="year">2022</time></div>
</div>"
`;

252
tests/unit/specs/components/Event/__snapshots__/EventCard.spec.ts.snap Normal file
View File

@@ -0,0 +1,252 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`EventCard > Show Row mode 1`] = `
"<a data-v-4bd07c72="" href="/events/0123456789" class="mbz-card snap-center dark:bg-mbz-purple sm:flex sm:items-start">
<div data-v-4bd07c72="" class="rounded-lg sm:w-full sm:max-w-[20rem]">
<div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 sm:hidden calendar-simple">
<div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black dark:text-white small" style="--small: 1.2;">
<div data-v-1df97f42="" class="datetime-container-header bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
<div data-v-1df97f42="" class="datetime-container-footer bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="year">2022</time></div>
</div>
<!--v-if-->
<!--v-if-->
</div>
<figure data-v-4bd07c72="" class="block relative pt-40">
<div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
<div class="h-full w-full max-w-100 min-h-[10rem]">
<!-- Show the placeholder as background -->
<!--v-if-->
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png" loading="lazy">
</div>
</div>
<div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end" style="display: none;">
<!--v-if-->
<!--v-if--><a data-v-4bd07c72="" href="/tag/Something" class=""><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></a>
</div>
</figure>
</div>
<div data-v-4bd07c72="" class="p-2 flex-auto sm:flex-1">
<div data-v-4bd07c72="" class="relative flex flex-col h-full">
<div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end sm:hidden">
<!--v-if-->
</div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden sm:block">Feb 2, 2022, 3:04 AM</span>
<!--v-if-->
<div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
<h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very long title that will have trouble to display because it will take multiple lines but where will it stop&nbsp;?! Maybe after 3 lines is enough. Let's say so. But if it doesn't work, we really need to truncate it at some point. Definitively.</h2>
<div data-v-4bd07c72="" class="">
<div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
<figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
</div>
<div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
<div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden sm:flex">
<!--v-if-->
<!--v-if-->
<!--v-if--><a data-v-4bd07c72="" href="/tag/Something" class=""><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></a>
</div>
</div>
</div>
</div>
</div>
</a>"
`;
exports[`EventCard > Show cancelled 1`] = `
"<a data-v-4bd07c72="" href="/events/0123456789" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
<div data-v-4bd07c72="" class="rounded-lg">
<div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
<div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black dark:text-white small" style="--small: 1.2;">
<div data-v-1df97f42="" class="datetime-container-header bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
<div data-v-1df97f42="" class="datetime-container-footer bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="year">2022</time></div>
</div>
<!--v-if-->
<!--v-if-->
</div>
<figure data-v-4bd07c72="" class="block relative pt-40">
<div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
<div class="h-full w-full max-w-100 min-h-[10rem]">
<!-- Show the placeholder as background -->
<!--v-if-->
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png" loading="lazy">
</div>
</div>
<div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end">
<!--v-if--><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-danger dark:text-white">Cancelled</span><a data-v-4bd07c72="" href="/tag/Something" class=""><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></a>
</div>
</figure>
</div>
<div data-v-4bd07c72="" class="p-2 flex-auto">
<div data-v-4bd07c72="" class="relative flex flex-col h-full">
<div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
<!--v-if-->
</div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden">Feb 2, 2022, 3:04 AM</span>
<!--v-if-->
<div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
<h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very interesting event</h2>
<div data-v-4bd07c72="" class="">
<div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
<figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
</div>
<div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
<div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
<!--v-if-->
<!--v-if--><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-danger dark:text-white">Cancelled</span><a data-v-4bd07c72="" href="/tag/Something" class=""><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></a>
</div>
</div>
</div>
</div>
</div>
</a>"
`;
exports[`EventCard > Show default 1`] = `
"<a data-v-4bd07c72="" href="/events/0123456789" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
<div data-v-4bd07c72="" class="rounded-lg">
<div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
<div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black dark:text-white small" style="--small: 1.2;">
<div data-v-1df97f42="" class="datetime-container-header bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
<div data-v-1df97f42="" class="datetime-container-footer bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="year">2022</time></div>
</div>
<!--v-if-->
<!--v-if-->
</div>
<figure data-v-4bd07c72="" class="block relative pt-40">
<div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
<div class="h-full w-full max-w-100 min-h-[10rem]">
<!-- Show the placeholder as background -->
<!--v-if-->
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png" loading="lazy">
</div>
</div>
<div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end">
<!--v-if-->
<!--v-if--><a data-v-4bd07c72="" href="/tag/Something" class=""><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></a>
</div>
</figure>
</div>
<div data-v-4bd07c72="" class="p-2 flex-auto">
<div data-v-4bd07c72="" class="relative flex flex-col h-full">
<div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
<!--v-if-->
</div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden">Feb 2, 2022, 3:04 AM</span>
<!--v-if-->
<div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
<h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very interesting event</h2>
<div data-v-4bd07c72="" class="">
<div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
<figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
</div>
<div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
<div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
<!--v-if-->
<!--v-if-->
<!--v-if--><a data-v-4bd07c72="" href="/tag/Something" class=""><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></a>
</div>
</div>
</div>
</div>
</div>
</a>"
`;
exports[`EventCard > Show long 1`] = `
"<a data-v-4bd07c72="" href="/events/0123456789" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
<div data-v-4bd07c72="" class="rounded-lg">
<div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
<div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black dark:text-white small" style="--small: 1.2;">
<div data-v-1df97f42="" class="datetime-container-header bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
<div data-v-1df97f42="" class="datetime-container-footer bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="year">2022</time></div>
</div>
<!--v-if-->
<!--v-if-->
</div>
<figure data-v-4bd07c72="" class="block relative pt-40">
<div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
<div class="h-full w-full max-w-100 min-h-[10rem]">
<!-- Show the placeholder as background -->
<!--v-if-->
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png" loading="lazy">
</div>
</div>
<div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end">
<!--v-if-->
<!--v-if--><a data-v-4bd07c72="" href="/tag/Something" class=""><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></a>
</div>
</figure>
</div>
<div data-v-4bd07c72="" class="p-2 flex-auto">
<div data-v-4bd07c72="" class="relative flex flex-col h-full">
<div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
<!--v-if-->
</div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden">Feb 2, 2022, 3:04 AM</span>
<!--v-if-->
<div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
<h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very long title that will have trouble to display because it will take multiple lines but where will it stop&nbsp;?! Maybe after 3 lines is enough. Let's say so. But if it doesn't work, we really need to truncate it at some point. Definitively.</h2>
<div data-v-4bd07c72="" class="">
<div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
<figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
</div>
<div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
<div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
<!--v-if-->
<!--v-if-->
<!--v-if--><a data-v-4bd07c72="" href="/tag/Something" class=""><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></a>
</div>
</div>
</div>
</div>
</div>
</a>"
`;
exports[`EventCard > Show tentative 1`] = `
"<a data-v-4bd07c72="" href="/events/0123456789" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
<div data-v-4bd07c72="" class="rounded-lg">
<div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
<div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black dark:text-white small" style="--small: 1.2;">
<div data-v-1df97f42="" class="datetime-container-header bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
<div data-v-1df97f42="" class="datetime-container-footer bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="year">2022</time></div>
</div>
<!--v-if-->
<!--v-if-->
</div>
<figure data-v-4bd07c72="" class="block relative pt-40">
<div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
<div class="h-full w-full max-w-100 min-h-[10rem]">
<!-- Show the placeholder as background -->
<!--v-if-->
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png" loading="lazy">
</div>
</div>
<div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Tentative</span>
<!--v-if--><a data-v-4bd07c72="" href="/tag/Something" class=""><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></a>
</div>
</figure>
</div>
<div data-v-4bd07c72="" class="p-2 flex-auto">
<div data-v-4bd07c72="" class="relative flex flex-col h-full">
<div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
<!--v-if-->
</div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden">Feb 2, 2022, 3:04 AM</span>
<!--v-if-->
<div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
<h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very interesting event</h2>
<div data-v-4bd07c72="" class="">
<div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
<figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
</div>
<div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
<div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
<!--v-if--><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Tentative</span>
<!--v-if--><a data-v-4bd07c72="" href="/tag/Something" class=""><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></a>
</div>
</div>
</div>
</div>
</div>
</a>"
`;

47
tests/unit/specs/components/Event/__snapshots__/EventListViewCard.spec.ts.snap Normal file
View File

@@ -0,0 +1,47 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`EventListViewCard > Show default 1`] = `
"<article class="bg-white dark:bg-zinc-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2">
<div class="flex gap-2">
<div class="">
<div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black dark:text-white small" style="--small: 1.2;">
<div data-v-1df97f42="" class="datetime-container-header bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
<div data-v-1df97f42="" class="datetime-container-footer bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="year">2022</time></div>
</div>
</div><a href="/events/0123456789" class="">
<h2 class="mt-0 line-clamp-2">A very interesting event</h2>
</a>
</div>
<div class="">
<!--v-if--><span>Published by Hello</span>
</div>
<div class="flex gap-1"><span><span aria-hidden="true" class="material-design-icon earth-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"><!--v-if--></path></svg></span>
<!--v-if-->
<!--v-if--></span><span><span>0 participants</span></span>
</div>
</article>"
`;
exports[`EventListViewCard > Show long 1`] = `
"<article class="bg-white dark:bg-zinc-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2">
<div class="flex gap-2">
<div class="">
<div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black dark:text-white small" style="--small: 1.2;">
<div data-v-1df97f42="" class="datetime-container-header bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
<div data-v-1df97f42="" class="datetime-container-footer bg-red-400 dark:bg-red-900"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="year">2022</time></div>
</div>
</div><a href="/events/0123456789" class="">
<h2 class="mt-0 line-clamp-2">A very long title that will have trouble to display because it will take multiple lines but where will it stop&nbsp;?! Maybe after 3 lines is enough. Let's say so.</h2>
</a>
</div>
<div class="">
<!--v-if--><span>Published by Hello</span>
</div>
<div class="flex gap-1"><span><span aria-hidden="true" class="material-design-icon earth-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"><!--v-if--></path></svg></span>
<!--v-if-->
<!--v-if--></span><span><span>0 participants</span></span>
</div>
</article>"
`;

28
tests/unit/specs/components/Event/__snapshots__/OrganizerPicker.spec.ts.snap Normal file
View File

@@ -0,0 +1,28 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`OrganizerPicker > Show simple 1`] = `
"<div data-v-4ef6e9b3="" class="max-w-md mx-auto">
<div data-v-4ef6e9b3="" data-oruga="input" class="o-input__wrapper o-input__wrapper--expanded"><input dir="auto" class="o-input" id="" data-oruga-input="text" type="text" autocomplete="off" placeholder="Filter by profile or group name">
<!---->
<!---->
<!---->
</div>
<transition-group-stub data-v-4ef6e9b3="" tag="ul" enteractiveclass="duration-300 ease-out" enterfromclass="transform opacity-0" entertoclass="opacity-100" leaveactiveclass="duration-200 ease-in" leavefromclass="opacity-100" leavetoclass="transform opacity-0" appear="false" persisted="false" css="true" class="grid grid-cols-1 gap-y-3 m-5 max-w-md mx-auto">
<li data-v-4ef6e9b3="" class="relative focus-within:shadow-lg"><input data-v-4ef6e9b3="" class="sr-only peer" type="radio" name="availableActors" id="availableActor-59" value="[object Object]"><label data-v-4ef6e9b3="" class="flex items-center gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent" for="availableActor-59"><span data-v-4ef6e9b3="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
<div data-v-4ef6e9b3="" class="flex-1 w-px">
<h3 data-v-4ef6e9b3="" class="line-clamp-2">Someone</h3><small data-v-4ef6e9b3="" class="flex truncate">@me</small>
</div>
</label></li>
<li data-v-4ef6e9b3="" class="relative focus-within:shadow-lg"><input data-v-4ef6e9b3="" class="sr-only peer" type="radio" name="availableActors" id="availableActor-5" value="[object Object]"><label data-v-4ef6e9b3="" class="flex items-center gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent" for="availableActor-5"><span data-v-4ef6e9b3="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
<div data-v-4ef6e9b3="" class="flex-1 w-px">
<h3 data-v-4ef6e9b3="" class="line-clamp-2">Sigmund</h3><small data-v-4ef6e9b3="" class="flex truncate">@hello</small>
</div>
</label></li>
<li data-v-4ef6e9b3="" class="relative focus-within:shadow-lg"><input data-v-4ef6e9b3="" class="sr-only peer" type="radio" name="availableActors" id="availableActor-89" value="[object Object]"><label data-v-4ef6e9b3="" class="flex items-center gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent" for="availableActor-89"><span data-v-4ef6e9b3="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
<div data-v-4ef6e9b3="" class="flex-1 w-px">
<h3 data-v-4ef6e9b3="" class="line-clamp-2">College</h3><small data-v-4ef6e9b3="" class="flex truncate">@congregation</small>
</div>
</label></li>
</transition-group-stub>
</div>"
`;

47
tests/unit/specs/components/Event/__snapshots__/OrganizerPickerWrapper.spec.ts.snap Normal file
View File

@@ -0,0 +1,47 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`OrganizerPickerWrapper > Show simple 1`] = `
"<div class="bg-white dark:bg-violet-3 border border-gray-300 rounded-lg cursor-pointer">
<!-- If we have a current actor (inline) -->
<div class="" dir="auto">
<div class="flex gap-1 p-4">
<div class=""><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span></div>
<div class="flex-1">
<p class="">Sigmund</p>
<p class="">@hello</p>
</div><button type="button" class="o-btn" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Change</span>
<!----></span>
</button>
</div>
</div>
<!--teleport start-->
<transition-stub name="zoom-out" appear="false" persisted="false" css="true">
<div has-modal-card="" close-button-aria-label="Close" data-oruga="modal" class="o-modal" tabindex="-1" aria-modal="false" style="display: none;">
<div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
<div class="o-modal__content" style="max-width: 960px;">
<div class="p-2 rounded">
<header class="">
<h2 class="">Pick a profile or a group</h2>
</header>
<section class="">
<div class="flex flex-wrap gap-2 items-center flex-col lg:flex-row">
<div class="max-h-[400px] overflow-y-auto flex-1 w-full">
<!--v-if-->
</div>
<div class="pl-2 max-h-[400px] overflow-y-auto">
<div class="">
<p>Your profile will be shown as contact.</p>
</div>
</div>
</div>
</section>
<footer class="my-2 text-center sm:text-right"><button type="button" class="o-btn o-btn--primary w-full sm:w-auto" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Pick</span>
<!----></span>
</button></footer>
</div><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
</div>
</div>
</transition-stub>
<!--teleport end-->
</div>"
`;

104
tests/unit/specs/components/Event/__snapshots__/ParticipationButton.spec.ts.snap Normal file
View File

@@ -0,0 +1,104 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`ParticipationButton > Show Basic 1`] = `
"<div class="ml-auto w-min">
<div data-oruga="dropdown" class="o-drop o-drop--position-bottom-left">
<div tabindex="0" class="o-drop__trigger" aria-haspopup="true"><button type="button" class="o-btn o-btn--large o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Participate</span><span class="o-icon o-icon--large o-btn__icon o-btn__icon-right" data-oruga="icon"><i class="mdi mdi-menu-down mdi-48px"></i></span></span></button></div>
<!--teleport start-->
<transition-stub name="fade" appear="false" persisted="false" css="true">
<!---->
</transition-stub>
<transition-stub name="fade" appear="false" persisted="false" css="true">
<div class="o-drop__menu o-drop__menu--bottom-left" role="list" aria-hidden="true" aria-modal="true" style="display: none;">
<div class="o-drop__item o-drop__item--clickable" role="listitem" tabindex="0" data-oruga="dropdown-item">
<div class="flex gap-2 items-center">
<figure class=""><img class="rounded-xl" src="https://mobilizon.fr/media/3a5f18c058a8193b1febfaf561f94ae8b91f85ac64c01ddf5ad7b251fb43baf5.jpg?name=profil.jpg" alt="" width="24" height="24"></figure>
<div class=""><span>as Thomas</span></div>
</div>
</div>
<div class="o-drop__item o-drop__item--clickable" role="listitem" tabindex="0" data-oruga="dropdown-item">with another identity…</div>
</div>
</transition-stub>
<!--teleport end-->
</div>
</div>"
`;
exports[`ParticipationButton > Show Basic with confirmation 1`] = `
"<div class="ml-auto w-min">
<div data-oruga="dropdown" class="o-drop o-drop--position-bottom-left">
<div tabindex="0" class="o-drop__trigger" aria-haspopup="true"><button type="button" class="o-btn o-btn--large o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Participate</span><span class="o-icon o-icon--large o-btn__icon o-btn__icon-right" data-oruga="icon"><i class="mdi mdi-menu-down mdi-48px"></i></span></span></button></div>
<!--teleport start-->
<transition-stub name="fade" appear="false" persisted="false" css="true">
<!---->
</transition-stub>
<transition-stub name="fade" appear="false" persisted="false" css="true">
<div class="o-drop__menu o-drop__menu--bottom-left" role="list" aria-hidden="true" aria-modal="true" style="display: none;">
<div class="o-drop__item o-drop__item--clickable" role="listitem" tabindex="0" data-oruga="dropdown-item">
<div class="flex gap-2 items-center">
<figure class=""><img class="rounded-xl" src="https://mobilizon.fr/media/3a5f18c058a8193b1febfaf561f94ae8b91f85ac64c01ddf5ad7b251fb43baf5.jpg?name=profil.jpg" alt="" width="24" height="24"></figure>
<div class=""><span>as Thomas</span></div>
</div>
</div>
<div class="o-drop__item o-drop__item--clickable" role="listitem" tabindex="0" data-oruga="dropdown-item">with another identity…</div>
</div>
</transition-stub>
<!--teleport end-->
</div>
</div>"
`;
exports[`ParticipationButton > Show Participating 1`] = `
"<div class="ml-auto w-min">
<div data-oruga="dropdown" class="o-drop o-drop--position-bottom-left">
<div tabindex="0" class="o-drop__trigger" aria-haspopup="true"><button type="button" class="o-btn o-btn--large o-btn--success" role="button" data-oruga="button"><span class="o-btn__wrapper"><span class="o-icon o-icon--large o-btn__icon o-btn__icon-left" data-oruga="icon"><i class="mdi mdi-check mdi-48px"></i></span><span class="o-btn__label">I participate</span><span class="o-icon o-icon--large o-btn__icon o-btn__icon-right" data-oruga="icon"><i class="mdi mdi-menu-down mdi-48px"></i></span></span></button></div>
<!--teleport start-->
<transition-stub name="fade" appear="false" persisted="false" css="true">
<!---->
</transition-stub>
<transition-stub name="fade" appear="false" persisted="false" css="true">
<div class="o-drop__menu o-drop__menu--bottom-left" role="list" aria-hidden="true" aria-modal="true" style="display: none;">
<div class="o-drop__item o-drop__item--clickable" role="listitem" tabindex="0" data-oruga="dropdown-item">Cancel my participation…</div>
</div>
</transition-stub>
<!--teleport end-->
</div>
</div>"
`;
exports[`ParticipationButton > Show Pending approval 1`] = `
"<div class="ml-auto w-min">
<div class="flex flex-col">
<div data-oruga="dropdown" class="o-drop o-drop--position-bottom-left">
<div tabindex="0" class="o-drop__trigger" aria-haspopup="true"><button type="button" class="o-btn o-btn--large o-btn--success" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label"><template class="flex items-center"></template></span>
<!----></span>
</button></div>
<!--teleport start-->
<transition-stub name="fade" appear="false" persisted="false" css="true">
<!---->
</transition-stub>
<transition-stub name="fade" appear="false" persisted="false" css="true">
<div class="o-drop__menu o-drop__menu--bottom-left" role="list" aria-hidden="true" aria-modal="true" style="display: none;">
<div class="o-drop__item o-drop__item--clickable" role="listitem" tabindex="0" data-oruga="dropdown-item">Change my identity…</div>
<div class="o-drop__item o-drop__item--clickable" role="listitem" tabindex="0" data-oruga="dropdown-item">Cancel my participation request…</div>
</div>
</transition-stub>
<!--teleport end-->
</div>
<p>Participation requested!</p>
<p>Waiting for organization team approval.</p>
</div>
</div>"
`;
exports[`ParticipationButton > Show Rejected 1`] = `
"<div class="ml-auto w-min">
<div><span>Unfortunately, your participation request was rejected by the organizers.</span></div>
</div>"
`;
exports[`ParticipationButton > Show Unlogged 1`] = `
"<div class="ml-auto w-min"><a href="/events/0123456789/participate/with-account" class="o-btn o-btn--large o-btn--primary" role="button" data-oruga="button" rel="nofollow"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Participate</span>
<!----></span>
</a></div>"
`;

178
tests/unit/specs/components/Event/__snapshots__/ShareEventModal.spec.ts.snap Normal file
View File

File diff suppressed because one or more lines are too long

62
tests/unit/specs/components/Event/__snapshots__/SkeletonEventResult.spec.ts.snap Normal file
View File

@@ -0,0 +1,62 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`SkeletonEventResult > Show column 1`] = `
"<div class="bg-white dark:bg-slate-800 shadow rounded-md max-w-sm w-full mx-auto">
<div class="animate-pulse flex flex-col items-center md:flex-col">
<div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700"></div>
<div class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"><span class="h-2 bg-slate-700"></span><span class="mb-2 h-4 bg-slate-700"></span>
<div class="flex space-x-4 flex-row">
<div class="rounded-full bg-slate-700 h-10 w-10"></div>
<div class="flex flex-col flex-1 space-y-2">
<div class="h-3 bg-slate-700"></div>
<div class="h-2 bg-slate-700"></div>
</div>
</div>
<!--v-if-->
<!--v-if-->
</div>
</div>
</div>"
`;
exports[`SkeletonEventResult > Show not minimal 1`] = `
"<div class="bg-white dark:bg-slate-800 shadow rounded-md max-w-4xl w-full mx-auto">
<div class="animate-pulse flex flex-col items-center md:flex-row">
<div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700"></div>
<div class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"><span class="h-2 bg-slate-700"></span><span class="mb-2 h-4 bg-slate-700"></span>
<div class="flex space-x-4 flex-row">
<div class="rounded-full bg-slate-700 h-10 w-10"></div>
<div class="flex flex-col flex-1 space-y-2">
<div class="h-3 bg-slate-700"></div>
<div class="h-2 bg-slate-700"></div>
</div>
</div>
<div class="h-3 bg-slate-700 mt-3 w-60"></div>
<div class="flex">
<div class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"></div>
<div class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"></div>
<div class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"></div>
</div>
</div>
</div>
</div>"
`;
exports[`SkeletonEventResult > Show row 1`] = `
"<div class="bg-white dark:bg-slate-800 shadow rounded-md max-w-4xl w-full mx-auto">
<div class="animate-pulse flex flex-col items-center md:flex-row">
<div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700"></div>
<div class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"><span class="h-2 bg-slate-700"></span><span class="mb-2 h-4 bg-slate-700"></span>
<div class="flex space-x-4 flex-row">
<div class="rounded-full bg-slate-700 h-10 w-10"></div>
<div class="flex flex-col flex-1 space-y-2">
<div class="h-3 bg-slate-700"></div>
<div class="h-2 bg-slate-700"></div>
</div>
</div>
<!--v-if-->
<!--v-if-->
</div>
</div>
</div>"
`;

42
tests/unit/specs/components/Event/__snapshots__/TagInput.spec.ts.snap Normal file
View File

@@ -0,0 +1,42 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`TagInput > Show new 1`] = `
"<div data-oruga="field" class="o-field taginput-field"><label for="tag-input-1" class="o-field__label">
<p class="inline-flex items-center gap-0.5">Add some tags
<div class="o-tip" data-oruga="tooltip">
<!--teleport start-->
<transition-stub name="fade" appear="false" persisted="false" css="true">
<div class="o-tip__content o-tip__content--auto o-tip__content--dark" style="display: none;"><span class="o-tip__arrow o-tip__arrow--auto o-tip__arrow--dark"></span>You can add tags by hitting the Enter key or by adding a comma</div>
</transition-stub>
<!--teleport end-->
<div class="o-tip__trigger" aria-haspopup="true"><span aria-hidden="true" class="material-design-icon help-circle-outline-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="16" height="16" viewBox="0 0 24 24"><path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z"><!--v-if--></path></svg></span></div>
</div>
</p>
</label>
<div class="o-field__body">
<div class="o-field o-field--addons">
<div data-oruga="taginput" class="o-taginput o-taginput--expanded">
<div class="o-taginput__container"><span class="o-taginput__item"><span>Hello</span><span class="o-icon o-icon--clickable o-taginput__item__close" data-oruga="icon"><i class="mdi mdi-close mdi-24px"></i></span></span>
<div data-oruga="autocomplete" class="o-drop o-drop--expanded o-drop--position-auto o-acp o-taginput__autocomplete">
<div tabindex="-1" class="o-drop__trigger" aria-haspopup="listbox">
<div data-oruga="input" class="o-input__wrapper o-input__wrapper--expanded"><input dir="auto" has-counter="false" role="combobox" aria-autocomplete="list" aria-controls="" aria-expanded="false" id="tag-input-1" data-oruga-input="text" type="text" class="o-input o-taginput__input o-input--iconspace-left" maxlength="20" autocomplete="off" placeholder="Eg: Stockholm, Dance, Chess…"><span class="o-icon o-input__icon-left" data-oruga="icon"><i class="mdi mdi-label mdi-24px"></i></span>
<!---->
<!---->
</div>
</div>
<!--teleport start-->
<transition-stub name="fade" appear="false" persisted="false" css="true">
<!---->
</transition-stub>
<transition-stub name="fade" appear="false" persisted="false" css="true">
<div id="" tabindex="-1" class="o-drop__menu o-drop__menu--auto" style="max-height: 200px; overflow: auto; display: none;" role="listbox" aria-hidden="true" aria-modal="false"></div>
</transition-stub>
<!--teleport end-->
</div>
</div><small class="o-taginput__counter">1 / 10</small>
</div>
</div>
</div>
<!---->
</div>"
`;