test: consolidate unit tests (#9588)

All mocha tests have been migrated to Jest tests.

Closes #9564

.eslintignore

@@ -1,2 +1,3 @@
 dist/
 node_modules/
+test/e2e-selenium/

.eslintrc

@@ -13,7 +13,6 @@ extends:
   - plugin:react/recommended
 plugins:
   - react
-  - mocha
   - import
   - jest
 settings:
@@ -35,6 +34,5 @@ rules:
   react/jsx-no-bind: 1
   react/jsx-no-target-blank: 2
   react/display-name: 0
-  mocha/no-exclusive-tests: 2
   import/no-extraneous-dependencies: 2
   react/jsx-filename-extension: 2

.github/workflows/nodejs.yml

@@ -44,7 +44,7 @@ jobs:
         run: npm run lint-errors
 
       - name: Run all tests
-        run: npm run just-test-in-node && npm run test:unit-jest
+        run: npm run test:unit
         env:
           CI: true
 

.mocharc.yaml

@@ -1,2 +0,0 @@
-recursive: true
-require: ['esm','@babel/register','source-map-support', 'test/mocha/setup.js']

config/jest/jest.unit.config.js

@@ -12,16 +12,12 @@ module.exports = {
   testPathIgnorePatterns: [
     '<rootDir>/node_modules/',
     '<rootDir>/test/build-artifacts/',
-    '<rootDir>/test/mocha',
     '<rootDir>/test/unit/jest-shim.js',
     '<rootDir>/test/unit/setup.js',
-    '<rootDir>/test/unit/xss/anchor-target-rel/online-validator-badge.jsx',
-    '<rootDir>/test/unit/components/online-validator-badge.jsx',
-    '<rootDir>/test/unit/components/live-response.jsx',
   ],
   moduleNameMapper: {
     '^.+\\.svg$': 'jest-transform-stub'
   },
-  transformIgnorePatterns: ['/node_modules/(?!(sinon)/)'],
+  transformIgnorePatterns: ['/node_modules/(?!(sinon|react-syntax-highlighter)/)'],
   silent: true, // set to `false` to allow console.* calls to be printed
 };

docs/development/scripts.md

@@ -27,8 +27,7 @@ Script name | Description
 Script name | Description
 --- | ---
 `test` | Run unit tests in Node, run Cypress end-to-end tests, and run ESLint in errors-only mode.
-`just-test-in-node` | Run Mocha unit tests in Node.
+`test:unit` | Run Jest unit tests in Node.
-`test:unit-jest` | Run Jest unit tests in Node.
 `e2e` | Run end-to-end tests (requires JDK and Selenium).
 `e2e-cypress` | Run end-to-end browser tests with Cypress.
 `dev-e2e-cypress` | Dev mode, open Cypress runner and manually select tests to run.

package.json

@@ -54,11 +54,9 @@
     "lint": "eslint --ext \".js,.jsx\" src test dev-helpers flavors",
     "lint-errors": "eslint --quiet --ext \".js,.jsx\" src test dev-helpers flavors",
     "lint-fix": "eslint --ext \".js,.jsx\" src test dev-helpers flavors --fix",
-    "test": "run-s lint-errors just-test-in-node test:unit-jest cy:ci",
+    "test": "run-s lint-errors test:unit cy:ci",
-    "test-in-node": "run-s lint-errors just-test-in-node",
-    "just-test-in-node": "cross-env NODE_ENV=test BABEL_ENV=commonjs BROWSERSLIST_ENV=node-development mocha \"test/mocha/**/*.{js,jsx}\"",
     "test:artifact": "cross-env NODE_ENV=production BABEL_ENV=commonjs BROWSERSLIST_ENV=node-development jest --config ./config/jest/jest.artifact.config.js",
-    "test:unit-jest": "cross-env NODE_ENV=test BABEL_ENV=commonjs BROWSERSLIST_ENV=node-development jest --config ./config/jest/jest.unit.config.js",
+    "test:unit": "cross-env NODE_ENV=test BABEL_ENV=commonjs BROWSERSLIST_ENV=node-development jest --config ./config/jest/jest.unit.config.js",
     "cy:mock-api": "json-server --watch test/e2e-selenium/db.json --port 3204",
     "cy:server": "cross-env NODE_ENV=production BABEL_ENV=production BROWSERSLIST_ENV=browser-production webpack serve --config webpack/dev-e2e.js",
     "cy:start": "run-p -r cy:server cy:mock-api",
@@ -144,7 +142,6 @@
     "eslint": "^8.55.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jest": "^27.6.3",
-    "eslint-plugin-mocha": "^10.2.0",
     "eslint-plugin-react": "^7.33.2",
     "esm": "=3.2.25",
     "expect": "=29.7.0",
@@ -166,7 +163,6 @@
     "lint-staged": "^15.2.2",
     "local-web-server": "^5.3.1",
     "mini-css-extract-plugin": "^2.8.0",
-    "mocha": "=8.4.0",
     "npm-audit-ci-wrapper": "^3.0.2",
     "npm-run-all": "^4.1.5",
     "oauth2-server": "^2.4.1",

test/.eslintrc

@@ -1,7 +1,7 @@
 env:
-  mocha: true
+  "jest/globals": true
 rules:
   "react/prop-types": 1 # bah humbug
   "react/require-render-return": 1
   "no-unused-vars": 1 # unused vars in tests can be useful for indicating a full signature
-  "no-global-assign": 1
+  "no-global-assign": 1

test/components/response-body.jsx

@@ -1,41 +0,0 @@
-import React from "react"
-import expect from "expect"
-import { shallow } from "enzyme"
-import ResponseBody from "core/components/response-body"
-
-describe("<ResponseBody />", function() {
-  const highlightCodeComponent = () => null
-  const components = {
-    highlightCode: highlightCodeComponent
-  }
-  const props = {
-    getComponent: c => components[c],
-  }
-
-  it("renders ResponseBody as 'application/json'", function() {
-    props.contentType = "application/json"
-    props.content = "{\"key\": \"a test value\"}"
-    const wrapper = shallow(<ResponseBody {...props}/>)
-    expect(wrapper.find("highlightCodeComponent").length).toEqual(1)
-  })
-
-  it("renders ResponseBody as 'text/html'", function() {
-    props.contentType = "application/json"
-    props.content = "<b>Result</b>"
-    const wrapper = shallow(<ResponseBody {...props}/>)
-    expect(wrapper.find("highlightCodeComponent").length).toEqual(1)
-  })
-
-  it("renders ResponseBody as 'image/svg'", function() {
-    props.contentType = "image/svg"
-    const wrapper = shallow(<ResponseBody {...props}/>)
-    expect(wrapper.find("highlightCodeComponent").length).toEqual(0)
-  })
-
-  it("should render a copyable highlightCodeComponent for text types", function() {
-    props.contentType = "text/plain"
-    props.content = "test text"
-    const wrapper = shallow(<ResponseBody {...props}/>)
-    expect(wrapper.find("highlightCodeComponent[canCopy]").length).toEqual(1)
-  })
-})

test/mocha/.eslinrc

@@ -1,7 +0,0 @@
-env:
-  mocha: true
-rules:
-  "react/prop-types": 1 # bah humbug
-  "react/require-render-return": 1
-  "no-unused-vars": 1 # unused vars in tests can be useful for indicating a full signature
-  "no-global-assign": 1

test/mocha/components/live-response.jsx

@@ -1,104 +0,0 @@
-/* eslint-env mocha */
-import React from "react"
-import { fromJSOrdered } from "core/utils"
-import sinon from "sinon"
-import expect from "expect"
-import { shallow } from "enzyme"
-import LiveResponse from "core/components/live-response"
-import ResponseBody from "core/components/response-body"
-import RequestSnippets from "core/plugins/request-snippets/request-snippets"
-
-describe("<LiveResponse/>", function () {
-  let request = fromJSOrdered({
-    credentials: "same-origin",
-    headers: {
-      accept: "application/xml"
-    },
-    url: "http://petstore.swagger.io/v2/pet/1"
-  })
-
-  let mutatedRequest = fromJSOrdered({
-    credentials: "same-origin",
-    headers: {
-      accept: "application/xml",
-      mutated: "header"
-    },
-    url: "http://mutated.petstore.swagger.io/v2/pet/1"
-  })
-
-  let requests = {
-    request: request,
-    mutatedRequest: mutatedRequest
-  }
-
-  const tests = [
-    { showMutatedRequest: true, expected: { request: "mutatedRequest", requestForCalls: 0, mutatedRequestForCalls: 1 } },
-    { showMutatedRequest: false, expected: { request: "request", requestForCalls: 1, mutatedRequestForCalls: 0 } }
-  ]
-
-  tests.forEach(function (test) {
-    it("passes " + test.expected.request + " to RequestSnippets when showMutatedRequest = " + test.showMutatedRequest, function () {
-
-      // Given
-
-      let response = fromJSOrdered({
-        status: 200,
-        url: "http://petstore.swagger.io/v2/pet/1",
-        headers: {
-          "content-type": "application/xml"
-        },
-        text: "<response/>",
-        duration: 50
-      })
-
-      let mutatedRequestForSpy = sinon.stub().returns(mutatedRequest)
-      let requestForSpy = sinon.stub().returns(request)
-
-      let components = {
-        RequestSnippets: RequestSnippets,
-        responseBody: ResponseBody
-      }
-
-      let props = {
-        response: response,
-        specSelectors: {
-          mutatedRequestFor: mutatedRequestForSpy,
-          requestFor: requestForSpy,
-        },
-        pathMethod: ["/one", "get"],
-        getComponent: (c) => {
-          return components[c]
-        },
-        displayRequestDuration: true,
-        getConfigs: () => ({ showMutatedRequest: test.showMutatedRequest, requestSnippetsEnabled: true })
-      }
-
-      // When
-      let wrapper = shallow(<LiveResponse {...props} />)
-
-      // Then
-      expect(mutatedRequestForSpy.callCount).toEqual(test.expected.mutatedRequestForCalls)
-      expect(requestForSpy.callCount).toEqual(test.expected.requestForCalls)
-
-      const snippets = wrapper.find("RequestSnippets")
-      expect(snippets.length).toEqual(1)
-      expect(snippets.props().request).toBe(requests[test.expected.request])
-
-      const expectedUrl = requests[test.expected.request].get("url")
-      expect(wrapper.find("div.request-url pre.microlight").text()).toEqual(expectedUrl)
-
-      let duration = wrapper.find("Duration")
-      expect(duration.length).toEqual(1)
-      expect(duration.props().duration).toEqual(50)
-      expect(duration.html())
-        .toEqual("<div><h5>Request duration</h5><pre class=\"microlight\">50 ms</pre></div>")
-
-      let responseHeaders = wrapper.find("Headers")
-      expect(duration.length).toEqual(1)
-      expect(responseHeaders.props().headers.length).toEqual(1)
-      expect(responseHeaders.props().headers[0].key).toEqual("content-type")
-      expect(responseHeaders.html())
-        .toEqual("<div><h5>Response headers</h5><pre class=\"microlight\"><span class=\"headerline\"> content-type: application/xml </span></pre></div>")
-    })
-  })
-})

test/mocha/components/online-validator-badge.jsx

@@ -1,79 +0,0 @@
-/* eslint-env mocha */
-import React from "react"
-import expect from "expect"
-import { mount } from "enzyme"
-import { fromJS, Map } from "immutable"
-import OnlineValidatorBadge from "core/components/online-validator-badge"
-
-describe("<OnlineValidatorBadge/>", function () {
-  it("should render a validator link and image correctly for the default validator", function () {
-    // When
-    const props = {
-      getConfigs: () => ({}),
-      getComponent: () => null,
-      specSelectors: {
-        url: () => "swagger.json"
-      }
-    }
-    const wrapper = mount(
-      <OnlineValidatorBadge {...props} />
-    )
-
-    // Then
-    expect(wrapper.find("a").props().href).toEqual(
-      "https://validator.swagger.io/validator/debug?url=swagger.json"
-    )
-    expect(wrapper.find("ValidatorImage").length).toEqual(1)
-    expect(wrapper.find("ValidatorImage").props().src).toEqual(
-      "https://validator.swagger.io/validator?url=swagger.json"
-    )
-  })
-  it("should encode a definition URL correctly", function () {
-    // When
-    const props = {
-      getConfigs: () => ({}),
-      getComponent: () => null,
-      specSelectors: {
-        url: () => "http://google.com/swagger.json"
-      }
-    }
-    const wrapper = mount(
-      <OnlineValidatorBadge {...props} />
-    )
-
-    // Then
-    expect(wrapper.find("a").props().href).toEqual(
-      "https://validator.swagger.io/validator/debug?url=http%3A%2F%2Fgoogle.com%2Fswagger.json"
-    )
-    expect(wrapper.find("ValidatorImage").length).toEqual(1)
-    expect(wrapper.find("ValidatorImage").props().src).toEqual(
-      "https://validator.swagger.io/validator?url=http%3A%2F%2Fgoogle.com%2Fswagger.json"
-    )
-  })
-  it.skip("should resolve a definition URL against the browser's location", function () {
-    // TODO: mock `window`
-    // When
-
-    const props = {
-      getConfigs: () => ({}),
-      getComponent: () => null,
-      specSelectors: {
-        url: () => "http://google.com/swagger.json"
-      }
-    }
-    const wrapper = mount(
-      <OnlineValidatorBadge {...props} />
-    )
-
-    // Then
-    expect(wrapper.find("a").props().href).toEqual(
-      "https://validator.swagger.io/validator/debug?url=http%3A%2F%2Fgoogle.com%2Fswagger.json"
-    )
-    expect(wrapper.find("ValidatorImage").length).toEqual(1)
-    expect(wrapper.find("ValidatorImage").props().src).toEqual(
-      "https://validator.swagger.io/validator?url=http%3A%2F%2Fgoogle.com%2Fswagger.json"
-    )
-  })
-  // should resolve a definition URL against the browser's location
-
-})

test/mocha/setup.js

@@ -1,28 +0,0 @@
-const { JSDOM } = require("jsdom")
-const Enzyme = require("enzyme")
-const { default: Adapter } = require("@cfaester/enzyme-adapter-react-18")
-
-const win = require("../../src/core/window")
-
-Enzyme.configure({ adapter: new Adapter() })
-
-const jsdom = new JSDOM("<!doctype html><html><body></body></html>")
-const { window } = jsdom
-
-function copyProps(src, target) {
-  const props = Object.getOwnPropertyNames(src)
-    .filter(prop => typeof target[prop] === "undefined")
-    .reduce((result, prop) => ({
-      ...result,
-      [prop]: Object.getOwnPropertyDescriptor(src, prop),
-    }), {})
-  Object.defineProperties(target, props)
-}
-
-global.window = window
-global.document = window.document
-global.navigator = {
-  userAgent: "node.js",
-}
-copyProps(win, window) // use UI's built-in window wrapper
-copyProps(window, global)

test/mocha/xss/anchor-target-rel/online-validator-badge.jsx

@@ -1,32 +0,0 @@
-/* eslint-env mocha */
-import React from "react"
-import expect from "expect"
-import { mount } from "enzyme"
-import { fromJS, Map } from "immutable"
-import OnlineValidatorBadge from "core/components/online-validator-badge"
-
-describe("<OnlineValidatorBadge/> Anchor Target Safety", function () {
-  it("should render a validator link with safe `rel` attributes", function () {
-    // When
-    const props = {
-      getConfigs: () => ({}),
-      getComponent: () => null,
-      specSelectors: {
-        url: () => "swagger.json"
-      }
-    }
-    const wrapper = mount(
-      <OnlineValidatorBadge {...props} />
-    )
-
-    const anchor = wrapper.find("a")
-
-    // Then
-    expect(anchor.props().href).toEqual(
-      "https://validator.swagger.io/validator/debug?url=swagger.json"
-    )
-    expect(anchor.props().target).toEqual("_blank")
-    expect(anchor.props().rel || "").toContain("noopener")
-    expect(anchor.props().rel || "").toContain("noreferrer")
-  })
-})

test/unit/components/highlight-code.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import expect from "expect"
-import { shallow } from "enzyme"
+import { shallow, mount } from "enzyme"
 import HighlightCode from "core/components/highlight-code"
 
 const fakeGetConfigs = () => ({syntaxHighlight: {activated: true, theme: "agate"}})
@@ -21,10 +21,10 @@ describe("<HighlightCode />", () => {
   it("should render values in a preformatted element", () => {
     const value = "test text"
     const props = {value: value, getConfigs: fakeGetConfigs}
-    const wrapper = shallow(<HighlightCode {...props} />)
+    const wrapper = mount(<HighlightCode {...props} />)
     const preTag = wrapper.find("pre")
 
     expect(preTag.length).toEqual(1)
-    expect(preTag.contains(value)).toEqual(true)
+    expect(preTag.text()).toEqual(value)
   })
 })

test/unit/components/live-response.jsx

@@ -48,8 +48,8 @@ describe("<LiveResponse/>", function(){
         duration: 50
       })
 
-      let mutatedRequestForSpy = jest.fn().mockImplementation(function(mutatedRequest) { return mutatedRequest })
+      let mutatedRequestForSpy = jest.fn().mockImplementation(function() { return mutatedRequest })
-      let requestForSpy = jest.fn().mockImplementation(function(request) { return request })
+      let requestForSpy = jest.fn().mockImplementation(function() { return request })
 
       let components = {
         curl: Curl,
@@ -74,8 +74,8 @@ describe("<LiveResponse/>", function(){
       let wrapper = shallow(<LiveResponse {...props}/>)
 
       // Then
-      expect(mutatedRequestForSpy.calls.length).toEqual(test.expected.mutatedRequestForCalls)
+      expect(mutatedRequestForSpy.mock.calls.length).toEqual(test.expected.mutatedRequestForCalls)
-      expect(requestForSpy.calls.length).toEqual(test.expected.requestForCalls)
+      expect(requestForSpy.mock.calls.length).toEqual(test.expected.requestForCalls)
 
       const curl = wrapper.find(Curl)
       expect(curl.length).toEqual(1)
@@ -84,13 +84,13 @@ describe("<LiveResponse/>", function(){
       const expectedUrl = requests[test.expected.request].get("url")
       expect(wrapper.find("div.request-url pre.microlight").text()).toEqual(expectedUrl)
 
-      let duration = wrapper.find("Duration")
+      const duration = wrapper.find("Duration")
       expect(duration.length).toEqual(1)
       expect(duration.props().duration).toEqual(50)
       expect(duration.html())
         .toEqual("<div><h5>Request duration</h5><pre class=\"microlight\">50 ms</pre></div>")
 
-      let responseHeaders = wrapper.find("Headers")
+      const responseHeaders = wrapper.find("Headers")
       expect(duration.length).toEqual(1)
       expect(responseHeaders.props().headers.length).toEqual(1)
       expect(responseHeaders.props().headers[0].key).toEqual("content-type")

test/unit/components/online-validator-badge.jsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { mount } from "enzyme"
 import OnlineValidatorBadge from "core/components/online-validator-badge"
+import expect from "expect"
 
 describe("<OnlineValidatorBadge/>", function () {
   it("should render a validator link and image correctly for the default validator", function () {
@@ -9,7 +10,7 @@ describe("<OnlineValidatorBadge/>", function () {
       getConfigs: () => ({}),
       getComponent: () => null,
       specSelectors: {
-        url: () => "swagger.json"
+        url: () => "https://smartbear.com/swagger.json"
       }
     }
     const wrapper = mount(
@@ -18,13 +19,11 @@ describe("<OnlineValidatorBadge/>", function () {
 
     // Then
     expect(wrapper.find("a").props().href).toEqual(
-      "https://validator.swagger.io/validator/debug?url=swagger.json"
+      "https://validator.swagger.io/validator/debug?url=https%3A%2F%2Fsmartbear.com%2Fswagger.json"
     )
     expect(wrapper.find("ValidatorImage").length).toEqual(1)
-    expect(wrapper.find("ValidatorImage").props().src).toEqual(
-      "https://validator.swagger.io/validator?url=swagger.json"
-    )
   })
+
   it("should encode a definition URL correctly", function () {
     // When
     const props = {
@@ -47,7 +46,8 @@ describe("<OnlineValidatorBadge/>", function () {
       "https://validator.swagger.io/validator?url=http%3A%2F%2Fgoogle.com%2Fswagger.json"
     )
   })
-  it.skip("should resolve a definition URL against the browser's location", function () {
+
+  it("should resolve a definition URL against the browser's location", function () {
     // TODO: mock `window`
     // When
 
@@ -72,5 +72,4 @@ describe("<OnlineValidatorBadge/>", function () {
     )
   })
   // should resolve a definition URL against the browser's location
-
 })

test/unit/xss/anchor-target-rel/online-validator-badge.jsx

@@ -9,7 +9,7 @@ describe("<OnlineValidatorBadge/> Anchor Target Safety", function () {
       getConfigs: () => ({}),
       getComponent: () => null,
       specSelectors: {
-        url: () => "swagger.json"
+        url: () => "https://smartbear.com/swagger.json"
       }
     }
     const wrapper = mount(
@@ -20,10 +20,10 @@ describe("<OnlineValidatorBadge/> Anchor Target Safety", function () {
 
     // Then
     expect(anchor.props().href).toEqual(
-      "https://validator.swagger.io/validator/debug?url=swagger.json"
+      "https://validator.swagger.io/validator/debug?url=https%3A%2F%2Fsmartbear.com%2Fswagger.json"
     )
     expect(anchor.props().target).toEqual("_blank")
-    expect(anchor.props().rel || "").toInclude("noopener")
+    expect(anchor.props().rel || "").toContain("noopener")
-    expect(anchor.props().rel || "").toInclude("noreferrer")
+    expect(anchor.props().rel || "").toContain("noreferrer")
   })
 })