npm - brut-js - Versions diffs - 0.0.2 → 0.0.5 - Mend

brut-js 0.0.2 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/package.json +5 -2
package/specs/AjaxSubmit.spec.js +8 -5
package/specs/Autosubmit.spec.js +1 -1
package/specs/ConfirmSubmit.spec.js +1 -1
package/specs/ConstraintViolationMessage.spec.js +1 -1
package/specs/ConstraintViolationMessages.spec.js +1 -1
package/specs/Form.spec.js +45 -1
package/specs/I18nTranslation.spec.js +1 -1
package/specs/LocaleDetection.spec.js +2 -2
package/specs/Message.spec.js +1 -1
package/specs/SpecHelper.js +23 -0
package/specs/Tabs.spec.js +1 -1
package/specs/public/js/bundle.js +17 -2
package/specs/public/js/bundle.js.map +2 -2
package/src/AjaxSubmit.js +2 -2
package/src/CopyToClipboard.js +92 -0
package/src/Form.js +16 -2
package/src/testing/AssetMetadata.js +35 -0
package/src/testing/AssetMetadataLoader.js +25 -0
package/src/testing/CustomElementTest.js +235 -0
package/src/testing/DOMCreator.js +45 -0
package/src/testing/index.js +13 -313

package/src/testing/index.js CHANGED Viewed

@@ -21,328 +21,28 @@
  *
  * @module testing
  */
-import { JSDOM, ResourceLoader, VirtualConsole } from "jsdom"
-import fs from "node:fs"
-import path from "node:path"
-import assert from "assert"
-const __dirname = import.meta.dirname
-const appRoot = path.resolve(__dirname,"..","..","specs")
-const publicRoot = path.resolve(appRoot,"public")
-class AssetMetadata {
-  constructor(parsedJSON, publicRoot) {
-    this.assetMetadata = parsedJSON.asset_metadata
-    this.publicRoot    = publicRoot
-  }
-  scriptURLs() {
-    return Object.entries(this.assetMetadata[".js"]).map( (entry) => {
-      return entry[0]
-    })
-  }
-  fileContainingScriptURL(scriptURL) {
-    const file = Object.entries(this.assetMetadata[".js"]).find( (entry) => {
-      return entry[0] == scriptURL
-    })
-    if (!file || !file[1]) {
-      return null
-    }
-    let relativePath = file[1]
-    if (relativePath[0] == "/") {
-      relativePath = relativePath.slice(1)
-    }
-    return fs.readFileSync(path.resolve(this.publicRoot,relativePath))
-  }
-}
-const assetMetadata = new AssetMetadata(
-  JSON.parse(fs.readFileSync(path.resolve(appRoot,"config","asset_metadata.json"))),
-  publicRoot,
-)
-class AssetMetadataLoader extends ResourceLoader {
-  constructor(assetMetadata) {
-    super()
-    this.assetMetadata = assetMetadata
-  }
-  fetch(url,options) {
-    const parsedURL = new URL(url)
-    const jsContents = this.assetMetadata.fileContainingScriptURL(parsedURL.pathname)
-    if (jsContents) {
-      return Promise.resolve(jsContents)
-    }
-    else {
-      return super.fetch(url,options)
-    }
-  }
-}
-const resourceLoader = new AssetMetadataLoader(assetMetadata)
-const createDOM = (html, queryString) => {
-  const url = "http://example.com" + ( queryString ? `?${queryString}` : "" )
-  const scripts = assetMetadata.scriptURLs().map( (url) => `<script src="${url}"></script>` )
-  const virtualConsole = new VirtualConsole()
-  virtualConsole.sendTo(console);
-  return new JSDOM(
-    `<!DOCTYPE html>
-        <html>
-        <head>
-        ${scripts}
-        </head>
-        <body>
-        ${html}
-        </body>
-        </html>
-        `,{
-          resources: "usable",
-          runScripts: "dangerously",
-          includeNodeLocations: true,
-          resources: resourceLoader,
-          url: url
-        }
-  )
-}
-/**
- * Returned by {@link withHTML} as the basis for writing tests for custom elements. You won't create
- * instances of this class. Rather, you'll be given an instance from `withHTML` and likely call
- * `test` on it.
- *
- * @see withHTML
- */
-class CustomElementTest {
-  constructor(html, queryString) {
-    this.html          = html
-    this.queryString   = queryString
-    this.fetchBehavior = {}
-  }
-  /**
-   * Configure a query string to be present when the custom elements are defined and connected.
-   */
-  andQueryString(queryString) {
-    this.queryString = queryString
-    return this
-  }
-  /**
-   * Configure behavior when #{link external:fetch} is called, since it's not implemented by JSDom or NodeJS.
-   *
-   * @param {String} url - the URL that is expected. This should be a relative URL, as that is all that is currently supported. This
-   * URL must match exactly to a `fetch` call.
-   * @param {Object} behavior - an object describing what you want to happen when `url` is fetched.  This currently supports only a
-   * few rudimentary behaviors:
-   * * `{then: { ok: { text: "some text" } } }` - This will return an "ok" response whose body is the given text, available only as
-   * text.
-   * * `{then: { status: XXX, text: "some text" }}` - This will return the given http status, with `ok` as true if it's 2xx or 3xx. If `text` is given, that will be available as text only.
-   */
-  onFetch(url,behavior) {
-    if (!this.fetchBehavior[url]) {
-      this.fetchBehavior[url] = {
-        numCalls: 0,
-        responses: [],
-      }
-    }
-    if (behavior instanceof Array) {
-      behavior.forEach( (b) =>  {
-        this.fetchBehavior[url].responses.push(b)
-      })
-    }
-    else {
-      this.fetchBehavior[url].responses.push(behavior)
-    }
-    return this
-  }
-  /** Comment out a test without using code comments */
-  xtest() {
-    return this
-  }
-  /** Declare a test to run with the previously-defined HTML, query string, and fetch behavior.
-   *
-   * @param {String} description - a description of the test.
-   * @param {testCodeCallback} testCode - a function containing the code for your test.
-   */
-  test(description,testCode) {
-    it(description, () => {
-      const dom = createDOM(this.html,this.queryString)
-      const fetchRequests = []
-      dom.window.Request = Request
-      dom.window.fetch = (request) => {
-        const url = new URL(request.url)
-        const path = url.pathname + url.search
-        const behaviors = this.fetchBehavior[path]
-        if (!behaviors) {
-          throw `fetch() called with ${path}, which was not configured`
-        }
-        if (behaviors.numCalls > behaviors.responses.length) {
-          throw `fetch() called ${behaviors.numCalls} times, but we only have ${behaviors.response.length} responses configured`
-        }
-        const behavior = behaviors.responses[behaviors.numCalls]
-        behaviors.numCalls++
-        let promise = null
-        if (behavior.then) {
-          if (behavior.then.ok) {
-            if (behavior.then.ok.text) {
-              const response = {
-                ok: true,
-                text: () => {
-                  return Promise.resolve(behavior.then.ok.text)
-                }
-              }
-              promise = Promise.resolve(response)
-            }
-            else {
-              throw `unknown fetch behavior: expected then.ok.text: ${JSON.stringify(behavior)}`
-            }
-          }
-          else if (behavior.then.status) {
-            let ok = false
-            if ((behavior.then.status >= 200) && (behavior.then.status < 400) ){
-              ok = true
-            }
-            const response = {
-              ok: ok,
-              status: behavior.then.status,
-                text: () => {
-                  return Promise.resolve(behavior.then.text)
-                }
-            }
-            promise = Promise.resolve(response)
-          }
-          else {
-            throw `unknown fetch behavior: expected then.ok or then.status: ${JSON.stringify(behavior)}`
-          }
-        }
-        else {
-          throw `unknown fetch behavior: expected then: ${JSON.stringify(behavior)}`
-        }
-        request.promiseReturned = promise
-        fetchRequests.push(request)
-        return promise
-      }
-      const window = dom.window
-      const document = window.document
-      let returnValue = null
-      return new Promise( (resolve, reject) => {
-        dom.window.addEventListener("load", () => {
-          try {
-            returnValue = testCode({window,document,assert,fetchRequests})
-            if (returnValue) {
-              resolve(returnValue)
-            }
-            else {
-              resolve()
-            }
-          } catch (e) {
-            reject(e)
-          }
-        })
-      })
-    })
-    return this
-  }
-}
+import AssetMetadata from "./AssetMetadata.js"
+import CustomElementTest from "./CustomElementTest.js"
 /**
- * Sets up the HTML in which a test will be run.  This allows you to configure what HTML will be "served"
- * by JSDOM before any custom elements are defined or connected.
+ * Bootstraps a test based on some HTML and configuration about where the bundled custom elements are. It's recommended that you
+ * create the method `withHTML` in your `SpecHelper.js` file to set up the asset metadata stuff.
  *
  * This returns a {@link module:testing~CustomElementTest}, on which you can call additional setup methods, or start defining tests with the
  * {@link module:testing~CustomElementTest#test} method.
  *
- * @see module:testing~CustomElementTest
- */
-const withHTML = (html) => new CustomElementTest(html)
-/**
- * Given a fetch request (available via `fetchRequests` passed to your test), turn the body into JSON
- * and return a promise with the JSON.  To use this in a test, you must include your assertions inside
- * the `then` of the returned promise and you *must* return that from your test.
- *
- * @example
- * withHTML(
- *   "<div-makes-a-fetch>"
- * ).onFetch("/foo", { then: { status: 200 }}
- * ).test("a test",({assert,fetchRequests}) => {
- *   assert.equal(fetchRequests.length,1)
- *   return readRequestBodyIntoJSON(fetchRequests[0]).then( (json) => {
- *     assert.equal(json["foo"],"bar")
- *   })
- * })
- */
-const readRequestBodyIntoJSON = (request) => {
-  return readRequestBodyIntoString(request).then( (string) => {
-    try {
-      const json = JSON.parse(string)
-      return Promise.resolve(json)
-    }
-    catch (e) {
-      assert(false,`'${string}' could not be parsed as JSON`)
-    }
-    return Promise.resolve()
-  })
-}
-/**
- * Given a fetch request (available via `fetchRequests` passed to your test), turn the body into a string
- * and return a promise with the string.  To use this in a test, you must include your assertions inside
- * the `then` of the returned promise and you *must* return that from your test.
+ * @param {String} html - HTML that should be in the document for the test
+ * @param {Object} assetMetadata - a JSON object describing where the bundles are.  This is needed to allow JSDOM to load the custom
+ * elements as if it were served up by a webserver
+ * @param {String} publicRoot - The root to where JS files.  When using this in a BrutRB web app, this would be where your bundled
+ * files are placed for serving.
  *
- * @example
- * withHTML(
- *   "<div-makes-a-fetch>"
- * ).onFetch("/foo", { then: { status: 200 }}
- * ).test("a test",({assert,fetchRequests}) => {
- *   assert.equal(fetchRequests.length,1)
- *   return readRequestBodyIntoString(fetchRequests[0]).then( (string) => {
- *     assert.equal(string,"foo")
- *   })
- * })
- */
-const readRequestBodyIntoString = (request) => {
-  const reader = request.body.getReader()
-  const utf8Decoder = new TextDecoder("utf-8");
-  let string = ""
-  const parse = ({value,done}) => {
-    if (done) {
-      return Promise.resolve(string)
-    }
-    else {
-      if (value) {
-        string = string + utf8Decoder.decode(value, { stream: true })
-      }
-      return reader.read().then(parse)
-    }
-  }
-  return reader.read().then(parse)
-}
-/** Used to wait for a few milliseconds before performing further assertions.
- * This can be useful when a custom element has `setTimeout` calls
+ * @see module:testing~CustomElementTest
  */
-const waitForSetTimeout = (ms) => {
-  return new Promise( (resolve) => {
-    setTimeout(resolve,ms)
-  })
+const createTestBasedOnHTML = ({html,assetMetadata,publicRoot}) => {
+  return new CustomElementTest(html,null,new AssetMetadata(assetMetadata,publicRoot))
 }
 export {
-  withHTML,
-  readRequestBodyIntoJSON,
-  readRequestBodyIntoString,
-  waitForSetTimeout,
+  createTestBasedOnHTML
 }