@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.3

package/src/components/form/VariableJsonTextArea.tsx

@@ -0,0 +1,175 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { css, cx } from '@emotion/css';
+import {
+  FlowContextSelector,
+  formatPathToValue as formatFlowPathToValue,
+  useFlowContext,
+  type MetaTreeNode,
+} from '@nocobase/flow-engine';
+import { Button, theme } from 'antd';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { JsonTextArea, type JsonTextAreaProps } from './JsonTextArea';
+import { useFilteredMetaTree } from './VariableInput';
+
+export interface VariableJsonTextAreaProps extends JsonTextAreaProps {
+  namespaces?: string[];
+  extraNodes?: MetaTreeNode[];
+  metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+  formatPathToValue?: (meta: MetaTreeNode) => string | undefined;
+}
+
+export const VariableJsonTextArea = React.memo((props: VariableJsonTextAreaProps) => {
+  const {
+    value,
+    onChange,
+    space = 2,
+    json5 = false,
+    showError = true,
+    className,
+    status,
+    onBlur,
+    namespaces,
+    extraNodes,
+    metaTree,
+    formatPathToValue: customFormatPathToValue,
+    ...textAreaProps
+  } = props;
+  const { token } = theme.useToken();
+  const flowCtx = useFlowContext();
+  const filteredMetaTree = useFilteredMetaTree({ namespaces, extraNodes });
+  const ref = useRef<TextAreaRef>(null);
+
+  const insertAtCaret = useCallback((valueToInsert: string) => {
+    const textArea = ref.current?.resizableTextArea?.textArea;
+    if (!textArea) return;
+
+    const start = textArea.selectionStart ?? textArea.value.length;
+    const end = textArea?.selectionEnd ?? start;
+    const nextText = textArea.value.slice(0, start) + valueToInsert + textArea.value.slice(end);
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set;
+
+    nativeInputValueSetter?.call(textArea, nextText);
+    textArea.dispatchEvent(new Event('input', { bubbles: true }));
+
+    requestAnimationFrame(() => {
+      const nextPosition = start + valueToInsert.length;
+      textArea.setSelectionRange(start, nextPosition);
+      textArea.focus();
+    });
+  }, []);
+
+  const handleVariableSelected = useCallback(
+    (nextValue: string) => {
+      if (nextValue) {
+        insertAtCaret(nextValue);
+      }
+    },
+    [insertAtCaret],
+  );
+
+  const selectorMetaTree = useMemo(
+    () => metaTree ?? filteredMetaTree ?? (() => flowCtx.getPropertyMetaTree?.() ?? []),
+    [filteredMetaTree, flowCtx, metaTree],
+  );
+
+  const formatPathToValue = useMemo(() => {
+    if (!customFormatPathToValue) {
+      return;
+    }
+    return (meta: MetaTreeNode) => customFormatPathToValue(meta) ?? formatFlowPathToValue(meta);
+  }, [customFormatPathToValue]);
+
+  const wrapperClassName = useMemo(
+    () => css`
+      position: relative;
+      width: 100%;
+
+      .ant-input {
+        width: 100%;
+      }
+    `,
+    [],
+  );
+
+  const textAreaClassName = useMemo(
+    () => css`
+      font-size: ${token.fontSizeSM}px;
+      font-family: ${token.fontFamilyCode};
+    `,
+    [token.fontFamilyCode, token.fontSizeSM],
+  );
+
+  const selectorClassName = useMemo(
+    () => css`
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      z-index: 1;
+      line-height: 0;
+
+      .ant-btn {
+        font-size: ${token.fontSizeSM}px;
+      }
+    `,
+    [token.fontSizeSM],
+  );
+
+  const buttonClassName = useMemo(
+    () => css`
+      &:not(:hover) {
+        border-inline-end-color: transparent;
+        border-block-start-color: transparent;
+        background-color: transparent;
+      }
+    `,
+    [],
+  );
+
+  return (
+    <div className={wrapperClassName}>
+      <JsonTextArea
+        {...textAreaProps}
+        ref={ref}
+        value={value}
+        onChange={onChange}
+        space={space}
+        json5={json5}
+        showError={showError}
+        className={cx(textAreaClassName, className)}
+        status={status}
+        onBlur={onBlur}
+        disabled={textAreaProps.disabled}
+      />
+      <div className={selectorClassName}>
+        <FlowContextSelector
+          metaTree={selectorMetaTree}
+          disabled={textAreaProps.disabled}
+          formatPathToValue={formatPathToValue}
+          onChange={handleVariableSelected}
+        >
+          <Button
+            aria-label="variable-json-switcher"
+            disabled={textAreaProps.disabled}
+            className={buttonClassName}
+            style={{ fontStyle: 'italic', fontFamily: token.fontFamilyCode }}
+          >
+            x
+          </Button>
+        </FlowContextSelector>
+      </div>
+    </div>
+  );
+});
+
+VariableJsonTextArea.displayName = 'VariableJsonTextArea';
+
+export const VariableJSON = VariableJsonTextArea;

package/src/components/form/__tests__/JsonTextArea.test.tsx

@@ -0,0 +1,43 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { JsonTextArea } from '../JsonTextArea';
+
+describe('JsonTextArea', () => {
+  it('formats object values and emits parsed JSON on blur', async () => {
+    const handleChange = vi.fn();
+
+    render(<JsonTextArea value={{ foo: 'bar' }} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    expect(textArea).toHaveValue('{\n  "foo": "bar"\n}');
+
+    fireEvent.change(textArea, { target: { value: '{"foo":"baz"}' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).toHaveBeenCalledWith({ foo: 'baz' });
+    expect(textArea).toHaveValue('{\n  "foo": "baz"\n}');
+  });
+
+  it('shows JSON parse errors and does not emit invalid values', async () => {
+    const handleChange = vi.fn();
+
+    render(<JsonTextArea value={{}} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    fireEvent.change(textArea, { target: { value: '{' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(await screen.findByText(/JSON/)).toBeInTheDocument();
+  });
+});

package/src/components/form/__tests__/TypedVariableInput.test.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { FlowContext, FlowContextProvider } from '@nocobase/flow-engine';
+import { FlowContext, FlowContextProvider, type MetaTreeNode } from '@nocobase/flow-engine';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
@@ -64,6 +64,7 @@ describe('TypedVariableInput - constant rendering', () => {
       const item = screen.getByText('True');
       expect(item).toBeInTheDocument();
     });
+    expect(screen.getByRole('button', { name: 'variable-switcher' }).className).not.toContain('ant-btn-primary');
   });
 
   it('renders the Null placeholder when value=null and nullable=true', async () => {
@@ -77,6 +78,69 @@ describe('TypedVariableInput - constant rendering', () => {
     const nullInput = await screen.findByPlaceholderText('<Null>');
     expect(nullInput).toBeInTheDocument();
     expect(nullInput.getAttribute('readonly')).not.toBeNull();
+    expect(screen.getByRole('button', { name: 'variable-switcher' }).className).not.toContain('ant-btn-primary');
+  });
+
+  it('defaults undefined to the first constant type', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={undefined}
+        types={['string', 'number']}
+        namespaces={['$env']}
+        nullable
+        onChange={handleChange}
+      />,
+    );
+
+    expect(screen.queryByPlaceholderText('<Null>')).toBeNull();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(handleChange).toHaveBeenCalledWith('');
+    });
+  });
+
+  it('can still opt out to keep the null placeholder for undefined', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={undefined}
+        types={['string', 'number']}
+        namespaces={['$env']}
+        nullable
+        defaultToFirstConstantTypeWhenUndefined={false}
+        onChange={() => undefined}
+      />,
+    );
+
+    const nullInput = await screen.findByPlaceholderText('<Null>');
+    expect(nullInput).toBeInTheDocument();
+  });
+
+  it('highlights the defaulted first constant type when the switcher opens', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={undefined}
+        types={['string', 'number']}
+        namespaces={['$env']}
+        nullable
+        onChange={() => undefined}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+
+    await waitFor(() => {
+      const constant = screen.getAllByText('Constant')[0];
+      const string = screen.getAllByText('String')[0];
+      expect(constant.closest('.ant-cascader-menu-item-active')).not.toBeNull();
+      expect(string.closest('.ant-cascader-menu-item-active')).not.toBeNull();
+    });
   });
 });
 
@@ -99,10 +163,10 @@ describe('TypedVariableInput - variable rendering', () => {
     });
   });
 
-  it('clears back to null when the close button is clicked (nullable=true)', async () => {
+  it('clears back to default-of-first-type when the close button is clicked (nullable=true)', async () => {
     const ctx = createContextWithEnv();
     const handleChange = vi.fn();
-    renderWithCtx(
+    const { container } = renderWithCtx(
       ctx,
       <TypedVariableInput
         value="{{$env.SMTP_PORT}}"
@@ -112,15 +176,17 @@ describe('TypedVariableInput - variable rendering', () => {
         onChange={handleChange}
       />,
     );
-    const clear = await screen.findByRole('button', { name: 'icon-close' });
-    fireEvent.click(clear);
-    expect(handleChange).toHaveBeenCalledWith(null);
+    const clear = container.querySelector('button.clear-button') as HTMLButtonElement | null;
+    expect(clear).not.toBeNull();
+    expect(clear).toHaveClass('clear-button');
+    fireEvent.click(clear as HTMLButtonElement);
+    expect(handleChange).toHaveBeenCalledWith(0);
   });
 
   it('clears back to default-of-first-type when nullable=false', async () => {
     const ctx = createContextWithEnv();
     const handleChange = vi.fn();
-    renderWithCtx(
+    const { container } = renderWithCtx(
       ctx,
       <TypedVariableInput
         value="{{$env.SMTP_PORT}}"
@@ -130,12 +196,205 @@ describe('TypedVariableInput - variable rendering', () => {
         onChange={handleChange}
       />,
     );
-    const clear = await screen.findByRole('button', { name: 'icon-close' });
-    fireEvent.click(clear);
+    const clear = container.querySelector('button.clear-button') as HTMLButtonElement | null;
+    expect(clear).not.toBeNull();
+    fireEvent.click(clear as HTMLButtonElement);
     expect(handleChange).toHaveBeenCalledWith(0);
   });
 });
 
+describe('TypedVariableInput - object / JSON constant', () => {
+  it('renders a JSON textarea for an object value when types include object', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value={{ a: 1 }} types={['object']} namespaces={['$env']} onChange={() => undefined} />,
+    );
+    // The object is stringified into a textarea.
+    const textarea = await screen.findByDisplayValue(/"a": 1/);
+    expect(textarea.tagName.toLowerCase()).toBe('textarea');
+  });
+
+  it('parses valid JSON on blur and emits the parsed object', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value={{}} types={['object']} namespaces={['$env']} onChange={handleChange} />,
+    );
+    const textarea = await screen.findByDisplayValue('{}');
+    fireEvent.change(textarea, { target: { value: '{"x": 42}' } });
+    fireEvent.blur(textarea);
+    expect(handleChange).toHaveBeenLastCalledWith({ x: 42 });
+  });
+
+  it('shows an error live on change (before blur) and does not emit on invalid JSON', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value={{}} types={['object']} namespaces={['$env']} onChange={handleChange} />,
+    );
+    const textarea = await screen.findByDisplayValue('{}');
+    // Typing an invalid value surfaces the error immediately — no blur needed (mirrors v1's `Json`, which validates on
+    // every change).
+    fireEvent.change(textarea, { target: { value: '{ not json' } });
+    await waitFor(() => {
+      // The raw `JSON.parse` error message is shown (matching v1), e.g. "Expected property name or '}' in JSON at
+      // position …".
+      expect(screen.getByText(/Expected property name/i)).toBeInTheDocument();
+    });
+    // The value is only emitted on blur, and never for an invalid value.
+    fireEvent.blur(textarea);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('defaults to {} when the Constant > JSON type is picked', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value={null} types={['object']} namespaces={['$env']} onChange={handleChange} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+    // Constant submenu → JSON leaf.
+    fireEvent.click(await screen.findByText('Constant'));
+    fireEvent.click(await screen.findByText('JSON'));
+    expect(handleChange).toHaveBeenCalledWith({});
+  });
+});
+
+describe('TypedVariableInput - injected metaTree', () => {
+  // A bare context with no global `$env` — the injected tree is the only source.
+  function createBareContext() {
+    const ctx = new FlowContext();
+    (ctx as any).t = (key: string) => key;
+    return ctx;
+  }
+
+  // Mirrors a workflow node-result tree: a root whose children load lazily.
+  function makeLazyTree(loadChildren: () => Promise<MetaTreeNode[]>): MetaTreeNode[] {
+    return [
+      {
+        name: '$jobsMapByNodeKey',
+        title: 'Node result',
+        type: 'object',
+        paths: ['$jobsMapByNodeKey'],
+        children: loadChildren,
+      },
+    ];
+  }
+
+  it('renders the injected tree in the switcher, not the global one', async () => {
+    const ctx = createBareContext();
+    const metaTree: MetaTreeNode[] = [
+      { name: 'n1', title: 'Approval node', type: 'object', paths: ['$jobsMapByNodeKey', 'n1'] },
+    ];
+    renderWithCtx(ctx, <TypedVariableInput value={null} metaTree={metaTree} onChange={() => undefined} />);
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+    await waitFor(() => {
+      expect(screen.getByText('Approval node')).toBeInTheDocument();
+    });
+  });
+
+  it('lazily resolves function children when a node is expanded', async () => {
+    const ctx = createBareContext();
+    const loadChildren = vi.fn(async () => [
+      { name: 'status', title: 'Status', type: 'string', paths: ['$jobsMapByNodeKey', 'n1', 'status'] },
+    ]);
+    const metaTree = makeLazyTree(loadChildren);
+    renderWithCtx(ctx, <TypedVariableInput value={null} metaTree={metaTree} onChange={() => undefined} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+    const root = await screen.findByText('Node result');
+    // Expanding the lazy node triggers loadData → loadMetaTreeChildren.
+    fireEvent.click(root);
+    await waitFor(() => {
+      expect(loadChildren).toHaveBeenCalled();
+      expect(screen.getByText('Status')).toBeInTheDocument();
+    });
+  });
+
+  it('surfaces lazy children on the FIRST expansion (no stuck-loading regression)', async () => {
+    const ctx = createBareContext();
+    // A deferred promise so loading→resolved is a real two-phase transition, reproducing the rc-cascader
+    // reference-cache bug where the first expand stayed stuck on the spinner until the column was reopened.
+    let resolveChildren: (nodes: MetaTreeNode[]) => void = () => undefined;
+    const childrenPromise = new Promise<MetaTreeNode[]>((resolve) => {
+      resolveChildren = resolve;
+    });
+    const loadChildren = vi.fn(() => childrenPromise);
+    const metaTree = makeLazyTree(loadChildren);
+    renderWithCtx(ctx, <TypedVariableInput value={null} metaTree={metaTree} onChange={() => undefined} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+    const root = await screen.findByText('Node result');
+    fireEvent.click(root);
+    expect(loadChildren).toHaveBeenCalledTimes(1);
+    // Resolve after the click — the child must appear without reopening.
+    resolveChildren([
+      { name: 'secret', title: 'SMTP_HOST', type: 'string', paths: ['$jobsMapByNodeKey', 'n1', 'secret'] },
+    ]);
+    await waitFor(() => {
+      expect(screen.getByText('SMTP_HOST')).toBeInTheDocument();
+    });
+  });
+
+  it('emits the selected variable as a {{ ... }} expression with no inner spaces', async () => {
+    const ctx = createBareContext();
+    const handleChange = vi.fn();
+    const metaTree: MetaTreeNode[] = [
+      { name: 'n1', title: 'Approval node', type: 'string', paths: ['$jobsMapByNodeKey', 'n1'] },
+    ];
+    renderWithCtx(ctx, <TypedVariableInput value={null} metaTree={metaTree} onChange={handleChange} />);
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+    const leaf = await screen.findByText('Approval node');
+    fireEvent.click(leaf);
+    await waitFor(() => {
+      expect(handleChange).toHaveBeenCalledWith('{{$jobsMapByNodeKey.n1}}');
+    });
+  });
+
+  it('preloads a saved variable label across a lazy level (deep label not dropped on mount)', async () => {
+    const ctx = createBareContext();
+    // The query-node case: a saved reference `$jobsMapByNodeKey.n1.role` points below `n1`, whose children are a lazy
+    // thunk (relation not yet expanded). On mount the tag must show the full path "Query / Role", not stop at "Query" —
+    // the component walks the saved path resolving each lazy level. (Regression: reopening a saved condition showed
+    // only "节点数据 / 查询数据" and dropped "角色标识".)
+    const loadRoleFields = vi.fn(async () => [
+      { name: 'role', title: 'Role', type: 'string', paths: ['$jobsMapByNodeKey', 'n1', 'role'] },
+    ]);
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: '$jobsMapByNodeKey',
+        title: 'Node result',
+        type: 'object',
+        paths: ['$jobsMapByNodeKey'],
+        children: [
+          {
+            name: 'n1',
+            title: 'Query',
+            type: 'object',
+            paths: ['$jobsMapByNodeKey', 'n1'],
+            children: loadRoleFields,
+          },
+        ],
+      },
+    ];
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value="{{$jobsMapByNodeKey.n1.role}}" metaTree={metaTree} onChange={() => undefined} />,
+    );
+    const tag = screen.getByRole('button', { name: 'variable-tag' });
+    // Preload resolves the lazy level so the deep label appears without expanding.
+    await waitFor(() => {
+      expect(loadRoleFields).toHaveBeenCalled();
+      expect(tag.textContent).toContain('Role');
+    });
+    expect(tag.textContent).toContain('Query');
+  });
+});
+
 describe('TypedVariableInput - editor onChange propagation', () => {
   it('forwards numeric edits via onChange', async () => {
     const ctx = createContextWithEnv();

package/src/components/form/__tests__/VariableJsonTextArea.test.tsx

@@ -0,0 +1,86 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { FlowContext, FlowContextProvider } from '@nocobase/flow-engine';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { VariableJsonTextArea } from '../VariableJsonTextArea';
+
+function createContextWithEnv() {
+  const ctx = new FlowContext();
+  (ctx as unknown as { t: (key: string) => string }).t = (key: string) => key;
+
+  ctx.defineProperty('$env', {
+    value: { API_KEY: 'secret' },
+    meta: {
+      title: 'Env',
+      type: 'object',
+      properties: {
+        API_KEY: { title: 'API Key', type: 'string' },
+      },
+    },
+  });
+
+  return ctx;
+}
+
+function renderWithCtx(ctx: FlowContext, node: React.ReactNode) {
+  return render(<FlowContextProvider context={ctx}>{node}</FlowContextProvider>);
+}
+
+describe('VariableJsonTextArea', () => {
+  it('formats object values and emits parsed JSON on blur', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={{ foo: 'bar' }} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    expect(textArea).toHaveValue('{\n  "foo": "bar"\n}');
+
+    fireEvent.change(textArea, { target: { value: '{"foo":"baz"}' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).toHaveBeenCalledWith({ foo: 'baz' });
+    expect(textArea).toHaveValue('{\n  "foo": "baz"\n}');
+  });
+
+  it('shows JSON parse errors and does not emit invalid values', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={{}} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    fireEvent.change(textArea, { target: { value: '{' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(await screen.findByText(/JSON/)).toBeInTheDocument();
+  });
+
+  it('inserts selected variables with the client-v2 template format', async () => {
+    const ctx = createContextWithEnv();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={null} namespaces={['$env']} onChange={() => undefined} />);
+
+    fireEvent.click(await screen.findByRole('button', { name: 'variable-json-switcher' }));
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('Env'));
+    });
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('API Key'));
+    });
+
+    expect(await screen.findByRole('textbox')).toHaveValue('{{ ctx.$env.API_KEY }}');
+  });
+});