From 436f3feda1a30deda24218d7d13d35b508b2cf4a Mon Sep 17 00:00:00 2001
From: Michal <mwargan@gmail.com>
Date: Wed, 6 Mar 2024 16:51:27 +0000
Subject: [PATCH] fix: a11y heading levels on auth pages

---
 src/stories/LoginPage.stories.ts       | 59 ++++++++++++++++++++++++++
 src/views/Auth/LoginOrRegisterView.vue |  2 +-
 2 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 src/stories/LoginPage.stories.ts

diff --git a/src/stories/LoginPage.stories.ts b/src/stories/LoginPage.stories.ts
new file mode 100644
index 0000000..22bf239
--- /dev/null
+++ b/src/stories/LoginPage.stories.ts
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LoginOrRegisterView from "@/views/Auth/LoginOrRegisterView.vue";
+import { useUserStore } from "@/stores/user";
+// Import the user fixture json data
+import userFixture from "../../cypress/fixtures/user.json";
+import { userEvent, within } from "@storybook/test";
+
+const meta: Meta<typeof LoginOrRegisterView> = {
+  title: "Page/LoginOrRegister",
+  component: LoginOrRegisterView,
+  render: () => ({
+    components: { LoginOrRegisterView },
+    template: "<loginOrRegisterView />",
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "fullscreen",
+  },
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof LoginOrRegisterView>;
+
+// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+export const NoUserData: Story = {};
+
+export const WithUserAlreadyAuthenticated: Story = {
+  /** @todo implement */
+  render: () => ({
+    components: { LoginOrRegisterView },
+    setup() {
+      const user = useUserStore();
+      user.isAuthenticated = true;
+      user.userEmail = userFixture.email;
+
+      user.user = {
+        ...userFixture,
+        seen_at: new Date(),
+        created_at: new Date(),
+        updated_at: new Date(),
+      };
+    },
+    template: "<loginOrRegisterView />",
+  }),
+};
+
+export const OnRegisterScreem: Story = {
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    // First we fill the field with the user email
+    const emailField = canvas.getByPlaceholderText("Email");
+    await userEvent.type(emailField, userFixture.email);
+    // Then we click the Submit button
+    const submitButton = canvas.getByText("Submit");
+    await userEvent.click(submitButton);
+  },
+};
diff --git a/src/views/Auth/LoginOrRegisterView.vue b/src/views/Auth/LoginOrRegisterView.vue
index a83aab6..1b934bb 100644
--- a/src/views/Auth/LoginOrRegisterView.vue
+++ b/src/views/Auth/LoginOrRegisterView.vue
@@ -11,7 +11,7 @@ const redirect = () => {
 
 <template>
   <h1>{{ $t("Authenticate") }}</h1>
-  <CardElement :title="$t('Connect')">
+  <CardElement :titleHeadingLevel="2" :title="$t('Connect')">
     <LoginOrRegister @success="redirect" />
   </CardElement>
 </template>