Fix unit tests

Author: LauraBeatris

packages/clerk-js/src/ui/components/CreateOrganization/__tests__/CreateOrganization.test.tsx

@@ -114,8 +114,8 @@ describe('CreateOrganization', () => {
     });
   });
 
-  describe('with organization slug disabled on environment', () => {
-    it('renders component without slug field', async () => {
+  describe('with organization slug configured on environment', () => {
+    it('when disabled, renders component without slug field', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
         f.withOrganizations();
         f.withOrganizationSlug(false);
@@ -146,6 +146,71 @@ describe('CreateOrganization', () => {
         expect(queryByText(/Invite new members/i)).toBeInTheDocument();
       });
     });
+
+    it('when enabled, renders component slug field', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withOrganizationSlug(true);
+        f.withUser({
+          email_addresses: ['[email protected]'],
+        });
+      });
+
+      fixtures.clerk.createOrganization.mockReturnValue(
+        Promise.resolve(
+          getCreatedOrg({
+            maxAllowedMemberships: 1,
+            slug: 'new-org-1722578361',
+          }),
+        ),
+      );
+
+      const { userEvent, getByRole, queryByText, queryByLabelText, getByLabelText } = render(<CreateOrganization />, {
+        wrapper,
+      });
+
+      expect(queryByLabelText(/Slug/i)).toBeInTheDocument();
+
+      await userEvent.type(getByLabelText(/Name/i), 'new org');
+      await userEvent.click(getByRole('button', { name: /create organization/i }));
+
+      await waitFor(() => {
+        expect(queryByText(/Invite new members/i)).toBeInTheDocument();
+      });
+    });
+
+    it('when enabled and `hideSlug` prop is passed, renders component slug field', async () => {
+      const { wrapper, fixtures, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withOrganizationSlug(true);
+        f.withUser({
+          email_addresses: ['[email protected]'],
+        });
+      });
+
+      fixtures.clerk.createOrganization.mockReturnValue(
+        Promise.resolve(
+          getCreatedOrg({
+            maxAllowedMemberships: 1,
+            slug: 'new-org-1722578361',
+          }),
+        ),
+      );
+
+      props.setProps({ hideSlug: true });
+      const { userEvent, getByRole, queryByText, queryByLabelText, getByLabelText } = render(<CreateOrganization />, {
+        wrapper,
+      });
+
+      expect(queryByLabelText(/Slug/i)).not.toBeInTheDocument();
+
+      await userEvent.type(getByLabelText(/Name/i), 'new org');
+      await userEvent.click(getByRole('button', { name: /create organization/i }));
+
+      await waitFor(() => {
+        expect(queryByText(/Invite new members/i)).toBeInTheDocument();
+      });
+    });
   });
 
   it('skips invitation screen', async () => {

packages/clerk-js/src/ui/components/OrganizationList/__tests__/OrganizationList.test.tsx

@@ -210,6 +210,7 @@ describe('OrganizationList', () => {
     it('display CreateOrganization within OrganizationList', async () => {
       const { wrapper } = await createFixtures(f => {
         f.withOrganizations();
+        f.withOrganizationSlug(true);
         f.withUser({
           email_addresses: ['[email protected]'],
           create_organization_enabled: true,

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx

@@ -217,25 +217,27 @@ describe('TaskChooseOrganization', () => {
         });
       });
 
-      const { queryByLabelText } = render(<TaskChooseOrganization />, { wrapper });
+      const { findByRole, queryByLabelText } = render(<TaskChooseOrganization />, { wrapper });
 
+      expect(await findByRole('textbox', { name: /name/i })).toBeInTheDocument();
       expect(queryByLabelText(/Slug/i)).not.toBeInTheDocument();
     });
-  });
 
-  it("display slug field if it's enabled on environment", async () => {
-    const { wrapper } = await createFixtures(f => {
-      f.withOrganizations();
-      f.withOrganizationSlug(true);
-      f.withForceOrganizationSelection();
-      f.withUser({
-        create_organization_enabled: true,
-        tasks: [{ key: 'choose-organization' }],
+    it("display slug field if it's enabled on environment", async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withOrganizationSlug(true);
+        f.withForceOrganizationSelection();
+        f.withUser({
+          create_organization_enabled: true,
+          tasks: [{ key: 'choose-organization' }],
+        });
       });
-    });
 
-    const { queryByLabelText } = render(<TaskChooseOrganization />, { wrapper });
+      const { findByRole, queryByLabelText } = render(<TaskChooseOrganization />, { wrapper });
 
-    expect(queryByLabelText(/Slug/i)).toBeInTheDocument();
+      expect(await findByRole('textbox', { name: /name/i })).toBeInTheDocument();
+      expect(queryByLabelText(/Slug/i)).toBeInTheDocument();
+    });
   });
 });