diff --git a/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.stories.tsx b/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.stories.tsx index 298a1a9746a..dac31e25505 100644 --- a/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.stories.tsx +++ b/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.stories.tsx @@ -19,7 +19,7 @@ export default meta; export const Preview: Story = (args) => ; Preview.args = { - Icon: PencilIcon, + icon: , label: 'Write a text', value: 2.3, error: 'Your custom error message!', diff --git a/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.test.tsx b/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.test.tsx index 8c3780f520d..aac251b30ff 100644 --- a/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.test.tsx +++ b/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.test.tsx @@ -10,14 +10,26 @@ import { testCustomAttributes } from '../../test-utils/testCustomAttributes'; describe('StudioIconTextfield', () => { afterEach(jest.clearAllMocks); - it('render the icon', async () => { + it('should render label', () => { renderStudioIconTextfield(); + expect(screen.getByLabelText(label)).toBeInTheDocument(); + }); + + it('should render value when provided', () => { + const value = 'value'; + renderStudioIconTextfield({ value }); + expect(screen.getByRole('textbox', { name: label })).toHaveValue(value); + }); + + it('render icon when provided', () => { + const icon = ; + renderStudioIconTextfield({ icon }); expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument(); }); - it('should render label', () => { + it('does not render the icon if not provided', () => { renderStudioIconTextfield(); - expect(screen.getByLabelText(label)).toBeInTheDocument(); + expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument(); }); it('should execute onChange callback when input value changes', async () => { @@ -38,7 +50,6 @@ describe('StudioIconTextfield', () => { const label = 'label'; const onChange = jest.fn(); const defaultProps: StudioIconTextfieldProps = { - Icon: KeyVerticalIcon, label, onChange, }; diff --git a/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.tsx b/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.tsx index 075299bc0d7..b9122d09db3 100644 --- a/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.tsx +++ b/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.tsx @@ -2,22 +2,28 @@ import React, { forwardRef } from 'react'; import { StudioTextfield, type StudioTextfieldProps } from '../StudioTextfield'; import cn from 'classnames'; import classes from './StudioIconTextfield.module.css'; +import type { Override } from '../../types/Override'; -export type StudioIconTextfieldProps = { - Icon?: React.ComponentType>; - label: string; -} & StudioTextfieldProps; +export type StudioIconTextfieldProps = Override< + { + icon?: React.ReactNode; + label: string; + }, + StudioTextfieldProps +>; export const StudioIconTextfield = forwardRef( ( - { Icon, label, className: givenClassName, ...rest }: StudioIconTextfieldProps, + { icon, label, className: givenClassName, ...rest }: StudioIconTextfieldProps, ref, ): React.ReactElement => { const className = cn(givenClassName, classes.container); return (
- - +
+ {icon} +
+
); }, diff --git a/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.stories.tsx b/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.stories.tsx index 5560fa62401..84c2da73005 100644 --- a/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.stories.tsx +++ b/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.stories.tsx @@ -55,7 +55,7 @@ export const ExampleUseCase: ExampleUseCase = (args): React.ReactElement => { setName(e.target.value)} - Icon={KeyVerticalIcon} + icon={} size='sm' label='Nytt navn' /> diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css deleted file mode 100644 index ca504b48762..00000000000 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css +++ /dev/null @@ -1,45 +0,0 @@ -.button { - display: flex; - justify-content: flex-start; - align-items: center; - border-radius: 0; - border: none; - width: 100%; -} - -.viewModeIconsContainer { - display: grid; - grid-template-columns: auto 1fr; - text-align: left; - align-items: center; - color: var(--fds-semantic-text-neutral-default); - width: 100%; - gap: var(--fds-spacing-2); -} - -.textContainer, -.label, -.ellipsis { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.label { - font-weight: bold; -} - -.textContainer { - display: flex; - flex-direction: column; -} - -.editIcon { - display: none; -} - -.button:hover .editIcon, -.button:focus .editIcon { - display: flex; - align-items: center; -} diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.test.tsx b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.test.tsx deleted file mode 100644 index 69980325140..00000000000 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.test.tsx +++ /dev/null @@ -1,52 +0,0 @@ -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'; -import userEvent from '@testing-library/user-event'; -import { KeyVerticalIcon } from '@studio/icons'; - -describe('StudioTextfieldToggleView', () => { - it('should render button text', () => { - renderStudioTextfieldToggleView(); - expect(screen.getByRole('button', { name: value })).toBeInTheDocument(); - }); - - it('should execute the "onClick" method when button is clicked', async () => { - const user = userEvent.setup(); - renderStudioTextfieldToggleView(); - await user.click(screen.getByRole('button', { name: value })); - expect(onClick).toHaveBeenCalledTimes(1); - }); - - it('should render the both given Icon and pencilIcon', () => { - renderStudioTextfieldToggleView(); - expect(screen.getAllByRole('img', { hidden: true })).toHaveLength(2); - }); - - it('should forward the rest of the props to the button', () => { - renderStudioTextfieldToggleView({ disabled: true }); - expect(screen.getByRole('button', { name: value })).toBeDisabled(); - }); - - it('should show label if defined', () => { - renderStudioTextfieldToggleView(); - expect(screen.getByText(label)).toBeInTheDocument(); - }); -}); - -const value = 'value'; -const label = 'label'; -const onClick = jest.fn(); -const defaultProps: StudioTextfieldToggleViewProps = { - value, - label, - onClick, - Icon: KeyVerticalIcon, -}; - -const renderStudioTextfieldToggleView = ( - props: Partial = {}, -): RenderResult => { - return render(); -}; diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx deleted file mode 100644 index 651ff197ee0..00000000000 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { PencilIcon } from '@studio/icons'; -import { StudioButton, type StudioButtonProps } from '@studio/components'; -import classes from './StudioTextfieldToggleView.module.css'; -import cn from 'classnames'; - -export type StudioTextfieldToggleViewProps = Omit & { - Icon?: React.ComponentType>; - label: string; -}; - -export const StudioTextfieldToggleView = ({ - onClick, - label, - className: givenClass, - Icon, - ...rest -}: StudioTextfieldToggleViewProps) => { - const className = cn(classes.button, givenClass); - - return ( - - - - - {label && ( - - {label} - - )} - {rest.value} - - - - - ); -}; diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/index.ts b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/index.ts deleted file mode 100644 index 5be1059ebdc..00000000000 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - StudioTextfieldToggleView, - type StudioTextfieldToggleViewProps, -} from './StudioTextfieldToggleView'; diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.test.tsx b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.test.tsx index 46f6db027dd..27147bf9cbc 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.test.tsx +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.test.tsx @@ -17,21 +17,23 @@ describe('StudioToggleableTextfield', () => { afterEach(jest.clearAllMocks); it('Renders the view mode by default', () => { - renderStudioTextField(); - expect(screen.getByRole('button', { name: value })).toBeInTheDocument(); + renderStudioToggleableTextfield(); + expect(screen.getByRole('button', { name: label })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: label })).toHaveTextContent(value); }); it('should toggle to edit-mode when edit button is clicked', async () => { const user = userEvent.setup(); - renderStudioTextField(); - await user.click(screen.getByRole('button', { name: value })); + renderStudioToggleableTextfield(); + await user.click(screen.getByRole('button', { name: label })); expect(screen.getByRole('textbox', { name: label })).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: label })).toHaveValue(value); }); it('should run custom validation when value changes', async () => { const user = userEvent.setup(); - renderStudioTextField({ customValidation }); - await user.click(screen.getByRole('button', { name: value })); + renderStudioToggleableTextfield({ customValidation }); + await user.click(screen.getByRole('button', { name: label })); const typedInputValue = 'John'; await user.type(screen.getByRole('textbox', { name: label }), typedInputValue); expect(customValidation).toHaveBeenCalledTimes(typedInputValue.length); @@ -39,19 +41,19 @@ describe('StudioToggleableTextfield', () => { it('should toggle back to view mode on blur', async () => { const user = userEvent.setup(); - renderStudioTextField(); - const viewButton = screen.getByRole('button', { name: value }); + renderStudioToggleableTextfield(); + const viewButton = screen.getByRole('button', { name: label }); await user.click(viewButton); const editTextfield = screen.getByRole('textbox', { name: label }); expect(editTextfield).toBeInTheDocument(); await user.tab(); - expect(screen.getByRole('button', { name: value })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: label })).toBeInTheDocument(); }); it('should execute onBlur method when input is blurred', async () => { const user = userEvent.setup(); - renderStudioTextField(); - await user.click(screen.getByRole('button', { name: value })); + renderStudioToggleableTextfield(); + await user.click(screen.getByRole('button', { name: label })); await user.tab(); expect(onBlur).toHaveBeenCalledTimes(1); }); @@ -59,19 +61,19 @@ describe('StudioToggleableTextfield', () => { it('should not toggle view on blur when input field has error', async () => { const user = userEvent.setup(); const error = 'Your name is a required field'; - renderStudioTextField({ error }); - await user.click(screen.getByRole('button', { name: value })); + renderStudioToggleableTextfield({ error }); + await user.click(screen.getByRole('button', { name: label })); await user.tab(); expect(screen.getByRole('textbox', { name: label })).toBeInvalid(); expect(screen.getByText(error)).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: value })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: label })).not.toBeInTheDocument(); }); it('should execute onChange method when input value changes', async () => { const user = userEvent.setup(); - renderStudioTextField(); + renderStudioToggleableTextfield(); const inputValue = 'John'; - await user.click(screen.getByRole('button', { name: value })); + await user.click(screen.getByRole('button', { name: label })); await user.type(screen.getByRole('textbox', { name: label }), inputValue); expect(onChange).toHaveBeenCalledTimes(inputValue.length); }); @@ -79,11 +81,11 @@ describe('StudioToggleableTextfield', () => { it('should render error message if customValidation occured', async () => { const user = userEvent.setup(); const customError = 'Your name cannot include "test"'; - renderStudioTextField({ + renderStudioToggleableTextfield({ customValidation: (valueToValidate: string) => valueToValidate.includes('test') ? customError : undefined, }); - await user.click(screen.getByRole('button', { name: value })); + await user.click(screen.getByRole('button', { name: label })); await user.type(screen.getByRole('textbox', { name: label }), 'test'); expect(screen.getByText(customError)); }); @@ -97,6 +99,6 @@ const defaultProps: StudioToggleableTextfieldProps = { customValidation, }; -const renderStudioTextField = (props: Partial = {}) => { +const renderStudioToggleableTextfield = (props: Partial = {}) => { return render(); }; diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.tsx b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.tsx index 5b15026df9c..309461d5e38 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.tsx +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.tsx @@ -1,26 +1,32 @@ 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'; +import { StudioProperty } from '../StudioProperty'; +import { KeyVerticalIcon } from '@studio/icons'; +import type { Override } from '../../types/Override'; -export type StudioToggleableTextfieldProps = { - customValidation?: (value: string) => string | undefined; - onIsViewMode?: (isViewMode: boolean) => void; -} & StudioIconTextfieldProps; +export type StudioToggleableTextfieldProps = Override< + { + customValidation?: (value: string) => string | undefined; + onIsViewMode?: (isViewMode: boolean) => void; + }, + StudioIconTextfieldProps +>; export const StudioToggleableTextfield = forwardRef( ( { - customValidation, error, - Icon = KeyVerticalIcon, + customValidation, + icon = , label, onBlur, onChange, + onClick, onIsViewMode, title, value, + ...rest }: StudioToggleableTextfieldProps, ref, ) => { @@ -46,7 +52,7 @@ export const StudioToggleableTextfield = forwardRef): void => { + const handleOnBlur = (event: React.FocusEvent): void => { // Should not close the view mode or blur if there is an error if (errorMessage || error) { return; @@ -66,9 +72,9 @@ export const StudioToggleableTextfield = forwardRef ); }, diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/index.ts b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/index.ts index 5cd34e368d4..500d66c3de8 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/index.ts +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/index.ts @@ -2,7 +2,3 @@ export { StudioToggleableTextfield, type StudioToggleableTextfieldProps, } from './StudioToggleableTextfield'; -export { - StudioTextfieldToggleView, - type StudioTextfieldToggleViewProps, -} from './StudioTextfieldToggleView'; diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfieldSchema/StudioToggleableTextfieldSchema.test.tsx b/frontend/libs/studio-components/src/components/StudioToggleableTextfieldSchema/StudioToggleableTextfieldSchema.test.tsx index 399da1f1650..f8030a862cb 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfieldSchema/StudioToggleableTextfieldSchema.test.tsx +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfieldSchema/StudioToggleableTextfieldSchema.test.tsx @@ -45,17 +45,22 @@ describe('StudioToggleableTextfieldSchema', () => { it('should toggle to edit mode when clicking edit', async () => { const user = userEvent.setup(); renderStudioTextfieldSchema(); - await user.click(screen.getByRole('button', { name: value })); - expect(screen.getByRole('textbox', { name: label })).toBeInTheDocument(); + const viewButton = screen.getByRole('button', { name: label }); + expect(viewButton).toBeInTheDocument(); + expect(viewButton).toHaveTextContent(value); + await user.click(viewButton); + const editTextfield = screen.getByRole('textbox', { name: label }); + expect(editTextfield).toBeInTheDocument(); + expect(editTextfield).toHaveValue(value); }); it('should toggle to view mode on blur', async () => { const user = userEvent.setup(); renderStudioTextfieldSchema(); - await user.click(screen.getByRole('button', { name: value })); - expect(screen.queryByRole('button', { name: value })).not.toBeInTheDocument(); + await user.click(screen.getByRole('button', { name: label })); + expect(screen.queryByRole('button', { name: label })).not.toBeInTheDocument(); await user.tab(); - expect(screen.getByRole('button', { name: value })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: label })).toBeInTheDocument(); }); it('should not toggle to view mode on blur if input is invalid', async () => { @@ -65,15 +70,15 @@ describe('StudioToggleableTextfieldSchema', () => { ...defaultProps, error, }); - await user.click(screen.getByRole('button', { name: value })); + await user.click(screen.getByRole('button', { name: label })); await user.tab(); - expect(screen.queryByRole('button', { name: value })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: label })).not.toBeInTheDocument(); }); it('should validate field against json schema and invoke "onError" if validation has errors', async () => { const user = userEvent.setup(); renderStudioTextfieldSchema(); - await user.click(screen.getByRole('button', { name: value })); + await user.click(screen.getByRole('button', { name: label })); await user.type(screen.getByRole('textbox', { name: label }), 'invalid-value-01'); expect(defaultProps.onError).toHaveBeenCalledWith({ errorCode: 'pattern', @@ -84,7 +89,7 @@ describe('StudioToggleableTextfieldSchema', () => { it('should validate field against json schema and invoke "onError" if field is required', async () => { const user = userEvent.setup(); renderStudioTextfieldSchema(); - await user.click(screen.getByRole('button', { name: value })); + await user.click(screen.getByRole('button', { name: label })); await user.clear(screen.getByRole('textbox', { name: label })); expect(defaultProps.onError).toHaveBeenCalledWith({ errorCode: 'required', @@ -96,7 +101,7 @@ describe('StudioToggleableTextfieldSchema', () => { const user = userEvent.setup(); const invalidValue = 'invalid-value-01'; renderStudioTextfieldSchema(); - await user.click(screen.getByRole('button', { name: value })); + await user.click(screen.getByRole('button', { name: label })); await user.type(screen.getByRole('textbox', { name: label }), invalidValue); expect(defaultProps.onError).toHaveBeenCalledWith({ errorCode: 'pattern', diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfieldSchema/StudioToggleableTextfieldSchema.tsx b/frontend/libs/studio-components/src/components/StudioToggleableTextfieldSchema/StudioToggleableTextfieldSchema.tsx index 79b1ba5ac76..d0676bf860e 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfieldSchema/StudioToggleableTextfieldSchema.tsx +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfieldSchema/StudioToggleableTextfieldSchema.tsx @@ -5,19 +5,23 @@ import { StudioToggleableTextfield, type StudioToggleableTextfieldProps, } from '../StudioToggleableTextfield'; +import type { Override } from '../../types/Override'; export type SchemaValidationError = { errorCode: string; details: string; }; -export type StudioToggleableTextfieldSchemaProps = { - layoutSchema: JsonSchema; - relatedSchemas: JsonSchema[]; - propertyPath: string; - onIsViewMode?: (isViewMode: boolean) => void; - onError?: (error: SchemaValidationError | null) => void; -} & StudioToggleableTextfieldProps; +export type StudioToggleableTextfieldSchemaProps = Override< + { + layoutSchema: JsonSchema; + relatedSchemas: JsonSchema[]; + propertyPath: string; + onIsViewMode?: (isViewMode: boolean) => void; + onError?: (error: SchemaValidationError | null) => void; + }, + StudioToggleableTextfieldProps +>; export const StudioToggleableTextfieldSchema = forwardRef< HTMLDivElement, @@ -65,11 +69,11 @@ export const StudioToggleableTextfieldSchema = forwardRef< return ( ) => handleOnChange(event)} error={error} onIsViewMode={onIsViewMode} + {...rest} /> ); }, diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx index a9a17b552f3..67aed809619 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx @@ -89,11 +89,11 @@ describe('ConfigContent', () => { it('should render EditTaskId component', () => { renderConfigContent(); - expect( - screen.getByRole('button', { - name: mockBpmnDetails.id, - }), - ).toBeInTheDocument(); + const editTaskIdButton = screen.getByRole('button', { + name: textMock('process_editor.configuration_panel_change_task_id_label'), + }); + expect(editTaskIdButton).toBeInTheDocument(); + expect(editTaskIdButton).toHaveTextContent(mockBpmnDetails.id); }); it.each(['data', 'confirmation', 'feedback', 'signing'])( diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetName/EditLayoutSetName.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetName/EditLayoutSetName.test.tsx index 4c97207eb28..807307841fe 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetName/EditLayoutSetName.test.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetName/EditLayoutSetName.test.tsx @@ -12,9 +12,10 @@ describe('EditLayoutSetName', () => { it('should render the layoutSetName button', () => { renderEditLayoutSetName(); const editLayoutSetName = screen.getByRole('button', { - name: existingLayoutSetNameMock, + name: textMock('process_editor.configuration_panel_layout_set_name_label'), }); expect(editLayoutSetName).toBeInTheDocument(); + expect(editLayoutSetName).toHaveTextContent(existingLayoutSetNameMock); }); it('should call mutateLayoutSet when changing name', async () => { @@ -23,7 +24,7 @@ describe('EditLayoutSetName', () => { const mutateLayoutSetIdMock = jest.fn(); renderEditLayoutSetName({ mutateLayoutSetId: mutateLayoutSetIdMock }); const editLayoutSetName = screen.getByRole('button', { - name: existingLayoutSetNameMock, + name: textMock('process_editor.configuration_panel_layout_set_name_label'), }); await user.click(editLayoutSetName); const inputNewLayoutSetName = screen.getByRole('textbox', { @@ -44,7 +45,7 @@ describe('EditLayoutSetName', () => { const mutateLayoutSetIdMock = jest.fn(); renderEditLayoutSetName({ mutateLayoutSetId: mutateLayoutSetIdMock }); const editLayoutSetName = screen.getByRole('button', { - name: existingLayoutSetNameMock, + name: textMock('process_editor.configuration_panel_layout_set_name_label'), }); await user.click(editLayoutSetName); const inputNewLayoutSetName = screen.getByRole('textbox', { diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetNameRecommendedAction/RecommendedActionChangeName.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetNameRecommendedAction/RecommendedActionChangeName.test.tsx index 675d6467205..c8e502e07d5 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetNameRecommendedAction/RecommendedActionChangeName.test.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetNameRecommendedAction/RecommendedActionChangeName.test.tsx @@ -42,7 +42,6 @@ describe('RecommendedActionChangeName', () => { name: textMock('process_editor.recommended_action.new_name_label'), }); await user.type(newNameInput, newLayoutSetName); - expect(validateLayoutSetNameMock).toHaveBeenCalledTimes(newLayoutSetName.length); expect(validateLayoutSetNameMock).toHaveBeenCalledWith(newLayoutSetName, expect.any(Object)); }); diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetNameRecommendedAction/RecommendedActionChangeName.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetNameRecommendedAction/RecommendedActionChangeName.tsx index 49397ca09b8..e52a6ec7939 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetNameRecommendedAction/RecommendedActionChangeName.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditLayoutSetNameRecommendedAction/RecommendedActionChangeName.tsx @@ -45,7 +45,7 @@ export const RecommendedActionChangeName = (): React.ReactElement => { > } label={t('process_editor.recommended_action.new_name_label')} onChange={(event: React.ChangeEvent) => { setNewName(event.target.value); diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditTaskId/EditTaskId.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditTaskId/EditTaskId.test.tsx index d95fb32ad34..9230053cce1 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditTaskId/EditTaskId.test.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditTaskId/EditTaskId.test.tsx @@ -43,28 +43,25 @@ describe('EditTaskId', () => { }); it('should render task id as view mode by default', () => { render(); - - expect( - screen.getByRole('button', { - name: mockBpmnDetails.id, - }), - ).toBeInTheDocument(); + const editTaskIdButton = screen.getByRole('button', { + name: textMock('process_editor.configuration_panel_change_task_id_label'), + }); + expect(editTaskIdButton).toBeInTheDocument(); + expect(editTaskIdButton).toHaveTextContent(mockBpmnDetails.id); }); it('should render task id in edit mode when clicking on the edit button', async () => { const user = userEvent.setup(); render(); - const editButton = screen.getByRole('button', { - name: mockBpmnDetails.id, + name: textMock('process_editor.configuration_panel_change_task_id_label'), }); await user.click(editButton); - - expect( - screen.getByRole('textbox', { - name: textMock('process_editor.configuration_panel_change_task_id_label'), - }), - ).toBeInTheDocument(); + const editTaskIdInput = screen.getByRole('textbox', { + name: textMock('process_editor.configuration_panel_change_task_id_label'), + }); + expect(editTaskIdInput).toBeInTheDocument(); + expect(editTaskIdInput).toHaveValue(mockBpmnDetails.id); }); it('should update metadataFromRef and updateId (implicitly calling setBpmnDetails) when changing task id', async () => { @@ -78,7 +75,7 @@ describe('EditTaskId', () => { render(); const editButton = screen.getByRole('button', { - name: mockBpmnDetails.id, + name: textMock('process_editor.configuration_panel_change_task_id_label'), }); await user.click(editButton); @@ -146,20 +143,16 @@ describe('EditTaskId', () => { it(`should display validation error when task id ${description}`, async () => { const user = userEvent.setup(); render(); - const editButton = screen.getByRole('button', { - name: mockBpmnDetails.id, + name: textMock('process_editor.configuration_panel_change_task_id_label'), }); await user.click(editButton); - const input = screen.getByRole('textbox', { name: textMock('process_editor.configuration_panel_change_task_id_label'), }); - await user.clear(input); if (inputValue !== '') await user.type(input, inputValue); await user.tab(); - const errorMessage = await screen.findByText(textMock(expectedError, textArgs)); expect(errorMessage).toBeInTheDocument(); }); @@ -172,22 +165,18 @@ describe('EditTaskId', () => { (useBpmnConfigPanelFormContext as jest.Mock).mockReturnValue({ metadataFormRef: metadataFormRefMock, }); - render(); - const editButton = screen.getByRole('button', { - name: mockBpmnDetails.id, + name: textMock('process_editor.configuration_panel_change_task_id_label'), }); + expect(editButton).toHaveTextContent(mockBpmnDetails.id); await user.click(editButton); - const input = screen.getByRole('textbox', { name: textMock('process_editor.configuration_panel_change_task_id_label'), }); - await user.clear(input); await user.type(input, mockBpmnDetails.id); await user.tab(); - expect(metadataFormRefMock.current).toBeUndefined(); expect(setBpmnDetailsMock).not.toHaveBeenCalled(); }); diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceipt/CustomReceipt.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceipt/CustomReceipt.test.tsx index 05e8cec8fc5..c408c39af39 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceipt/CustomReceipt.test.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceipt/CustomReceipt.test.tsx @@ -50,21 +50,17 @@ describe('CustomReceipt', () => { it('calls "mutateLayoutSetId" when the layoutSet id is changed', async () => { const user = userEvent.setup(); renderCustomReceipt(); - const toggleableTextfieldButton = screen.getByRole('button', { - name: existingCustomReceiptLayoutSetId, + name: textMock('process_editor.configuration_panel_custom_receipt_textfield_label'), }); - await user.click(toggleableTextfieldButton); - - const textfield = screen.getByLabelText( - textMock('process_editor.configuration_panel_custom_receipt_textfield_label'), - ); + const textfield = screen.getByRole('textbox', { + name: textMock('process_editor.configuration_panel_custom_receipt_textfield_label'), + }); const newLayoutSetId: string = 'Test2'; await user.clear(textfield); await user.type(textfield, newLayoutSetId); await user.tab(); - expect(mockBpmnApiContextValue.mutateLayoutSetId).toHaveBeenCalledTimes(1); expect(mockBpmnApiContextValue.mutateLayoutSetId).toHaveBeenCalledWith({ layoutSetIdToUpdate: existingCustomReceiptLayoutSetId, @@ -75,34 +71,29 @@ describe('CustomReceipt', () => { it('does not call "mutateLayoutSetId" when the layoutSet id is changed to the original id', async () => { const user = userEvent.setup(); renderCustomReceipt(); - const toggleableTextfieldButton = screen.getByRole('button', { - name: existingCustomReceiptLayoutSetId, + name: textMock('process_editor.configuration_panel_custom_receipt_textfield_label'), }); - + expect(toggleableTextfieldButton).toHaveTextContent(existingCustomReceiptLayoutSetId); await user.click(toggleableTextfieldButton); - const textfield = screen.getByLabelText( textMock('process_editor.configuration_panel_custom_receipt_textfield_label'), ); await user.clear(textfield); await user.type(textfield, existingCustomReceiptLayoutSetId); await user.tab(); - expect(mockBpmnApiContextValue.mutateLayoutSetId).not.toHaveBeenCalled(); }); it('calls "mutateDataTypes" when the data model id is changed', async () => { const user = userEvent.setup(); renderCustomReceipt(); - const propertyButton = screen.getByRole('button', { name: textMock('process_editor.configuration_panel_set_data_model', { dataModelName: mockBpmnApiContextValue.layoutSets.sets[0].dataType, }), }); await user.click(propertyButton); - const combobox = screen.getByRole('combobox', { name: textMock('process_editor.configuration_panel_set_data_model_label'), }); @@ -110,7 +101,6 @@ describe('CustomReceipt', () => { const newOption: string = mockAllDataModelIds[1]; const option = screen.getByRole('option', { name: newOption }); await user.click(option); - expect(mockBpmnApiContextValue.mutateDataTypes).toHaveBeenCalledTimes(1); expect(mockBpmnApiContextValue.mutateDataTypes).toHaveBeenCalledWith({ connectedTaskId: PROTECTED_TASK_NAME_CUSTOM_RECEIPT, @@ -128,28 +118,21 @@ describe('CustomReceipt', () => { renderCustomReceipt({ layoutSets: { sets: [layoutSetWithCustomReceipt, layoutSetWithDataTask] }, }); - const toggleableTextfieldButton = screen.getByRole('button', { - name: existingCustomReceiptLayoutSetId, + name: textMock('process_editor.configuration_panel_custom_receipt_textfield_label'), }); - await user.click(toggleableTextfieldButton); - - const inputField = screen.getByLabelText( - textMock('process_editor.configuration_panel_custom_receipt_textfield_label'), - ); - + const inputField = screen.getByRole('textbox', { + name: textMock('process_editor.configuration_panel_custom_receipt_textfield_label'), + }); await user.clear(inputField); if (invalidLayoutSetId !== emptyLayoutSetName) await user.type(inputField, invalidLayoutSetId); await user.tab(); - const errorTextKey = layoutSetIdTextKeys[invalidLayoutSetId]; - if (errorTextKey) { const error = screen.getByText(textMock(errorTextKey)); expect(error).toBeInTheDocument(); } - expect(mockBpmnApiContextValue.mutateLayoutSetId).not.toHaveBeenCalled(); }); @@ -157,7 +140,6 @@ describe('CustomReceipt', () => { const user = userEvent.setup(); jest.spyOn(window, 'confirm').mockImplementation(() => true); renderCustomReceipt(); - const deleteButton = screen.getByRole('button', { name: textMock('process_editor.configuration_panel_custom_receipt_delete_button'), }); diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.test.tsx index 2e815b280d4..1f4b46261cf 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.test.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.test.tsx @@ -99,7 +99,7 @@ describe('CustomReceiptContent', () => { }); const toggleableTextfieldButton = screen.getByRole('button', { - name: existingCustomReceiptLayoutSetId, + name: textMock('process_editor.configuration_panel_custom_receipt_textfield_label'), }); expect(toggleableTextfieldButton).toBeInTheDocument(); }); diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.test.tsx index e869177e602..d2723d5c5e4 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.test.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.test.tsx @@ -43,7 +43,7 @@ describe('ConfigPanel', () => { bpmnDetails: { ...mockBpmnDetails, type: BpmnTypeEnum.Task }, }); const editTaskIdButton = screen.getByRole('button', { - name: mockBpmnDetails.id, + name: textMock('process_editor.configuration_panel_change_task_id_label'), }); expect(editTaskIdButton).toBeInTheDocument(); }); diff --git a/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/EditPageId.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/EditPageId.test.tsx index f2fe20385bd..6aa01b802ba 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/EditPageId.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/EditPageId.test.tsx @@ -23,7 +23,11 @@ const layoutSetName = layoutSet1NameMock; describe('EditPageId', () => { it('renders given page ID', () => { renderEditPageId(); - screen.getByRole('button', { name: selectedLayout }); + const editPageIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_textResourceBindings_page_id'), + }); + expect(editPageIdButton).toBeInTheDocument(); + expect(editPageIdButton).toHaveTextContent(selectedLayout); }); it('calls updateFormLayoutName and textIdMutation with new page ID when changed', async () => { @@ -36,7 +40,9 @@ describe('EditPageId', () => { updateFormLayoutName, }; renderEditPageId(mockQueries); - const pageIdButton = screen.getByRole('button', { name: selectedLayout }); + const pageIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_textResourceBindings_page_id'), + }); await user.click(pageIdButton); const editPageId = screen.getByRole('textbox', { name: textMock('ux_editor.modal_properties_textResourceBindings_page_id'), @@ -66,7 +72,9 @@ describe('EditPageId', () => { updateFormLayoutName, }; renderEditPageId(mockQueries); - const pageIdButton = screen.getByRole('button', { name: selectedLayout }); + const pageIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_textResourceBindings_page_id'), + }); await user.click(pageIdButton); const editPageId = screen.getByRole('textbox', { name: textMock('ux_editor.modal_properties_textResourceBindings_page_id'), @@ -83,7 +91,9 @@ describe('EditPageId', () => { renderEditPageId(); const notUniqueErrorMessage = screen.queryByText(textMock('ux_editor.pages_error_unique')); expect(notUniqueErrorMessage).not.toBeInTheDocument(); - const pageIdButton = screen.getByRole('button', { name: selectedLayout }); + const pageIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_textResourceBindings_page_id'), + }); await user.click(pageIdButton); const editPageId = screen.getByRole('textbox', { name: textMock('ux_editor.modal_properties_textResourceBindings_page_id'), diff --git a/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigPanel.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigPanel.test.tsx index 23471edc68f..fa8aa5ffafd 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigPanel.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigPanel.test.tsx @@ -79,7 +79,10 @@ describe('PageConfigPanel', () => { }); expect(screen.queryByRole('heading', { name: newSelectedPage })).not.toBeInTheDocument(); screen.getByRole('heading', { name: newVisualPageName }); - screen.getByRole('button', { name: newSelectedPage }); + const editPageIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_textResourceBindings_page_id'), + }); + expect(editPageIdButton).toHaveTextContent(newSelectedPage); }); it('render warning when layout is selected and has duplicated ids', () => { diff --git a/frontend/packages/ux-editor/src/components/Properties/Properties.test.tsx b/frontend/packages/ux-editor/src/components/Properties/Properties.test.tsx index 10938dd9cc7..9c1663a3c74 100644 --- a/frontend/packages/ux-editor/src/components/Properties/Properties.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/Properties.test.tsx @@ -81,9 +81,10 @@ describe('Properties', () => { }); expect(heading).toBeInTheDocument(); const editComponentIdButton = screen.getByRole('button', { - name: componentMocks[ComponentType.Input].id, + name: textMock('ux_editor.modal_properties_component_change_id'), }); expect(editComponentIdButton).toBeInTheDocument(); + expect(editComponentIdButton).toHaveTextContent(componentMocks[ComponentType.Input].id); await user.click(editComponentIdButton); const textbox = screen.getByRole('textbox', { name: textMock('ux_editor.modal_properties_component_change_id'), @@ -99,12 +100,16 @@ describe('Properties', () => { const user = userEvent.setup(); renderProperties(); await user.click( - screen.getByRole('button', { name: componentMocks[ComponentType.Input].id }), + screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_component_change_id'), + }), ); const invalidId = 'invalidId-01'; await user.type( - screen.getByLabelText(textMock('ux_editor.modal_properties_component_change_id')), + screen.getByRole('textbox', { + name: textMock('ux_editor.modal_properties_component_change_id'), + }), invalidId, ); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.test.tsx index eb393d56adb..82134d1e5c0 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.test.tsx @@ -24,14 +24,19 @@ describe('EditComponentIdRow', () => { it('should render button ', async () => { await renderEditComponentIdRow(); - const testIdButton = screen.getByRole('button', { name: componentId }); + const testIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_component_change_id'), + }); expect(testIdButton).toBeInTheDocument(); + expect(testIdButton).toHaveTextContent(componentMocks[ComponentType.Input].id); }); it('should render textField when the button is clicked', async () => { const user = userEvent.setup(); await renderEditComponentIdRow(); - const testIdButton = screen.getByRole('button', { name: componentId }); + const testIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_component_change_id'), + }); await user.click(testIdButton); const textField = screen.getByRole('textbox', { name: textMock('ux_editor.modal_properties_component_change_id'), @@ -42,7 +47,9 @@ describe('EditComponentIdRow', () => { it('should not render the textfield when changing from edit mode to view mode ', async () => { const user = userEvent.setup(); await renderEditComponentIdRow(); - const testIdButton = screen.getByRole('button', { name: componentId }); + const testIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_component_change_id'), + }); await user.click(testIdButton); const textField = screen.getByRole('textbox', { name: textMock('ux_editor.modal_properties_component_change_id'), @@ -54,7 +61,9 @@ describe('EditComponentIdRow', () => { it('should call onChange when user change the input in text filed.', async () => { const user = userEvent.setup(); await renderEditComponentIdRow(); - const testIdButton = screen.getByRole('button', { name: componentId }); + const testIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_component_change_id'), + }); await user.click(testIdButton); const textField = screen.getByRole('textbox', { name: textMock('ux_editor.modal_properties_component_change_id'), @@ -73,7 +82,9 @@ describe('EditComponentIdRow', () => { it('should show error required error message when id is empty', async () => { const user = userEvent.setup(); await renderEditComponentIdRow(); - const testIdButton = screen.getByRole('button', { name: componentId }); + const testIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_component_change_id'), + }); await user.click(testIdButton); const textField = screen.getByRole('textbox', { name: textMock('ux_editor.modal_properties_component_change_id'), @@ -85,7 +96,9 @@ describe('EditComponentIdRow', () => { it('should show error message when id is not unique', async () => { const user = userEvent.setup(); await renderEditComponentIdRow(); - const testIdButton = screen.getByRole('button', { name: componentId }); + const testIdButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_component_change_id'), + }); await user.click(testIdButton); const textField = screen.getByRole('textbox', { name: textMock('ux_editor.modal_properties_component_change_id'), @@ -107,7 +120,7 @@ describe('EditComponentIdRow', () => { component: componentMocks[ComponentType.FileUpload], }); const testIdButton = screen.getByRole('button', { - name: componentMocks[ComponentType.FileUpload].id, + name: textMock('ux_editor.modal_properties_component_change_id'), }); await user.click(testIdButton); const textField = screen.getByRole('textbox', { @@ -122,7 +135,6 @@ describe('EditComponentIdRow', () => { }); }); -const componentId = componentMocks[ComponentType.Input].id; const handleComponentUpdate = jest.fn(); const helpText = 'helpText'; const defaultProps: EditComponentIdRowProps = { @@ -133,7 +145,7 @@ const defaultProps: EditComponentIdRowProps = { const renderEditComponentIdRow = async ( props: Partial = {}, -): RenderResult => { +): Promise => { queryClientMock.setQueryData([QueryKey.FormLayouts, org, app, layoutSetName], layouts); return renderWithProviders(); }; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.test.tsx index 74674655c7a..eda89576cdd 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.test.tsx @@ -65,7 +65,7 @@ describe('PropertiesHeader', () => { renderPropertiesHeader(); const editComponentIdButton = screen.getByRole('button', { - name: component1Mock.id, + name: textMock('ux_editor.modal_properties_component_change_id'), }); await user.click(editComponentIdButton); @@ -83,7 +83,7 @@ describe('PropertiesHeader', () => { renderPropertiesHeader(); const editComponentIdButton = screen.getByRole('button', { - name: component1Mock.id, + name: textMock('ux_editor.modal_properties_component_change_id'), }); await user.click(editComponentIdButton); diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditImage/EditImage.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditImage/EditImage.test.tsx index eba48c3105f..466168ec52b 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditImage/EditImage.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditImage/EditImage.test.tsx @@ -89,7 +89,7 @@ describe('EditImage', () => { }, }); await goToExternalUrlTab(user); - await clickExistingUrlButton(user, existingExternalUrl); + await clickExistingUrlButton(user); await enterUrlInField(user, undefined); expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); expect(handleComponentChangeMock).toHaveBeenCalledWith({ @@ -195,9 +195,9 @@ const goToExternalUrlTab = async (user: UserEvent) => { ); }; -const clickExistingUrlButton = async (user: UserEvent, existingExternalUrl: string) => { +const clickExistingUrlButton = async (user: UserEvent) => { const existingUrlButton = screen.getByRole('button', { - name: existingExternalUrl, + name: textMock('ux_editor.properties_panel.images.enter_external_url'), }); await user.click(existingUrlButton); }; diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.test.tsx index 29e0ee45603..3a47a3c9772 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.test.tsx @@ -38,8 +38,9 @@ describe('ExternalImage', () => { it('shows existing url in view mode if exist', () => { const existingUrl = 'someExistingUrl'; renderExternalImage({ existingImageUrl: existingUrl }); - const existingUrlButton = getExistingUrlButton(existingUrl); + const existingUrlButton = getExistingUrlButton(); expect(existingUrlButton).toBeInTheDocument(); + expect(existingUrlButton).toHaveTextContent(existingUrl); }); it('shows "invalid url" error message by default if existing url is validated as invalid url', () => { @@ -141,7 +142,7 @@ describe('ExternalImage', () => { // Entering invalid url await inputUrlInField(user, invalidUrl); // Entering valid url - const viewModeUrlButton = getExistingUrlButton(invalidUrl); + const viewModeUrlButton = getExistingUrlButton(); await user.click(viewModeUrlButton); await inputUrlInField(user, validImageUrl); expect(onUrlChangeMock).toHaveBeenCalled(); @@ -152,15 +153,16 @@ describe('ExternalImage', () => { const validUrl = 'someValidUrl'; renderExternalImage(); await inputUrlInField(user, validUrl); - const existingUrlButton = getExistingUrlButton(validUrl); + const existingUrlButton = getExistingUrlButton(); expect(existingUrlButton).toBeInTheDocument(); + expect(existingUrlButton).toHaveTextContent(validUrl); }); it('calls onUrlDelete when entering an empty url if there was an original url', async () => { const user = userEvent.setup(); const existingUrl = 'someExistingUrl'; renderExternalImage({ existingImageUrl: existingUrl }); - const viewModeUrlButton = getExistingUrlButton(existingUrl); + const viewModeUrlButton = getExistingUrlButton(); await user.click(viewModeUrlButton); await inputUrlInField(user, undefined); expect(onUrlDeleteMock).toHaveBeenCalledTimes(1); @@ -178,7 +180,7 @@ describe('ExternalImage', () => { const user = userEvent.setup(); const existingUrl = 'someExistingUrl'; renderExternalImage({ existingImageUrl: existingUrl }); - const viewModeUrlButton = getExistingUrlButton(existingUrl); + const viewModeUrlButton = getExistingUrlButton(); await user.click(viewModeUrlButton); await inputUrlInField(user, existingUrl); expect(onUrlDeleteMock).not.toHaveBeenCalled(); @@ -188,12 +190,10 @@ describe('ExternalImage', () => { const user = userEvent.setup(); renderExternalImage(); await inputUrlInField(user, undefined); - const enterUrlButton = getEnterUrlWithPlaceholderButton(); - expect(enterUrlButton).toBeInTheDocument(); - const emptyUrlPlaceholder = screen.getByText( + const enterUrlButton = getExistingUrlButton(); + expect(enterUrlButton).toHaveTextContent( textMock('ux_editor.properties_panel.images.external_url_not_added'), ); - expect(emptyUrlPlaceholder).toBeInTheDocument(); }); it('should show error if validation failed', async () => { @@ -224,11 +224,9 @@ const getInvalidUrlErrorMessage = () => const getNotAnImageErrorMessage = () => screen.getByText(textMock('ux_editor.properties_panel.images.invalid_external_url_not_an_image')); -const getExistingUrlButton = (url: string) => screen.getByRole('button', { name: url }); - -const getEnterUrlWithPlaceholderButton = () => +const getExistingUrlButton = () => screen.getByRole('button', { - name: textMock('ux_editor.properties_panel.images.external_url_not_added'), + name: textMock('ux_editor.properties_panel.images.enter_external_url'), }); const inputUrlInField = async (user: UserEvent, url: string) => { diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.tsx index 3bea5867fc0..6889ffe236b 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.tsx @@ -9,7 +9,7 @@ import { ConflictingImageSourceAlert } from '../ConflictingImageSourceAlert'; import { ExternalImageValidationStatus } from './ExternalImageValidationStatus'; export interface ExternalImageProps { - existingImageUrl: string; + existingImageUrl: string | undefined; onUrlChange: (url: string) => void; onUrlDelete: () => void; imageOriginsFromLibrary: boolean; @@ -22,7 +22,7 @@ export const ExternalImage = ({ imageOriginsFromLibrary, }: ExternalImageProps) => { const { org, app } = useStudioEnvironmentParams(); - const [url, setUrl] = useState(existingImageUrl); + const [url, setUrl] = useState(existingImageUrl); const { data: validationResult, status: validationStatus } = useValidateImageExternalUrlQuery( org, app, @@ -66,8 +66,8 @@ export const ExternalImage = ({ }; type EditUrlProps = { - url: string; - existingImageUrl: string; + url: string | undefined; + existingImageUrl: string | undefined; onBlur: (event: React.ChangeEvent) => void; }; @@ -81,14 +81,14 @@ const EditUrl = ({ url, existingImageUrl, onBlur }: EditUrlProps): React.ReactEl return isInitialUrlProvided(url, existingImageUrl) ? ( } label={label} onBlur={onBlur} title={url} value={value} /> ) : ( - + } /> ); }; diff --git a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ItemInfo/ItemInfo.tsx b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ItemInfo/ItemInfo.tsx index 42f8372ae90..f8a333fc05f 100644 --- a/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ItemInfo/ItemInfo.tsx +++ b/frontend/packages/ux-editor/src/containers/DesignView/AddItem/ItemInfo/ItemInfo.tsx @@ -55,7 +55,7 @@ export const ItemInfo = ({ item, onAddItem, onCancel, setItem }: ItemInfoProps) description={t('ux_editor.add_item.component_info_generated_id_description')} > } label={t('Komponent ID')} value={item.componentId} onChange={(event: any) => {