test(entities-shared): fix config card json text

Author: Justineo

packages/entities/entities-shared/fixtures/mockData.ts

@@ -119,6 +119,7 @@ export const gatewayServiceRecord = {
   tls_verify: true,
   updated_at: 1686157266,
   write_timeout: 60000,
+  extra: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
 }
 
 export const emptyKey = 'preferred_chain'

packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.vue

@@ -162,7 +162,7 @@ const emit = defineEmits<{
   (e: 'navigation-click', record: RecordItem): void,
 }>()
 
-const id = useId()
+const uniqueId = useId()
 
 const slots = useSlots()
 const { i18n: { t, formatUnixTimeStamp } } = composables.useI18n()
@@ -307,26 +307,21 @@ const componentAttrsData = computed((): ComponentAttrsData => {
         },
       }
 
-    case ConfigurationSchemaType.Text: {
-      // If the schema type is `plain-text` but the value is an object, we want to display it as a JSON code block.
-      // Otherwise, we'll just fallthrough to the default case and display it as plain text.
+    default:
+      // Before fallback to plain text, check if the value is an object, if so, render it as a code block
       if (props.item.value != null && typeof props.item.value === 'object') {
         return {
           tag: 'KCodeBlock',
           attrs: {
             'data-testid': `${props.item.key}-json-code`,
-            id: `json-code-${id}`,
+            id: `json-code-${uniqueId}`,
             language: 'json',
             code: JSON.stringify(props.item.value, null, '  '),
             theme: 'dark',
             maxHeight: '480px',
           },
         }
       }
-    }
-
-    // eslint-disable-next-line no-fallthrough
-    default:
       return {
         tag: 'div',
         attrs: {

packages/entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.cy.ts

@@ -29,6 +29,7 @@ const customizedKey = 'ca_certificates'
 const customTooltip = 'Custom tooltip'
 const customLabel = 'CA Certificates'
 const unconfiguredKey = 'client_certificate'
+const untypedKey = 'extra'
 const configSchema: ConfigurationSchema = {
   protocol: {
     section: ConfigurationSchemaSection.Basic,
@@ -68,6 +69,9 @@ const configSchema: ConfigurationSchema = {
     order: 6,
     section: ConfigurationSchemaSection.Advanced,
   },
+  [untypedKey]: {
+    order: 5,
+  },
   [unconfiguredKey]: {
     // leave this object empty for tests!!
   },
@@ -222,6 +226,15 @@ describe('<EntityBaseConfigCard />', () => {
       cy.getTestId(`${unconfiguredKey}-label-tooltip`).should('not.exist')
       // type defaults to plain text
       cy.getTestId(`${unconfiguredKey}-json-code`).should('be.visible')
+
+      // section defaults to Advanced (and hidden defaults to false)
+      cy.get(`[data-testid="config-card-details-advanced-props"] [data-testid="${untypedKey}-label"]`).should('exist')
+      // title cases key for the label
+      cy.getTestId(`${untypedKey}-label`).should('contain.text', convertKeyToTitle(untypedKey))
+      // no tooltip
+      cy.getTestId(`${untypedKey}-label-tooltip`).should('not.exist')
+      // type defaults to plain text
+      cy.getTestId(`${untypedKey}-plain-text`).should('be.visible')
     })
 
     it('allows customizing label and label tooltip', () => {