diff options
author | carson <carson@leaddyno.com> | 2020-05-16 15:40:15 -0700 |
---|---|---|
committer | carson <carson@leaddyno.com> | 2020-05-16 15:40:15 -0700 |
commit | e1e4f25b0ef21e96eda192e69ab89e207dd7f617 (patch) | |
tree | 805920d8b3c99c9a0d12310ece88c788d739fbc6 /test/manual | |
parent | 4ebdabd2279c9e44058effdc831285f87cfb32b3 (diff) | |
download | htmx-e1e4f25b0ef21e96eda192e69ab89e207dd7f617.tar.gz htmx-e1e4f25b0ef21e96eda192e69ab89e207dd7f617.zip |
regigger tests and add manual tests for hard-to-test things like prompt and confirm
Diffstat (limited to 'test/manual')
-rw-r--r-- | test/manual/browser-only-tests.html | 110 | ||||
-rw-r--r-- | test/manual/confirm-and-prompt.html | 28 | ||||
-rw-r--r-- | test/manual/no-indicator-css.html | 16 | ||||
-rw-r--r-- | test/manual/yes-indicator-css.html | 11 |
4 files changed, 165 insertions, 0 deletions
diff --git a/test/manual/browser-only-tests.html b/test/manual/browser-only-tests.html new file mode 100644 index 00000000..7ef37eb5 --- /dev/null +++ b/test/manual/browser-only-tests.html @@ -0,0 +1,110 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Mocha Tests</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="stylesheet" href="../../node_modules/mocha/mocha.css" /> +</head> +<body style="padding:20px;font-family: sans-serif"> +<div id="mocha"></div> +<script src="../../node_modules/chai/chai.js"></script> +<script src="../../node_modules/mocha/mocha.js"></script> +<script src="../../node_modules/sinon/pkg/sinon.js"></script> +<script src="../../src/kutty.js"></script> +<script class="mocha-init"> + mocha.setup('bdd'); + mocha.checkLeaks(); + should = chai.should(); +</script> + +<script src="../util/util.js"></script> +<script> + describe("Browser Only Tests", function() { + + beforeEach(function () { + this.server = makeServer(); + clearWorkArea(); + }); + afterEach(function () { + this.server.restore(); + clearWorkArea(); + }); + + it("should handle a basic back button click", function (done) { + this.server.respondWith("GET", "/test", "second"); + + getWorkArea().innerHTML.should.be.equal(""); + var div = make('<div kt-push-url="true" kt-get="/test">first</div>'); + div.click(); + this.server.respond(); + getWorkArea().textContent.should.equal("second") + history.back(); + setTimeout(function(){ + getWorkArea().textContent.should.equal("first"); + done(); + }, 20); + }); + + it("should handle two forward clicks then back twice", function (done) { + var i = 0; + this.server.respondWith("GET", "/test", function(xhr){ + i++; + xhr.respond(200, {}, "" + i); + }); + + getWorkArea().innerHTML.should.equal(""); + var div = make('<div kt-push-url="true" kt-get="/test" class="">0</div>'); + div.click(); + this.server.respond(); + getWorkArea().textContent.should.equal("1") + + div.click(); + this.server.respond(); + getWorkArea().textContent.should.equal("2") + + history.back(); + setTimeout(function(){ + getWorkArea().textContent.should.equal("1"); + history.back(); + setTimeout(function(){ + getWorkArea().textContent.should.equal("0"); + done(); + }, 20); + }, 20); + }) + + it("should handle a back, forward, back button click", function (done) { + this.server.respondWith("GET", "/test", "second"); + + getWorkArea().innerHTML.should.equal(""); + var div = make('<div kt-push-url="true" kt-get="/test" class="">first</div>'); + div.click(); + this.server.respond(); + getWorkArea().textContent.should.equal("second") + history.back(); + setTimeout(function(){ + getWorkArea().textContent.should.equal("first"); + history.forward(); + setTimeout(function() { + getWorkArea().textContent.should.equal("second"); + history.back(); + setTimeout(function() { + getWorkArea().textContent.should.equal("first"); + done(); + }, 20); + }, 20); + }, 20); + }) + }); +</script> + + +<script class="mocha-exec"> + mocha.run(); +</script> +<em>Work Area</em> +<hr/> +<div id="work-area" kt-history-elt> +</div> +</body> +</html> diff --git a/test/manual/confirm-and-prompt.html b/test/manual/confirm-and-prompt.html new file mode 100644 index 00000000..4590544e --- /dev/null +++ b/test/manual/confirm-and-prompt.html @@ -0,0 +1,28 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test if indicators are invisible by default</title> + <script src="../../src/kutty.js"></script> +</head> +<body style="padding:20px;font-family: sans-serif"> +<script src="../../node_modules/sinon/pkg/sinon.js"></script> +<script src="../../src/kutty.js"></script> +<script src="../util/util.js"></script> +<script> + server = makeServer(); + server.autoRespond = true; + server.respondWith("GET", "/prompt", function(xhr){ + xhr.respond(200, {}, "You entered: " + xhr.requestHeaders["X-KT-Prompt"]); + }) + server.respondWith("GET", "/confirm", function(xhr){ + xhr.respond(200, {}, "Confirmed") + }) +</script> +<h1>Prompt & Confirm Tests</h1> +<button kt-get="/prompt" kt-prompt="Enter some text and it should be echoed in this button">Click For Prompt</button> +<br/> +<br/> +<br/> +<button kt-get="/confirm" kt-confirm="Confirm The Action">Click For Confirm</button> +</body> +</html> diff --git a/test/manual/no-indicator-css.html b/test/manual/no-indicator-css.html new file mode 100644 index 00000000..d24753a0 --- /dev/null +++ b/test/manual/no-indicator-css.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <meta name="kutty-config" content='{"includeIndicatorStyles":false}'> + <title>Test if the includeIndicatorStyles meta option works</title> + <script src="../../src/kutty.js"></script> +</head> +<body style="padding:20px;font-family: sans-serif"> + <h1>You should see bars here:</h1> + <p> + We are overriding the normal CSS inclusion with the meta directive <code>{"includeIndicatorStyles":false}</code> + so you should see the indicator because it is not being hidden by the default classes. + </p> + <img class="kutty-indicator" src="../img/bars.svg" width="200"> +</body> +</html> diff --git a/test/manual/yes-indicator-css.html b/test/manual/yes-indicator-css.html new file mode 100644 index 00000000..46fdea72 --- /dev/null +++ b/test/manual/yes-indicator-css.html @@ -0,0 +1,11 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test if indicators are invisible by default</title> + <script src="../../src/kutty.js"></script> +</head> +<body style="padding:20px;font-family: sans-serif"> + <h1>You should not see bars here:</h1> + <img class="kutty-indicator" src="../img/bars.svg" width="200"> +</body> +</html> |