summaryrefslogtreecommitdiffstatshomepage
path: root/test/manual
diff options
context:
space:
mode:
authorcarson <carson@leaddyno.com>2020-05-16 15:40:15 -0700
committercarson <carson@leaddyno.com>2020-05-16 15:40:15 -0700
commite1e4f25b0ef21e96eda192e69ab89e207dd7f617 (patch)
tree805920d8b3c99c9a0d12310ece88c788d739fbc6 /test/manual
parent4ebdabd2279c9e44058effdc831285f87cfb32b3 (diff)
downloadhtmx-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.html110
-rw-r--r--test/manual/confirm-and-prompt.html28
-rw-r--r--test/manual/no-indicator-css.html16
-rw-r--r--test/manual/yes-indicator-css.html11
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>