I am new to using JET and the Preact testing library and am trying to write tests to validate the values in fields. I'm having trouble peeking the value from the HTMLElement when rendering for tests. Here's what I have set up.
I have defined a custom component:
export const Input2Component = (props: any) => {
let data = props.data.value;
let fieldChangeHandler = (event: any) => {
const target = event.target as HTMLInputElement;
const newValue = target.value;
props.data.value = { ...data, value: newValue };
console.log(dataMap);
}
return (
<oj-c-input-text
label-hint={data.name}
value={data.value}
onvalueChanged={fieldChangeHandler}
hidden={data.hidden}
data-testid={data.name}
></oj-c-input-text>
)
};
Which uses the following data mapping:
let data = {
fieldTags: [
{ name: "Input 1", value: "one", hidden: false },
{ name: "Input 2", value: "two", hidden: false },
{ name: "Input 3", value: "three", hidden: false },
{ name: "Input 4", value: "four", hidden: false }
]
};
And is contained as follows:
export function Content() {
return (
<div class="oj-web-applayout-max-width oj-web-applayout-content">
<oj-form-layout direction="row" columns={1} max-columns={1} user-assistance-density="efficient"
class="oj-sm-margin-4x-top oj-sm-padding-2x-horizontal">
<oj-collapsible
class="oj-sm-padding-2x-vertical oj-lg-align-items-center oj-lg-justify-content-center"
expanded={true}>
<Input1Component data={dataMap["Input 1"]}></Input1Component>
<Input2Component data={dataMap["Input 2"]}></Input2Component>
<br></br>
<Input3Component data={dataMap["Input 3"]}></Input3Component>
<Input4Component data={dataMap["Input 4"]}></Input4Component>
</oj-collapsible>
</oj-form-layout>
</div>
);
};
The first test I have is just trying to validate that the text content of the Input2Component matches what the data mapping defaults to, but I get a null value instead of the expected value:
describe("Home", () => {
it("renders a heading", async() => {
render(<Content />);
screen.debug();
let input2 = screen.getByTestId("Input 2")
console.log(input2)
expect(input2).toHaveTextContent("two")
});
});
Running a screen.debug() after rendering shows no values in the component:
<body>
<div>
<div
class="oj-web-applayout-max-width oj-web-applayout-content"
>
<oj-form-layout
class="oj-sm-margin-4x-top oj-sm-padding-2x-horizontal"
max-columns="1"
user-assistance-density="efficient"
>
<oj-collapsible
class="oj-sm-padding-2x-vertical oj-lg-align-items-center oj-lg-justify-content-center oj-pending-subtree-hidden"
>
<oj-c-input-text
data-testid="Input 1"
label-hint="Input 1"
/>
<oj-c-input-text
data-testid="Input 2"
label-hint="Input 2"
/>
<br />
<oj-c-input-text
data-testid="Input 3"
label-hint="Input 3"
/>
<oj-c-input-text
data-testid="Input 4"
label-hint="Input 4"
/>
</oj-collapsible>
</oj-form-layout>
</div>
</div>
</body>
How am I supposed to render and peek the values of custom JET components using the Preact testing library?