stream-chat-react-native-core 9.3.1 → 9.4.0-beta.2

package/src/components/ChannelDetails/__tests__/ChannelEditDetailsModal.test.tsx

@@ -0,0 +1,249 @@
+import React from 'react';
+import { Pressable, Text, TextInput, View } from 'react-native';
+
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import { NotificationManager } from 'stream-chat';
+import type { Channel } from 'stream-chat';
+
+import { AccessibilityProvider } from '../../../contexts/accessibilityContext/AccessibilityContext';
+import { ChannelDetailsContextProvider } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useChannelEditDetailsContext } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+import { ChatContext } from '../../../contexts/chatContext/ChatContext';
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelActions } from '../../../hooks/actions/useChannelActions';
+import { ChannelEditDetailsModal } from '../components/ChannelEditDetailsModal';
+
+jest.mock('../../../hooks/actions/useChannelActions');
+const mockedUseChannelActions = jest.mocked(useChannelActions);
+
+// Stands in for ChannelEditDetails: drives the channel name through the store
+// exposed by ChannelEditDetailsContext, the same way the real component does.
+const EditDetailsProbe = () => {
+  const { store } = useChannelEditDetailsContext();
+  return (
+    <View>
+      <TextInput
+        onChangeText={(name) => store.setCurrentName(name)}
+        placeholder='channel-name'
+        testID='channel-edit-name-input'
+      />
+      <Pressable onPress={() => store.setCurrentName('Different')} testID='probe-set-name'>
+        <Text>set</Text>
+      </Pressable>
+      <Pressable onPress={() => store.setCurrentName('')} testID='probe-clear-name'>
+        <Text>clear</Text>
+      </Pressable>
+      <Pressable onPress={() => store.setCurrentName('   ')} testID='probe-whitespace-name'>
+        <Text>whitespace</Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const buildChannel = (overrides?: { name?: string; cid?: string }): Channel =>
+  ({
+    cid: overrides?.cid ?? 'messaging:test',
+    data: { name: overrides?.name ?? 'Original' },
+    on: () => ({ unsubscribe: () => undefined }),
+    state: { members: {} },
+  }) as unknown as Channel;
+
+const renderModal = ({
+  channel,
+  onClose = jest.fn(),
+  visible = true,
+}: {
+  channel: Channel;
+  onClose?: () => void;
+  visible?: boolean;
+}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <AccessibilityProvider value={{ enabled: true }}>
+        <TranslationProvider
+          value={{
+            t: ((key: string) => key) as never,
+            tDateTimeParser: ((input: unknown) => input) as never,
+            userLanguage: 'en',
+          }}
+        >
+          <ChatContext.Provider
+            value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+          >
+            <ChannelDetailsContextProvider value={{ channel }}>
+              <WithComponents overrides={{ ChannelEditDetails: EditDetailsProbe }}>
+                <ChannelEditDetailsModal onClose={onClose} visible={visible} />
+              </WithComponents>
+            </ChannelDetailsContextProvider>
+          </ChatContext.Provider>
+        </TranslationProvider>
+      </AccessibilityProvider>
+    </ThemeProvider>,
+  );
+
+describe('ChannelEditDetailsModal', () => {
+  let updateNameSpy: jest.Mock;
+
+  beforeEach(() => {
+    updateNameSpy = jest.fn(async (_name: string, options?: { onSuccess?: () => unknown }) => {
+      await options?.onSuccess?.();
+    });
+    mockedUseChannelActions.mockReturnValue({
+      updateName: updateNameSpy,
+    } as unknown as ReturnType<typeof useChannelActions>);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    mockedUseChannelActions.mockReset();
+  });
+
+  it('disables the confirm button on initial render when the name is unchanged', () => {
+    renderModal({ channel: buildChannel() });
+
+    expect(
+      screen.getByTestId('channel-details-edit-confirm-button').props.accessibilityState,
+    ).toMatchObject({ disabled: true });
+  });
+
+  it('enables the confirm button after typing a different name', () => {
+    renderModal({ channel: buildChannel() });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Different');
+
+    expect(
+      screen.getByTestId('channel-details-edit-confirm-button').props.accessibilityState,
+    ).toMatchObject({ disabled: false });
+  });
+
+  it('enables the confirm button after clearing a channel that previously had a name', () => {
+    renderModal({ channel: buildChannel({ name: 'Original' }) });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), '');
+
+    expect(
+      screen.getByTestId('channel-details-edit-confirm-button').props.accessibilityState,
+    ).toMatchObject({ disabled: false });
+  });
+
+  it('enables confirm when the value differs from the initial name only by whitespace', () => {
+    renderModal({ channel: buildChannel({ name: 'Original' }) });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), '  Original  ');
+
+    expect(
+      screen.getByTestId('channel-details-edit-confirm-button').props.accessibilityState,
+    ).toMatchObject({ disabled: false });
+  });
+
+  it('passes the raw (untrimmed) name to updateName when the user confirms', async () => {
+    renderModal({ channel: buildChannel({ name: 'Original' }) });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), '  Renamed  ');
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('channel-details-edit-confirm-button'));
+      await Promise.resolve();
+    });
+
+    expect(updateNameSpy).toHaveBeenCalledWith(
+      '  Renamed  ',
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+  });
+
+  it('passes an empty string to updateName when the user clears and confirms', async () => {
+    renderModal({ channel: buildChannel({ name: 'Original' }) });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), '');
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('channel-details-edit-confirm-button'));
+      await Promise.resolve();
+    });
+
+    expect(updateNameSpy).toHaveBeenCalledWith(
+      '',
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+  });
+
+  it('closes the modal after updateName invokes onSuccess', async () => {
+    const onClose = jest.fn();
+    renderModal({ channel: buildChannel({ name: 'Original' }), onClose });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Renamed');
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('channel-details-edit-confirm-button'));
+      await Promise.resolve();
+    });
+
+    await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));
+  });
+
+  it('keeps the modal open and re-enables confirm when updateName does not invoke onSuccess', async () => {
+    updateNameSpy.mockResolvedValueOnce(undefined);
+    const onClose = jest.fn();
+    renderModal({ channel: buildChannel({ name: 'Original' }), onClose });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Renamed');
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('channel-details-edit-confirm-button'));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(onClose).not.toHaveBeenCalled();
+    expect(
+      screen.getByTestId('channel-details-edit-confirm-button').props.accessibilityState,
+    ).toMatchObject({ disabled: false, busy: false });
+  });
+
+  it('marks confirm as busy while updateName is in flight', async () => {
+    let releaseUpdate: (() => void) | undefined;
+    updateNameSpy.mockImplementationOnce(
+      () =>
+        new Promise<void>((resolve) => {
+          releaseUpdate = resolve;
+        }),
+    );
+    renderModal({ channel: buildChannel({ name: 'Original' }) });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Renamed');
+
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('channel-details-edit-confirm-button'));
+      await Promise.resolve();
+    });
+
+    expect(
+      screen.getByTestId('channel-details-edit-confirm-button').props.accessibilityState,
+    ).toMatchObject({ busy: true, disabled: true });
+
+    await act(async () => {
+      releaseUpdate?.();
+      await Promise.resolve();
+    });
+  });
+
+  it('invokes onClose when the user taps the close button', () => {
+    const onClose = jest.fn();
+    renderModal({ channel: buildChannel({ name: 'Original' }), onClose });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Renamed');
+    fireEvent.press(screen.getByLabelText('a11y/Close'));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders nothing when the channel has no cid (no notification host id)', () => {
+    renderModal({ channel: buildChannel({ cid: '' }) });
+
+    expect(screen.queryByTestId('channel-details-edit-confirm-button')).toBeNull();
+  });
+});

package/src/components/ChannelDetails/__tests__/ChannelEditImageSheet.test.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { ChannelEditDetailsContext } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import { EditChannelDetailsStore } from '../../../state-store/edit-channel-details-store';
+import type { ChannelDetailsActionItemProps } from '../components/ChannelDetailsActionItem';
+import { ChannelEditImageSheet } from '../components/ChannelEditImageSheet';
+
+jest.mock('../../UIComponents/BottomSheetModal', () => {
+  const React = require('react');
+  const {
+    BottomSheetProvider,
+  } = require('../../../contexts/bottomSheetContext/BottomSheetContext');
+  // Emulate the real modal: both `close` and `dismiss` run `onClose` and then the
+  // optional finished-callback, and the modal supplies the BottomSheetContext that
+  // `ChannelEditImageSheet` reads `close`/`dismiss` from.
+  return {
+    BottomSheetModal: ({
+      children,
+      onClose,
+      visible,
+    }: {
+      children: React.ReactNode;
+      onClose: () => void;
+      visible: boolean;
+    }) => {
+      if (!visible) {
+        return null;
+      }
+      const runClose = (callback?: () => void) => {
+        onClose();
+        callback?.();
+      };
+      return (
+        <BottomSheetProvider
+          value={
+            {
+              close: runClose,
+              currentSnapIndex: { value: 0 },
+              dismiss: runClose,
+              topSnapIndex: { value: 0 },
+            } as never
+          }
+        >
+          {children}
+        </BottomSheetProvider>
+      );
+    },
+  };
+});
+
+type Probe = ChannelDetailsActionItemProps & { testID?: string };
+
+const probeCalls: Probe[] = [];
+const ActionItemProbe = (props: Probe) => {
+  probeCalls.push(props);
+  return (
+    <Text onPress={props.onPress} testID={props.testID}>
+      {props.label}
+    </Text>
+  );
+};
+
+const buildChannel = (overrides?: { image?: string }): Channel =>
+  ({
+    cid: 'messaging:test',
+    data: {
+      ...(overrides && 'image' in overrides ? { image: overrides.image } : {}),
+    },
+    on: () => ({ unsubscribe: () => undefined }),
+    state: { members: {} },
+  }) as unknown as Channel;
+
+const renderSheet = ({
+  channel = buildChannel(),
+  onClose = jest.fn(),
+  visible = true,
+}: {
+  channel?: Channel;
+  onClose?: () => void;
+  visible?: boolean;
+} = {}) => {
+  const store = new EditChannelDetailsStore(channel);
+  const utils = render(
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider
+        value={{
+          t: ((key: string) => key) as never,
+          tDateTimeParser: ((input: unknown) => input) as never,
+          userLanguage: 'en',
+        }}
+      >
+        <ChannelEditDetailsContext.Provider value={{ store }}>
+          <WithComponents overrides={{ ChannelDetailsActionItem: ActionItemProbe }}>
+            <ChannelEditImageSheet onClose={onClose} visible={visible} />
+          </WithComponents>
+        </ChannelEditDetailsContext.Provider>
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+  return { ...utils, store };
+};
+
+describe('ChannelEditImageSheet', () => {
+  beforeEach(() => {
+    probeCalls.length = 0;
+  });
+
+  it('renders the localized header title', () => {
+    renderSheet();
+
+    expect(screen.getByText('Edit Group Picture')).toBeTruthy();
+  });
+
+  it('renders only Take Photo and Choose Image rows when there is no image to reset', () => {
+    renderSheet({ channel: buildChannel() });
+
+    expect(probeCalls.map((p) => p.label)).toEqual(['Take Photo', 'Choose Image']);
+    expect(probeCalls.every((p) => !p.destructive)).toBe(true);
+  });
+
+  it('renders the destructive Reset Picture row when the channel has an image', () => {
+    renderSheet({ channel: buildChannel({ image: 'https://example.com/live.png' }) });
+
+    expect(probeCalls.map((p) => p.label)).toEqual(['Take Photo', 'Choose Image', 'Reset Picture']);
+    const byTestID = Object.fromEntries(probeCalls.map((p) => [p.testID, p.destructive]));
+    expect(byTestID['channel-edit-picture-take-photo']).toBeFalsy();
+    expect(byTestID['channel-edit-picture-choose-image']).toBeFalsy();
+    expect(byTestID['channel-edit-picture-reset']).toBe(true);
+  });
+
+  it('closes the sheet and sets the camera pending action when Take Photo is pressed', () => {
+    const onClose = jest.fn();
+    const { store } = renderSheet({ onClose });
+
+    fireEvent.press(screen.getByTestId('channel-edit-picture-take-photo'));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(store.state.getLatestValue().pendingAction).toBe('camera');
+  });
+
+  it('closes the sheet and sets the library pending action when Choose Image is pressed', () => {
+    const onClose = jest.fn();
+    const { store } = renderSheet({ onClose });
+
+    fireEvent.press(screen.getByTestId('channel-edit-picture-choose-image'));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(store.state.getLatestValue().pendingAction).toBe('library');
+  });
+
+  it('closes the sheet and sets the reset pending action when Reset Picture is pressed', () => {
+    const onClose = jest.fn();
+    const { store } = renderSheet({
+      channel: buildChannel({ image: 'https://example.com/live.png' }),
+      onClose,
+    });
+
+    fireEvent.press(screen.getByTestId('channel-edit-picture-reset'));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(store.state.getLatestValue().pendingAction).toBe('reset');
+  });
+
+  it('invokes onClose when the header close button is pressed', () => {
+    const onClose = jest.fn();
+    renderSheet({ onClose });
+
+    fireEvent.press(screen.getByTestId('channel-edit-picture-sheet-close-button'));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders nothing when visible is false', () => {
+    const { toJSON } = renderSheet({ visible: false });
+
+    expect(toJSON()).toBeNull();
+  });
+});

package/src/components/ChannelDetails/__tests__/ChannelEditName.test.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { ChannelEditDetailsContext } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+import { ChatContext } from '../../../contexts/chatContext/ChatContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import { EditChannelDetailsStore } from '../../../state-store/edit-channel-details-store';
+import { ChannelEditName } from '../components/ChannelEditName';
+
+const buildChannel = (overrides?: { name?: string }): Channel =>
+  ({
+    cid: 'messaging:test',
+    data: {
+      name: overrides && 'name' in overrides ? overrides.name : 'Original',
+    },
+    on: () => ({ unsubscribe: () => undefined }),
+    state: { members: {} },
+  }) as unknown as Channel;
+
+const renderComponent = ({ channel }: { channel: Channel }) => {
+  const store = new EditChannelDetailsStore(channel);
+  const utils = render(
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider
+        value={{
+          t: ((key: string) => key) as never,
+          tDateTimeParser: ((input: unknown) => input) as never,
+          userLanguage: 'en',
+        }}
+      >
+        <ChatContext.Provider
+          value={
+            { client: { on: () => ({ unsubscribe: () => undefined }), userID: 'me' } } as never
+          }
+        >
+          <ChannelEditDetailsContext.Provider value={{ store }}>
+            <ChannelEditName />
+          </ChannelEditDetailsContext.Provider>
+        </ChatContext.Provider>
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+  return { ...utils, store };
+};
+
+describe('ChannelEditName', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the input pre-filled with the channel name', () => {
+    renderComponent({ channel: buildChannel({ name: 'Original' }) });
+
+    expect(screen.getByTestId('channel-edit-name-input').props.value).toBe('Original');
+  });
+
+  it('renders the input empty when the channel has no name', () => {
+    renderComponent({ channel: buildChannel({ name: undefined }) });
+
+    expect(screen.getByTestId('channel-edit-name-input').props.value).toBe('');
+  });
+
+  it('writes the typed value to the store', () => {
+    const { store } = renderComponent({ channel: buildChannel({ name: 'Original' }) });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Renamed');
+
+    expect(store.state.getLatestValue().currentName).toBe('Renamed');
+    expect(screen.getByTestId('channel-edit-name-input').props.value).toBe('Renamed');
+  });
+
+  it('writes an empty string to the store when the user clears the input', () => {
+    const { store } = renderComponent({ channel: buildChannel({ name: 'Original' }) });
+
+    fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), '');
+
+    expect(store.state.getLatestValue().currentName).toBe('');
+  });
+
+  it('leaves currentName at the initial name on mount', () => {
+    const { store } = renderComponent({ channel: buildChannel({ name: 'Original' }) });
+
+    expect(store.state.getLatestValue().currentName).toBe('Original');
+  });
+});

package/src/components/ChannelDetails/__tests__/members/AddMemberSearchResultItem.test.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import type { UserResponse } from 'stream-chat';
+
+import { ChannelAddMembersContext } from '../../../../contexts/channelAddMembersContext/ChannelAddMembersContext';
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
+import { useIsChannelMember } from '../../../../hooks/useIsChannelMember';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { SelectionStore } from '../../../../state-store/selection-store';
+import { AddMemberSearchResultItem } from '../../components/members/AddMemberSearchResultItem';
+
+jest.mock('../../../../hooks/useIsChannelMember', () => ({
+  useIsChannelMember: jest.fn(),
+}));
+
+const mockedUseIsChannelMember = useIsChannelMember as jest.MockedFunction<
+  typeof useIsChannelMember
+>;
+
+type RenderRowOptions = {
+  isAlreadyMember?: boolean;
+  onPress?: (user: UserResponse) => void;
+  selected?: boolean;
+  user: UserResponse;
+};
+
+const renderRow = ({
+  isAlreadyMember = false,
+  onPress = jest.fn(),
+  selected = false,
+  user,
+}: RenderRowOptions) => {
+  mockedUseIsChannelMember.mockReturnValue(isAlreadyMember);
+  const selectionStore = new SelectionStore();
+  if (selected) {
+    selectionStore.select(user.id);
+  }
+  return render(
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider
+        value={{
+          t: ((key: string, options?: Record<string, unknown>) => {
+            if (options && typeof options === 'object') {
+              return Object.entries(options).reduce(
+                (acc, [k, v]) => acc.replace(`{{${k}}}`, String(v)),
+                key,
+              );
+            }
+            return key;
+          }) as never,
+          tDateTimeParser: ((input: unknown) => input) as never,
+          userLanguage: 'en',
+        }}
+      >
+        <ChannelAddMembersContext.Provider value={{ selectionStore } as never}>
+          <AddMemberSearchResultItem onPress={onPress} user={user} />
+        </ChannelAddMembersContext.Provider>
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+};
+
+describe('AddMemberSearchResultItem', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders a selectable row with unselected accessibility state by default', () => {
+    const user = generateUser({ id: 'u-1', name: 'Alice' });
+    renderRow({ user });
+
+    const row = screen.getByTestId('channel-add-members-row-u-1');
+    expect(row.props.accessibilityState).toMatchObject({ disabled: false, selected: false });
+    expect(screen.getByLabelText('a11y/Select Alice')).toBeTruthy();
+    expect(screen.queryByTestId('channel-add-members-row-u-1-member-label')).toBeNull();
+  });
+
+  it('flips accessibilityState.selected when the user is selected in the store', () => {
+    const user = generateUser({ id: 'u-1', name: 'Alice' });
+    renderRow({ selected: true, user });
+
+    expect(
+      screen.getByTestId('channel-add-members-row-u-1').props.accessibilityState,
+    ).toMatchObject({ disabled: false, selected: true });
+  });
+
+  it('calls onPress when the row is pressed', () => {
+    const onPress = jest.fn();
+    const user = generateUser({ id: 'u-1', name: 'Alice' });
+    renderRow({ onPress, user });
+
+    fireEvent.press(screen.getByTestId('channel-add-members-row-u-1'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onPress).toHaveBeenCalledWith(user);
+  });
+
+  it('falls back to the user id when no name is set', () => {
+    const user = generateUser({ id: 'u-no-name', name: undefined });
+    renderRow({ user });
+
+    expect(screen.getByLabelText('a11y/Select u-no-name')).toBeTruthy();
+    expect(screen.getByText('u-no-name')).toBeTruthy();
+  });
+
+  describe('when the user is already a member', () => {
+    it('renders the disabled variant with a member label and no button role', () => {
+      const user = generateUser({ id: 'u-2', name: 'Bob' });
+      renderRow({ isAlreadyMember: true, user });
+
+      const row = screen.getByTestId('channel-add-members-row-u-2');
+      expect(row.props.accessibilityState).toMatchObject({ disabled: true, selected: false });
+      expect(row.props.accessibilityRole).toBeUndefined();
+      expect(screen.getByTestId('channel-add-members-row-u-2-member-label')).toBeTruthy();
+      expect(screen.getByText('Already a member')).toBeTruthy();
+      expect(screen.getByLabelText('a11y/Bob is already a member')).toBeTruthy();
+    });
+  });
+});