improve the unit test

frontend/libs/studio-components/src/components/StudioSurfaceCard/StudioSurfaceCard.mdx

@@ -0,0 +1,14 @@
+import {Canvas, Meta} from '@storybook/blocks';
+import {Heading, Paragraph} from '@digdir/design-system-react';
+import * as StudioSurfaceCardStories from './StudioSurfaceCard.stories';
+
+<Meta of={StudioSurfaceCardStories}/>
+
+<Heading level={1} size='small'>
+  StudioSurfaceCard
+</Heading>
+<Paragraph>
+  StudioSurfaceCard is used to composite components in a card-like container with a shadow.
+</Paragraph>
+
+<Canvas of={StudioSurfaceCardStories.Preview}/>

frontend/libs/studio-components/src/components/StudioSurfaceCard/StudioSurfaceCard.module.css

@@ -0,0 +1,9 @@
+.card {
+  padding: 0;
+}
+
+.header {
+  font-size: var(--fds-sizing-2);
+  color: red;
+  padding: 0;
+}

frontend/libs/studio-components/src/components/StudioSurfaceCard/StudioSurfaceCard.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { StudioSurfaceCard } from './StudioSurfaceCard';
+
+type Story = StoryFn<typeof StudioSurfaceCard>;
+
+const meta: Meta = {
+  title: 'Studio/StudioSurfaceCard',
+  component: StudioSurfaceCard,
+  argTypes: {},
+};
+export const Preview: Story = (args): React.ReactElement => (
+  <StudioSurfaceCard {...args}>{args.children}</StudioSurfaceCard>
+);
+
+Preview.args = {
+  title: 'hello',
+  children: <div>hello</div>,
+};
+export default meta;

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

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+
+import classes from './StudioSurfaceCard.module.css';
+
+type StudioSurfaceCardProps = {
+  title: string;
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+export const StudioSurfaceCard = forwardRef<HTMLDivElement, StudioSurfaceCardProps>(
+  (
+    { title, children, className: givenClassName }: StudioSurfaceCardProps,
+    ref,
+  ): React.ReactElement => {
+    return (
+      <div className={givenClassName}>
+        <div className={classes.header}>{title}</div>
+        <div>{children}</div>
+      </div>
+    );
+  },
+);

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/ActionsUtils.ts

@@ -13,9 +13,11 @@ export const addNewActionToTask = (
 ) => {
   const actionsElement: ModdleElement =
     bpmnDetails.element.businessObject.extensionElements.values[0].actions;
+
   const newActionElement: ModdleElement = bpmnFactory.create('altinn:Action', {
     action: generatedActionName,
   });
+
   // Task has actions in element from before
   if (actionsElement) {
     actionsElement.action.push(newActionElement);

frontend/packages/process-editor/src/components/ConfigPanel/EditDataType/SelectDataType/SelectDataType.test.tsx

@@ -50,7 +50,8 @@ describe('SelectDataType', () => {
     });
   });
 
-  it('should add existing data type to combobox options', () => {
+  it('should add existing data type to combobox options', async () => {
+    const user = userEvent.setup();
     const existingDataType = 'dataModel0';
     const dataModelIds = ['dataModel1', 'dataModel2'];
     renderEditDataType({ dataModelIds, existingDataType });
@@ -59,6 +60,10 @@ describe('SelectDataType', () => {
       name: textMock('process_editor.configuration_panel_set_data_model'),
     });
     expect(combobox).toHaveValue(existingDataType);
+
+    await user.click(combobox);
+    const addedOption = screen.getByRole('option', { name: 'dataModel0' });
+    expect(addedOption).toBeInTheDocument();
   });
 
   it('should call updateDataType with new data type when data type is changed', async () => {

frontend/packages/process-editor/src/utils/bpmn/StudioModeler.ts

@@ -3,6 +3,7 @@ import type Modeling from 'bpmn-js/lib/features/modeling/Modeling';
 import type { Element } from 'bpmn-moddle';
 import type ElementRegistry from 'diagram-js/lib/core/ElementRegistry';
 import { type Moddle } from 'bpmn-js/lib/model/Types';
+import type { ModdleElement } from 'bpmn-js/lib/BaseModeler';
 import { BpmnModelerInstance } from './BpmnModelerInstance';
 
 // Short description: This class is used to interact with the bpmn-js modeler instance to create, update and delete elements in the bpmn diagram.
@@ -47,4 +48,8 @@ export class StudioModeler {
   public getAllTasksByType(elementType: string): Element[] {
     return this.elementRegistry.filter((element) => element.type === elementType);
   }
+
+  public get getActionElements(): ModdleElement[] | undefined {
+    return this.element.businessObject.extensionElements?.values[0]?.actions?.action;
+  }
 }