feat(TextInputMapper): add component * 2

Author: tenphi

src/components/fields/TextInputMapper/TextInputMapper.stories.tsx

@@ -1,4 +1,5 @@
 import { StoryFn } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
 import { Submit } from '../../actions';
@@ -49,5 +50,15 @@ Default.args = {};
 export const WithValue = Template.bind({});
 WithValue.args = { value: { name: 'value' } };
 
+export const WithValueAndNewMapping = Template.bind({});
+WithValueAndNewMapping.args = { value: { name: 'value' } };
+
+WithValueAndNewMapping.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = await canvas.getByText('Mapping');
+
+  await userEvent.click(button);
+};
+
 export const WithinForm = FormTemplate.bind({});
 WithinForm.args = {};

src/components/fields/TextInputMapper/TextInputMapper.tsx

@@ -242,6 +242,7 @@ function TextInputMapperInput(props: CubeTextInputMapperInputProps) {
 
   return (
     <TextInput
+      qa="AddMapping"
       width="auto"
       {...rest}
       id={undefined}