correct assessible name for link - issue #1780

src/components/NavBar.vue

@@ -6,6 +6,7 @@
     <div class="container mx-auto flex flex-wrap items-center gap-2 sm:gap-4">
       <router-link
         :to="{ name: RouteName.HOME }"
+        :aria-label="t('Back to homepage')"
         class="flex items-center"
         :class="{ 'flex-1': !currentActor?.id }"
       >

src/components/PageFooter.vue

@@ -54,8 +54,9 @@
         <template #mobilizon>
           <a
             rel="external"
+            aria-label="mobilizon.org"
             class="text-white underline decoration-yellow-1"
-            href="https://joinmobilizon.org"
+            href="https://mobilizon.org"
             >{{ t("Mobilizon") }}</a
           >
         </template>
@@ -63,12 +64,7 @@
           ><span>{{ new Date().getFullYear() }}</span></template
         >
         <template #contributors>
-          <a
-            rel="external"
-            class="text-white underline decoration-yellow-1"
-            href="https://joinmobilizon.org/hall-of-fame"
-            >{{ t("more than 1360 contributors") }}</a
-          >
+          <span>{{ t("more than 1360 contributors") }}</span>
         </template>
       </i18n-t>
     </div>

tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts

@@ -138,6 +138,7 @@ describe("ParticipationWithoutAccount", () => {
     wrapper.find("form").trigger("submit");
 
     await flushPromises();
+    expect(wrapper.vm.error).toBe(false);
 
     expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith(
       expect.objectContaining(joinEventMock)
@@ -215,6 +216,7 @@ describe("ParticipationWithoutAccount", () => {
     wrapper.find("form").trigger("submit");
 
     await flushPromises();
+    expect(wrapper.vm.error).toBe(false);
 
     expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith(
       expect.objectContaining(joinEventMock)

tests/unit/specs/components/__snapshots__/footer.spec.ts.snap

@@ -0,0 +1,51 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`App component > renders a Vue component 1`] = `
+"<footer class="bg-violet-2 color-secondary flex flex-col items-center py-3 px-3">
+  <ul class="inline-flex flex-wrap justify-around gap-3 text-lg text-white underline decoration-yellow-1">
+    <li>
+      <o-select class="text-black dark:text-white" aria-label="Language" modelvalue="en_US" placeholder="Select a language">
+        <option value="ar">العربية</option>
+        <option value="bn">বাংলা</option>
+        <option value="ca">Català</option>
+        <option value="cs">čeština</option>
+        <option value="cy">Cymraeg</option>
+        <option value="de">Deutsch</option>
+        <option value="en">English</option>
+        <option value="es">Español</option>
+        <option value="fa">فارسی</option>
+        <option value="fi">suomi</option>
+        <option value="fr">Français</option>
+        <option value="gd">Gàidhlig</option>
+        <option value="gl">Galego</option>
+        <option value="hr">Hrvatski</option>
+        <option value="hu">Magyar</option>
+        <option value="id">Bahasa Indonesia</option>
+        <option value="it">Italiano</option>
+        <option value="ja">日本語</option>
+        <option value="nl">Nederlands</option>
+        <option value="nn">Nynorsk</option>
+        <option value="oc">Occitan</option>
+        <option value="pl">Polski</option>
+        <option value="pt_BR">Português brasileiro</option>
+        <option value="ru">Русский</option>
+        <option value="sl">Slovenščina</option>
+        <option value="sv">Svenska</option>
+        <option value="zh_Hans">简体字</option>
+        <option value="zh_Hant">繁體字</option>
+      </o-select>
+    </li>
+    <li>
+      <router-link to="[object Object]">About</router-link>
+    </li>
+    <li>
+      <router-link to="[object Object]">Terms</router-link>
+    </li>
+    <li><a rel="external" hreflang="en" href="https://framagit.org/framasoft/mobilizon/blob/main/LICENSE">License</a></li>
+    <li><a href="#navbar">Back to top</a></li>
+  </ul>
+  <div class="text-center flex-1 pt-2 text-yellow-1">
+    <i18n-t-stub tag="span" keypath="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}." scope="parent"></i18n-t-stub>
+  </div>
+</footer>"
+`;

tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`App component > renders a Vue component 1`] = `
 "<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900" id="navbar">
   <div class="container mx-auto flex flex-wrap items-center gap-2 sm:gap-4">
-    <router-link to="[object Object]" class="flex items-center flex-1">
+    <router-link to="[object Object]" aria-label="Back to homepage" class="flex items-center flex-1">
       <mobilizon-logo-stub invert="false" class="w-40"></mobilizon-logo-stub>
     </router-link>
     <!--v-if--><button type="button" class="inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false"><span class="sr-only">Open main menu</span><svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

tests/unit/specs/components/footer.spec.ts

@@ -0,0 +1,58 @@
+const useRouterMock = vi.fn(() => ({
+  push: function () {
+    // do nothing
+  },
+}));
+
+import { shallowMount, VueWrapper } from "@vue/test-utils";
+import PageFooter from "@/components/PageFooter.vue";
+import { createMockClient, MockApolloClient } from "mock-apollo-client";
+import buildCurrentUserResolver from "@/apollo/user";
+import { InMemoryCache } from "@apollo/client/cache";
+import { describe, it, vi, expect, afterEach } from "vitest";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+
+vi.mock("vue-router/dist/vue-router.mjs", () => ({
+  useRouter: useRouterMock,
+}));
+
+describe("App component", () => {
+  let wrapper: VueWrapper;
+  let mockClient: MockApolloClient | null;
+
+  const createComponent = () => {
+    const cache = new InMemoryCache({ addTypename: false });
+
+    mockClient = createMockClient({
+      cache,
+      resolvers: buildCurrentUserResolver(cache),
+    });
+
+    wrapper = shallowMount(PageFooter, {
+      // stubs: ["router-link", "router-view", "o-dropdown", "o-dropdown-item"],
+      global: {
+        provide: {
+          [DefaultApolloClient]: mockClient,
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper?.unmount();
+    mockClient = null;
+  });
+
+  it("renders a Vue component", async () => {
+    const push = vi.fn();
+    useRouterMock.mockImplementationOnce(() => ({
+      push,
+    }));
+    createComponent();
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});