fix PR comments

Author: standeren

frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { RenderResult } from '@testing-library/react';
 import { render, screen } from '@testing-library/react';
 import { StudioIconTextfield } from './StudioIconTextfield';
 import type { StudioIconTextfieldProps } from './StudioIconTextfield';
@@ -7,6 +8,8 @@ import userEvent from '@testing-library/user-event';
 import { testCustomAttributes } from '../../test-utils/testCustomAttributes';
 
 describe('StudioIconTextfield', () => {
+  afterEach(jest.clearAllMocks);
+
   it('render the icon', async () => {
     renderStudioIconTextfield();
     expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
@@ -40,6 +43,6 @@ const defaultProps: StudioIconTextfieldProps = {
   onChange,
 };
 
-const renderStudioIconTextfield = (props: Partial<StudioIconTextfieldProps> = {}) => {
+const renderStudioIconTextfield = (props: Partial<StudioIconTextfieldProps> = {}): RenderResult => {
   return render(<StudioIconTextfield {...defaultProps} {...props} />);
 };

frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { RenderResult } from '@testing-library/react';
 import { render, screen } from '@testing-library/react';
 import { StudioTextfieldToggleView } from './StudioTextfieldToggleView';
 import type { StudioTextfieldToggleViewProps } from './StudioTextfieldToggleView';
@@ -44,6 +45,8 @@ const defaultProps: StudioTextfieldToggleViewProps = {
   Icon: KeyVerticalIcon,
 };
 
-const renderStudioTextfieldToggleView = (props: Partial<StudioTextfieldToggleViewProps> = {}) => {
+const renderStudioTextfieldToggleView = (
+  props: Partial<StudioTextfieldToggleViewProps> = {},
+): RenderResult => {
   return render(<StudioTextfieldToggleView {...defaultProps} {...props} />);
 };

frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.test.tsx

@@ -62,7 +62,7 @@ describe('StudioToggleableTextfield', () => {
     renderStudioTextField({ error });
     await user.click(screen.getByRole('button', { name: value }));
     await user.tab();
-    expect(screen.getByRole('textbox', { name: label })).toHaveAttribute('aria-invalid', 'true');
+    expect(screen.getByRole('textbox', { name: label })).toBeInvalid();
     expect(screen.getByText(error)).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: value })).not.toBeInTheDocument();
   });

frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.tsx

@@ -1,19 +1,13 @@
 import React, { forwardRef, useEffect, useState } from 'react';
 import { StudioTextfieldToggleView } from './StudioTextfieldToggleView';
+import type { StudioIconTextfieldProps } from '../StudioIconTextfield';
 import { StudioIconTextfield } from '../StudioIconTextfield';
 import { KeyVerticalIcon } from '../../../../studio-icons';
 
 export type StudioToggleableTextfieldProps = {
   customValidation?: (value: string) => string | undefined;
-  error?: string;
-  Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-  label: string;
-  onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onIsViewMode?: (isViewMode: boolean) => void;
-  title?: string;
-  value: string;
-};
+} & StudioIconTextfieldProps;
 
 export const StudioToggleableTextfield = forwardRef<HTMLDivElement, StudioToggleableTextfieldProps>(
   (

frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { RenderResult } from '@testing-library/react';
 import { screen } from '@testing-library/react';
 import { renderWithProviders } from '../../../../testing/mocks';
 import { EditComponentIdRow, type EditComponentIdRowProps } from './EditComponentIdRow';
@@ -130,7 +131,9 @@ const defaultProps: EditComponentIdRowProps = {
   helpText,
 };
 
-const renderEditComponentIdRow = async (props: Partial<EditComponentIdRowProps> = {}) => {
+const renderEditComponentIdRow = async (
+  props: Partial<EditComponentIdRowProps> = {},
+): RenderResult => {
   queryClientMock.setQueryData([QueryKey.FormLayouts, org, app, layoutSetName], layouts);
   return renderWithProviders(<EditComponentIdRow {...defaultProps} {...props} />);
 };

frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import { renderWithProviders } from '../../../../../testing/mocks';
 import type { ExternalImageProps } from './ExternalImage';
-import { ExternalImage } from './ExternalImage';
+import { calculateViewValue, ExternalImage } from './ExternalImage';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
 import { QueryKey } from 'app-shared/types/QueryKey';
@@ -252,3 +252,49 @@ const renderExternalImage = (
 ) => {
   renderWithProviders(<ExternalImage {...defaultProps} {...props} />, { queries, queryClient });
 };
+
+describe('calculateViewValue', () => {
+  const noUrlText = 'No URL Provided';
+
+  it('should return the URL when URL is provided and view mode is false', () => {
+    const url = 'http://example.com';
+    const result = calculateViewValue(url, noUrlText, false);
+    expect(result).toBe(url);
+  });
+
+  it('should return the URL when URL is provided and view mode is true', () => {
+    const url = 'http://example.com';
+    const result = calculateViewValue(url, noUrlText, true);
+    expect(result).toBe(url);
+  });
+
+  it('should return undefined when URL is empty and view mode is false', () => {
+    const result = calculateViewValue('', noUrlText, false);
+    expect(result).toBe(undefined);
+  });
+
+  it('should return noUrlText when URL is empty and view mode is true', () => {
+    const result = calculateViewValue('', noUrlText, true);
+    expect(result).toBe(noUrlText);
+  });
+
+  it('should return undefined when URL is undefined and view mode is false', () => {
+    const result = calculateViewValue(undefined, noUrlText, false);
+    expect(result).toBe(undefined);
+  });
+
+  it('should return noUrlText when URL is undefined and view mode is true', () => {
+    const result = calculateViewValue(undefined, noUrlText, true);
+    expect(result).toBe(noUrlText);
+  });
+
+  it('should return undefined when URL is equal to noUrlText and view mode is false', () => {
+    const result = calculateViewValue(noUrlText, noUrlText, false);
+    expect(result).toBe(undefined);
+  });
+
+  it('should return noUrlText when URL is equal to noUrlText and view mode is true', () => {
+    const result = calculateViewValue(noUrlText, noUrlText, true);
+    expect(result).toBe(noUrlText);
+  });
+});

frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.tsx

@@ -92,14 +92,16 @@ const EditUrl = ({ url, existingImageUrl, onBlur }: EditUrlProps): React.ReactEl
   );
 };
 
-const isBLurInitialWithEmptyInput = (existingUrl: string, newUrl: string) =>
+const isBLurInitialWithEmptyInput = (existingUrl: string | undefined, newUrl: string): boolean =>
   newUrl === '' && existingUrl === undefined;
 
-const isInitialUrlProvided = (url: string, existingImageUrl: string) =>
-  url !== undefined || !!existingImageUrl;
+const isInitialUrlProvided = (
+  url: string | undefined,
+  existingImageUrl: string | undefined,
+): boolean => url !== undefined || !!existingImageUrl;
 
-const calculateViewValue = (
-  url: string,
+export const calculateViewValue = (
+  url: string | undefined,
   noUrlText: string,
   isViewMode: boolean,
 ): string | undefined => {