test: fix histoire configuration

Nearly

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

.gitignore

@@ -54,4 +54,6 @@ codeclimate.json
 node_modules
 stats.html
 /coverage
-/playwright-report/
+/playwright-report/
+.histoire
+

histoire.config.ts

@@ -8,6 +8,7 @@ export default defineConfig({
   plugins: [HstVue()],
   setupFile: path.resolve(__dirname, "./src/histoire.setup.ts"),
   viteNodeInlineDeps: [/date-fns/],
+  // viteIgnorePlugins: ['vite-plugin-pwa', 'vite-plugin-pwa:build', 'vite-plugin-pwa:info'],
   tree: {
     groups: [
       {

src/components/Comment/EventComment.story.vue

@@ -5,9 +5,9 @@
         :comment="comment"
         :event="event"
         :currentActor="baseActor"
-        @create-comment="hstEvent('Create comment', $event)"
-        @delete-comment="hstEvent('Delete comment', $event)"
-        @report-comment="hstEvent('Report comment', $event)"
+        @create-comment="logEvent('Create comment', $event)"
+        @delete-comment="logEvent('Delete comment', $event)"
+        @report-comment="logEvent('Report comment', $event)"
       />
     </Variant>
     <Variant title="Announcement">
@@ -15,9 +15,9 @@
         :comment="{ ...comment, isAnnouncement: true }"
         :event="event"
         :currentActor="baseActor"
-        @create-comment="hstEvent('Create comment', $event)"
-        @delete-comment="hstEvent('Delete comment', $event)"
-        @report-comment="hstEvent('Report comment', $event)"
+        @create-comment="logEvent('Create comment', $event)"
+        @delete-comment="logEvent('Delete comment', $event)"
+        @report-comment="logEvent('Report comment', $event)"
       />
     </Variant>
   </Story>
@@ -37,10 +37,23 @@ import { reactive } from "vue";
 import Comment from "./EventComment.vue";
 import FloatingVue from "floating-vue";
 import "floating-vue/dist/style.css";
-import { hstEvent } from "histoire/client";
+import { logEvent } from "histoire/client";
+import { createMemoryHistory, createRouter } from "vue-router";
 
 function setupApp({ app }) {
   app.use(FloatingVue);
+  app.use(
+    createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        {
+          path: "/event/:uuid",
+          name: "Event",
+          component: { render: () => null },
+        },
+      ],
+    })
+  );
 }
 
 const baseActorAvatar = {
@@ -64,7 +77,7 @@ const baseActor: IPerson = {
 };
 
 const baseEvent: IEvent = {
-  uuid: "",
+  uuid: "an-uuid",
   title: "A very interesting event",
   description: "Things happen",
   beginsOn: new Date().toISOString(),

src/components/Event/OrganizerPicker.story.vue

@@ -7,8 +7,8 @@
         v-model:actor-filter="actorFilter"
         :groupMemberships="[]"
         :current-actor="currentActor"
-        @update:actor-filter="hstEvent('Actor Filter updated', $event)"
-        @update:model-value="hstEvent('Selected actor updated', $event)"
+        @update:actor-filter="logEvent('Actor Filter updated', $event)"
+        @update:model-value="logEvent('Selected actor updated', $event)"
       />
     </Variant>
   </Story>
@@ -18,7 +18,7 @@ import OrganizerPicker from "./OrganizerPicker.vue";
 import { createMemoryHistory, createRouter } from "vue-router";
 import { reactive, ref } from "vue";
 import { ActorType } from "@/types/enums";
-import { hstEvent } from "histoire/client";
+import { logEvent } from "histoire/client";
 
 const currentActor = reactive({
   id: "59",

src/components/Event/OrganizerPickerWrapper.story.vue

@@ -3,8 +3,8 @@
     <Variant>
       <OrganizerPickerWrapper
         v-model="actor"
-        @update:model-value="hstEvent('Value', $event)"
-        @update:contacts="hstEvent('Contacts', $event)"
+        @update:model-value="logEvent('Value', $event)"
+        @update:contacts="logEvent('Contacts', $event)"
       />
     </Variant>
   </Story>
@@ -19,7 +19,7 @@ import { PERSON_GROUP_MEMBERSHIPS } from "@/graphql/actor";
 import { createMemoryHistory, createRouter } from "vue-router";
 import { IDENTITIES } from "@/graphql/actor";
 import { reactive } from "vue";
-import { hstEvent } from "histoire/client";
+import { logEvent } from "histoire/client";
 
 const actor = reactive({
   id: "5",

src/components/Event/ParticipationButton.story.vue

@@ -14,9 +14,9 @@
         :current-actor="currentActor"
         :participation="undefined"
         :identities="identities"
-        @join-event="hstEvent('Join event', $event)"
-        @join-modal="hstEvent('Join modal', $event)"
-        @confirm-leave="hstEvent('Confirm leave', $event)"
+        @join-event="logEvent('Join event', $event)"
+        @join-modal="logEvent('Join modal', $event)"
+        @confirm-leave="logEvent('Confirm leave', $event)"
       />
     </Variant>
     <Variant title="Basic with confirmation">
@@ -26,9 +26,9 @@
         :participation="undefined"
         :identities="identities"
         @join-event-with-confirmation="
-          hstEvent('Join Event with confirmation', $event)
+          logEvent('Join Event with confirmation', $event)
         "
-        @join-modal="hstEvent('Join modal', $event)"
+        @join-modal="logEvent('Join modal', $event)"
       />
     </Variant>
     <Variant title="Participating">
@@ -37,7 +37,7 @@
         :current-actor="currentActor"
         :participation="participation"
         :identities="identities"
-        @confirm-leave="hstEvent('Confirm leave', $event)"
+        @confirm-leave="logEvent('Confirm leave', $event)"
       />
     </Variant>
     <Variant title="Pending approval">
@@ -49,7 +49,7 @@
           role: ParticipantRole.NOT_APPROVED,
         }"
         :identities="identities"
-        @confirm-leave="hstEvent('Confirm leave', $event)"
+        @confirm-leave="logEvent('Confirm leave', $event)"
       />
     </Variant>
     <Variant title="Rejected">
@@ -61,7 +61,7 @@
           role: ParticipantRole.REJECTED,
         }"
         :identities="identities"
-        @confirm-leave="hstEvent('Confirm leave', $event)"
+        @confirm-leave="logEvent('Confirm leave', $event)"
       />
     </Variant>
   </Story>
@@ -72,7 +72,7 @@ import { IPerson } from "@/types/actor";
 import { EventJoinOptions, ParticipantRole } from "@/types/enums";
 import { IEvent } from "@/types/event.model";
 import ParticipationButton from "./ParticipationButton.vue";
-import { hstEvent } from "histoire/client";
+import { logEvent } from "histoire/client";
 import { IParticipant } from "@/types/participant.model";
 
 const emptyCurrentActor: IPerson = {};

src/components/Home/SearchFields.story.vue

@@ -4,8 +4,8 @@
       <SearchFields
         :search="''"
         :location="{}"
-        @update:location="hstEvent('update location', $event)"
-        @update:search="hstEvent('update search', $event)"
+        @update:location="logEvent('update location', $event)"
+        @update:search="logEvent('update search', $event)"
       />
     </Variant>
   </Story>
@@ -14,7 +14,7 @@
 import { apolloClient } from "@/vue-apollo";
 import { DefaultApolloClient } from "@vue/apollo-composable";
 import SearchFields from "./SearchFields.vue";
-import { hstEvent } from "histoire/client";
+import { logEvent } from "histoire/client";
 
 function setupApp({ app }) {
   app.provide(DefaultApolloClient, apolloClient);

vite.config.js

@@ -15,9 +15,12 @@ export default defineConfig(({ command }) => {
     process.stdin.resume();
   }
 
-  return {
-    plugins: [
-      vue(),
+  const isStory = Boolean(process.env.HISTOIRE);
+
+  const plugins = [vue(), visualizer()];
+
+  if (!isStory) {
+    plugins.push(
       VitePWA({
         registerType: "autoUpdate",
         strategies: "injectManifest",
@@ -57,21 +60,29 @@ export default defineConfig(({ command }) => {
             },
           ],
         },
-      }),
-      visualizer(),
-    ],
-    build: {
-      manifest: true,
-      outDir: path.resolve(__dirname, "priv/static"),
-      emptyOutDir: true,
-      sourcemap: true,
-      rollupOptions: {
-        // overwrite default .html entry
-        input: {
-          main: "src/main.ts",
-        },
+      })
+    );
+  }
+
+  const build = {
+    manifest: true,
+    outDir: path.resolve(__dirname, "priv/static"),
+    emptyOutDir: true,
+    sourcemap: true,
+  };
+
+  if (!isStory) {
+    // overwrite default .html entry
+    build.rollupOptions = {
+      input: {
+        main: "src/main.ts",
       },
-    },
+    };
+  }
+
+  return {
+    plugins,
+    build,
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),