stream-chat-react-native-core 9.3.1-beta.6 → 9.3.1-beta.8

package/src/components/Poll/hooks/__tests__/usePollAccessibilityActions.test.tsx

@@ -1,358 +0,0 @@
-import React from 'react';
-
-import type { AccessibilityActionEvent } from 'react-native';
-
-import { act, renderHook } from '@testing-library/react-native';
-
-import { AccessibilityProvider } from '../../../../contexts/accessibilityContext/AccessibilityContext';
-import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
-import { usePollAccessibilityActions } from '../usePollAccessibilityActions';
-
-const mockOpenAddComment = jest.fn();
-const mockOpenAllComments = jest.fn();
-const mockOpenAllOptions = jest.fn();
-const mockOpenSuggestOption = jest.fn();
-const mockOpenViewResults = jest.fn();
-const mockEndVote = jest.fn();
-const mockToggleVote = jest.fn();
-
-jest.mock('../../contexts/PollUIStateContext', () => ({
-  usePollUIStateContext: () => ({
-    openAddComment: mockOpenAddComment,
-    openAllComments: mockOpenAllComments,
-    openAllOptions: mockOpenAllOptions,
-    openSuggestOption: mockOpenSuggestOption,
-    openViewResults: mockOpenViewResults,
-  }),
-}));
-
-jest.mock('../usePollStateStore', () => ({
-  usePollStateStore: (selector: (state: unknown) => unknown) => selector(mockPollState),
-}));
-
-jest.mock('../useEndVote', () => ({
-  useEndVote: () => mockEndVote,
-}));
-
-jest.mock('../usePollVoteToggle', () => ({
-  usePollVoteToggle: () => mockToggleVote,
-}));
-
-const mockChatContext = { client: { userID: 'me' } };
-const mockOwnCapabilities = { castPollVote: true };
-
-jest.mock('../../../../contexts', () => {
-  const actual = jest.requireActual('../../../../contexts');
-  return {
-    ...actual,
-    useChatContext: () => mockChatContext,
-    useOwnCapabilitiesContext: () => mockOwnCapabilities,
-  };
-});
-
-let mockPollState: Record<string, unknown> = {};
-
-const setPollState = (state: Record<string, unknown>) => {
-  mockPollState = state;
-};
-
-const setCastPollVote = (allowed: boolean) => {
-  mockOwnCapabilities.castPollVote = allowed;
-};
-
-const setUserID = (id: string) => {
-  mockChatContext.client.userID = id;
-};
-
-const t = (key: string, vars?: Record<string, unknown>) => {
-  if (!vars) return key;
-  if (key === 'a11y/Vote on {{option}}') return `Vote on ${vars.option}`;
-  return key;
-};
-
-const wrapper =
-  (enabled: boolean) =>
-  ({ children }: { children: React.ReactNode }) => (
-    <AccessibilityProvider value={{ enabled }}>
-      <TranslationProvider
-        value={
-          {
-            t,
-            tDateTimeParser: () => null,
-          } as never
-        }
-      >
-        {children}
-      </TranslationProvider>
-    </AccessibilityProvider>
-  );
-
-const buildOption = (id: string, text: string) => ({ id, text });
-
-const fireAction = (
-  handler: ((event: AccessibilityActionEvent) => void) | undefined,
-  actionName: string,
-) => {
-  handler?.({ nativeEvent: { actionName } } as AccessibilityActionEvent);
-};
-
-beforeEach(() => {
-  mockOpenAddComment.mockClear();
-  mockOpenAllComments.mockClear();
-  mockOpenAllOptions.mockClear();
-  mockOpenSuggestOption.mockClear();
-  mockOpenViewResults.mockClear();
-  mockEndVote.mockClear();
-  mockToggleVote.mockClear();
-  setCastPollVote(true);
-  setUserID('me');
-});
-
-describe('usePollAccessibilityActions', () => {
-  it('returns undefined when accessibility is disabled', () => {
-    setPollState({
-      allow_answers: true,
-      allow_user_suggested_options: true,
-      created_by: { id: 'me' },
-      is_closed: false,
-      options: [buildOption('o1', 'A')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(false),
-    });
-
-    expect(result.current.accessibilityActions).toBeUndefined();
-    expect(result.current.onAccessibilityAction).toBeUndefined();
-  });
-
-  it('every action uses the same human label for name and label', () => {
-    setPollState({
-      allow_answers: true,
-      allow_user_suggested_options: true,
-      created_by: { id: 'me' },
-      is_closed: false,
-      options: [buildOption('o1', 'Pizza'), buildOption('o2', 'Pasta')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    const actions = result.current.accessibilityActions;
-    expect(actions).toBeDefined();
-    for (const action of actions ?? []) {
-      expect(action.name).toBe(action.label);
-    }
-  });
-
-  it('exposes only View Results for an ended poll', () => {
-    setPollState({
-      allow_answers: true,
-      allow_user_suggested_options: true,
-      created_by: { id: 'me' },
-      is_closed: true,
-      options: [buildOption('o1', 'A'), buildOption('o2', 'B')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    const labels = result.current.accessibilityActions?.map((a) => a.label);
-    expect(labels).toEqual(['View Results']);
-  });
-
-  it('lists vote actions with the option text, plus End vote / Add comment / Suggest option for creator', () => {
-    setPollState({
-      allow_answers: true,
-      allow_user_suggested_options: true,
-      created_by: { id: 'me' },
-      is_closed: false,
-      options: [buildOption('o1', 'Pizza'), buildOption('o2', 'Pasta')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    const labels = result.current.accessibilityActions?.map((a) => a.label);
-    expect(labels).toEqual([
-      'View Results',
-      'Vote on Pizza',
-      'Vote on Pasta',
-      'a11y/End vote',
-      'Add a comment',
-      'Suggest an option',
-    ]);
-  });
-
-  it('omits End vote when the current user is not the creator', () => {
-    setUserID('someone-else');
-    setPollState({
-      allow_answers: false,
-      allow_user_suggested_options: false,
-      created_by: { id: 'me' },
-      is_closed: false,
-      options: [buildOption('o1', 'Pizza')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    const labels = result.current.accessibilityActions?.map((a) => a.label);
-    expect(labels).toEqual(['View Results', 'Vote on Pizza']);
-  });
-
-  it('omits vote actions when the user lacks castPollVote capability', () => {
-    setCastPollVote(false);
-    setPollState({
-      allow_answers: true,
-      allow_user_suggested_options: false,
-      created_by: { id: 'somebody' },
-      is_closed: false,
-      options: [buildOption('o1', 'Pizza')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    const labels = result.current.accessibilityActions?.map((a) => a.label);
-    expect(labels?.some((l) => l?.startsWith('Vote on'))).toBe(false);
-  });
-
-  it('exposes "View N comments" when the poll has answers', () => {
-    setPollState({
-      allow_answers: false,
-      allow_user_suggested_options: false,
-      answers_count: 4,
-      created_by: { id: 'somebody' },
-      is_closed: true,
-      options: [buildOption('o1', 'A')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    const labels = result.current.accessibilityActions?.map((a) => a.label);
-    expect(labels).toContain('View {{count}} comments');
-  });
-
-  it('omits "View N comments" when there are no answers', () => {
-    setPollState({
-      allow_answers: false,
-      allow_user_suggested_options: false,
-      answers_count: 0,
-      created_by: { id: 'somebody' },
-      is_closed: true,
-      options: [buildOption('o1', 'A')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    const labels = result.current.accessibilityActions?.map((a) => a.label);
-    expect(labels?.some((l) => l?.includes('comments'))).toBe(false);
-  });
-
-  it('exposes Show all options when options exceed the visible cap', () => {
-    const manyOptions = Array.from({ length: 12 }, (_, i) => buildOption(`o${i}`, `Option ${i}`));
-    setPollState({
-      allow_answers: false,
-      allow_user_suggested_options: false,
-      created_by: { id: 'somebody' },
-      is_closed: true,
-      options: manyOptions,
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    const labels = result.current.accessibilityActions?.map((a) => a.label);
-    expect(labels).toContain('a11y/Show all options');
-  });
-
-  it('routes each action to the right side effect', () => {
-    setPollState({
-      allow_answers: true,
-      allow_user_suggested_options: true,
-      created_by: { id: 'me' },
-      is_closed: false,
-      options: [buildOption('o1', 'Pizza'), buildOption('o2', 'Pasta')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    act(() => {
-      fireAction(result.current.onAccessibilityAction, 'View Results');
-    });
-    expect(mockOpenViewResults).toHaveBeenCalledTimes(1);
-
-    act(() => {
-      fireAction(result.current.onAccessibilityAction, 'a11y/End vote');
-    });
-    expect(mockEndVote).toHaveBeenCalledTimes(1);
-
-    act(() => {
-      fireAction(result.current.onAccessibilityAction, 'Add a comment');
-    });
-    expect(mockOpenAddComment).toHaveBeenCalledTimes(1);
-
-    act(() => {
-      fireAction(result.current.onAccessibilityAction, 'Suggest an option');
-    });
-    expect(mockOpenSuggestOption).toHaveBeenCalledTimes(1);
-
-    act(() => {
-      fireAction(result.current.onAccessibilityAction, 'Vote on Pasta');
-    });
-    expect(mockToggleVote).toHaveBeenCalledWith('o2');
-  });
-
-  it('routes the "View N comments" action to openAllComments', () => {
-    setPollState({
-      allow_answers: false,
-      allow_user_suggested_options: false,
-      answers_count: 7,
-      created_by: { id: 'somebody' },
-      is_closed: true,
-      options: [buildOption('o1', 'A')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    act(() => {
-      fireAction(result.current.onAccessibilityAction, 'View {{count}} comments');
-    });
-    expect(mockOpenAllComments).toHaveBeenCalledTimes(1);
-  });
-
-  it('ignores unknown action names', () => {
-    setPollState({
-      allow_answers: true,
-      allow_user_suggested_options: true,
-      created_by: { id: 'me' },
-      is_closed: false,
-      options: [buildOption('o1', 'Pizza')],
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityActions(), {
-      wrapper: wrapper(true),
-    });
-
-    act(() => {
-      fireAction(result.current.onAccessibilityAction, 'streamPollVoteOption_o1');
-    });
-    expect(mockToggleVote).not.toHaveBeenCalled();
-    expect(mockOpenViewResults).not.toHaveBeenCalled();
-  });
-});

package/src/components/Poll/hooks/__tests__/usePollAccessibilityLabel.test.tsx

@@ -1,142 +0,0 @@
-import React from 'react';
-
-import { renderHook } from '@testing-library/react-native';
-
-import { AccessibilityProvider } from '../../../../contexts/accessibilityContext/AccessibilityContext';
-import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
-import { usePollAccessibilityLabel } from '../usePollAccessibilityLabel';
-
-jest.mock('../usePollStateStore', () => ({
-  usePollStateStore: (selector: (state: unknown) => unknown) => selector(mockPollState),
-}));
-
-let mockPollState: Record<string, unknown> = {};
-
-const setPollState = (state: Record<string, unknown>) => {
-  mockPollState = state;
-};
-
-const t = (key: string, vars?: Record<string, unknown>) => {
-  if (!vars) return key;
-  if (key === '{{count}} votes') return `${vars.count} votes`;
-  if (key === 'Select up to {{count}}') return `Select up to ${vars.count}`;
-  if (key === '+{{count}} More Options') return `+${vars.count} More Options`;
-  return key;
-};
-
-const wrapper =
-  (enabled: boolean) =>
-  ({ children }: { children: React.ReactNode }) => (
-    <AccessibilityProvider value={{ enabled }}>
-      <TranslationProvider
-        value={
-          {
-            t,
-            tDateTimeParser: () => null,
-          } as never
-        }
-      >
-        {children}
-      </TranslationProvider>
-    </AccessibilityProvider>
-  );
-
-const buildOption = (id: string, text: string) => ({ id, text });
-
-describe('usePollAccessibilityLabel', () => {
-  it('returns undefined when accessibility is disabled', () => {
-    setPollState({
-      enforce_unique_vote: false,
-      is_closed: true,
-      max_votes_allowed: 0,
-      name: 'Lunch?',
-      options: [buildOption('o1', 'Pizza')],
-      vote_counts_by_option: { o1: 3 },
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityLabel(), {
-      wrapper: wrapper(false),
-    });
-
-    expect(result.current).toBeUndefined();
-  });
-
-  it('builds composite label for an ended poll', () => {
-    setPollState({
-      enforce_unique_vote: false,
-      is_closed: true,
-      max_votes_allowed: 0,
-      name: 'Test',
-      options: [buildOption('o1', 'Option 1'), buildOption('o2', 'Option 2')],
-      vote_counts_by_option: { o1: 0, o2: 0 },
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityLabel(), {
-      wrapper: wrapper(true),
-    });
-
-    expect(result.current).toBe(
-      'Test, Poll has ended, Option 1: 0 votes, Option 2: 0 votes, a11y/Activate to view results',
-    );
-  });
-
-  it('uses "Select one" for an open enforce-unique-vote poll', () => {
-    setPollState({
-      enforce_unique_vote: true,
-      is_closed: false,
-      max_votes_allowed: 0,
-      name: 'Pick a venue',
-      options: [buildOption('o1', 'Cafe')],
-      vote_counts_by_option: { o1: 2 },
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityLabel(), {
-      wrapper: wrapper(true),
-    });
-
-    expect(result.current).toBe(
-      'Pick a venue, Select one, Cafe: 2 votes, a11y/Activate to view results',
-    );
-  });
-
-  it('uses "Select up to N" when maxVotesAllowed is set', () => {
-    setPollState({
-      enforce_unique_vote: false,
-      is_closed: false,
-      max_votes_allowed: 3,
-      name: 'Top picks',
-      options: [buildOption('o1', 'A')],
-      vote_counts_by_option: { o1: 1 },
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityLabel(), {
-      wrapper: wrapper(true),
-    });
-
-    expect(result.current).toBe(
-      'Top picks, Select up to 3, A: 1 votes, a11y/Activate to view results',
-    );
-  });
-
-  it('appends overflow hint when options exceed the visible cap', () => {
-    const manyOptions = Array.from({ length: 12 }, (_, i) => buildOption(`o${i}`, `Option ${i}`));
-    const counts = Object.fromEntries(manyOptions.map((o) => [o.id, 0]));
-
-    setPollState({
-      enforce_unique_vote: false,
-      is_closed: false,
-      max_votes_allowed: 0,
-      name: 'Big poll',
-      options: manyOptions,
-      vote_counts_by_option: counts,
-    });
-
-    const { result } = renderHook(() => usePollAccessibilityLabel(), {
-      wrapper: wrapper(true),
-    });
-
-    expect(result.current).toContain('+7 More Options');
-    expect(result.current).toContain('Option 0: 0 votes');
-    expect(result.current).not.toContain('Option 5:');
-  });
-});

package/src/components/Poll/hooks/usePollAccessibilityActions.ts

@@ -1,191 +0,0 @@
-import { useMemo } from 'react';
-
-import type { AccessibilityActionEvent, AccessibilityProps } from 'react-native';
-
-import { PollOption, PollState, UserResponse } from 'stream-chat';
-
-import { useEndVote } from './useEndVote';
-
-import { usePollStateStore } from './usePollStateStore';
-
-import { usePollVoteToggle } from './usePollVoteToggle';
-
-import {
-  useChatContext,
-  useOwnCapabilitiesContext,
-  useTranslationContext,
-} from '../../../contexts';
-import { useAccessibilityContext } from '../../../contexts/accessibilityContext/AccessibilityContext';
-import { useStableCallback } from '../../../hooks';
-import { defaultPollOptionCount } from '../../../utils/constants';
-import { usePollUIStateContext } from '../contexts/PollUIStateContext';
-
-type AccessibilityAction = NonNullable<AccessibilityProps['accessibilityActions']>[number];
-type OnAccessibilityAction = NonNullable<AccessibilityProps['onAccessibilityAction']>;
-
-type PollA11yActionsSelectorResult = {
-  allowAnswers: boolean | undefined;
-  allowUserSuggestedOptions: boolean | undefined;
-  answersCount: number;
-  createdBy: UserResponse | null;
-  isClosed: boolean | undefined;
-  options: PollOption[];
-};
-
-const a11yActionsSelector = (state: PollState): PollA11yActionsSelectorResult => ({
-  allowAnswers: state.allow_answers,
-  allowUserSuggestedOptions: state.allow_user_suggested_options,
-  answersCount: state.answers_count,
-  createdBy: state.created_by,
-  isClosed: state.is_closed,
-  options: state.options,
-});
-
-export type UsePollAccessibilityActionsResult = {
-  accessibilityActions: readonly AccessibilityAction[] | undefined;
-  onAccessibilityAction: OnAccessibilityAction | undefined;
-};
-
-type ActionKind =
-  | { type: 'addComment' }
-  | { type: 'endVote' }
-  | { type: 'showAllComments' }
-  | { type: 'showAllOptions' }
-  | { type: 'suggestOption' }
-  | { type: 'viewResults' }
-  | { type: 'vote'; optionId: string };
-
-/**
- * Returns the `accessibilityActions` array and `onAccessibilityAction` handler
- * for the poll composite container. Action set is gated by poll state +
- * capabilities so each rotor entry corresponds to an interaction the user is
- * actually allowed to perform. Returns `undefined`s when a11y is disabled.
- *
- * NOTE: We set both `name` and `label` to the same human-readable string on
- * every action. iOS Fabric (new architecture, on by default in RN 0.81+) uses
- * `accessibilityAction.name` as the string VoiceOver reads — `label` is
- * ignored on that path (RCTViewComponentView.mm). iOS legacy (Paper) and
- * Android both read `label`. Using the same value for both fields means the
- * announcement is human-readable on every platform/architecture. Dispatch
- * uses the action name as the lookup key into an internal kind map, so the
- * raw strings never need to be exposed to consumers.
- */
-export const usePollAccessibilityActions = (): UsePollAccessibilityActionsResult => {
-  const { enabled } = useAccessibilityContext();
-  const { t } = useTranslationContext();
-  const { client } = useChatContext();
-  const { castPollVote } = useOwnCapabilitiesContext();
-  const { allowAnswers, allowUserSuggestedOptions, answersCount, createdBy, isClosed, options } =
-    usePollStateStore(a11yActionsSelector);
-  const { openAddComment, openAllComments, openAllOptions, openSuggestOption, openViewResults } =
-    usePollUIStateContext();
-  const toggleVote = usePollVoteToggle();
-  const endVote = useEndVote();
-
-  const canVote = !isClosed && !!castPollVote;
-  const canEnd = !isClosed && createdBy?.id === client.userID;
-  const canComment = !isClosed && !!allowAnswers;
-  const canSuggest = !isClosed && !!allowUserSuggestedOptions;
-  const hasMoreOptions = !!options && options.length > defaultPollOptionCount;
-  const hasComments = answersCount > 0;
-
-  const { accessibilityActions, actionKindByName } = useMemo<{
-    accessibilityActions: readonly AccessibilityAction[] | undefined;
-    actionKindByName: Map<string, ActionKind> | undefined;
-  }>(() => {
-    if (!enabled) {
-      return { accessibilityActions: undefined, actionKindByName: undefined };
-    }
-
-    const actions: AccessibilityAction[] = [];
-    const kindByName = new Map<string, ActionKind>();
-
-    const push = (name: string, kind: ActionKind) => {
-      actions.push({ label: name, name });
-      kindByName.set(name, kind);
-    };
-
-    push(t('View Results'), { type: 'viewResults' });
-
-    if (canVote && options) {
-      for (const option of options.slice(0, defaultPollOptionCount)) {
-        push(t('a11y/Vote on {{option}}', { option: option.text }), {
-          optionId: option.id,
-          type: 'vote',
-        });
-      }
-    }
-
-    if (hasMoreOptions) {
-      push(t('a11y/Show all options'), { type: 'showAllOptions' });
-    }
-
-    if (canEnd) {
-      push(t('a11y/End vote'), { type: 'endVote' });
-    }
-
-    if (canComment) {
-      push(t('Add a comment'), { type: 'addComment' });
-    }
-
-    if (canSuggest) {
-      push(t('Suggest an option'), { type: 'suggestOption' });
-    }
-
-    if (hasComments) {
-      push(t('View {{count}} comments', { count: answersCount }), { type: 'showAllComments' });
-    }
-
-    return { accessibilityActions: actions, actionKindByName: kindByName };
-  }, [
-    answersCount,
-    canComment,
-    canEnd,
-    canSuggest,
-    canVote,
-    enabled,
-    hasComments,
-    hasMoreOptions,
-    options,
-    t,
-  ]);
-
-  const onAccessibilityAction = useStableCallback((event: AccessibilityActionEvent) => {
-    const kind = actionKindByName?.get(event.nativeEvent.actionName);
-    if (!kind) return;
-
-    switch (kind.type) {
-      case 'viewResults':
-        openViewResults();
-        return;
-      case 'showAllOptions':
-        openAllOptions();
-        return;
-      case 'endVote':
-        void endVote();
-        return;
-      case 'addComment':
-        openAddComment();
-        return;
-      case 'suggestOption':
-        openSuggestOption();
-        return;
-      case 'showAllComments':
-        openAllComments();
-        return;
-      case 'vote':
-        void toggleVote(kind.optionId);
-        return;
-      default:
-        return;
-    }
-  });
-
-  return useMemo(
-    () => ({
-      accessibilityActions,
-      onAccessibilityAction: enabled ? onAccessibilityAction : undefined,
-    }),
-    [accessibilityActions, enabled, onAccessibilityAction],
-  );
-};