fix test and arbitrary props

Author: guoda-puidokaite

packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.test.tsx

@@ -51,4 +51,15 @@ describe("DescriptionDefinition", () => {
     expect(screen.getByText("Complex")).toBeInTheDocument()
     expect(screen.getByText("Content")).toBeInTheDocument()
   })
+
+  it("receives and applies arbitrary props", () => {
+    render(
+      <DescriptionDefinition data-testid={"custom-id"} data-arbitrary-prop={"data-madeup-content"}>
+        <span>Complex Term</span> <strong>Content</strong>
+      </DescriptionDefinition>
+    )
+
+    const ddElement = screen.getByTestId("custom-id")
+    expect(ddElement).toHaveAttribute("data-arbitrary-prop", "data-madeup-content")
+  })
 })

packages/ui-components/src/components/DescriptionList/DescriptionList.test.tsx

@@ -75,15 +75,14 @@ describe("DescriptionList", () => {
   })
 
   it("receives and applies arbitrary props", () => {
-    const dataId = "custom-id"
     render(
-      <DescriptionList data-testid={dataId}>
+      <DescriptionList data-testid={"custom-id"} data-arbitrary-prop={"data-madeup-content"}>
         <DescriptionTerm>Term 7</DescriptionTerm>
         <DescriptionDefinition>Definition 7</DescriptionDefinition>
       </DescriptionList>
     )
 
-    const dlElement = screen.getByTestId(dataId)
-    expect(dlElement).toHaveAttribute("data-testid", dataId)
+    const dlElement = screen.getByTestId("custom-id")
+    expect(dlElement).toHaveAttribute("data-arbitrary-prop", "data-madeup-content")
   })
 })

packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.test.tsx

@@ -29,7 +29,7 @@ describe("DescriptionTerm", () => {
 
   it("can render complex children", () => {
     render(
-      <DescriptionTerm>
+      <DescriptionTerm data-arbitrary-prop={"data-madeup-content"}>
         <span>Complex Term</span> <strong>Content</strong>
       </DescriptionTerm>
     )
@@ -38,14 +38,13 @@ describe("DescriptionTerm", () => {
   })
 
   it("receives and applies arbitrary props", () => {
-    const dataId = "custom-id"
     render(
-      <DescriptionTerm data-testid={dataId}>
+      <DescriptionTerm data-testid={"custom-id"} data-arbitrary-prop={"data-madeup-content"}>
         <span>Complex Term</span> <strong>Content</strong>
       </DescriptionTerm>
     )
 
-    const dtElement = screen.getByTestId(dataId)
-    expect(dtElement).toHaveAttribute("data-testid", dataId)
+    const dtElement = screen.getByTestId("custom-id")
+    expect(dtElement).toHaveAttribute("data-arbitrary-prop", "data-madeup-content")
   })
 })