feat(ui): write tests [EE-6685] (#11081)

app/react/portainer/account/CreateAccessTokenView/CreateUserAccessToken.test.tsx

@@ -17,14 +17,14 @@ test('the button is disabled when all fields are blank and enabled when all fiel
   const descriptionField = getByLabelText(/Description/);
   const passwordField = getByLabelText(/Current password/);
 
-  userEvent.type(passwordField, 'password');
-  userEvent.type(descriptionField, 'description');
+  await userEvent.type(passwordField, 'password');
+  await userEvent.type(descriptionField, 'description');
 
   await waitFor(() => {
     expect(button).toBeEnabled();
   });
 
-  userEvent.clear(descriptionField);
+  await userEvent.clear(descriptionField);
   await waitFor(() => {
     expect(button).toBeDisabled();
   });

app/react/portainer/templates/app-templates/AppTemplatesListItem.test.tsx

@@ -0,0 +1,102 @@
+import userEvent from '@testing-library/user-event';
+import { PropsWithChildren } from 'react';
+
+import { render } from '@/react-tools/test-utils';
+
+import { AppTemplatesListItem } from './AppTemplatesListItem';
+import { TemplateViewModel } from './view-model';
+import { TemplateType } from './types';
+
+test('should render AppTemplatesListItem component', () => {
+  const template: TemplateViewModel = {
+    Title: 'Test Template',
+    // provide necessary properties for the template object
+  } as TemplateViewModel;
+
+  const onSelect = vi.fn();
+  const isSelected = false;
+
+  const { getByText } = render(
+    <AppTemplatesListItem
+      template={template}
+      onSelect={onSelect}
+      isSelected={isSelected}
+    />
+  );
+
+  expect(getByText(template.Title, { exact: false })).toBeInTheDocument();
+});
+
+const copyAsCustomTestCases = [
+  {
+    type: TemplateType.Container,
+    expected: false,
+  },
+  {
+    type: TemplateType.ComposeStack,
+    expected: true,
+  },
+  {
+    type: TemplateType.SwarmStack,
+    expected: true,
+  },
+];
+
+// TODO - remove after fixing workaround for UISref
+vi.mock('@uirouter/react', async (importOriginal: () => Promise<object>) => ({
+  ...(await importOriginal()),
+  UISref: ({ children }: PropsWithChildren<unknown>) => children, // Mocking UISref to render its children directly
+}));
+
+copyAsCustomTestCases.forEach(({ type, expected }) => {
+  test(`copy as custom button should ${
+    expected ? '' : 'not '
+  }be rendered for type ${type}`, () => {
+    const onSelect = vi.fn();
+    const isSelected = false;
+
+    const { queryByText, unmount } = render(
+      <AppTemplatesListItem
+        template={
+          {
+            Type: type,
+          } as TemplateViewModel
+        }
+        onSelect={onSelect}
+        isSelected={isSelected}
+      />
+    );
+
+    if (expected) {
+      expect(queryByText('Copy as Custom')).toBeVisible();
+    } else {
+      expect(queryByText('Copy as Custom')).toBeNull();
+    }
+
+    unmount();
+  });
+});
+
+test('should call onSelect when clicked', async () => {
+  const user = userEvent.setup();
+  const template: TemplateViewModel = {
+    Title: 'Test Template',
+    // provide necessary properties for the template object
+  } as TemplateViewModel;
+
+  const onSelect = vi.fn();
+  const isSelected = false;
+
+  const { getByLabelText } = render(
+    <AppTemplatesListItem
+      template={template}
+      onSelect={onSelect}
+      isSelected={isSelected}
+    />
+  );
+
+  const button = getByLabelText(template.Title);
+  await user.click(button);
+
+  expect(onSelect).toHaveBeenCalledWith(template);
+});

app/react/portainer/templates/components/TemplateItem.tsx

@@ -45,6 +45,7 @@ export function TemplateItem({
         as={linkParams ? Link : undefined}
         to={linkParams?.to}
         params={linkParams?.params}
+        aria-label={template.Title}
       >
         <div className="vertical-center min-w-[56px] justify-center">
           <FallbackImage

app/react/portainer/users/teams/ListView/CreateTeamForm/CreateTeamForm.test.tsx

@@ -19,7 +19,7 @@ test('filling the name should make the submit button clickable and emptying it s
   expect(button).toBeDisabled();
 
   const newValue = 'name';
-  userEvent.type(nameField, newValue);
+  await userEvent.type(nameField, newValue);
 
   await waitFor(() => {
     expect(nameField).toHaveDisplayValue(newValue);