Add more tests

web/packages/teleport/src/JoinTokens/JoinTokenForms.tsx

@@ -85,7 +85,10 @@ export const JoinTokenIAMForm = ({
             </Text>
 
             {rules.length > 1 && ( // at least one rule is required, so lets not allow the user to remove it
-              <ButtonIcon onClick={() => removeRule(index)}>
+              <ButtonIcon
+                data-testid="delete_rule"
+                onClick={() => removeRule(index)}
+              >
                 <Trash size={16} color="text.muted" />
               </ButtonIcon>
             )}
@@ -173,7 +176,10 @@ export const JoinTokenGCPForm = ({
             </Text>
 
             {rules.length > 1 && ( // at least one rule is required, so lets not allow the user to remove it
-              <ButtonIcon onClick={() => removeRule(index)}>
+              <ButtonIcon
+                data-testid="delete_rule"
+                onClick={() => removeRule(index)}
+              >
                 <Trash size={16} color="text.muted" />
               </ButtonIcon>
             )}

web/packages/teleport/src/JoinTokens/JoinTokens.test.tsx

@@ -17,6 +17,7 @@
  */
 import { render, screen, fireEvent } from 'design/utils/testing';
 import userEvent from '@testing-library/user-event';
+import { within } from '@testing-library/react';
 
 import { createTeleportContext } from 'teleport/mocks/contexts';
 import { ContextProvider } from 'teleport';
@@ -64,6 +65,63 @@ describe('JoinTokens', () => {
       screen.getByText('At least one role is required')
     ).toBeInTheDocument();
   });
+
+  test('successful create adds token to the table', async () => {
+    render(<Component />);
+    await userEvent.click(
+      screen.getByRole('button', { name: /create new token/i })
+    );
+
+    fireEvent.change(screen.getByPlaceholderText('iam-token-name'), {
+      target: { value: 'the_token' },
+    });
+
+    const inputEl = within(screen.getByTestId('role_select')).getByRole(
+      'textbox'
+    );
+    fireEvent.change(inputEl, { target: { value: 'Node' } });
+    fireEvent.focus(inputEl);
+    fireEvent.keyDown(inputEl, { key: 'Enter', keyCode: 13 });
+
+    fireEvent.click(screen.getByRole('button', { name: /create join token/i }));
+    expect(
+      screen.queryByText('At least one role is required')
+    ).not.toBeInTheDocument();
+    fireEvent.change(screen.getByPlaceholderText('AWS Account ID'), {
+      target: { value: '123123123' },
+    });
+
+    await userEvent.click(
+      screen.getByRole('button', { name: /create join token/i })
+    );
+
+    expect(
+      screen.queryByText(/create a new join token/i)
+    ).not.toBeInTheDocument();
+    expect(screen.getByText('the_token')).toBeInTheDocument();
+  });
+
+  test('a rule cannot be deleted if it is the only rule', async () => {
+    render(<Component />);
+    await userEvent.click(
+      screen.getByRole('button', { name: /create new token/i })
+    );
+
+    const buttons = screen.queryAllByTestId('delete_rule');
+    expect(buttons).toHaveLength(0);
+  });
+
+  test('a rule can be deleted more than one rule exists', async () => {
+    render(<Component />);
+    await userEvent.click(
+      screen.getByRole('button', { name: /create new token/i })
+    );
+
+    fireEvent.click(screen.getByText('Add another AWS Rule'));
+
+    const buttons = screen.queryAllByTestId('delete_rule');
+    expect(buttons).toHaveLength(2);
+  });
 });
 
 const Component = () => {
@@ -72,9 +130,24 @@ const Component = () => {
     .spyOn(ctx.joinTokenService, 'fetchJoinTokens')
     .mockResolvedValue({ items: tokens.map(makeJoinToken) });
 
-  jest
-    .spyOn(ctx.joinTokenService, 'createJoinToken')
-    .mockResolvedValue(makeJoinToken(tokens[0]));
+  jest.spyOn(ctx.joinTokenService, 'createJoinToken').mockResolvedValue(
+    makeJoinToken({
+      id: 'the_token',
+      safeName: 'the_token',
+      bot_name: '',
+      expiry: '3024-07-26T11:52:48.320045Z',
+      roles: ['Node'],
+      isStatic: false,
+      method: 'iam',
+      allow: [
+        {
+          aws_account: '1234444',
+          aws_arn: 'asdf',
+        },
+      ],
+      content: 'fake content',
+    })
+  );
 
   return (
     <ContextProvider ctx={ctx}>