import { fireEvent, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { toast } from 'sonner'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { InviteMemberButton } from '@/components/interfaces/Organization/TeamSettings/InviteMemberButton'
import { customRender } from '@/tests/lib/custom-render'
vi.mock('sonner', () => ({
toast: { success: vi.fn(), error: vi.fn() },
}))
vi.mock('common', async (importOriginal) => {
const actual = (await importOriginal()) as typeof import('common')
return { ...actual, useParams: () => ({ slug: 'test-org' }) }
})
vi.mock('@/lib/profile', () => ({
useProfile: () => ({ profile: { id: 1, gotrue_id: 'user-1' } }),
}))
vi.mock('@/hooks/misc/useSelectedOrganization', () => ({
useSelectedOrganizationQuery: () => ({
data: { id: 1, slug: 'test-org', name: 'Test Org' },
}),
}))
vi.mock('@/hooks/misc/useCheckPermissions', () => ({
useGetPermissions: () => ({ permissions: [], organizationSlug: 'test-org' }),
doPermissionsCheck: () => true,
useAsyncCheckPermissions: () => ({ can: true, isSuccess: true }),
}))
vi.mock('@/hooks/misc/useIsFeatureEnabled', () => ({
useIsFeatureEnabled: () => ({ organizationMembersCreate: true }),
}))
vi.mock('@/data/organizations/organization-members-query', () => ({
useOrganizationMembersQuery: () => ({
data: [
{
gotrue_id: 'user-1',
primary_email: 'me@example.com',
role_ids: [1],
},
{
gotrue_id: 'existing-user',
primary_email: 'existing@example.com',
role_ids: [1],
},
],
}),
}))
const mockRoles = {
org_scoped_roles: [{ id: 1, name: 'Developer', description: null }],
}
vi.mock('@/data/organization-members/organization-roles-query', () => ({
useOrganizationRolesV2Query: () => ({ data: mockRoles, isSuccess: true }),
}))
vi.mock('@/data/sso/sso-config-query', () => ({
useOrgSSOConfigQuery: () => ({ data: null }),
}))
vi.mock('@/data/subscriptions/org-subscription-query', () => ({
useHasAccessToProjectLevelPermissions: () => false,
}))
vi.mock('@/hooks/misc/useCheckEntitlements', () => ({
useCheckEntitlements: () => ({ hasAccess: false }),
}))
vi.mock('@/components/interfaces/Organization/TeamSettings/TeamSettings.utils', () => ({
useGetRolesManagementPermissions: () => ({ rolesAddable: [1], rolesRemovable: [1] }),
}))
const mockInvite = vi.fn().mockResolvedValue({ succeeded: [], failed: [] })
vi.mock('@/data/organization-members/organization-invitation-create-mutation', () => ({
useOrganizationCreateInvitationMutation: () => ({
mutateAsync: mockInvite,
isPending: false,
}),
}))
vi.mock('@/hooks/ui/useConfirmOnClose', () => ({
useConfirmOnClose: ({ onClose }: { checkIsDirty: () => boolean; onClose: () => void }) => ({
confirmOnClose: onClose,
handleOpenChange: (open: boolean) => {
if (!open) onClose()
},
modalProps: { visible: false, onClose, onCancel: vi.fn() },
}),
}))
// Helpers
async function openDialog() {
await userEvent.click(screen.getByRole('button', { name: /invite members/i }))
return screen.findByRole('dialog')
}
async function submitForm(emailValue: string) {
await openDialog()
fireEvent.change(screen.getByPlaceholderText(/name@example\.com/i), {
target: { value: emailValue },
})
fireEvent.click(screen.getByRole('button', { name: /send invitation/i }))
}
// Tests
describe('InviteMemberButton', () => {
beforeEach(() => {
vi.clearAllMocks()
mockInvite.mockResolvedValue({ succeeded: [], failed: [] })
})
it('renders an enabled Invite members button', () => {
customRender()
expect(screen.getByRole('button', { name: /invite members/i })).toBeEnabled()
})
it('opens the invite dialog when the button is clicked', async () => {
customRender()
await openDialog()
expect(screen.getByRole('dialog')).toBeInTheDocument()
expect(screen.getByText('Invite team members')).toBeInTheDocument()
})
it('calls the mutation with a single email in an array', async () => {
customRender()
await submitForm('new@example.com')
await waitFor(() => {
expect(mockInvite).toHaveBeenCalledWith(
expect.objectContaining({ emails: ['new@example.com'] })
)
})
})
it('calls the mutation with multiple emails parsed from a comma-separated input', async () => {
customRender()
await submitForm('alice@example.com, bob@example.com, carol@example.com')
await waitFor(() => {
expect(mockInvite).toHaveBeenCalledWith(
expect.objectContaining({
emails: ['alice@example.com', 'bob@example.com', 'carol@example.com'],
})
)
})
})
it('lowercases emails before sending', async () => {
customRender()
await submitForm('User@Example.COM')
await waitFor(() => {
expect(mockInvite).toHaveBeenCalledWith(
expect.objectContaining({ emails: ['user@example.com'] })
)
})
})
it('shows a validation error for an invalid email', async () => {
customRender()
await openDialog()
fireEvent.change(screen.getByPlaceholderText(/name@example\.com/i), {
target: { value: 'not-an-email' },
})
fireEvent.click(screen.getByRole('button', { name: /send invitation/i }))
expect(await screen.findByText(/invalid email address: "not-an-email"/i)).toBeInTheDocument()
expect(mockInvite).not.toHaveBeenCalled()
})
it('shows an error toast and skips the mutation for an already-existing member', async () => {
customRender()
await submitForm('existing@example.com')
await waitFor(() => {
expect(toast.error).toHaveBeenCalledWith(
'existing@example.com is already in this organization'
)
})
expect(mockInvite).not.toHaveBeenCalled()
})
it('still invites new emails in a batch that also contains an existing member', async () => {
customRender()
await submitForm('new@example.com, existing@example.com')
await waitFor(() => {
expect(toast.error).toHaveBeenCalled()
expect(mockInvite).toHaveBeenCalledWith(
expect.objectContaining({ emails: ['new@example.com'] })
)
})
})
it('shows a success toast for a single email in succeeded', async () => {
mockInvite.mockResolvedValueOnce({ succeeded: ['new@example.com'], failed: [] })
customRender()
await submitForm('new@example.com')
await waitFor(() => {
expect(toast.success).toHaveBeenCalledWith('Successfully sent invitation to new member')
})
})
it('shows a plural success toast when multiple emails succeeded', async () => {
mockInvite.mockResolvedValueOnce({
succeeded: ['alice@example.com', 'bob@example.com'],
failed: [],
})
customRender()
await submitForm('alice@example.com, bob@example.com')
await waitFor(() => {
expect(toast.success).toHaveBeenCalledWith('Successfully sent invitations to 2 new members')
})
})
it('shows an error toast with the server error for each failed email', async () => {
mockInvite.mockResolvedValueOnce({
succeeded: [],
failed: [{ email: 'new@example.com', error: 'Domain not allowed' }],
})
customRender()
await submitForm('new@example.com')
await waitFor(() => {
expect(toast.error).toHaveBeenCalledWith(
'Failed to invite new@example.com: Domain not allowed'
)
})
expect(toast.success).not.toHaveBeenCalled()
})
it('shows both success and error toasts for a partial batch result', async () => {
mockInvite.mockResolvedValueOnce({
succeeded: ['alice@example.com'],
failed: [{ email: 'bob@example.com', error: 'Domain not allowed' }],
})
customRender()
await submitForm('alice@example.com, bob@example.com')
await waitFor(() => {
expect(toast.success).toHaveBeenCalledWith('Successfully sent invitation to new member')
expect(toast.error).toHaveBeenCalledWith(
'Failed to invite bob@example.com: Domain not allowed'
)
})
})
})