✅ Adding more tests

equinor · Dec 11, 2024 · bd26720 · bd26720
1 parent 1b022e6
commit bd26720
Show file tree

Hide file tree

Showing 15 changed files with 196 additions and 151 deletions.
diff --git a/src/atoms/hooks/useRichTextImage.test.ts b/src/atoms/hooks/useRichTextImage.test.ts
@@ -0,0 +1,14 @@
+import { faker } from '@faker-js/faker';
+
+import { useRichTextImage } from 'src/atoms/hooks/useRichTextImage';
+import { Providers, renderHook } from 'src/tests/jsdomtest-utils';
+
+test('onImageRead gets called when using useRichTextImage', () => {
+  const onImageRead = vi.fn();
+  const image = faker.animal.dog();
+  renderHook(() => useRichTextImage(image, onImageRead), {
+    wrapper: Providers,
+  });
+
+  expect(onImageRead).toHaveBeenCalledWith(image);
+});
diff --git a/src/molecules/ApplicationIcon/ApplicationIcon.jsdom.test.tsx b/src/molecules/ApplicationIcon/ApplicationIcon.jsdom.test.tsx
@@ -29,3 +29,15 @@ test('has grayscale css attribute when grayscale is set', () => {
   const applicationIcon = screen.getByTestId('application-icon');
   expect(applicationIcon).toHaveStyle(`filter: ${GRAYSCALE_FILTER_VALUE}`);
 });
+
+test('background is transparent when iconOnly is set', () => {
+  const { rerender } = render(<ApplicationIcon name="orca" iconOnly />);
+
+  const applicationIcon = screen.getByTestId('application-icon');
+  expect(applicationIcon).toHaveStyleRule('background', 'transparent');
+
+  rerender(<ApplicationIcon name="bravos" iconOnly />);
+
+  const otherApplicationIcon = screen.getByTestId('application-icon');
+  expect(otherApplicationIcon).toHaveStyleRule('background', 'transparent');
+});
diff --git a/src/molecules/ApplicationIcon/ApplicationIcon.test.tsx b/src/molecules/ApplicationIcon/ApplicationIcon.test.tsx
@@ -144,3 +144,11 @@ test('Renders equinor logo as fallback when iconOnly=true', () => {
 
   expect(path).toHaveAttribute('d', fallback.svgPathData);
 });
+
+test('App icon with multiple icons renders correctly', () => {
+  render(<ApplicationIcon name="bravos" />);
+
+  for (let i = 0; i < bravos.length; i++) {
+    expect(screen.getByTestId(`icon-part-${i}`)).toBeInTheDocument();
+  }
+});
diff --git a/src/molecules/ApplicationIcon/ApplicationIconBase.tsx b/src/molecules/ApplicationIcon/ApplicationIconBase.tsx
@@ -154,6 +154,7 @@ const ApplicationIconBase = forwardRef<
           iconData.map((icon, index) => (
             <Icon
               key={`icon-${index}`}
+              data-testid={`icon-part-${index}`}
               data={icon}
               size={size as IconProps['size']}
               color={icon.color}

diff --git a/src/molecules/ApplicationIcon/ApplicationIconNew/ApplicationIconNew.tsx b/src/molecules/ApplicationIcon/ApplicationIconNew/ApplicationIconNew.tsx
@@ -42,87 +42,86 @@ interface ApplicationIconData {
   color: AllowedColors;
 }
 
-const apps: Record<ApplicationName | string, ApplicationIconData | undefined> =
+const apps: ApplicationIconData[] = [
   {
-    amplify: {
-      appName: 'amplify',
-      iconSvg: amplify.svgPathData,
-      rotationVariant: 1,
-      color: 'blue',
-    },
-    bravos: {
-      appName: 'bravos',
-      iconSvg: bravos.svgPathData,
-      rotationVariant: 2,
-      color: 'blue',
-    },
-    embark: {
-      appName: 'embark',
-      iconSvg: embark.svgPathData,
-      rotationVariant: 2,
-      color: 'green',
-    },
-    premo: {
-      appName: 'premo',
-      iconSvg: premo.svgPathData,
-      rotationVariant: 3,
-      color: 'purple',
-    },
-    dasha: {
-      appName: 'dasha',
-      iconSvg: dasha.svgPathData,
-      rotationVariant: 0,
-      color: 'red',
-    },
-    acquire: {
-      appName: 'acquire',
-      iconSvg: acquire.svgPathData,
-      rotationVariant: 1,
-      color: 'yellow',
-    },
-    orca: {
-      appName: 'orca',
-      iconSvg: orca.svgPathData,
-      rotationVariant: 2,
-      color: 'magenta',
-    },
-    pwex: {
-      appName: 'pwex',
-      iconSvg: pwex.svgPathData,
-      rotationVariant: 3,
-      color: 'blue',
-    },
-    ltg: {
-      appName: 'ltg',
-      iconSvg: ltg.svgPathData,
-      rotationVariant: 0,
-      color: 'green',
-    },
-    recap: {
-      appName: 'recap',
-      iconSvg: recap.svgPathData,
-      rotationVariant: 2,
-      color: 'red',
-    },
-    inpress: {
-      appName: 'inpress',
-      iconSvg: inpress.svgPathData,
-      rotationVariant: 1,
-      color: 'green',
-    },
-    sam: {
-      appName: 'sam',
-      iconSvg: sam.svgPathData,
-      rotationVariant: 3,
-      color: 'magenta',
-    },
-    equinor: {
-      appName: 'equinor',
-      iconSvg: equinor.svgPathData,
-      rotationVariant: 1,
-      color: 'purple',
-    },
-  };
+    appName: 'amplify',
+    iconSvg: amplify.svgPathData,
+    rotationVariant: 1,
+    color: 'blue',
+  },
+  {
+    appName: 'bravos',
+    iconSvg: bravos.svgPathData,
+    rotationVariant: 2,
+    color: 'blue',
+  },
+  {
+    appName: 'embark',
+    iconSvg: embark.svgPathData,
+    rotationVariant: 2,
+    color: 'green',
+  },
+  {
+    appName: 'premo',
+    iconSvg: premo.svgPathData,
+    rotationVariant: 3,
+    color: 'purple',
+  },
+  {
+    appName: 'dasha',
+    iconSvg: dasha.svgPathData,
+    rotationVariant: 0,
+    color: 'red',
+  },
+  {
+    appName: 'acquire',
+    iconSvg: acquire.svgPathData,
+    rotationVariant: 1,
+    color: 'yellow',
+  },
+  {
+    appName: 'orca',
+    iconSvg: orca.svgPathData,
+    rotationVariant: 2,
+    color: 'magenta',
+  },
+  {
+    appName: 'pwex',
+    iconSvg: pwex.svgPathData,
+    rotationVariant: 3,
+    color: 'blue',
+  },
+  {
+    appName: 'ltg',
+    iconSvg: ltg.svgPathData,
+    rotationVariant: 0,
+    color: 'green',
+  },
+  {
+    appName: 'recap',
+    iconSvg: recap.svgPathData,
+    rotationVariant: 2,
+    color: 'red',
+  },
+  {
+    appName: 'inpress',
+    iconSvg: inpress.svgPathData,
+    rotationVariant: 1,
+    color: 'green',
+  },
+  {
+    appName: 'sam',
+    iconSvg: sam.svgPathData,
+    rotationVariant: 3,
+    color: 'magenta',
+  },
+  {
+    appName: 'equinor',
+    iconSvg: equinor.svgPathData,
+    rotationVariant: 1,
+    color: 'purple',
+  },
+];
 
 const FALLBACK_APP_ICON: ApplicationIconData = {
   appName: 'fallback',
@@ -144,7 +143,7 @@ export const ApplicationIconNew: FC<ApplicationIconProps> = ({
   animationState = 'none',
   iconOnly = false,
 }) => {
-  let appData = apps[name.toLowerCase()];
+  let appData = apps.find((icon) => icon.appName === name.toLowerCase());
 
   if (!appData) {
     // Set appData to the fallback icon data

diff --git a/src/molecules/ApplicationIcon/ApplicationIconNew/ApplicationIconNewBase.tsx b/src/molecules/ApplicationIcon/ApplicationIconNew/ApplicationIconNewBase.tsx
@@ -17,11 +17,12 @@ export const ApplicationIconNewBase: FC<AppBaseProps> = ({
   size = 512,
   color = 'blue',
   rotationVariant = 1,
-  hasLargeWaves = false,
   animationState = 'none',
   appIconData,
   iconOnly,
 }) => {
+  const hasLargeWaves = size <= 128;
+
   const waves = Array.from({ length: 8 }, (_, index) => {
     const top = hasLargeWaves
       ? index * (waveIntervalDist * 1.15)
@@ -30,9 +31,6 @@ export const ApplicationIconNewBase: FC<AppBaseProps> = ({
     const delay =
       animationState === 'animated' ? index * 750 : (index + 1) * 50;
 
-    if (size <= 128) {
-      hasLargeWaves = true;
-    }
     return {
       waveIntervalDist: top,
       size,

diff --git a/src/molecules/ApplicationIcon/ApplicationIconNew/NoiseShape.tsx b/src/molecules/ApplicationIcon/ApplicationIconNew/NoiseShape.tsx
@@ -52,6 +52,7 @@ export const NoiseShape: FC<WaveShapeWithNoiseProps> = ({
         >
           {!isAltWave ? (
             <path
+              data-testid="wave-noise"
               d={
                 hasLargeWaves
                   ? LARGE_WAVES_PATH_DATA[0]
@@ -61,6 +62,7 @@ export const NoiseShape: FC<WaveShapeWithNoiseProps> = ({
             />
           ) : (
             <path
+              data-testid="wave-noise"
               d={
                 hasLargeWaves
                   ? LARGE_WAVES_PATH_DATA[1]

diff --git a/src/molecules/ProfileAvatar/ProfileAvatar.jsdom.test.tsx b/src/molecules/ProfileAvatar/ProfileAvatar.jsdom.test.tsx
@@ -1,6 +1,7 @@
 import { faker } from '@faker-js/faker';
 
 import {
+  nameToInitials,
   ProfileAvatar,
   ProfileAvatarProps,
 } from 'src/molecules/ProfileAvatar/ProfileAvatar';
@@ -54,3 +55,9 @@ test('Renders image when given and in correct sizing', () => {
     expect(avatar).toHaveStyle(`height: ${expectedSize}px`);
   }
 });
+
+test('nameToInitials works correct with names containing commas', () => {
+  const nameWithComma = 'Name, Nameson';
+
+  expect(nameToInitials(nameWithComma)).toBe('NN');
+});
diff --git a/src/molecules/RichTextEditor/custom-extensions/Counter.tsx b/src/molecules/RichTextEditor/custom-extensions/Counter.tsx
@@ -1,4 +1,4 @@
-/* c8 ignore file */ // This entire file is just an example file for future nodeview projects. Testing it is adding maintance cost to something that is not used.
+/* c8 ignore start */ // This entire file is just an example file for future nodeview projects. Testing it is adding maintance cost to something that is not used.
 import { useState } from 'react';
 
 import { mergeAttributes, Node } from '@tiptap/core';
@@ -96,3 +96,4 @@ export default Node.create({
     return ReactNodeViewRenderer(Component);
   },
 });
+/* c8 ignore end */
diff --git a/src/organisms/TableOfContents/TableOfContents.test.tsx b/src/organisms/TableOfContents/TableOfContents.test.tsx
@@ -156,12 +156,12 @@ describe('button variant', () => {
   test('Does not run OnClick when disabled', async () => {
     const items = fakeItems().map((item, index) => ({
       ...item,
-      disabled: index % 2 === 0,
+      disabled: index === 1,
     }));
 
     render(
       <div>
-        <TableOfContents />
+        <TableOfContents isLink={false} />
         {items.map((item) => (
           <Section key={item.value} label={item.label} value={item.value} />
         ))}
@@ -170,39 +170,20 @@ describe('button variant', () => {
         wrapper: (props: { children: ReactNode }) => (
           <MemoryRouter>
             <TableOfContentsProvider items={items}>
-              {' '}
               {props.children}
             </TableOfContentsProvider>
           </MemoryRouter>
         ),
       }
     );
 
-    const user = userEvent.setup();
-
     for (const item of items) {
       expect(screen.queryAllByText(item.label).length).toBe(2);
     }
 
-    const button = screen.getByRole('button', { name: items[0].label });
-
-    expect(button).toBeDisabled();
-    await user.click(button);
-
-    const section = document.querySelector(`#${items[0].value}`)!;
-
-    expect(section.scrollIntoView).not.toHaveBeenCalled();
-
-    // Expect other button _not_ to be disabled
     const otherButton = screen.getByRole('button', { name: items[1].label });
 
-    expect(otherButton).not.toBeDisabled();
-
-    await user.click(otherButton);
-
-    const otherSection = document.querySelector(`#${items[1].value}`)!;
-
-    expect(otherSection.scrollIntoView).toHaveBeenCalled();
+    expect(otherButton).toBeDisabled();
   });
 });
 

diff --git a/src/organisms/TableOfContents/TableOfContents.tsx b/src/organisms/TableOfContents/TableOfContents.tsx
@@ -59,9 +59,9 @@ export const TableOfContents: FC<TableOfContentsProps> = ({
           >
             <TableOfContentsItem
               variant={variant}
-              {...item}
               onlyShowSelectedChildren={onlyShowSelectedChildren}
               isLink={isLink}
+              {...item}
             />
           </BorderItemsContainer>
         ))}