From 965659311edcabc616aef20fda8493d86ac6ae34 Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Wed, 16 Aug 2023 16:42:05 +1200 Subject: [PATCH] set UI breakpoint to 1024 to ensure smooth UX for tablet users. Update the existing UI tests --- src/web/App.mjs | 2 +- src/web/stylesheets/components/_banner.css | 2 +- src/web/stylesheets/components/_dividers.css | 2 +- src/web/stylesheets/components/_operation.css | 2 +- src/web/stylesheets/components/io/_io.css | 2 +- .../components/operations/_operations.css | 2 +- src/web/stylesheets/layout/_structure.css | 4 +- src/web/stylesheets/utils/_general.css | 4 +- src/web/utils/statusBar.mjs | 2 +- tests/browser/00_nightwatch.js | 55 +++++++++++-------- 10 files changed, 42 insertions(+), 35 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index 2b96904f..9ab66357 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -47,7 +47,7 @@ class App { this.workerLoaded = false; this.waitersLoaded = false; - this.breakpoint = 768; + this.breakpoint = 1024; } /** diff --git a/src/web/stylesheets/components/_banner.css b/src/web/stylesheets/components/_banner.css index 2acd5362..afa7be90 100644 --- a/src/web/stylesheets/components/_banner.css +++ b/src/web/stylesheets/components/_banner.css @@ -41,7 +41,7 @@ text-decoration: none; } -@media only screen and (min-width: 768px){ +@media only screen and (min-width: 1024px){ .banner-link:hover span { text-decoration: underline; } diff --git a/src/web/stylesheets/components/_dividers.css b/src/web/stylesheets/components/_dividers.css index f24e722e..b0cbf2f1 100644 --- a/src/web/stylesheets/components/_dividers.css +++ b/src/web/stylesheets/components/_dividers.css @@ -1,5 +1,5 @@ /* Gutters and splitters */ -@media only screen and (min-width: 768px){ +@media only screen and (min-width: 1024px){ .split { box-sizing: border-box; /* overflow: auto; */ diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index d140bf10..f294ba1b 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/src/web/stylesheets/components/_operation.css @@ -23,7 +23,7 @@ cursor: default; } -@media only screen and (min-width: 768px){ +@media only screen and (min-width: 1024px){ .operation { cursor: grab; } diff --git a/src/web/stylesheets/components/io/_io.css b/src/web/stylesheets/components/io/_io.css index 4eeb0981..2bffa214 100755 --- a/src/web/stylesheets/components/io/_io.css +++ b/src/web/stylesheets/components/io/_io.css @@ -88,7 +88,7 @@ label[for="output-text"] { transition: all 0.5s ease; } -@media only screen and (min-width: 768px){ +@media only screen and (min-width: 1024px){ #output-loader { bottom: 0; } diff --git a/src/web/stylesheets/components/operations/_operations.css b/src/web/stylesheets/components/operations/_operations.css index 9aa92796..bb1f0efb 100644 --- a/src/web/stylesheets/components/operations/_operations.css +++ b/src/web/stylesheets/components/operations/_operations.css @@ -35,7 +35,7 @@ display: none; } -@media only screen and ( min-width: 768px ){ +@media only screen and ( min-width: 1024px ){ #operations-dropdown { border-bottom: none; } diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css index 921d0197..c7979a46 100755 --- a/src/web/stylesheets/layout/_structure.css +++ b/src/web/stylesheets/layout/_structure.css @@ -10,7 +10,7 @@ #operations { height: var(--operations-height); } #controls { height: var(--controls-height); } -@media only screen and ( min-width: 768px ) { +@media only screen and ( min-width: 1024px ) { #controls { height: var(--desktop-controls-height); } } @@ -49,7 +49,7 @@ display: none; } -@media only screen and ( min-width: 768px ) { +@media only screen and ( min-width: 1024px ) { #recipe { padding-bottom: var(--desktop-controls-height); } diff --git a/src/web/stylesheets/utils/_general.css b/src/web/stylesheets/utils/_general.css index e04ceec9..7181a01a 100755 --- a/src/web/stylesheets/utils/_general.css +++ b/src/web/stylesheets/utils/_general.css @@ -73,13 +73,13 @@ body { display: none; } -@media only screen and ( min-width: 768px ) { +@media only screen and ( min-width: 1024px ) { .desktop-only { display: inline-block; } } -@media only screen and ( min-width: 768px ){ +@media only screen and ( min-width: 1024px ){ .mobile-only { display: none; } diff --git a/src/web/utils/statusBar.mjs b/src/web/utils/statusBar.mjs index 0abd1ab7..6238b100 100644 --- a/src/web/utils/statusBar.mjs +++ b/src/web/utils/statusBar.mjs @@ -292,7 +292,7 @@ class StatusBarPanel { this.dom.querySelectorAll(".cm-status-bar-select-scroll").forEach( el => { - el.style.maxHeight = window.innerWidth >= 768 ? (viewHeight - 50) + "px" : "250px"; + el.style.maxHeight = window.innerWidth >= 1024 ? (viewHeight - 50) + "px" : "250px"; } ); } diff --git a/tests/browser/00_nightwatch.js b/tests/browser/00_nightwatch.js index 3ba2a865..12d1ebd8 100644 --- a/tests/browser/00_nightwatch.js +++ b/tests/browser/00_nightwatch.js @@ -9,9 +9,10 @@ const utils = require("./browserUtils.js"); module.exports = { + // desktop UI before: browser => { browser - .resizeWindow(1280, 800) + .resizeWindow(1024, 800) .url(browser.launchUrl); }, @@ -26,12 +27,18 @@ module.exports = { browser.useCss(); // Check that various important elements are loaded browser.expect.element("#operations").to.be.visible; + browser.expect.element("#operations-dropdown").to.be.visible; + browser.expect.element("#search").to.be.visible; + browser.expect.element("#categories").to.be.visible; + browser.expect.element("c-category-list").to.be.visible; + browser.expect.element("c-category-li").to.be.present; + browser.expect.element("c-operation-list").to.be.present; + browser.expect.element("c-operation-li").to.be.present; browser.expect.element("#recipe").to.be.visible; - browser.expect.element("#input").to.be.present; - browser.expect.element("#output").to.be.present; - browser.expect.element(".op-list").to.be.present; browser.expect.element("#rec-list").to.be.visible; browser.expect.element("#controls").to.be.visible; + browser.expect.element("#input").to.be.visible; + browser.expect.element("#output").to.be.visible; browser.expect.element("#input-text").to.be.visible; browser.expect.element("#output-text").to.be.visible; }, @@ -39,27 +46,27 @@ module.exports = { "Operations loaded": browser => { browser.useXpath(); // Check that an operation in every category has been populated - browser.expect.element("//li[contains(@class, 'operation') and text()='To Base64']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='To Binary']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='AES Decrypt']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='PEM to Hex']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Power Set']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Parse IP range']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Remove Diacritics']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Sort']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='To UNIX Timestamp']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Extract dates']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Gzip']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Keccak']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='JSON Beautify']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Detect File Type']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Play Media']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Disassemble x86']").to.be.present; - browser.expect.element("//li[contains(@class, 'operation') and text()='Register']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='To Base64']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='To Binary']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='AES Decrypt']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='PEM to Hex']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Power Set']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Parse IP range']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Remove Diacritics']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Sort']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='To UNIX Timestamp']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Extract dates']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Gzip']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Keccak']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='JSON Beautify']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Detect File Type']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Play Media']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Disassemble x86']").to.be.present; + browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Register']").to.be.present; }, "Recipe can be run": browser => { - const toHex = "//li[contains(@class, 'operation') and text()='To Hex']"; + const toHex = "//li[contains(@class, 'operation')]/span[text()='To Hex']"; const op = "#rec-list .operation .op-title"; // Check that operation is visible @@ -183,7 +190,7 @@ module.exports = { "Move around the UI": browser => { const otherCat = "//a[contains(@class, 'category-title') and contains(@data-target, '#catOther')]", - genUUID = "//li[contains(@class, 'operation') and text()='Generate UUID']"; + genUUID = "//li[contains(@class, 'operation')]/span[text()='Generate UUID']"; browser.useXpath(); @@ -220,7 +227,7 @@ module.exports = { .clearValue("#search") .setValue("#search", "md5") .useXpath() - .waitForElementVisible("//ul[@id='search-results']//b[text()='MD5']", 1000); + .waitForElementVisible("//div[@id='search-results']//strong[text()='MD5']", 1000); }, "Alert bar": browser => {