-
Notifications
You must be signed in to change notification settings - Fork 282
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(clerk-js): Use Gate in OrganizationSwitcher
- Loading branch information
1 parent
e1e5d37
commit 1a8af3f
Showing
4 changed files
with
73 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@clerk/clerk-js': patch | ||
--- | ||
|
||
Replace role based check with permission based checks inside the OrganizationSwitcher component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,30 +10,33 @@ const { createFixtures } = bindCreateFixtures('OrganizationSwitcher'); | |
|
||
describe('OrganizationSwitcher', () => { | ||
it('renders component', async () => { | ||
const { wrapper } = await createFixtures(f => { | ||
const { wrapper, fixtures } = await createFixtures(f => { | ||
f.withOrganizations(); | ||
f.withUser({ email_addresses: ['[email protected]'] }); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
const { queryByRole } = await act(() => render(<OrganizationSwitcher />, { wrapper })); | ||
expect(queryByRole('button')).toBeDefined(); | ||
}); | ||
|
||
describe('Personal Workspace', () => { | ||
it('shows the personal workspace when enabled', async () => { | ||
const { wrapper, props } = await createFixtures(f => { | ||
const { wrapper, props, fixtures } = await createFixtures(f => { | ||
f.withOrganizations(); | ||
f.withUser({ email_addresses: ['[email protected]'] }); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
props.setProps({ hidePersonal: false }); | ||
const { getByText } = await act(() => render(<OrganizationSwitcher />, { wrapper })); | ||
expect(getByText('Personal account')).toBeDefined(); | ||
}); | ||
|
||
it('does not show the personal workspace when disabled', async () => { | ||
const { wrapper, props } = await createFixtures(f => { | ||
const { wrapper, props, fixtures } = await createFixtures(f => { | ||
f.withOrganizations(); | ||
f.withUser({ email_addresses: ['[email protected]'] }); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
props.setProps({ hidePersonal: true }); | ||
const { queryByText, getByRole, userEvent, getByText } = render(<OrganizationSwitcher />, { wrapper }); | ||
await userEvent.click(getByRole('button')); | ||
|
@@ -63,6 +66,8 @@ describe('OrganizationSwitcher', () => { | |
}), | ||
); | ||
|
||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(true); | ||
|
||
await runFakeTimers(async () => { | ||
const { getByText } = render(<OrganizationSwitcher />, { wrapper }); | ||
|
||
|
@@ -103,6 +108,8 @@ describe('OrganizationSwitcher', () => { | |
}), | ||
); | ||
|
||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(true); | ||
|
||
await runFakeTimers(async () => { | ||
const { getByText } = render(<OrganizationSwitcher />, { wrapper }); | ||
|
||
|
@@ -115,21 +122,23 @@ describe('OrganizationSwitcher', () => { | |
|
||
describe('OrganizationSwitcherPopover', () => { | ||
it('opens the organization switcher popover when clicked', async () => { | ||
const { wrapper, props } = await createFixtures(f => { | ||
const { wrapper, props, fixtures } = await createFixtures(f => { | ||
f.withOrganizations(); | ||
f.withUser({ email_addresses: ['[email protected]'], create_organization_enabled: true }); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
props.setProps({ hidePersonal: true }); | ||
const { getByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper }); | ||
await userEvent.click(getByRole('button')); | ||
expect(getByText('Create Organization')).toBeDefined(); | ||
}); | ||
|
||
it('lists all organizations the user belongs to', async () => { | ||
const { wrapper, props } = await createFixtures(f => { | ||
const { wrapper, props, fixtures } = await createFixtures(f => { | ||
f.withOrganizations(); | ||
f.withUser({ email_addresses: ['[email protected]'], organization_memberships: ['Org1', 'Org2'] }); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
props.setProps({ hidePersonal: false }); | ||
const { getAllByText, getByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper }); | ||
await userEvent.click(getByRole('button')); | ||
|
@@ -143,13 +152,14 @@ describe('OrganizationSwitcher', () => { | |
['Member', 'basic_member'], | ||
['Guest', 'guest_member'], | ||
])('shows the text "%s" for the %s role in the active organization', async (text, role) => { | ||
const { wrapper, props } = await createFixtures(f => { | ||
const { wrapper, props, fixtures } = await createFixtures(f => { | ||
f.withOrganizations(); | ||
f.withUser({ | ||
email_addresses: ['[email protected]'], | ||
organization_memberships: [{ name: 'Org1', role: role as MembershipRole }], | ||
}); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
props.setProps({ hidePersonal: true }); | ||
const { getAllByText, getByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper }); | ||
await userEvent.click(getByRole('button')); | ||
|
@@ -165,6 +175,7 @@ describe('OrganizationSwitcher', () => { | |
organization_memberships: [{ name: 'Org1', role: 'basic_member' }], | ||
}); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
props.setProps({ hidePersonal: true }); | ||
const { getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper }); | ||
await userEvent.click(getByRole('button')); | ||
|
@@ -181,6 +192,7 @@ describe('OrganizationSwitcher', () => { | |
create_organization_enabled: true, | ||
}); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
props.setProps({ hidePersonal: true }); | ||
const { getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper }); | ||
await userEvent.click(getByRole('button', { name: 'Open organization switcher' })); | ||
|
@@ -189,14 +201,15 @@ describe('OrganizationSwitcher', () => { | |
}); | ||
|
||
it('does not display create organization button if permissions not present', async () => { | ||
const { wrapper, props } = await createFixtures(f => { | ||
const { wrapper, props, fixtures } = await createFixtures(f => { | ||
f.withOrganizations(); | ||
f.withUser({ | ||
email_addresses: ['[email protected]'], | ||
organization_memberships: [{ name: 'Org1', role: 'basic_member' }], | ||
create_organization_enabled: false, | ||
}); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
props.setProps({ hidePersonal: true }); | ||
const { queryByRole } = await act(() => render(<OrganizationSwitcher />, { wrapper })); | ||
expect(queryByRole('button', { name: 'Create Organization' })).not.toBeInTheDocument(); | ||
|
@@ -211,6 +224,7 @@ describe('OrganizationSwitcher', () => { | |
create_organization_enabled: false, | ||
}); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
fixtures.clerk.user?.getOrganizationInvitations.mockReturnValueOnce( | ||
Promise.resolve({ | ||
data: [ | ||
|
@@ -254,6 +268,7 @@ describe('OrganizationSwitcher', () => { | |
create_organization_enabled: false, | ||
}); | ||
}); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
fixtures.clerk.user?.getOrganizationSuggestions.mockReturnValueOnce( | ||
Promise.resolve({ | ||
data: [ | ||
|
@@ -303,6 +318,7 @@ describe('OrganizationSwitcher', () => { | |
}); | ||
}); | ||
fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve()); | ||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
|
||
props.setProps({ hidePersonal: true }); | ||
const { getByRole, getByText, userEvent } = render(<OrganizationSwitcher />, { wrapper }); | ||
|
@@ -330,6 +346,7 @@ describe('OrganizationSwitcher', () => { | |
}); | ||
}); | ||
|
||
fixtures.clerk.session?.isAuthorized.mockResolvedValue(false); | ||
fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve()); | ||
const { getByRole, getByText, userEvent } = render(<OrganizationSwitcher />, { wrapper }); | ||
await userEvent.click(getByRole('button')); | ||
|