Bundle qunit when we publish to NPM
ronyeh opened this issue · comments
"tests/support" no longer exists. flow.html currently accesses the qunit files in node_modules/.
When shipping to NPM, we need to somehow bundle those qunit files alongside flow.html, so that it can continue to be accessed on unpkg.com. For example:
https://unpkg.com/vexflow@4.1.0/tests/flow.html
Maybe this option will work:
https://docs.npmjs.com/cli/v9/configuring-npm/package-json#bundledependencies
@rvilarl Does flow.html need to work while your computer is offline?
If not.... we should consider following the approach from the QUnit getting started pages:
https://qunitjs.com/intro/
They recommend just including the QUnit JS and CSS from the jQuery CDN. I think that'll make it simpler.
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test Suite</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.19.4.css">
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="https://code.jquery.com/qunit/qunit-2.19.4.js"></script>
</body>Our local grunt test can still use the local node_modules/qunit/, but I think flow.html should load from CDN. That way, when we deploy on unpkg.com, the test page will magically work.
OK, I'm actually reintroducing a local copy of (the most recent version of) qunit.css and qunit.js in the vexflow/tests/qunit/. That's how we did it before, and I think that's the best option.
I think I found a "bug" in the qunit.js that limits the dropdown to 20 modules.
Here's the fix. QUnit was chopping off the dropdown to the first 20 items.
diff --git a/tests/qunit/qunit.css b/tests/qunit/qunit.css
index d445a567..5d8b3964 100644
--- a/tests/qunit/qunit.css
+++ b/tests/qunit/qunit.css
@@ -236,6 +236,9 @@
color: #0D3349;
background-color: #F5F5F5;
z-index: 99;
+
+ max-height: 80vh;
+ overflow: auto;
}
#qunit-modulefilter-actions {
diff --git a/tests/qunit/qunit.js b/tests/qunit/qunit.js
index 5e48b793..a01121e1 100644
--- a/tests/qunit/qunit.js
+++ b/tests/qunit/qunit.js
@@ -5509,7 +5509,7 @@
// module names, indicating how the interface works. This also makes
// for a quicker interaction in the common case of small projects.
// Don't mandate typing just to get the menu.
- results = dropdownData.options.slice(0, 20).map(function (obj) {
+ results = dropdownData.options.map(function (obj) {
// Fake empty results. https://github.com/farzher/fuzzysort/issues/41
return {
obj: obj
@@ -5517,7 +5517,7 @@
});
} else {
results = fuzzysort.go(searchText, dropdownData.options, {
- limit: 20,
+ limit: 1000,
key: 'name',
allowTypo: true
});