@k-int/stripes-kint-components 2.8.1 → 3.0.0

package/src/lib/CustomProperties/View/CustomPropertyCard.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { FormattedMessage, FormattedNumber } from 'react-intl';
+import { FormattedNumber } from 'react-intl';
 
 import {
   Card,
@@ -13,14 +13,19 @@ import {
 } from '@folio/stripes/components';
 
 import * as CUSTPROP_TYPES from '../../constants/customProperties';
+import { useKintIntl } from '../../hooks';
 
 const CustomPropertyCard = ({
   ctx,
   customProperty,
   customPropertyDefinition = {},
   index,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {}
 }) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   // We only need to display primary and set properties
   const toDisplay = !!(customPropertyDefinition.primary || customProperty);
 
@@ -31,41 +36,13 @@ const CustomPropertyCard = ({
   const internalFalse = customProperty?.internal === false ||
                         (customProperty?.internal === undefined && customPropertyDefinition.defaultInternal === false);
 
-  // Deal with all the possible label override options
-  const getRetiredCardTitle = () => {
-    // Label override for default card title,
-    if (labelOverrides.retiredName && typeof labelOverrides.retiredName === 'function') {
-      return (
-        labelOverrides.retiredName(customPropertyDefinition.name)
-      );
-    }
-
-    // Label override for default title or finally built in default
-    return (
-      labelOverrides.retiredName ??
-      <FormattedMessage id="stripes-kint-components.customProperty.retiredName" values={{ name: customPropertyDefinition.label }} />
-    );
-  };
-
-  const getInternalLabel = () => {
-    if (internalFalse) {
-      return (
-        labelOverrides.internalFalse ??
-        <FormattedMessage id="stripes-kint-components.customProperty.internalFalse" />
-      );
-    }
-
-    return (
-      labelOverrides.internalTrue ??
-      <FormattedMessage id="stripes-kint-components.customProperty.internalTrue" />
-    );
-  };
-
   const renderValue = () => {
     if (!customProperty) {
       return (
-        labelOverrides.notSet ??
-        <FormattedMessage id="stripes-kint-components.customProperty.notSet" />
+        kintIntl.formatKintMessage({
+          id: 'notSet',
+          overrideValue: labelOverrides.notSet
+        })
       );
     }
 
@@ -97,7 +74,10 @@ const CustomPropertyCard = ({
         <>
           <strong>
             {customPropertyDefinition.retired ?
-              getRetiredCardTitle() :
+              (kintIntl.formatKintMessage({
+                id: 'customProperty.retiredName',
+                overrideValue: labelOverrides.retiredName
+              }, { name: customPropertyDefinition.label })) :
               customPropertyDefinition.label
             }
           </strong>
@@ -114,8 +94,10 @@ const CustomPropertyCard = ({
         <Col xs={6}>
           <KeyValue
             label={
-              labelOverrides.value ??
-              <FormattedMessage id="stripes-kint-components.customProperty.value" />
+              kintIntl.formatKintMessage({
+                id: 'valueOrValues',
+                overrideValue: labelOverrides.valueOrValues
+              })
             }
           >
             {renderValue()}
@@ -125,8 +107,10 @@ const CustomPropertyCard = ({
           <Col xs={6}>
             <KeyValue
               label={
-                labelOverrides.internalNote ??
-                <FormattedMessage id="stripes-kint-components.customProperty.internalNote" />
+                kintIntl.formatKintMessage({
+                  id: 'customProperties.internalNote',
+                  overrideValue: labelOverrides.internalNote
+                })
               }
             >
               <span
@@ -142,19 +126,26 @@ const CustomPropertyCard = ({
         <Col xs={6}>
           <KeyValue
             label={
-              labelOverrides.visibility ??
-              <FormattedMessage id="stripes-kint-components.customProperty.visibility" />
+              kintIntl.formatKintMessage({
+                id: 'customProperties.visibility',
+                overrideValue: labelOverrides.visibility
+              })
             }
           >
-            {getInternalLabel()}
+            {kintIntl.formatKintMessage({
+              id: 'customProperties.internalFalse',
+              overrideValue: labelOverrides.internalFalse
+            })}
           </KeyValue>
         </Col>
         {internalFalse &&
           <Col xs={6}>
             <KeyValue
               label={
-                labelOverrides.publicNote ??
-                <FormattedMessage id="stripes-kint-components.customProperty.publicNote" />
+                kintIntl.formatKintMessage({
+                  id: 'customProperties.publicNote',
+                  overrideValue: labelOverrides.publicNote
+                })
               }
             >
               {customProperty?.publicNote ? (
@@ -179,6 +170,8 @@ CustomPropertyCard.propTypes = {
   customProperty: PropTypes.object,
   customPropertyDefinition: PropTypes.object,
   index: PropTypes.number,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
 };
 

package/src/lib/EditableRefdataCategoryList/EditableRefdataCategoryList.js

@@ -1,18 +1,20 @@
 import React, { useEffect, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
 
 import { ConfirmationModal } from '@folio/stripes/components';
 import { CalloutContext } from '@folio/stripes/core';
 
-import { useMutateRefdataCategory, useRefdata } from '../hooks';
+import { useKintIntl, useMutateRefdataCategory, useRefdata } from '../hooks';
 
 import ActionList from '../ActionList';
 import { required } from '../utils/validators';
+import { parseErrorResponse } from '../utils';
 
 const propTypes = {
   afterQueryCalls: PropTypes.object,
   catchQueryCalls: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node
@@ -24,13 +26,15 @@ const propTypes = {
 const EditableRefdataCategoryList = ({
   afterQueryCalls,
   catchQueryCalls,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   label,
   labelOverrides = {}, // An object containing translation alternatives
   refdataEndpoint
 }) => {
   /* A component that allows for editing of refdata categories */
   const callout = useContext(CalloutContext);
-  const intl = useIntl();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
   // fetch refdata values
   const { data: refdata = [], isLoading: isRefdataLoading } = useRefdata({
@@ -70,17 +74,16 @@ const EditableRefdataCategoryList = ({
       // Default delete behaviour is to fire a callout, either with kint-components default message
       // or one provided in labelOverrides, which is passed the error message and refdata in question
       delete: async (err) => {
-        const errorResp = await err.response.json();
+        const errorResp = await parseErrorResponse(err.response);
         callout.sendCallout({
-          message: labelOverrides?.deleteError ? labelOverrides.deleteError(errorResp?.message, deleteModal?.refdata) : (
-            <FormattedMessage
-              id="stripes-kint-components.editableRefdataCategoryList.deleteRefdataCategory.errorMessage"
-              values={{
-                label: deleteModal?.refdata?.label,
-                error: errorResp?.message
-              }}
-            />
-          ),
+          message: kintIntl.formatKintMessage({
+            id: 'refdataCategory.deleteRefdataCategory.errorMessage',
+            overrideValue: labelOverrides?.deleteError
+          },
+          {
+            label: deleteModal?.refdata?.label,
+            error: errorResp?.message
+          }),
           type: 'error',
         });
       },
@@ -109,13 +112,19 @@ const EditableRefdataCategoryList = ({
     if (!rowData?.values?.length) {
       actionArray.push({
         name: 'delete',
-        label: <FormattedMessage id="stripes-kint-components.delete" />,
+        label: kintIntl.formatKintMessage({
+          id: 'delete',
+          overrideValue: labelOverrides?.delete
+        }),
         icon: 'trash',
         callback: (data) => setDeleteModal({ visible: true, refdata: data }),
-        ariaLabel: (data) => intl.formatMessage(
-            { id: 'stripes-kint-components.editableRefdataCategoryList.deleteAriaLabel' },
-            { label: data?.label }
-          ),
+        ariaLabel: (data) => kintIntl.formatKintMessage(
+          {
+            id: 'refdataCategory.deleteAriaLabel',
+            overrideValue: labelOverrides?.deleteAriaLabel
+          },
+          { label: data?.label }
+        ),
       });
     }
     return actionArray;
@@ -126,8 +135,14 @@ const EditableRefdataCategoryList = ({
       <ActionList
         actionAssigner={actionAssigner}
         columnMapping={{
-          desc: <FormattedMessage id="stripes-kint-components.editableRefdataCategoryList.refdataCategory" />,
-          values: <FormattedMessage id="stripes-kint-components.editableRefdataCategoryList.noOfValues" />
+          desc: kintIntl.formatKintMessage({
+            id: 'refdataCategory.refdataCategory',
+            overrideValue: labelOverrides?.refdataCategory
+          }),
+          values: kintIntl.formatKintMessage({
+            id: 'refdataCategory.noOfValues',
+            overrideValue: labelOverrides?.noOfValues
+          }),
         }}
         contentData={contentData}
         creatableFields={{
@@ -145,18 +160,22 @@ const EditableRefdataCategoryList = ({
       />
       <ConfirmationModal
         confirmLabel={
-          <FormattedMessage id="stripes-kint-components.delete" />
+          kintIntl.formatKintMessage({
+            id: 'delete',
+            overrideValue: labelOverrides?.delete
+          })
         }
         heading={
-          labelOverrides?.deleteRefdataCategory ??
-          <FormattedMessage id="stripes-kint-components.editableRefdataCategoryList.deleteRefdataCategory" />
+          kintIntl.formatKintMessage({
+            id: 'refdataCategory.deleteRefdataCategory',
+            overrideValue: labelOverrides?.deleteRefdataCategory
+          })
         }
         message={
-          labelOverrides?.deleteRefdataCategoryMessage ? labelOverrides.deleteRefdataCategoryMessage(deleteModal?.refdata) :
-          <FormattedMessage
-            id="stripes-kint-components.editableRefdataCategoryList.deleteRefdataCategory.confirmMessage"
-            values={{ name: deleteModal?.refdata?.desc }}
-          />
+          kintIntl.formatKintMessage({
+            id: 'refdataCategory.deleteRefdataCategory.confirmMessage',
+            overrideValue: labelOverrides?.deleteRefdataCategoryMessage
+          }, { name: deleteModal?.refdata?.desc })
         }
         onCancel={() => setDeleteModal({ visible: false, refdata: null })}
         onConfirm={() => {

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -1,19 +1,21 @@
 import React, { useEffect, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
 
 import { ConfirmationModal } from '@folio/stripes/components';
 import { CalloutContext } from '@folio/stripes/core';
 
-import { useMutateRefdataValue, useRefdata } from '../hooks';
+import { useKintIntl, useMutateRefdataValue, useRefdata } from '../hooks';
 
 import ActionList from '../ActionList';
 import { required } from '../utils/validators';
+import { parseErrorResponse } from '../utils';
 
 const propTypes = {
   afterQueryCalls: PropTypes.object,
   catchQueryCalls: PropTypes.object,
   desc: PropTypes.string,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node
@@ -26,13 +28,15 @@ const EditableRefdataList = ({
   afterQueryCalls,
   catchQueryCalls,
   desc,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   label,
   labelOverrides = {}, // An object containing translation alternatives
   refdataEndpoint
 }) => {
   /* A component that allows for editing of refdata values */
   const callout = useContext(CalloutContext);
-  const intl = useIntl();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
   // fetch refdata values
   const { data: { 0: refdata } = {}, isLoading: isRefdataLoading } = useRefdata({
@@ -75,17 +79,16 @@ const EditableRefdataList = ({
       // Default delete behaviour is to fire a callout, either with kint-components default message
       // or one provided in labelOverrides, which is passed the error message and refdata in question
       delete: async (err) => {
-        const errorResp = await err.response.json();
+        const errorResp = await parseErrorResponse(err.response);
         callout.sendCallout({
-          message: labelOverrides?.deleteError ? labelOverrides.deleteError(errorResp?.message, deleteModal?.refdata) : (
-            <FormattedMessage
-              id="stripes-kint-components.editableRefdataList.deleteRefdataValue.errorMessage"
-              values={{
-                label: deleteModal?.refdata?.label,
-                error: errorResp?.message
-              }}
-            />
-          ),
+          message: kintIntl.formatKintMessage({
+            id: 'refdata.deleteRefdataValue.errorMessage',
+            overrideValue: labelOverrides?.deleteError
+          },
+          {
+            label: deleteModal?.refdata?.label,
+            error: errorResp?.message
+          }),
           type: 'error',
         });
       },
@@ -112,26 +115,38 @@ const EditableRefdataList = ({
     const actionArray = [
       {
         name: 'edit',
-        label: <FormattedMessage id="stripes-kint-components.edit" />,
+        label: kintIntl.formatKintMessage({
+          id: 'edit',
+          overrideValue: labelOverrides?.edit
+        }),
         icon: 'edit',
         callback: (data) => editRefdataValue(data),
-        ariaLabel: (data) => intl.formatMessage(
-            { id: 'stripes-kint-components.editableRefdataList.editAriaLabel' },
-            { label: data?.label }
-          ),
+        ariaLabel: (data) => kintIntl.formatKintMessage(
+          {
+            id: 'refdata.editAriaLabel',
+            overrideValue: labelOverrides?.editAriaLabel
+          },
+          { label: data?.label }
+        ),
       }
     ];
 
     if (!refdata?.internal) {
       actionArray.push({
         name: 'delete',
-        label: <FormattedMessage id="stripes-kint-components.delete" />,
+        label: kintIntl.formatKintMessage({
+          id: 'delete',
+          overrideValue: labelOverrides?.delete
+        }),
         icon: 'trash',
         callback: (data) => setDeleteModal({ visible: true, refdata: data }),
-        ariaLabel: (data) => intl.formatMessage(
-            { id: 'stripes-kint-components.editableRefdataList.deleteAriaLabel' },
-            { label: data?.label }
-          ),
+        ariaLabel: (data) => kintIntl.formatKintMessage(
+          {
+            id: 'refdata.deleteAriaLabel',
+            overrideValue: labelOverrides?.deleteAriaLabel
+          },
+          { label: data?.label }
+        ),
       });
     }
     return actionArray;
@@ -142,8 +157,14 @@ const EditableRefdataList = ({
       <ActionList
         actionAssigner={actionAssigner}
         columnMapping={{
-          label: <FormattedMessage id="stripes-kint-components.editableRefdataList.label" />,
-          value: <FormattedMessage id="stripes-kint-components.editableRefdataList.value" />
+          label: kintIntl.formatKintMessage({
+            id: 'refdata.label',
+            overrideValue: labelOverrides?.label
+          }),
+          value: kintIntl.formatKintMessage({
+            id: 'refdata.value',
+            overrideValue: labelOverrides?.value
+          }),
         }}
         contentData={contentData}
         creatableFields={{
@@ -161,18 +182,22 @@ const EditableRefdataList = ({
       />
       <ConfirmationModal
         confirmLabel={
-          <FormattedMessage id="stripes-kint-components.delete" />
+          kintIntl.formatKintMessage({
+            id: 'delete',
+            overrideValue: labelOverrides?.delete
+          })
         }
         heading={
-          labelOverrides?.deleteRefdataValue ??
-          <FormattedMessage id="stripes-kint-components.editableRefdataList.deleteRefdataValue" />
+          kintIntl.formatKintMessage({
+            id: 'refdata.deleteRefdataValue',
+            overrideValue: labelOverrides?.deleteRefdataValue
+          })
         }
         message={
-          labelOverrides?.deleteRefdataValueMessage ? labelOverrides.deleteRefdataValueMessage(deleteModal?.refdata) :
-          <FormattedMessage
-            id="stripes-kint-components.editableRefdataList.deleteRefdataValue.confirmMessage"
-            values={{ name: deleteModal?.refdata?.label }}
-          />
+          kintIntl.formatKintMessage({
+            id: 'refdata.deleteRefdataValue.confirmMessage',
+            overrideValue: labelOverrides?.deleteRefdataValueMessage
+          }, { name: deleteModal?.refdata?.label })
         }
         onCancel={() => setDeleteModal({ visible: false, refdata: null })}
         onConfirm={() => {

package/src/lib/EditableSettingsList/EditableSettingsList.js

@@ -9,7 +9,10 @@ import EditableSettingsListFieldArray from './EditableSettingsListFieldArray';
 const EditableSettingsList = ({
   data,
   initialValues,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   label,
+  labelOverrides = {},
   onSave
 }) => {
   return (
@@ -27,7 +30,10 @@ const EditableSettingsList = ({
           <FieldArray
             component={EditableSettingsListFieldArray}
             data={data}
+            intlKey={passedIntlKey}
+            intlNS={passedIntlNS}
             label={label}
+            labelOverrides={labelOverrides}
             name="settings"
             onSave={onSave}
           />
@@ -43,11 +49,14 @@ EditableSettingsList.propTypes = {
     refdatavalues: PropTypes.arrayOf(PropTypes.object)
   }),
   initialValues: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node,
     PropTypes.object
-  ])
+  ]),
+  labelOverrides: PropTypes.object,
 };
 
 export default EditableSettingsList;

package/src/lib/EditableSettingsList/EditableSettingsListFieldArray.js

@@ -4,7 +4,14 @@ import { Field } from 'react-final-form';
 
 import { SettingField } from './SettingField';
 
-const EditableSettingsListFieldArray = ({ data, fields, onSave }) => {
+const EditableSettingsListFieldArray = ({
+  data,
+  fields,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
+  onSave
+}) => {
   const handleSave = (index) => {
     const setting = fields.value[index];
     return onSave(setting);
@@ -17,6 +24,9 @@ const EditableSettingsListFieldArray = ({ data, fields, onSave }) => {
           key={setting}
           component={SettingField}
           data-testid={`editableSettingsListFieldArray[${i}]`}
+          intlKey={passedIntlKey}
+          intlNS={passedIntlNS}
+          labelOverrides={labelOverrides}
           name={setting}
           onSave={() => handleSave(i)}
           settingData={{
@@ -31,6 +41,9 @@ const EditableSettingsListFieldArray = ({ data, fields, onSave }) => {
 
 EditableSettingsListFieldArray.propTypes = {
   fields: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  labelOverrides: PropTypes.object,
   onSave: PropTypes.func,
   data: PropTypes.shape({
     refdatavalues: PropTypes.arrayOf(PropTypes.object)

package/src/lib/EditableSettingsList/SettingField/EditSettingValue.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 
 import { Field } from 'react-final-form';
 import {
@@ -8,16 +7,25 @@ import {
   TextField,
 } from '@folio/stripes/components';
 import RefdataButtons from '../../RefdataButtons';
+import { useKintIntl } from '../../hooks';
 
 const EditSettingValue = (props) => {
   const {
-    input,
     currentSetting: setting,
+    input,
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
     refdata,
     templates
   } = props;
-  const intl = useIntl();
-  const fieldLabel = intl.formatMessage({ id: 'stripes-kint-components.settings.valueFor', values: { name: setting.key } });
+
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  const fieldLabel = kintIntl.formatKintMessage({
+    id: 'settings.valueFor',
+    overrideValue: labelOverrides?.valueFor
+  }, { name: setting.key });
 
   switch (setting.settingType) {
     case 'Refdata':
@@ -82,11 +90,15 @@ const EditSettingValue = (props) => {
 
 EditSettingValue.propTypes = {
   currentSetting: PropTypes.shape({
-    settingType: PropTypes.string
+    settingType: PropTypes.string,
+    key: PropTypes.string,
   }),
   input: PropTypes.shape({
     name: PropTypes.string
   }),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  labelOverrides: PropTypes.object,
   refdata: PropTypes.arrayOf(PropTypes.object),
   templates: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,

package/src/lib/EditableSettingsList/SettingField/EditSettingValue.test.js

@@ -8,6 +8,7 @@ import EditSettingValue from './EditSettingValue';
 import { renderWithKintHarness } from '../../../../test/jest/helpers';
 
 const onSubmit = jest.fn();
+jest.mock('../../hooks');
 
 const stringSetting = {
   id: '12345',
@@ -116,7 +117,7 @@ describe('EditSettingValue', () => {
       });
       test('renders the edit field', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('textbox', { name: 'Value for setting {name}' }));
+        expect(getByRole('textbox', { name: 'Value for setting testSettingKey' }));
       });
     });
 
@@ -144,7 +145,7 @@ describe('EditSettingValue', () => {
 
       test('renders the expected value in the edit field', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('textbox', { name: 'Value for setting {name}' })).toHaveDisplayValue('diku-shared');
+        expect(getByRole('textbox', { name: 'Value for setting testSettingKey' })).toHaveDisplayValue('diku-shared');
       });
     });
   });
@@ -244,7 +245,7 @@ describe('EditSettingValue', () => {
       });
       test('renders the expected select field', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('combobox', { name: 'Value for setting {name}' }));
+        expect(getByRole('combobox', { name: 'Value for setting testSettingKey' }));
       });
 
       test('renders the expected refdata options', () => {
@@ -293,7 +294,7 @@ describe('EditSettingValue', () => {
 
       test('renders the expected value in the refdata dropdown', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('combobox', { name: 'Value for setting {name}' })).toHaveDisplayValue('Test refdata value');
+        expect(getByRole('combobox', { name: 'Value for setting testSettingKey' })).toHaveDisplayValue('Test refdata value');
       });
     });
   });
@@ -319,7 +320,7 @@ describe('EditSettingValue', () => {
       });
       test('renders the edit field', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('combobox', { name: 'Value for setting {name}' }));
+        expect(getByRole('combobox', { name: 'Value for setting testSettingKey' }));
       });
 
       test('renders the expected template options', () => {
@@ -331,7 +332,7 @@ describe('EditSettingValue', () => {
 
       test('renders expected display item in template dropdown', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('combobox', { name: 'Value for setting {name}' })).toHaveDisplayValue('');
+        expect(getByRole('combobox', { name: 'Value for setting testSettingKey' })).toHaveDisplayValue('');
       });
     });
 
@@ -360,7 +361,7 @@ describe('EditSettingValue', () => {
 
       test('renders the edit field', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('combobox', { name: 'Value for setting {name}' }));
+        expect(getByRole('combobox', { name: 'Value for setting testSettingKey' }));
       });
 
       test('renders the expected template options', () => {
@@ -372,7 +373,7 @@ describe('EditSettingValue', () => {
 
       test('renders expected display item in template dropdown', () => {
         const { getByRole } = renderComponent;
-        expect(getByRole('combobox', { name: 'Value for setting {name}' })).toHaveDisplayValue('Test template');
+        expect(getByRole('combobox', { name: 'Value for setting testSettingKey' })).toHaveDisplayValue('Test template');
       });
     });
   });