include/exclude quickly identity from wave group

__tests__/components/WaveGroupRemoveButton.test.tsx

@@ -1,13 +1,13 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import WaveGroupRemoveButton from "@/components/waves/specs/groups/group/edit/WaveGroupRemoveButton";
-import { WaveGroupType } from "@/components/waves/specs/groups/group/WaveGroup";
+import { WaveGroupType } from "@/components/waves/specs/groups/group/WaveGroup.types";
 import React from "react";
 
 jest.mock("@/components/waves/specs/groups/group/edit/WaveGroupRemove", () =>
   function MockRemove(props: any) {
     return (
-      <div data-testid="modal" onClick={() => props.onEdit({})}>
+      <div data-testid="modal" onClick={() => props.onWaveUpdate({})}>
         remove
       </div>
     );
@@ -17,13 +17,13 @@ jest.mock("@/components/waves/specs/groups/group/edit/WaveGroupRemove", () =>
 describe("WaveGroupRemoveButton", () => {
   it("opens modal and triggers edit", async () => {
     const user = userEvent.setup();
-    const onEdit = jest.fn().mockResolvedValue(undefined);
+    const onWaveUpdate = jest.fn().mockResolvedValue(undefined);
     render(
-      <WaveGroupRemoveButton wave={{} as any} type={WaveGroupType.VIEW} onEdit={onEdit} />
+      <WaveGroupRemoveButton wave={{} as any} type={WaveGroupType.VIEW} onWaveUpdate={onWaveUpdate} />
     );
     await user.click(screen.getByTitle("Remove"));
     expect(screen.getByTestId("modal")).toBeInTheDocument();
     await user.click(screen.getByTestId("modal"));
-    expect(onEdit).toHaveBeenCalled();
+    expect(onWaveUpdate).toHaveBeenCalled();
   });
 });

__tests__/components/common/TabToggleWithOverflow.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { TabToggleWithOverflow } from '@/components/common/TabToggleWithOverflow';
@@ -28,13 +28,15 @@ describe('TabToggleWithOverflow', () => {
     expect(screen.getByText('B')).toBeInTheDocument();
 
     // open overflow dropdown
-    await user.click(screen.getByRole('button', { name: 'More' }));
-    const optionC = screen.getByRole('tab', { name: 'C' });
+    await user.click(screen.getByRole('button', { name: 'More tabs' }));
+    const optionC = screen.getByRole('menuitem', { name: 'C' });
     expect(optionC).toBeInTheDocument();
 
     await user.click(optionC);
     expect(onSelect).toHaveBeenCalledWith('c');
-    expect(screen.queryByRole('tab', { name: 'C' })).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.queryByRole('menuitem', { name: 'C' })).not.toBeInTheDocument()
+    );
   });
 
   it('shows active label when active tab is in overflow', () => {
@@ -83,26 +85,28 @@ describe('TabToggleWithOverflow', () => {
       />
     );
 
-    const moreButton = screen.getByRole('button', { name: 'More' });
+    const moreButton = screen.getByRole('button', { name: 'More tabs' });
     expect(moreButton).toHaveAttribute('aria-expanded', 'false');
 
-    moreButton.focus();
+    await user.tab(); // focus first tab
+    await user.tab(); // focus second tab
+    await user.tab(); // focus overflow trigger
     await user.keyboard('{Enter}');
     expect(moreButton).toHaveAttribute('aria-expanded', 'true');
-    const optionC = screen.getByRole('tab', { name: 'C' });
+    const optionC = screen.getByRole('menuitem', { name: 'C' });
     expect(optionC).toBeInTheDocument();
 
-    optionC.focus();
     await user.keyboard('{Escape}');
     expect(moreButton).toHaveAttribute('aria-expanded', 'false');
-    expect(screen.queryByRole('tab', { name: 'C' })).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.queryByRole('menuitem', { name: 'C' })).not.toBeInTheDocument()
+    );
 
-    moreButton.focus();
-    await user.keyboard('{Space}');
+    await user.keyboard(' ');
     expect(moreButton).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it('marks overflow tabs with aria-selected when opened', async () => {
+  it('indicates overflow active state via data attribute when opened', async () => {
     const user = userEvent.setup();
     render(
       <TabToggleWithOverflow
@@ -113,15 +117,15 @@ describe('TabToggleWithOverflow', () => {
       />
     );
 
-    const moreButton = screen.getByRole('button', { name: 'D' });
+    const moreButton = screen.getByRole('button', { name: 'More tabs' });
     await user.click(moreButton);
 
-    expect(screen.getByRole('tab', { name: 'D' })).toHaveAttribute(
-      'aria-selected',
+    expect(screen.getByRole('menuitem', { name: 'D' })).toHaveAttribute(
+      'data-active',
       'true'
     );
-    expect(screen.getByRole('tab', { name: 'C' })).toHaveAttribute(
-      'aria-selected',
+    expect(screen.getByRole('menuitem', { name: 'C' })).toHaveAttribute(
+      'data-active',
       'false'
     );
   });

__tests__/components/groups/GroupCreateWallets.test.tsx

@@ -34,6 +34,6 @@ describe('GroupCreateWallets', () => {
     const user = userEvent.setup();
     const { setWallets } = renderComp({ walletsLimit:5 });
     await user.click(screen.getByLabelText('Remove wallets'));
-    expect(setWallets).toHaveBeenLastCalledWith(null);
+    expect(setWallets).toHaveBeenCalledWith(null);
   });
 });

__tests__/components/groups/page/create/actions/GroupCreateActions.test.tsx

@@ -8,30 +8,20 @@ import { ReactQueryWrapperContext } from '@/components/react-query-wrapper/React
 jest.mock('@/components/groups/page/create/actions/GroupCreateTest', () => () => <div data-testid="test" />);
 jest.mock('@/components/distribution-plan-tool/common/CircleLoader', () => () => <div data-testid="loader" />);
 
-const commonApiPost = jest.fn();
-jest.mock('@/services/api/common-api', () => ({
-  commonApiPost: (...args: any[]) => commonApiPost(...args),
+const mockSubmit = jest.fn();
+const mockValidate = jest.fn();
+jest.mock('@/hooks/groups/useGroupMutations', () => ({
+  useGroupMutations: () => ({
+    validate: mockValidate,
+    submit: mockSubmit,
+    runTest: jest.fn(),
+    isSubmitting: false,
+    isTesting: false,
+    updateVisibility: jest.fn(),
+    isUpdatingVisibility: false,
+  }),
 }));
 
-// simple useMutation mock that executes mutationFn and callbacks
-const useMutationMock = jest.fn((options: any) => {
-  const mutateAsync = jest.fn(async (param?: any) => {
-    try {
-      const result = await options.mutationFn(param);
-      if (options.onSuccess) options.onSuccess(result, param, undefined);
-      if (options.onSettled) options.onSettled(result, undefined, param, undefined);
-      return result;
-    } catch (err) {
-      if (options.onError) options.onError(err, param, undefined);
-      if (options.onSettled) options.onSettled(undefined, err, param, undefined);
-      throw err;
-    }
-  });
-  return { mutateAsync };
-});
-
-jest.mock('@tanstack/react-query', () => ({ useMutation: (options: any) => useMutationMock(options) }));
-
 const defaultGroup = {
   name: '',
   group: {
@@ -68,7 +58,14 @@ function renderActions(props?: Partial<React.ComponentProps<typeof GroupCreateAc
   return { auth, queryCtx, onCompleted };
 }
 
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockSubmit.mockReset();
+  mockValidate.mockReset();
+});
+
 it('disables create button when no filters selected', () => {
+  mockValidate.mockReturnValue({ valid: false, issues: [] });
   renderActions();
   expect(screen.getByRole('button', { name: 'Create' })).toBeDisabled();
 });
@@ -80,20 +77,19 @@ it('creates group and marks visible on save', async () => {
     group: { ...defaultGroup.group, identity_addresses: ['0x1'] },
   };
   const originalGroup = { id: 'old', created_by: { handle: 'Alice' } } as any;
-  commonApiPost.mockResolvedValueOnce({ id: '123' }).mockResolvedValueOnce({});
+  mockValidate.mockReturnValue({ valid: true, issues: [] });
+  mockSubmit.mockResolvedValueOnce({ ok: true, group: { id: '123' }, published: true });
 
   const { auth, queryCtx, onCompleted } = renderActions({ groupConfig, originalGroup });
 
   await userEvent.click(screen.getByRole('button', { name: 'Create' }));
 
-  await waitFor(() => expect(commonApiPost).toHaveBeenCalledTimes(2));
-  expect(auth.requestAuth).toHaveBeenCalled();
-  expect(commonApiPost).toHaveBeenNthCalledWith(1, { endpoint: 'groups', body: groupConfig });
-  expect(commonApiPost).toHaveBeenNthCalledWith(2, {
-    endpoint: 'groups/123/visible',
-    body: { visible: true, old_version_id: 'old' },
+  await waitFor(() => expect(mockSubmit).toHaveBeenCalledTimes(1));
+  expect(mockSubmit).toHaveBeenCalledWith({
+    payload: groupConfig,
+    previousGroup: originalGroup,
+    currentHandle: 'alice',
   });
   expect(auth.setToast).toHaveBeenCalledWith({ message: 'Group created.', type: 'success' });
-  expect(queryCtx.onGroupCreate).toHaveBeenCalled();
   expect(onCompleted).toHaveBeenCalled();
 });

__tests__/components/groups/page/create/actions/GroupCreateTest.test.tsx

@@ -1,76 +1,107 @@
-// @ts-nocheck
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import GroupCreateTest from '@/components/groups/page/create/actions/GroupCreateTest';
 import { AuthContext } from '@/components/auth/Auth';
 
-const commonApiPost = jest.fn();
-const commonApiFetch = jest.fn();
+const hookState = {
+  runTest: jest.fn(),
+  isTesting: false,
+  submit: jest.fn(),
+  validate: jest.fn(),
+  updateVisibility: jest.fn(),
+  isUpdatingVisibility: false,
+};
 
-jest.mock('@/services/api/common-api', () => ({
-  commonApiPost: (...args: any[]) => commonApiPost(...args),
-  commonApiFetch: (...args: any[]) => commonApiFetch(...args),
+jest.mock('@/hooks/groups/useGroupMutations', () => ({
+  useGroupMutations: () => hookState,
 }));
 
-const mutateAsyncMock = jest.fn();
-
-const useMutationMock = jest.fn((options: any) => {
-  const mutateAsync = async (param?: any) => {
-    return options.mutationFn(param);
-  };
-  mutateAsyncMock.mockImplementation(mutateAsync);
-  return { mutateAsync: mutateAsyncMock };
-});
-
-const useQueryMock = jest.fn((...args: any[]) => ({ isFetching: false, data: undefined }));
-
+const useQueryMock = jest.fn().mockReturnValue({ isFetching: false, data: undefined });
 jest.mock('@tanstack/react-query', () => ({
-  useMutation: (opts: any) => useMutationMock(opts),
-  // @ts-expect-error - test mock
+  // @ts-expect-error - partial mock for tests
   useQuery: (...args: any[]) => useQueryMock(...args),
   keepPreviousData: {},
 }));
 
+const commonApiFetch = jest.fn();
+jest.mock('@/services/api/common-api', () => ({
+  commonApiFetch: (...args: any[]) => commonApiFetch(...args),
+}));
+
+const defaultGroupConfig = {
+  name: 'My Group',
+  group: {
+    identity_addresses: [],
+    excluded_identity_addresses: [],
+    owns_nfts: [],
+    tdh: { min: null, max: null },
+    rep: { min: null, max: null, user_identity: null, category: null, direction: null },
+    cic: { min: null, max: null, user_identity: null, direction: null },
+    level: { min: null, max: null },
+  },
+};
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  hookState.runTest.mockReset();
+  hookState.isTesting = false;
+});
+
 function renderComponent(props?: Partial<React.ComponentProps<typeof GroupCreateTest>>) {
   const auth = {
     requestAuth: jest.fn().mockResolvedValue({ success: true }),
     setToast: jest.fn(),
     connectedProfile: { handle: 'alice' },
   } as any;
+
   render(
     <AuthContext.Provider value={auth}>
-      <GroupCreateTest
-        groupConfig={{ name: 'name', group: {} } as any}
-        disabled={false}
-        {...props}
-      />
+      <GroupCreateTest groupConfig={defaultGroupConfig as any} disabled={false} {...props} />
     </AuthContext.Provider>
   );
+
   return { auth };
 }
 
-beforeEach(() => {
-  jest.clearAllMocks();
-});
-
-test('disables button when disabled prop true', () => {
+it('disables button when disabled prop true', () => {
   render(
     <AuthContext.Provider value={{} as any}>
-      <GroupCreateTest groupConfig={{} as any} disabled={true} />
+      <GroupCreateTest groupConfig={defaultGroupConfig as any} disabled />
     </AuthContext.Provider>
   );
+
   expect(screen.getByRole('button', { name: 'Test' })).toBeDisabled();
 });
 
-test('calls mutation and displays loader on click', async () => {
-  const { auth } = renderComponent();
-  const button = screen.getByRole('button', { name: 'Test' });
+it('calls runTest with payload and fallback name', async () => {
+  hookState.runTest.mockResolvedValueOnce({ ok: true, group: { id: '123' } });
+  const customConfig = {
+    ...defaultGroupConfig,
+    name: '',
+  };
 
-  await fireEvent.click(button);
+  renderComponent({ groupConfig: customConfig as any });
 
-  await waitFor(() => expect(auth.requestAuth).toHaveBeenCalled());
-  expect(mutateAsyncMock).toHaveBeenCalledWith({
-    name: 'name',
-    group: {},
+  await fireEvent.click(screen.getByRole('button', { name: 'Test' }));
+
+  await waitFor(() => expect(hookState.runTest).toHaveBeenCalledTimes(1));
+  expect(hookState.runTest).toHaveBeenCalledWith({
+    payload: customConfig,
+    nameFallback: 'alice Test Run',
+  });
+});
+
+it('shows toast when runTest fails with api error', async () => {
+  hookState.runTest.mockResolvedValueOnce({
+    ok: false,
+    reason: 'api',
+    error: 'failed',
   });
+
+  const { auth } = renderComponent();
+
+  await fireEvent.click(screen.getByRole('button', { name: 'Test' }));
+
+  await waitFor(() => expect(hookState.runTest).toHaveBeenCalled());
+  expect(auth.setToast).toHaveBeenCalledWith({ message: 'failed', type: 'error' });
 });