user list for moderation of pending users - #877

tests/unit/specs/components/admin/__snapshots__/usersView.spec.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UsersView > Show simple list 1`] = `
+exports[`UsersView > Show list with moderation 1`] = `
 "<div data-v-01123d3b="">
   <breadcrumbs-nav data-v-01123d3b="" links="[object Object],[object Object]"></breadcrumbs-nav>
   <div data-v-01123d3b="">
@@ -9,6 +9,7 @@ exports[`UsersView > Show simple list 1`] = `
         <!---->
         <div class="o-field__body">
           <div class="o-field o-field--grouped-multiline o-field--grouped">
+            <p data-v-01123d3b="" class="control mb-3 m-auto"><label data-v-01123d3b="" class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Users pending for moderation</span></label></p>
             <div data-v-01123d3b="" data-oruga="field" class="o-field" expanded=""><label class="o-field__label" for="">Email</label>
               <div class="o-field__body">
                 <div class="o-field o-field--addons">
@@ -31,7 +32,121 @@ exports[`UsersView > Show simple list 1`] = `
               </div>
               <!---->
             </div>
-            <p data-v-01123d3b="" class="control self-end mb-0"><button data-v-01123d3b="" type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Filter</span>
+            <p data-v-01123d3b="" class="control self-end mb-0"><button data-v-01123d3b="" type="button" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Filter</span>
+                <!----></span>
+              </button></p>
+          </div>
+        </div>
+        <!---->
+      </div>
+    </form>
+    <div data-v-01123d3b="" class="o-table__root" data-oruga="table">
+      <div style="display: none;"><span data-v-01123d3b="" data-id="1" data-oruga="table-column"> <!----></span><span data-v-01123d3b="" data-id="2" data-oruga="table-column">Email <!----></span><span data-v-01123d3b="" data-id="3" data-oruga="table-column" centered="true">Last seen on <!----></span><span data-v-01123d3b="" data-id="4" data-oruga="table-column" centered="true">Language <!----></span></div>
+      <!---->
+      <!---->
+      <div class="o-table__wrapper">
+        <table class="o-table">
+          <!---->
+          <thead>
+            <tr>
+              <!---->
+              <!---->
+              <th class="o-table__th" style="width: 40px;" draggable="false"><span> <span class="o-table__th__sort-icon" style="display: none;"><span class="o-icon o-icon--small" data-oruga="icon"><i class="mdi mdi-arrow-up"></i></span></span></span></th>
+              <th class="o-table__th" draggable="false"><span>Email <span class="o-table__th__sort-icon" style="display: none;"><span class="o-icon o-icon--small" data-oruga="icon"><i class="mdi mdi-arrow-up"></i></span></span></span></th>
+              <th class="o-table__th" draggable="false"><span>Last seen on <span class="o-table__th__sort-icon" style="display: none;"><span class="o-icon o-icon--small" data-oruga="icon"><i class="mdi mdi-arrow-up"></i></span></span></span></th>
+              <th class="o-table__th" draggable="false"><span>Language <span class="o-table__th__sort-icon" style="display: none;"><span class="o-icon o-icon--small" data-oruga="icon"><i class="mdi mdi-arrow-up"></i></span></span></span></th>
+              <!---->
+            </tr>
+            <!---->
+            <!---->
+          </thead>
+          <tbody>
+            <tr class="" draggable="false">
+              <!---->
+              <!---->
+              <td class="o-table__td" style="width: 40px;">6</td>
+              <td class="o-table__td" data-label="Email"><a data-v-01123d3b="" href="/settings/admin/users/6" class="">truc@mobilizon.test</a></td>
+              <td class="o-table__td" data-label="Last seen on"><time data-v-01123d3b="">Thursday, January 1, 1970 at 1:00 AM</time></td>
+              <td class="o-table__td" data-label="Language">English</td>
+              <!---->
+            </tr>
+            <transition-stub name="slide" appear="false" persisted="false" css="true">
+              <!---->
+            </transition-stub>
+            <!---->
+            <tr class="" draggable="false">
+              <!---->
+              <!---->
+              <td class="o-table__td" style="width: 40px;">1</td>
+              <td class="o-table__td" data-label="Email"><a data-v-01123d3b="" href="/settings/admin/users/1" class="">admin@mobilizon.test</a></td>
+              <td class="o-table__td" data-label="Last seen on"><time data-v-01123d3b="" datetime="2025-09-11T16:10:03Z">Thursday, September 11, 2025 at 6:10 PM</time></td>
+              <td class="o-table__td" data-label="Language">English</td>
+              <!---->
+            </tr>
+            <transition-stub name="slide" appear="false" persisted="false" css="true">
+              <!---->
+            </transition-stub>
+            <!---->
+            <!---->
+          </tbody>
+          <!---->
+        </table>
+        <transition-stub name="fade" appear="false" persisted="false" css="true">
+          <!---->
+        </transition-stub>
+      </div>
+      <div class="o-table__pagination" per-page="10" total="2" rounded="false" size="small" simple="false" aria-next-label="Next page" aria-previous-label="Previous page" aria-page-label="Page" aria-current-label="Current page">
+        <div></div>
+        <div>
+          <nav class="o-pag o-pag--right o-pag--small" data-oruga="pagination"><button role="button" tabindex="0" class="o-pag__link o-pag__previous o-pag__link--disabled" aria-label="Previous page" aria-current="false"><span class="o-icon" data-oruga="icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button role="button" tabindex="0" class="o-pag__link o-pag__next o-pag__link--disabled" aria-label="Next page" aria-current="false"><span class="o-icon" data-oruga="icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button>
+            <ul class="o-pag__list">
+              <!---->
+              <!---->
+              <li class="o-pag__item"><button role="button" tabindex="0" class="o-pag__link o-pag__link--current" aria-label="Current page, Page 1." aria-current="true">1</button></li>
+              <!---->
+              <!---->
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`UsersView > Show simple list 1`] = `
+"<div data-v-01123d3b="">
+  <breadcrumbs-nav data-v-01123d3b="" links="[object Object],[object Object]"></breadcrumbs-nav>
+  <div data-v-01123d3b="">
+    <form data-v-01123d3b="">
+      <div data-v-01123d3b="" data-oruga="field" class="o-field mb-5">
+        <!---->
+        <div class="o-field__body">
+          <div class="o-field o-field--grouped-multiline o-field--grouped">
+            <!--v-if-->
+            <div data-v-01123d3b="" data-oruga="field" class="o-field" expanded=""><label class="o-field__label" for="">Email</label>
+              <div class="o-field__body">
+                <div class="o-field o-field--addons">
+                  <div data-v-01123d3b="" data-oruga="input" class="o-input__wrapper"><input trap-focus="" id="" data-oruga-input="text" type="text" class="o-input o-input--iconspace-left" autocomplete="off"><span class="o-icon o-input__icon-left" data-oruga="icon"><i class="mdi mdi-email mdi-24px"></i></span>
+                    <!---->
+                    <!---->
+                  </div>
+                </div>
+              </div>
+              <!---->
+            </div>
+            <div data-v-01123d3b="" data-oruga="field" class="o-field" expanded=""><label class="o-field__label" for="">IP Address</label>
+              <div class="o-field__body">
+                <div class="o-field o-field--addons">
+                  <div data-v-01123d3b="" data-oruga="input" class="o-input__wrapper"><input id="" data-oruga-input="text" type="text" class="o-input o-input--iconspace-left" autocomplete="off"><span class="o-icon o-input__icon-left" data-oruga="icon"><i class="mdi mdi-web mdi-24px"></i></span>
+                    <!---->
+                    <!---->
+                  </div>
+                </div>
+              </div>
+              <!---->
+            </div>
+            <p data-v-01123d3b="" class="control self-end mb-0"><button data-v-01123d3b="" type="button" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Filter</span>
                 <!----></span>
               </button></p>
           </div>

tests/unit/specs/components/admin/usersView.spec.ts

@@ -16,6 +16,7 @@ import { createRouter, createWebHistory, Router } from "vue-router";
 import { routes } from "@/router";
 import { Oruga } from "@oruga-ui/oruga-next";
 import { htmlRemoveId } from "../../common";
+import { CONFIG } from "@/graphql/config";
 
 let router: Router;
 
@@ -103,15 +104,23 @@ const listUsersMock = {
 
 config.global.plugins.push(Oruga);
 
-const generateWrapper = (currentUsersMock = listUsersMock) => {
+const generateWrapper = (currentModeration = false) => {
   mockClient = createMockClient({
     cache,
     resolvers: buildCurrentUserResolver(cache),
   });
   requestHandlers = {
+    config: vi.fn().mockResolvedValue({
+      data: {
+        config: {
+          registrationsModeration: currentModeration,
+        },
+      },
+    }),
     languagecode: vi.fn().mockResolvedValue(languageCodeMock),
-    list_users: vi.fn().mockResolvedValue(currentUsersMock),
+    list_users: vi.fn().mockResolvedValue(listUsersMock),
   };
+  mockClient.setRequestHandler(CONFIG, requestHandlers.config);
   mockClient.setRequestHandler(LANGUAGES_CODES, requestHandlers.languagecode);
   mockClient.setRequestHandler(LIST_USERS, requestHandlers.list_users);
 
@@ -145,6 +154,44 @@ describe("UsersView", () => {
     expect(wrapper.exists()).toBe(true);
     expect(requestHandlers.languagecode).toHaveBeenCalled();
     expect(requestHandlers.list_users).toHaveBeenCalled();
+    expect(requestHandlers.list_users).toHaveBeenCalledWith({
+      currentSignInIp: "",
+      email: "",
+      limit: 10,
+      page: 1,
+      pendingUser: false,
+    });
     expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
   });
+
+  it("Show list with moderation", async () => {
+    const wrapper = generateWrapper(true);
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(wrapper.exists()).toBe(true);
+    expect(requestHandlers.languagecode).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.list_users).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.list_users).toHaveBeenCalledWith({
+      currentSignInIp: "",
+      email: "",
+      limit: 10,
+      page: 1,
+      pendingUser: true,
+    });
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+
+    wrapper.vm.pendingFieldValue = false;
+    //wrapper.find('input[type="checkbox"]').trigger("change");
+    wrapper.find('input[type="text"]').setValue("@email.tld");
+    wrapper.find('button[type="button"]').trigger("click");
+    await flushPromises();
+    expect(requestHandlers.list_users).toHaveBeenCalledTimes(3);
+    expect(requestHandlers.list_users).toHaveBeenNthCalledWith(3, {
+      currentSignInIp: "",
+      email: "@email.tld",
+      limit: 10,
+      page: 1,
+      pendingUser: false,
+    });
+  });
 });