Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

change tabs select selectors + try fix tests

Browse source 
* update select tabs selectors and script (in order to set old tabs for account on futur)
* fix global config selector error on tests
* update tabs selector on tests
* add a script to scroll to element trying to fix selenium error
This commit is contained in:
Jordan Blasenhauer 2024-03-01 14:59:01 +01:00
parent c0454b9ad2
commit 2266299c8a
12 changed files with 88 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ui/static/css/dashboard.css
View file

File diff suppressed because one or more lines are too long

4
src/ui/static/js/account.js
View file

@ -1,4 +1,4 @@
import { Tabs, Popover } from "./utils/settings.js";
import { TabsSelect, Popover } from "./utils/settings.js";
class SubmitAccount {
constructor() {
@ -130,6 +130,6 @@ class SwitchTabForm {
const setPWBtn = new PwBtn();
const setSubmit = new SubmitAccount();
const setTabs = new Tabs();
const setTabsSelect = new TabsSelect();
const setPopover = new Popover();
const setSwitchTabForm = new SwitchTabForm();

8
src/ui/static/js/global_config.js
View file

@ -1,6 +1,6 @@
import {
Popover,
Tabs,
TabsSelect,
FormatValue,
FilterSettings,
CheckNoMatchFilter,
@ -27,8 +27,8 @@ class Multiple {
}
const setPopover = new Popover("main", "global-config");
const setTabs = new Tabs(
document.querySelector("[data-global-config-tabs-container]"),
const setTabsSelect = new TabsSelect(
document.querySelector("[data-global-config-tabs-select-container]"),
document.querySelector("[data-global-config-plugins-container]"),
);
const format = new FormatValue();
@ -36,7 +36,7 @@ const setMultiple = new Multiple("global-config");
const setFilterGlobal = new FilterSettings(
"keyword",
document.querySelector("[data-global-config-tabs-container]"),
document.querySelector("[data-global-config-tabs-select-container]"),
document.querySelector("[data-global-config-plugins-container]"),
);

22
src/ui/static/js/services.js
View file

@ -1,6 +1,6 @@
import {
Popover,
Tabs,
TabsSelect,
FormatValue,
FilterSettings,
CheckNoMatchFilter,
@ -11,9 +11,9 @@ class ServiceModal {
//modal elements
this.modal = document.querySelector("[data-services-modal]");
this.modalTitle = this.modal.querySelector("[data-services-modal-title]");
this.modalTabs = this.modal.querySelector(["[data-services-tabs]"]);
this.modalTabs = this.modal.querySelector(["[data-services-tabs-select]"]);
this.modalTabsHeader = this.modal.querySelector([
"[data-services-tabs-header]",
"[data-services-tabs-select-header]",
]);
this.modalErrMsg = this.modal.querySelector(
"[data-services-modal-error-msg]",
@ -443,14 +443,14 @@ class ServiceModal {
showNewEditForm() {
this.cardViewport();
this.showTabs();
this.showSelectTabs();
this.hideForms();
this.formNewEdit.classList.remove("hidden");
}
showDeleteForm() {
this.cardNoViewport();
this.hideTabs();
this.hideSelectTabs();
this.hideForms();
this.formDelete.classList.remove("hidden");
@ -471,7 +471,7 @@ class ServiceModal {
this.formDelete.classList.add("hidden");
}
hideTabs() {
hideSelectTabs() {
this.modalTabs.classList.remove("grid");
this.modalTabs.classList.add("hidden");
@ -479,7 +479,7 @@ class ServiceModal {
this.modalTabsHeader.classList.add("hidden");
}
showTabs() {
showSelectTabs() {
this.modalTabs.classList.add("grid");
this.modalTabs.classList.remove("hidden");
this.modalTabsHeader.classList.add("flex");
@ -581,7 +581,7 @@ class ServiceModal {
openModal() {
//switch to first setting
document.querySelector("button[data-tab-handler]").click();
document.querySelector("button[data-tab-select-handler]").click();
//show modal el
this.modal.classList.add("flex");
this.modal.classList.remove("hidden");
@ -1406,8 +1406,8 @@ class Filter {
const setDropdown = new Dropdown();
const setFilter = new Filter();
const setTabs = new Tabs(
document.querySelector("[data-services-tabs]"),
const setTabsSelect = new TabsSelect(
document.querySelector("[data-services-tabs-select]"),
document.querySelector("[data-services-modal-form]"),
);
@ -1417,7 +1417,7 @@ const format = new FormatValue();
const setFilterGlobal = new FilterSettings(
"settings-filter",
document.querySelector("[data-services-tabs]"),
document.querySelector("[data-services-tabs-select]"),
document.querySelector("[data-services-modal-form]"),
);

61
src/ui/static/js/utils/settings.js
View file

@ -43,23 +43,25 @@ class Popover {
}
}
class Tabs {
class TabsSelect {
constructor(tabContainer, contentContainer) {
this.tabContainer = tabContainer;
this.contentContainer = contentContainer;
this.tabArrow = tabContainer
.querySelector("[data-tab-dropdown-btn]")
.querySelector("[data-tab-dropdown-arrow]");
.querySelector("[data-tab-select-dropdown-btn]")
.querySelector("[data-tab-select-dropdown-arrow]");
this.init();
}
init() {
window.addEventListener("click", (e) => {
try {
if (e.target.closest("button").hasAttribute("data-tab-handler")) {
if (
e.target.closest("button").hasAttribute("data-tab-select-handler")
) {
//get needed data
const tab = e.target.closest("button");
const tabAtt = tab.getAttribute("data-tab-handler");
const tabAtt = tab.getAttribute("data-tab-select-handler");
// change style
this.resetTabsStyle();
this.highlightClicked(tabAtt);
@ -73,8 +75,11 @@ class Tabs {
} catch (e) {}
try {
if (e.target.closest("button").hasAttribute("data-tab-dropdown-btn")) {
const dropBtn = e.target.closest("button");
if (
e.target
.closest("button")
.hasAttribute("data-tab-select-dropdown-btn")
) {
this.toggleDropdown();
}
} catch (err) {}
@ -82,17 +87,17 @@ class Tabs {
}
resetTabsStyle() {
const tabsMobile = this.tabContainer.querySelectorAll(
"button[data-tab-handler]",
const tabsEl = this.tabContainer.querySelectorAll(
"button[data-tab-select-handler]",
);
tabsMobile.forEach((tab) => {
tabsEl.forEach((tab) => {
tab.classList.remove("active");
});
}
highlightClicked(tabAtt) {
const tabMobile = this.tabContainer.querySelector(
`button[data-tab-handler='${tabAtt}']`,
`button[data-tab-select-handler='${tabAtt}']`,
);
tabMobile.classList.add("active");
}
@ -113,12 +118,16 @@ class Tabs {
}
setDropBtnText(tabAtt) {
const dropBtn = this.tabContainer.querySelector("[data-tab-dropdown-btn]");
const dropBtn = this.tabContainer.querySelector(
"[data-tab-select-dropdown-btn]",
);
dropBtn.querySelector("span").textContent = tabAtt;
}
closeDropdown() {
const dropdown = this.tabContainer.querySelector("[data-tab-dropdown]");
const dropdown = this.tabContainer.querySelector(
"[data-tab-select-dropdown]",
);
dropdown.classList.add("hidden");
dropdown.classList.remove("flex");
@ -126,7 +135,9 @@ class Tabs {
}
toggleDropdown() {
const dropdown = this.tabContainer.querySelector("[data-tab-dropdown]");
const dropdown = this.tabContainer.querySelector(
"[data-tab-select-dropdown]",
);
dropdown.classList.toggle("hidden");
dropdown.classList.toggle("flex");
@ -134,7 +145,9 @@ class Tabs {
}
updateTabArrow() {
const dropdown = this.tabContainer.querySelector("[data-tab-dropdown]");
const dropdown = this.tabContainer.querySelector(
"[data-tab-select-dropdown]",
);
if (dropdown.classList.contains("hidden")) {
this.tabArrow.classList.remove("rotate-180");
@ -167,7 +180,9 @@ class FilterSettings {
this.input = document.querySelector(`input#${inputID}`);
this.tabContainer = tabContainer;
this.contentContainer = contentContainer;
this.tabsEls = this.tabContainer.querySelectorAll(`[data-tab-handler]`);
this.tabsEls = this.tabContainer.querySelectorAll(
`[data-tab-select-handler]`,
);
this.init();
}
@ -200,7 +215,7 @@ class FilterSettings {
});
//case no setting match, hidden tab and content
if (settingCount === hiddenCount) {
const tabName = tab.getAttribute(`data-tab-handler`);
const tabName = tab.getAttribute(`data-tab-select-handler`);
tab.classList.add("!hidden");
this.contentContainer
@ -224,13 +239,13 @@ class FilterSettings {
// case no tab match
if (isAllHidden) {
return (this.tabContainer.querySelector(
"[data-tab-dropdown-btn] span",
"[data-tab-select-dropdown-btn] span",
).textContent = "No match");
}
// click first not hidden tab
const currTabEl = this.tabContainer.querySelector(
"[data-tab-dropdown-btn] span",
"[data-tab-select-dropdown-btn] span",
);
const currTabName = currTabEl.textContent.toLowerCase().trim();
@ -240,7 +255,7 @@ class FilterSettings {
}
const currTabBtn = this.tabContainer.querySelector(
`[data-tab-handler='${currTabName}']`,
`[data-tab-select-handler='${currTabName}']`,
);
if (!currTabBtn) return;
@ -255,7 +270,7 @@ class FilterSettings {
resetFilter() {
this.tabsEls.forEach((tab) => {
const tabName = tab.getAttribute(`data-tab-handler`);
const tabName = tab.getAttribute(`data-tab-select-handler`);
//hide mobile and desk tabs
tab.classList.remove("!hidden");
this.contentContainer
@ -269,7 +284,7 @@ class FilterSettings {
}
getSettingsFromTab(tabEl) {
const tabName = tabEl.getAttribute(`data-tab-handler`);
const tabName = tabEl.getAttribute(`data-tab-select-handler`);
const settingContainer = this.contentContainer
.querySelector(`[data-plugin-item="${tabName}"]`)
.querySelector(`[data-plugin-settings]`);
@ -346,4 +361,4 @@ class CheckNoMatchFilter {
}
}
export { Popover, Tabs, FormatValue, FilterSettings, CheckNoMatchFilter };
export { Popover, TabsSelect, FormatValue, FilterSettings, CheckNoMatchFilter };

12
src/ui/styles.css
View file

@ -106,27 +106,27 @@
/*---------------SETTINGS_TABS-----------------*/
/*---------------------------------------------*/
.settings-tabs-btn {
.settings-tabs-select-btn {
@apply dark:hover:brightness-95 dark:border-slate-600 dark:bg-slate-700 border-primary border w-full flex items-center justify-between rounded-lg hover:-translate-y-px my-1 px-4 py-2 md:px-6 md:py-3 font-bold text-center uppercase align-middle transition-all cursor-pointer bg-white hover:bg-gray-50 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md;
}
.settings-tabs-btn-text {
.settings-tabs-select-btn-text {
@apply transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-300 text-primary;
}
.active.settings-tabs-dropdown-btn {
.active.settings-tabs-select-dropdown-btn {
@apply border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300 z-[1000] dark:bg-primary bg-primary text-gray-300;
}
.first.settings-tabs-dropdown-btn {
.first.settings-tabs-select-dropdown-btn {
@apply border-t rounded-t border-b border-l border-r;
}
.last.settings-tabs-dropdown-btn {
.last.settings-tabs-select-dropdown-btn {
@apply rounded-b;
}
.settings-tabs-dropdown-btn {
.settings-tabs-select-dropdown-btn {
@apply flex justify-between border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-white text-gray-700 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300;
}

4
src/ui/templates/global_config.html vendored
View file

@ -1,8 +1,8 @@
{% extends "base.html" %}
{% block content %}
<div data-global-config-tabs-container
<div data-global-config-tabs-select-container
class="z-100 w-full grid grid-cols-12 h-fit max-h-100 sm:max-h-125 col-span-12 md:col-span-6 lg:col-span-4 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
<div data-{{ current_endpoint }}-tabs-header class="col-span-12">
<div data-{{ current_endpoint }}-tabs-select-header class="col-span-12">
<div class="flex flex-col xs:flex-row xs:justify-start xs:items-center gap-x-4 gap-y-2 my-3">
<h5 class="transition duration-300 ease-in-out 0 ml-2 font-bold text-md uppercase dark:text-white/90 mb-0">PLUGINS</h5>
</div>

2
src/ui/templates/services_modal.html vendored
View file

@ -42,7 +42,7 @@
</svg>
</button>
</div>
<div data-services-tabs-header
<div data-services-tabs-select-header
class="flex flex-col">
<div class="flex flex-col sm:flex-row justify-start w-full items-start sm:items-center gap-y-3 gap-x-4">
<div class="w-full sm:min-w-[250px] max-w-[300px]">

16
src/ui/templates/settings_tabs.html vendored
View file

@ -1,14 +1,14 @@
{% set current_endpoint = current_endpoint or url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<div data-{{ current_endpoint }}-tabs class="col-span-12 grid grid-cols-12">
<div data-{{ current_endpoint }}-tabs-select class="col-span-12 grid grid-cols-12">
<div class="relative col-span-12 h-full">
<button data-tab-dropdown-btn
<button data-tab-select-dropdown-btn
aria-controls="tab-dropdown"
class="settings-tabs-btn">
<span aria-description="current tab" class="settings-tabs-btn-text">
class="settings-tabs-select-btn">
<span aria-description="current tab" class="settings-tabs-select-btn-text">
{% if current_endpoint == "global-config" %}general{% endif %}
</span>
<!-- chevron -->
<svg data-tab-dropdown-arrow class="transition-transform h-4 w-4 fill-primary dark:fill-gray-300"
<svg data-tab-select-dropdown-arrow class="transition-transform h-4 w-4 fill-primary dark:fill-gray-300"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
@ -18,7 +18,7 @@
<!-- dropdown-->
<div id="tab-dropdown"
role="listbox"
data-tab-dropdown
data-tab-select-dropdown
class="hidden z-100 absolute flex-col w-full overflow-hidden overflow-y-auto h-90 max-h-[50vh]">
{% set first_el = "True" %}
{% for plugin in plugins %}
@ -26,11 +26,11 @@
and check_settings(plugin["settings"], "multisite") or current_endpoint == "global-config" and plugin["settings"]
and check_settings(plugin["settings"], "global") %}
<button role="option"
data-tab-handler="{{ plugin['id'] }}"
data-tab-select-handler="{{ plugin['id'] }}"
data-select="false"
id="edit-{{ current_endpoint }}-{{ plugin['id'] }}-tab"
class=" {% if loop.first %}
active first{% endif%} {% if loop.last%} last {% endif%} settings-tabs-dropdown-btn">{{ plugin['name'] }}</button>
active first{% endif%} {% if loop.last%} last {% endif%} settings-tabs-select-dropdown-btn">{{ plugin['name'] }}</button>
{% endif %}
{% endfor %}
</div>

5
tests/ui/bans_page.py
View file

@ -95,7 +95,10 @@ try:
log_info("Bans found, trying to delete them ...")
assert_button_click(DRIVER, "//input[@id='ban-item-2']")
ban_item_2 = safe_get_element(DRIVER, By.XPATH, "//input[@id='ban-item-2']")
DRIVER.execute_script("arguments[0].scrollIntoView();", ban_item_2)
ban_item_2.click()
access_page(DRIVER, "//button[@data-unban-btn='']", "bans", False)

6
tests/ui/global_config_page.py
View file

@ -19,7 +19,7 @@ try:
# Set keyword with no matching settings
keyword_no_match = "dqz48 é84 dzq 584dz5qd4"
btn_keyword = safe_get_element(DRIVER, "js", 'document.querySelector("input#settings-filter")')
btn_keyword = safe_get_element(DRIVER, "js", 'document.querySelector("input#keyword")')
btn_keyword.send_keys(keyword_no_match)
sleep(0.1)
@ -91,13 +91,13 @@ try:
log_info("The value was updated successfully, trying to navigate through the global config tabs ...")
buttons = safe_get_element(DRIVER, By.XPATH, "//button[@data-tab-handler='']", multiple=True)
buttons = safe_get_element(DRIVER, By.XPATH, "//button[@data-tab-select-handler='']", multiple=True)
assert isinstance(buttons, list), "Buttons is not a list of WebElements"
# Open dropdown and click button
shuffle(buttons)
for button in buttons:
assert_button_click(DRIVER, "//button[@data-tab-dropdown-btn='']")
assert_button_click(DRIVER, "//button[@data-tab-select-dropdown-btn='']")
assert_button_click(DRIVER, button)
log_info("Trying to filter the global config ...")

14
tests/ui/services_page.py
View file

@ -7,6 +7,7 @@ from selenium.webdriver.common.by import By
from selenium.webdriver.remote.webelement import WebElement
from selenium.common.exceptions import TimeoutException
from wizard import DRIVER
from base import TEST_TYPE
from utils import access_page, assert_alert_message, assert_button_click, safe_get_element, wait_for_service
@ -48,8 +49,8 @@ try:
log_info('The value for the "SERVER_NAME" input is the expected one, trying to edit the config ...')
assert_button_click(DRIVER, "//button[@data-tab-dropdown-btn='']")
assert_button_click(DRIVER, "//button[@data-tab-handler='gzip']")
assert_button_click(DRIVER, "//button[@data-tab-select-dropdown-btn='']")
assert_button_click(DRIVER, "//button[@data-tab-select-handler='gzip']")
gzip_select = safe_get_element(DRIVER, By.XPATH, "//button[@data-setting-select='gzip-comp-level']")
assert isinstance(gzip_select, WebElement), "Gzip select is not a WebElement"
assert_button_click(DRIVER, gzip_select)
@ -71,8 +72,8 @@ try:
log_error("Modal is hidden even though it shouldn't be, exiting ...")
exit(1)
assert_button_click(DRIVER, "//button[@data-tab-dropdown-btn='']")
assert_button_click(DRIVER, "//button[@data-tab-handler='gzip']")
assert_button_click(DRIVER, "//button[@data-tab-select-dropdown-btn='']")
assert_button_click(DRIVER, "//button[@data-tab-select-handler='gzip']")
gzip_comp_level_selected_elem = safe_get_element(DRIVER, By.XPATH, "//select[@id='GZIP_COMP_LEVEL']/option[@selected='']")
assert isinstance(gzip_comp_level_selected_elem, WebElement), "Gzip comp level selected element is not a WebElement"
@ -93,8 +94,8 @@ try:
server_name_input.send_keys("app1.example.com")
if TEST_TYPE == "docker":
assert_button_click(DRIVER, "//button[@data-tab-dropdown-btn='']")
assert_button_click(DRIVER, "//button[@data-tab-handler='reverseproxy']")
assert_button_click(DRIVER, "//button[@data-tab-select-dropdown-btn='']")
assert_button_click(DRIVER, "//button[@data-tab-select-handler='reverseproxy']")
use_reverse_proxy_checkbox = safe_get_element(DRIVER, By.ID, "USE_REVERSE_PROXY")
assert isinstance(use_reverse_proxy_checkbox, WebElement), "Use reverse proxy checkbox is not a WebElement"
@ -325,6 +326,7 @@ try:
log_info("Delete button is present, as expected, deleting the service ...")
DRIVER.execute_script("arguments[0].scrollIntoView();", delete_button)
assert_button_click(DRIVER, delete_button)
sleep(0.1)