test(test:unit-jest): fix all failing tests for this script

We needed to align new cheerio and enzyme
APIS with tests.

Refs #7341

test/unit/bugs/3199-sanitization-escaping.jsx

@@ -16,6 +16,6 @@ describe("UI-3199: Sanitized Markdown causing code examples to be double escaped
     let el = render(<Markdown {...props}/>)
 
     expect(el.find("code").first().text()).toEqual("{\"abc\": \"def\"}\n")
-    expect(el.find("code").first().html()).toEqual("{&quot;abc&quot;: &quot;def&quot;}\n")
+    expect(el.find("code").first().html()).toEqual("{\"abc\": \"def\"}\n")
   })
 })

test/unit/components/json-schema-form.jsx

@@ -31,11 +31,11 @@ describe("<JsonSchemaForm/>", function(){
 
       let wrapper = render(<JsonSchemaForm {...props}/>)
 
-      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.get(0).name).toEqual("select")
-      expect(wrapper.find("select option").length).toEqual(3)
+      expect(wrapper.find("option").length).toEqual(3)
-      expect(wrapper.find("select option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("option").eq(0).text()).toEqual("--")
-      expect(wrapper.find("select option").eq(1).text()).toEqual("one")
+      expect(wrapper.find("option").eq(1).text()).toEqual("one")
-      expect(wrapper.find("select option").eq(2).text()).toEqual("two")
+      expect(wrapper.find("option").eq(2).text()).toEqual("two")
     })
 
     it("should render a string enum as disabled when JsonSchemaForm is disabled", function(){
@@ -55,7 +55,7 @@ describe("<JsonSchemaForm/>", function(){
 
       let wrapper = render(<JsonSchemaForm {...props}/>)
 
-      expect(wrapper.find("select").attr("disabled")).toEqual("disabled")
+      expect(wrapper.attr("disabled")).toEqual("disabled")
     })
 
 
@@ -76,7 +76,7 @@ describe("<JsonSchemaForm/>", function(){
 
       let wrapper = render(<JsonSchemaForm {...props}/>)
 
-      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.get(0).name).toEqual("select")
       expect(wrapper.find("select option").length).toEqual(2)
       expect(wrapper.find("select option").eq(0).text()).toEqual("one")
       expect(wrapper.find("select option").eq(1).text()).toEqual("two")
@@ -98,7 +98,7 @@ describe("<JsonSchemaForm/>", function(){
 
       let wrapper = render(<JsonSchemaForm {...props}/>)
 
-      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.get(0).name).toEqual("select")
       expect(wrapper.find("select option").length).toEqual(3)
       expect(wrapper.find("select option").eq(0).text()).toEqual("--")
       expect(wrapper.find("select option").eq(1).text()).toEqual("true")
@@ -122,7 +122,7 @@ describe("<JsonSchemaForm/>", function(){
 
       let wrapper = render(<JsonSchemaForm {...props}/>)
 
-      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.get(0).name).toEqual("select")
       expect(wrapper.find("select option").length).toEqual(2)
       expect(wrapper.find("select option").eq(0).text()).toEqual("--")
       expect(wrapper.find("select option").eq(1).text()).toEqual("true")
@@ -145,7 +145,7 @@ describe("<JsonSchemaForm/>", function(){
 
       let wrapper = render(<JsonSchemaForm {...props}/>)
 
-      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.get(0).name).toEqual("select")
       expect(wrapper.find("select option").length).toEqual(3)
       expect(wrapper.find("select option").eq(0).text()).toEqual("--")
       expect(wrapper.find("select option").eq(1).text()).toEqual("true")
@@ -170,7 +170,7 @@ describe("<JsonSchemaForm/>", function(){
 
       let wrapper = render(<JsonSchemaForm {...props}/>)
 
-      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.get(0).name).toEqual("select")
       expect(wrapper.find("select option").length).toEqual(1)
       expect(wrapper.find("select option").eq(0).text()).toEqual("true")
       expect(wrapper.find("select option:checked").first().text()).toEqual("true")
@@ -225,7 +225,8 @@ describe("<JsonSchemaForm/>", function(){
 
       let wrapper = render(<JsonSchemaForm {...props}/>)
 
-      expect(wrapper.find("input").length).toEqual(1)
+      expect(wrapper.length).toEqual(1)
+      expect(wrapper.get(0).name).toEqual("input")
       // expect(wrapper.find("select input").length).toEqual(1)
       // expect(wrapper.find("select option").first().text()).toEqual("true")
     })
@@ -247,7 +248,8 @@ describe("<JsonSchemaForm/>", function(){
 
       let wrapper = render(<JsonSchemaForm {...props}/>)
 
-      expect(wrapper.find("input").length).toEqual(1)
+      expect(wrapper.length).toEqual(1)
+      expect(wrapper.get(0).name).toEqual("input")
       // expect(wrapper.find("select input").length).toEqual(1)
       // expect(wrapper.find("select option").first().text()).toEqual("true")
     })

test/unit/components/markdown.jsx

@@ -9,38 +9,38 @@ describe("Markdown component", function () {
       const getConfigs = () => ({ useUnsafeMarkdown: true })
       const str = `<span class="method" style="border-width: 1px" data-attr="value">ONE</span>`
       const el = render(<Markdown source={str} getConfigs={getConfigs} />)
-      expect(el.html()).toEqual(`<div class="markdown"><p><span data-attr="value" style="border-width: 1px" class="method">ONE</span></p>\n</div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><span data-attr="value" style="border-width: 1px" class="method">ONE</span></p>\n</div>`)
     })
 
     it("strips class, style and data-* attribs from elements", function () {
       const getConfigs = () => ({ useUnsafeMarkdown: false })
       const str = `<span class="method" style="border-width: 1px" data-attr="value">ONE</span>`
       const el = render(<Markdown source={str} getConfigs={getConfigs} />)
-      expect(el.html()).toEqual(`<div class="markdown"><p><span>ONE</span></p>\n</div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><span>ONE</span></p>\n</div>`)
     })
 
     it("allows td elements with colspan attrib", function () {
       const str = `<table><tr><td>ABC</td></tr></table>`
       const el = render(<Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="markdown"><table><tbody><tr><td>ABC</td></tr></tbody></table></div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><table><tbody><tr><td>ABC</td></tr></tbody></table></div>`)
     })
 
     it("allows image elements", function () {
       const str = `![Image alt text](http://image.source "Image title")`
       const el = render(<Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="markdown"><p><img title="Image title" alt="Image alt text" src="http://image.source"></p>\n</div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><img title="Image title" alt="Image alt text" src="http://image.source"></p>\n</div>`)
     })
 
     it("allows image elements with https scheme", function () {
       const str = `![Image alt text](https://image.source "Image title")`
       const el = render(<Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="markdown"><p><img title="Image title" alt="Image alt text" src="https://image.source"></p>\n</div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><img title="Image title" alt="Image alt text" src="https://image.source"></p>\n</div>`)
     })
 
     it("allows image elements with data scheme", function () {
       const str = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==">`
       const el = render(<Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="markdown"><p>` + str + `</p>\n</div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p>` + str + `</p>\n</div>`)
     })
 
     it("allows heading elements", function () {
@@ -52,13 +52,13 @@ describe("Markdown component", function () {
 ##### h5
 ###### h6`
       const el = render(<Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="markdown"><h1>h1</h1>\n<h2>h2</h2>\n<h3>h3</h3>\n<h4>h4</h4>\n<h5>h5</h5>\n<h6>h6</h6>\n</div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><h1>h1</h1>\n<h2>h2</h2>\n<h3>h3</h3>\n<h4>h4</h4>\n<h5>h5</h5>\n<h6>h6</h6>\n</div>`)
     })
 
     it("allows links", function () {
       const str = `[Link](https://example.com/)`
       const el = render(<Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="markdown"><p><a rel="noopener noreferrer" target="_blank" href="https://example.com/">Link</a></p>\n</div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><a rel="noopener noreferrer" target="_blank" href="https://example.com/">Link</a></p>\n</div>`)
     })
   })
 
@@ -67,32 +67,32 @@ describe("Markdown component", function () {
       const getConfigs = () => ({ useUnsafeMarkdown: true })
       const str = `<span class="method" style="border-width: 1px" data-attr="value">ONE</span>`
       const el = render(<OAS3Markdown source={str} getConfigs={getConfigs} />)
-      expect(el.html()).toEqual(`<div class="renderedMarkdown"><p><span data-attr="value" style="border-width: 1px" class="method">ONE</span></p></div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p><span data-attr="value" style="border-width: 1px" class="method">ONE</span></p></div>`)
     })
 
     it("strips class, style and data-* attribs from elements", function () {
       const getConfigs = () => ({ useUnsafeMarkdown: false })
       const str = `<span class="method" style="border-width: 1px" data-attr="value">ONE</span>`
       const el = render(<OAS3Markdown source={str} getConfigs={getConfigs} />)
-      expect(el.html()).toEqual(`<div class="renderedMarkdown"><p><span>ONE</span></p></div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p><span>ONE</span></p></div>`)
     })
 
     it("allows image elements", function () {
       const str = `![Image alt text](http://image.source "Image title")`
       const el = render(<OAS3Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="renderedMarkdown"><p><img title="Image title" alt="Image alt text" src="http://image.source"></p></div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p><img title="Image title" alt="Image alt text" src="http://image.source"></p></div>`)
     })
 
     it("allows image elements with https scheme", function () {
       const str = `![Image alt text](https://image.source "Image title")`
       const el = render(<OAS3Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="renderedMarkdown"><p><img title="Image title" alt="Image alt text" src="https://image.source"></p></div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p><img title="Image title" alt="Image alt text" src="https://image.source"></p></div>`)
     })
 
     it("allows image elements with data scheme", function () {
       const str = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==">`
       const el = render(<OAS3Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="renderedMarkdown"><p>` + str + `</p></div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p>` + str + `</p></div>`)
     })
 
     it("allows heading elements", function () {
@@ -104,7 +104,7 @@ describe("Markdown component", function () {
 ##### h5
 ###### h6`
       const el = render(<OAS3Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="renderedMarkdown"><h1>h1</h1>\n<h2>h2</h2>\n<h3>h3</h3>\n<h4>h4</h4>\n<h5>h5</h5>\n<h6>h6</h6></div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><h1>h1</h1>\n<h2>h2</h2>\n<h3>h3</h3>\n<h4>h4</h4>\n<h5>h5</h5>\n<h6>h6</h6></div>`)
     })
   })
 })

test/unit/components/operation-tag.jsx

@@ -44,7 +44,7 @@ describe("<OperationTag/>", function(){
 
     const opblockTag = wrapper.find(".opblock-tag")
     expect(opblockTag.length).toEqual(1)
-    expect(opblockTag.getNode().type).toEqual("h3")
+    expect(opblockTag.getElement().type).toEqual("h3")
 
     const renderedLink = wrapper.find("Link")
     expect(renderedLink.length).toEqual(1)

test/unit/core/system/wrapComponent.jsx

@@ -31,10 +31,9 @@ describe("wrapComponents", () => {
       let Component = system.getSystem().getComponents("wow")
       const wrapper = render(<Component name="Normal" />)
 
-      const container = wrapper.children().first()
+      expect(wrapper.get(0).name).toEqual("container")
-      expect(container[0].name).toEqual("container")
 
-      const children = container.children()
+      const children = wrapper.children()
       expect(children.length).toEqual(2)
       expect(children.eq(0).text()).toEqual("Normal component")
       expect(children.eq(1).text()).toEqual("Wrapped component")
@@ -76,10 +75,9 @@ describe("wrapComponents", () => {
       let Component = system.getSystem().getComponents("wow")
       const wrapper = render(<Component name="Normal" />)
 
-      const container = wrapper.children().first()
+      expect(wrapper.get(0).name).toEqual("container")
-      expect(container[0].name).toEqual("container")
 
-      const children = container.children()
+      const children = wrapper.children()
       expect(children.length).toEqual(2)
       expect(children.eq(0).text()).toEqual("Normal component")
       expect(children.eq(1).text()).toEqual("Wrapped component")
@@ -128,10 +126,9 @@ describe("wrapComponents", () => {
     let Component = mySystem.getSystem().getComponents("wow")
     const wrapper = render(<Component name="Normal" />)
 
-    const container = wrapper.children().first()
+    expect(wrapper.get(0).name).toEqual("container")
-    expect(container[0].name).toEqual("container")
 
-    const children = container.children()
+    const children = wrapper.children()
     expect(children.length).toEqual(2)
     expect(children.eq(0).text()).toEqual("Original component")
     expect(children.eq(1).text()).toEqual("WOW much data")
@@ -182,10 +179,9 @@ describe("wrapComponents", () => {
     let Component = mySystem.getSystem().getComponents("wow")
     const wrapper = render(<Component name="Normal" />)
 
-    const container = wrapper.children().first()
+    expect(wrapper.get(0).name).toEqual("container")
-    expect(container[0].name).toEqual("container")
 
-    const children = container.children()
+    const children = wrapper.children()
     expect(children.length).toEqual(2)
     expect(children.eq(0).text()).toEqual("Original component")
     expect(children.eq(1).text()).toEqual("WOW much data")
@@ -241,10 +237,9 @@ describe("wrapComponents", () => {
     let Component = mySystem.getSystem().getComponents("wow")
     const wrapper = render(<Component name="Normal" />)
 
-    const container2 = wrapper.children().first()
+    expect(wrapper.get(0).name).toEqual("container2")
-    expect(container2[0].name).toEqual("container2")
 
-    const children2 = container2.children()
+    const children2 = wrapper.children()
     expect(children2.length).toEqual(2)
     expect(children2[0].name).toEqual("div")
     expect(children2.eq(0).text()).toEqual("Injected before")
@@ -302,10 +297,9 @@ describe("wrapComponents", () => {
     let Component = secondSystem.getSystem().getComponents("wow")
     const wrapper = render(<Component name="Normal" />)
 
-    const container = wrapper.children().first()
+    expect(wrapper.get(0).name).toEqual("container")
-    expect(container[0].name).toEqual("container")
 
-    const children = container.children()
+    const children = wrapper.children()
     expect(children.length).toEqual(2)
     expect(children.eq(0).text()).toEqual("Original component")
     expect(children.eq(1).text()).toEqual("WOW much data")

test/unit/setup.js

@@ -1,8 +1,10 @@
-import win from "../../src/core/window"
-// import { configure } from "enzyme" // enzyme@3
-// import Adapter from "enzyme-adapter-react-15" // enzyme@3
 import { JSDOM } from "jsdom"
+import Enzyme from "enzyme"
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 
+import win from "../../src/core/window"
+
+Enzyme.configure({ adapter: new Adapter() })
 
 function copyProps(src, target) {
   const props = Object.getOwnPropertyNames(src)

test/unit/xss/anchor-target-rel/link.jsx

@@ -17,11 +17,10 @@ describe("<Link/> Anchor Target Safety", function () {
       href: "http://google.com/"
     }
     let wrapper = render(<Link {...props} />)
-    const anchor = wrapper.find("a")
 
-    expect(anchor.attr("href")).toEqual("http://google.com/")
+    expect(wrapper.attr("href")).toEqual("http://google.com/")
-    expect(anchor.attr("rel") || "").toMatch("noopener")
+    expect(wrapper.attr("rel") || "").toMatch("noopener")
-    expect(anchor.attr("rel") || "").toMatch("noreferrer")
+    expect(wrapper.attr("rel") || "").toMatch("noreferrer")
   })
 
   it("enforces `noreferrer` and `noopener` on target=_blank links", function () {
@@ -31,11 +30,10 @@ describe("<Link/> Anchor Target Safety", function () {
       target: "_blank"
     }
     let wrapper = render(<Link {...props} />)
-    const anchor = wrapper.find("a")
 
-    expect(anchor.attr("href")).toEqual("http://google.com/")
+    expect(wrapper.attr("href")).toEqual("http://google.com/")
-    expect(anchor.attr("target")).toEqual("_blank")
+    expect(wrapper.attr("target")).toEqual("_blank")
-    expect(anchor.attr("rel") || "").toMatch("noopener")
+    expect(wrapper.attr("rel") || "").toMatch("noopener")
-    expect(anchor.attr("rel") || "").toMatch("noreferrer")
+    expect(wrapper.attr("rel") || "").toMatch("noreferrer")
   })
 })

test/unit/xss/markdown-script-sanitization.jsx

@@ -8,19 +8,19 @@ describe("Markdown Script Sanitization", function() {
     it("sanitizes <script> elements", function() {
       const str = `script <script>alert(1)</script>`
       const el = render(<Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="markdown"><p>script </p>\n</div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p>script </p>\n</div>`)
     })
 
     it("sanitizes <img> elements", function() {
       const str = `<img src=x onerror="alert('img-in-description')">`
       const el = render(<Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="markdown"><p><img src="x"></p>\n</div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><img src="x"></p>\n</div>`)
     })
 
     it("sanitizes <form> elements", function() {
       const str = `"<form action='https://do.not.use.url/fake' method='post' action='java'><input type='email' id='email' placeholder='Email-address' name='email' value=''><button type='submit'>Login</button>"`
       const el = render(<Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="markdown"><p>&quot;</p><input value name="email" placeholder="Email-address" id="email" type="email"><button type="submit">Login</button>&quot;<p></p>\n</div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p>"</p><input value="" name="email" placeholder="Email-address" id="email" type="email"><button type="submit">Login</button>"<p></p>\n</div>`)
     })
   })
 
@@ -28,19 +28,19 @@ describe("Markdown Script Sanitization", function() {
     it("sanitizes <script> elements", function() {
       const str = `script <script>alert(1)</script>`
       const el = render(<OAS3Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="renderedMarkdown"><p>script </p></div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p>script </p></div>`)
     })
 
     it("sanitizes <img> elements", function() {
       const str = `<img src=x onerror="alert('img-in-description')">`
       const el = render(<OAS3Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="renderedMarkdown"><p><img src="x"></p></div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p><img src="x"></p></div>`)
     })
 
     it("sanitizes <form> elements", function () {
       const str = `"<form action='https://do.not.use.url/fake' method='post' action='java'><input type='email' id='email' placeholder='Email-address' name='email' value=''><button type='submit'>Login</button>"`
       const el = render(<OAS3Markdown source={str} />)
-      expect(el.html()).toEqual(`<div class="renderedMarkdown"><p>&quot;</p><input value name="email" placeholder="Email-address" id="email" type="email"><button type="submit">Login</button>&quot;<p></p></div>`)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p>"</p><input value="" name="email" placeholder="Email-address" id="email" type="email"><button type="submit">Login</button>"<p></p></div>`)
     })
   })
 })