diff --git a/app/webpacker/channels/session_channel.js b/app/webpacker/channels/session_channel.js index d43acef462..58eb6e175f 100644 --- a/app/webpacker/channels/session_channel.js +++ b/app/webpacker/channels/session_channel.js @@ -1,8 +1,8 @@ -import consumer from './consumer' -import CableReady from 'cable_ready' +import consumer from "./consumer"; +import CableReady from "cable_ready"; consumer.subscriptions.create("SessionChannel", { received(data) { - if (data.cableReady) CableReady.perform(data.operations) - } + if (data.cableReady) CableReady.perform(data.operations); + }, }); diff --git a/app/webpacker/controllers/bulk_actions_controller.js b/app/webpacker/controllers/bulk_actions_controller.js index 9de40fe8cb..788d57b65e 100644 --- a/app/webpacker/controllers/bulk_actions_controller.js +++ b/app/webpacker/controllers/bulk_actions_controller.js @@ -1,8 +1,8 @@ import ApplicationController from "./application_controller"; export default class extends ApplicationController { - static targets = ["extraParams"] - static values = { reflex: String } + static targets = ["extraParams"]; + static values = { reflex: String }; connect() { super.connect(); @@ -12,7 +12,7 @@ export default class extends ApplicationController { let params = { bulk_ids: this.getSelectedIds() }; if (this.hasExtraParamsTarget) { - Object.assign(params, this.extraFormData()) + Object.assign(params, this.extraFormData()); } this.stimulate(this.reflexValue, params); @@ -21,15 +21,15 @@ export default class extends ApplicationController { // private getSelectedIds() { - const checkboxes = document.querySelectorAll( - "table input[name='bulk_ids[]']:checked" - ); + const checkboxes = document.querySelectorAll("table input[name='bulk_ids[]']:checked"); return Array.from(checkboxes).map((checkbox) => checkbox.value); } extraFormData() { - if (this.extraParamsTarget.constructor.name !== "HTMLFormElement") { return {} } + if (this.extraParamsTarget.constructor.name !== "HTMLFormElement") { + return {}; + } - return Object.fromEntries(new FormData(this.extraParamsTarget).entries()) + return Object.fromEntries(new FormData(this.extraParamsTarget).entries()); } } diff --git a/app/webpacker/controllers/checked_controller.js b/app/webpacker/controllers/checked_controller.js index cc0c8392bd..82e22f96f5 100644 --- a/app/webpacker/controllers/checked_controller.js +++ b/app/webpacker/controllers/checked_controller.js @@ -35,7 +35,7 @@ export default class extends Controller { countValueChanged() { window.dispatchEvent( - new CustomEvent("checked:updated", { detail: { count: this.countValue } }) + new CustomEvent("checked:updated", { detail: { count: this.countValue } }), ); } @@ -50,11 +50,10 @@ export default class extends Controller { } #closeDetails(elmnt) { - if (elmnt.getElementsByTagName('details').length == 0) - return; + if (elmnt.getElementsByTagName("details").length == 0) return; - Array.from(elmnt.getElementsByTagName('details')).forEach((element) => element.open = false); - } + Array.from(elmnt.getElementsByTagName("details")).forEach((element) => (element.open = false)); + } #toggleDisabled() { if (!this.hasDisableTarget) { diff --git a/app/webpacker/controllers/column_preferences_controller.js b/app/webpacker/controllers/column_preferences_controller.js index 1d314fc4be..c14921a871 100644 --- a/app/webpacker/controllers/column_preferences_controller.js +++ b/app/webpacker/controllers/column_preferences_controller.js @@ -5,10 +5,10 @@ import { Controller } from "stimulus"; export default class ColumnPreferencesController extends Controller { connect() { this.table = document.querySelector('table[data-column-preferences-target="table"]'); - this.cols = Array.from(this.table.querySelectorAll('col')); - this.colSpanCells = Array.from(this.table.querySelectorAll('th[colspan],td[colspan]')); + this.cols = Array.from(this.table.querySelectorAll("col")); + this.colSpanCells = Array.from(this.table.querySelectorAll("th[colspan],td[colspan]")); // Initialise data-default-col-span - this.colSpanCells.forEach((cell)=> { + this.colSpanCells.forEach((cell) => { cell.dataset.defaultColSpan ||= cell.colSpan; }); @@ -33,24 +33,24 @@ export default class ColumnPreferencesController extends Controller { this.table.classList.toggle(`hide-${name}`, !element.checked); // Reset cell colspans - for(const cell of this.colSpanCells) { + for (const cell of this.colSpanCells) { this.#updateColSpanCell(cell); - }; + } } #showHideElement(element, show) { element.style.display = show ? "" : "none"; } - #observeProductsTableRows(){ + #observeProductsTableRows() { this.productsTableObserver = new MutationObserver((mutations, _observer) => { const mutationRecord = mutations[0]; - if(mutationRecord){ + if (mutationRecord) { const productRowElement = mutationRecord.addedNodes[0]; - if(productRowElement){ - const newColSpanCell = productRowElement.querySelector('td[colspan]'); + if (productRowElement) { + const newColSpanCell = productRowElement.querySelector("td[colspan]"); newColSpanCell.dataset.defaultColSpan ||= newColSpanCell.colSpan; this.#updateColSpanCell(newColSpanCell); this.colSpanCells.push(newColSpanCell); @@ -61,11 +61,11 @@ export default class ColumnPreferencesController extends Controller { this.productsTableObserver.observe(this.table, { childList: true }); } - #hiddenColCount(){ - return this.checkboxes.filter((checkbox)=> !checkbox.checked).length; + #hiddenColCount() { + return this.checkboxes.filter((checkbox) => !checkbox.checked).length; } - #updateColSpanCell(cell){ + #updateColSpanCell(cell) { cell.colSpan = parseInt(cell.dataset.defaultColSpan, 10) - this.#hiddenColCount(); } } diff --git a/app/webpacker/controllers/csv_select_controller.js b/app/webpacker/controllers/csv_select_controller.js index 42ab9b011a..0634519b12 100644 --- a/app/webpacker/controllers/csv_select_controller.js +++ b/app/webpacker/controllers/csv_select_controller.js @@ -4,9 +4,7 @@ export default class extends Controller { static targets = ["reportType", "checkbox", "label"]; handleSelectChange() { - this.reportTypeTarget.value == "csv" ? - this.disableField(): - this.enableField(); + this.reportTypeTarget.value == "csv" ? this.disableField() : this.enableField(); } disableField() { diff --git a/app/webpacker/controllers/dropdown_controller.js b/app/webpacker/controllers/dropdown_controller.js index 701fdf27a7..062a51a436 100644 --- a/app/webpacker/controllers/dropdown_controller.js +++ b/app/webpacker/controllers/dropdown_controller.js @@ -2,7 +2,6 @@ import { Controller } from "stimulus"; // Close a
element when click outside export default class extends Controller { - connect() { document.body.addEventListener("click", this.#close.bind(this)); this.element.addEventListener("click", this.#stopPropagation.bind(this)); diff --git a/app/webpacker/controllers/flash_controller.js b/app/webpacker/controllers/flash_controller.js index 84dfe7eaf9..8cc10a9501 100644 --- a/app/webpacker/controllers/flash_controller.js +++ b/app/webpacker/controllers/flash_controller.js @@ -1,7 +1,7 @@ import { Controller } from "stimulus"; document.addEventListener("turbolinks:before-cache", () => - document.getElementById("flash").remove() + document.getElementById("flash").remove(), ); export default class extends Controller { diff --git a/app/webpacker/controllers/guest_checkout_controller.js b/app/webpacker/controllers/guest_checkout_controller.js index c366f02553..1e174fa195 100644 --- a/app/webpacker/controllers/guest_checkout_controller.js +++ b/app/webpacker/controllers/guest_checkout_controller.js @@ -9,7 +9,7 @@ export default class extends Controller { connect() { if (this.hasSummaryTarget) { - window.addEventListener('beforeunload', this.handlePageUnload); + window.addEventListener("beforeunload", this.handlePageUnload); } if (!this.hasGuestTarget) { @@ -50,7 +50,7 @@ export default class extends Controller { removeUnloadEvent() { if (this.hasSummaryTarget) { - window.removeEventListener('beforeunload', this.handlePageUnload); + window.removeEventListener("beforeunload", this.handlePageUnload); } } } diff --git a/app/webpacker/controllers/input_char_count_controller.js b/app/webpacker/controllers/input_char_count_controller.js index cafd93a673..8a1ed69e4a 100644 --- a/app/webpacker/controllers/input_char_count_controller.js +++ b/app/webpacker/controllers/input_char_count_controller.js @@ -9,10 +9,7 @@ export default class extends Controller { } countCharacters() { - this.displayCount( - this.inputTarget.value.length, - this.inputTarget.maxLength - ); + this.displayCount(this.inputTarget.value.length, this.inputTarget.maxLength); } displayCount(count, max) { diff --git a/app/webpacker/controllers/login_modal_controller.js b/app/webpacker/controllers/login_modal_controller.js index 7fc2111ab1..92c3f6516d 100644 --- a/app/webpacker/controllers/login_modal_controller.js +++ b/app/webpacker/controllers/login_modal_controller.js @@ -40,20 +40,11 @@ export default class extends Controller { document.querySelector("body").classList.add("modal-open"); }); - window._paq?.push([ - "trackEvent", - "Signin/Signup", - "Login Modal View", - window.location.href, - ]); + window._paq?.push(["trackEvent", "Signin/Signup", "Login Modal View", window.location.href]); }; close() { - history.pushState( - {}, - "", - window.location.pathname + window.location.search - ); + history.pushState({}, "", window.location.pathname + window.location.search); this.modalTarget.classList.remove("in"); this.backgroundTarget.classList.remove("in"); diff --git a/app/webpacker/controllers/metadata_toggle_controller.js b/app/webpacker/controllers/metadata_toggle_controller.js index b923123f79..e94eaa5576 100644 --- a/app/webpacker/controllers/metadata_toggle_controller.js +++ b/app/webpacker/controllers/metadata_toggle_controller.js @@ -4,9 +4,7 @@ export default class extends Controller { static targets = ["reportType", "checkbox", "label"]; handleSelectChange() { - this.reportTypeTarget.value == "csv" ? - this.enableField(): - this.disableField(); + this.reportTypeTarget.value == "csv" ? this.enableField() : this.disableField(); } disableField() { @@ -27,4 +25,4 @@ export default class extends Controller { this.labelTarget.classList.remove("disabled"); } } -} \ No newline at end of file +} diff --git a/app/webpacker/controllers/mixins/useRenderCustomer.js b/app/webpacker/controllers/mixins/useRenderCustomer.js index 2f23da24c0..361b26a83d 100644 --- a/app/webpacker/controllers/mixins/useRenderCustomer.js +++ b/app/webpacker/controllers/mixins/useRenderCustomer.js @@ -10,12 +10,8 @@ export const useRenderCustomer = (controller) => { ${ item.bill_address.firstname ? `${I18n.t("bill_address")} - ${item.bill_address.firstname} ${ - item.bill_address.lastname - }
- ${item.bill_address.address1}, ${ - item.bill_address.address2 - }
+ ${item.bill_address.firstname} ${item.bill_address.lastname}
+ ${item.bill_address.address1}, ${item.bill_address.address2}
${item.bill_address.city}
${ @@ -27,8 +23,7 @@ export const useRenderCustomer = (controller) => { } ${ - item.bill_address.country && - item.bill_address.country.name + item.bill_address.country && item.bill_address.country.name ? item.bill_address.country.name : item.bill_address.country_name } @@ -41,9 +36,7 @@ export const useRenderCustomer = (controller) => { renderWithNoBillAddress(item, escape) { return `
-
${escape( - item.email - )}
+
${escape(item.email)}
`; }, }); diff --git a/app/webpacker/controllers/modal_controller.js b/app/webpacker/controllers/modal_controller.js index 3121c63ac3..774d3b5954 100644 --- a/app/webpacker/controllers/modal_controller.js +++ b/app/webpacker/controllers/modal_controller.js @@ -3,13 +3,15 @@ import { useOpenAndCloseAsAModal } from "./mixins/useOpenAndCloseAsAModal"; export default class extends Controller { static targets = ["background", "modal"]; - static values = { instant: { type: Boolean, default: false } } + static values = { instant: { type: Boolean, default: false } }; connect() { useOpenAndCloseAsAModal(this); window.addEventListener("modal:close", this.close.bind(this)); - if (this.instantValue) { this.open() } + if (this.instantValue) { + this.open(); + } } disconnect() { @@ -17,6 +19,6 @@ export default class extends Controller { } remove(event) { - this.close(event, true) + this.close(event, true); } } diff --git a/app/webpacker/controllers/modal_link_controller.js b/app/webpacker/controllers/modal_link_controller.js index 9eb765c35f..d1a859ac8d 100644 --- a/app/webpacker/controllers/modal_link_controller.js +++ b/app/webpacker/controllers/modal_link_controller.js @@ -7,7 +7,7 @@ export default class extends Controller { let modal = document.getElementById(this.targetValue); let modalController = this.application.getControllerForElementAndIdentifier( modal, - this.getIdentifier() + this.getIdentifier(), ); modalController.open(); } diff --git a/app/webpacker/controllers/open_street_map_controller.js b/app/webpacker/controllers/open_street_map_controller.js index 38103565df..dfadb20e19 100644 --- a/app/webpacker/controllers/open_street_map_controller.js +++ b/app/webpacker/controllers/open_street_map_controller.js @@ -1,7 +1,7 @@ import { Controller } from "stimulus"; import L from "leaflet"; import LeafetProviders from "leaflet-providers"; -import { OpenStreetMapProvider } from 'leaflet-geosearch'; +import { OpenStreetMapProvider } from "leaflet-geosearch"; export default class extends Controller { static targets = ["confirmAddressField", "dragPinNote"]; @@ -9,7 +9,7 @@ export default class extends Controller { defaultLatitude: Number, defaultLongitude: Number, providerName: String, - providerOptions: Object + providerOptions: Object, }; connect() { @@ -23,7 +23,7 @@ export default class extends Controller { async locateAddress() { const results = await this.provider.search({ query: this.#addressQuery() }); - if(results.length > 0) { + if (results.length > 0) { const result = results[0]; this.#setLatitudeLongitude(result.y, result.x); this.#addMarker(result.y, result.x); @@ -46,13 +46,15 @@ export default class extends Controller { // If someone clicks the locate address on map button without filling in their address the // geocoded address will not be very accurate so don't zoom in too close so it's easier for // people to see where the marker is. - if(!addressLine1 && !city && !zipcode) { + if (!addressLine1 && !city && !zipcode) { this.zoomLevel = 6; } else { this.zoomLevel = 14; } - return [addressLine1, addressLine2, city, state, zipcode, country].filter((value) => !!value).join(", ") + return [addressLine1, addressLine2, city, state, zipcode, country] + .filter((value) => !!value) + .join(", "); } #addMarker(latitude, longitude) { @@ -72,13 +74,13 @@ export default class extends Controller { #displayMap() { // Don't initialise map in test environment because that could possibly abuse OSM tile servers - if(process.env.RAILS_ENV == "test") { + if (process.env.RAILS_ENV == "test") { return false; } - this.map = L.map('open-street-map') - L.tileLayer.provider(this.providerNameValue, this.providerOptionsValue).addTo(this.map) - this.map.setView([this.defaultLatitudeValue, this.defaultLongitudeValue], this.zoomLevel) + this.map = L.map("open-street-map"); + L.tileLayer.provider(this.providerNameValue, this.providerOptionsValue).addTo(this.map); + this.map.setView([this.defaultLatitudeValue, this.defaultLongitudeValue], this.zoomLevel); this.provider = new OpenStreetMapProvider(); } @@ -88,12 +90,12 @@ export default class extends Controller { #displayMapWhenAtRegistrationDetailsStep() { const observer = new IntersectionObserver( ([intersectionObserverEntry]) => { - if(intersectionObserverEntry.target.offsetParent !== null) { + if (intersectionObserverEntry.target.offsetParent !== null) { this.#displayMap(); - observer.disconnect() + observer.disconnect(); } }, - { threshold: [0] } + { threshold: [0] }, ); observer.observe(document.getElementById("registration-details")); } diff --git a/app/webpacker/controllers/order_cycle_form_controller.js b/app/webpacker/controllers/order_cycle_form_controller.js index a92d621dec..4b9e0b72b5 100644 --- a/app/webpacker/controllers/order_cycle_form_controller.js +++ b/app/webpacker/controllers/order_cycle_form_controller.js @@ -1,55 +1,58 @@ import { Controller } from "stimulus"; export default class extends Controller { - static targets = ['statusMessage', 'cancel'] + static targets = ["statusMessage", "cancel"]; connect() { this.observer = new MutationObserver(this.updateCallback); - this.observer.observe( - this.statusMessageTarget, - { attributes: true, attributeOldValue: true, attributeFilter: ['data-type'] } - ); + this.observer.observe(this.statusMessageTarget, { + attributes: true, + attributeOldValue: true, + attributeFilter: ["data-type"], + }); if (this.hasCancelTarget) { - this.cancelTarget.addEventListener('click', this.removeUnloadEvent) + this.cancelTarget.addEventListener("click", this.removeUnloadEvent); } } // Callback to trigger warning modal updateCallback(mutationsList) { - const newDataType = document.getElementById('status-message').getAttribute('data-type'); - const actionName = document.getElementById('status-message').getAttribute('data-action-name'); - if(!actionName) return; + const newDataType = document.getElementById("status-message").getAttribute("data-type"); + const actionName = document.getElementById("status-message").getAttribute("data-action-name"); + if (!actionName) return; - for(let mutation of mutationsList) { - if (mutation.type === 'attributes' && mutation.attributeName === 'data-type') { + for (let mutation of mutationsList) { + if (mutation.type === "attributes" && mutation.attributeName === "data-type") { // Only trigger warning modal when notice display (notice) is preceeded by progress display (progress) - if(mutation.oldValue === 'progress' && newDataType === 'notice') { + if (mutation.oldValue === "progress" && newDataType === "notice") { // Hide all confirmation buttons in warning modal - document.querySelectorAll( - '#linked-order-warning-modal .modal-actions button.secondary' - ).forEach((node) => { - node.style.display = 'none'; - }); + document + .querySelectorAll("#linked-order-warning-modal .modal-actions button.secondary") + .forEach((node) => { + node.style.display = "none"; + }); // Show the appropriate confirmation button, open warning modal, and return - document.querySelectorAll( - `#linked-order-warning-modal button[data-trigger-action=${actionName}]` - ).forEach((node) => { - node.style.display = 'block'; - }) - document.querySelector('.warning-modal button.modal-target-trigger').click(); + document + .querySelectorAll( + `#linked-order-warning-modal button[data-trigger-action=${actionName}]`, + ) + .forEach((node) => { + node.style.display = "block"; + }); + document.querySelector(".warning-modal button.modal-target-trigger").click(); } } } } removeUnloadEvent() { - window.removeEventListener('beforeunload', window.onBeforeUnloadHandler) + window.removeEventListener("beforeunload", window.onBeforeUnloadHandler); } disconnect() { this.observer.disconnect(); if (this.hasCancelTarget) { - this.cancelTarget.removeEventListener('click', this.removeUnloadEvent) + this.cancelTarget.removeEventListener("click", this.removeUnloadEvent); } } } diff --git a/app/webpacker/controllers/page_alert_controller.js b/app/webpacker/controllers/page_alert_controller.js index a7bd46dc03..5c98228336 100644 --- a/app/webpacker/controllers/page_alert_controller.js +++ b/app/webpacker/controllers/page_alert_controller.js @@ -1,12 +1,14 @@ import { Controller } from "stimulus"; export default class extends Controller { - moveSelectors = [".off-canvas-wrap .inner-wrap", - ".off-canvas-wrap .inner-wrap .fixed", - ".off-canvas-fixed .top-bar", - ".off-canvas-fixed ofn-flash", - ".off-canvas-fixed nav.tab-bar", - ".off-canvas-fixed .page-alert"]; + moveSelectors = [ + ".off-canvas-wrap .inner-wrap", + ".off-canvas-wrap .inner-wrap .fixed", + ".off-canvas-fixed .top-bar", + ".off-canvas-fixed ofn-flash", + ".off-canvas-fixed nav.tab-bar", + ".off-canvas-fixed .page-alert", + ]; connect() { // Wait a moment after page load before showing the alert. Otherwise we often miss the diff --git a/app/webpacker/controllers/paymentmethod_controller.js b/app/webpacker/controllers/paymentmethod_controller.js index 00e607f333..e3498462fd 100644 --- a/app/webpacker/controllers/paymentmethod_controller.js +++ b/app/webpacker/controllers/paymentmethod_controller.js @@ -21,11 +21,8 @@ export default class extends Controller { } setPaymentMethod(paymentMethodContainerId) { - Array.from( - document.getElementsByClassName("paymentmethod-container") - ).forEach((container) => { - const enabled = - container.dataset.paymentmethodId === paymentMethodContainerId; + Array.from(document.getElementsByClassName("paymentmethod-container")).forEach((container) => { + const enabled = container.dataset.paymentmethodId === paymentMethodContainerId; if (enabled) { container.style.display = "block"; diff --git a/app/webpacker/controllers/permalink_controller.js b/app/webpacker/controllers/permalink_controller.js index 03691dc077..4ac0ab55c7 100644 --- a/app/webpacker/controllers/permalink_controller.js +++ b/app/webpacker/controllers/permalink_controller.js @@ -12,9 +12,7 @@ export default class extends Controller { this.hideAvailability(); this.showSpinner(); - const response = await fetch( - this.urlValue + `?permalink="${this.permalinkFieldTarget.value}"` - ); + const response = await fetch(this.urlValue + `?permalink="${this.permalinkFieldTarget.value}"`); const result = await response.text(); if (this.initialPermalinkValue == result) { diff --git a/app/webpacker/controllers/popout_controller.js b/app/webpacker/controllers/popout_controller.js index c62d7934dd..9e837c0acf 100644 --- a/app/webpacker/controllers/popout_controller.js +++ b/app/webpacker/controllers/popout_controller.js @@ -4,8 +4,8 @@ import { Controller } from "stimulus"; export default class PopoutController extends Controller { static targets = ["button", "dialog"]; static values = { - updateDisplay: { Boolean, default: true } - } + updateDisplay: { Boolean, default: true }, + }; connect() { this.displayElements = Array.from(this.element.querySelectorAll('input:not([type="hidden"]')); diff --git a/app/webpacker/controllers/primary_details_controller.js b/app/webpacker/controllers/primary_details_controller.js index b4e72be4cf..89560b8984 100644 --- a/app/webpacker/controllers/primary_details_controller.js +++ b/app/webpacker/controllers/primary_details_controller.js @@ -23,7 +23,7 @@ export default class extends Controller { { method: "GET", headers: { "Content-type": "application/json; charset=UTF-8" }, - } + }, ) .then((data) => data.json()) .then((operation) => { diff --git a/app/webpacker/controllers/products_controller.js b/app/webpacker/controllers/products_controller.js index b50dd714c6..85bcf1fe0d 100644 --- a/app/webpacker/controllers/products_controller.js +++ b/app/webpacker/controllers/products_controller.js @@ -18,11 +18,11 @@ export default class extends ApplicationController { } delete_product() { - this.#deleteByRecordType('product'); + this.#deleteByRecordType("product"); } delete_variant() { - this.#deleteByRecordType('variant'); + this.#deleteByRecordType("variant"); } showLoading = () => { @@ -44,51 +44,52 @@ export default class extends ApplicationController { getLoadingController = () => { return (this.loadingController ||= this.application.getControllerForElementAndIdentifier( this.loadingTarget, - "loading" + "loading", )); }; // +recordType+ can either be 'product' or 'variant' #deleteByRecordType(recordType) { - const deletePath = document.querySelector(`#${recordType}-delete-modal #modal-confirm-button`).getAttribute('data-delete-path'); + const deletePath = document + .querySelector(`#${recordType}-delete-modal #modal-confirm-button`) + .getAttribute("data-delete-path"); const elementToBeRemoved = this.#getElementToBeRemoved(deletePath, recordType); const handleSlideOutAnimationEnd = async () => { // in case of test env, we won't be having csrf token - const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'); + const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content"); try { const response = await fetch(deletePath, { - method: 'DELETE', + method: "DELETE", headers: { - Accept: 'text/vnd.turbo-stream.html', - 'X-CSRF-Token': csrfToken, - } + Accept: "text/vnd.turbo-stream.html", + "X-CSRF-Token": csrfToken, + }, }); - // need to render the turboStream message, that's why not throwing error here - if(response.status === 500) elementToBeRemoved.classList.remove('slide-out'); + // need to render the turboStream message, that's why not throwing error here + if (response.status === 500) elementToBeRemoved.classList.remove("slide-out"); const responseTurboStream = await response.text(); Turbo.renderStreamMessage(responseTurboStream); - } catch(error) { + } catch (error) { console.error(error.message); - elementToBeRemoved.classList.remove('slide-out'); - } - finally { - elementToBeRemoved.removeEventListener('animationend', handleSlideOutAnimationEnd); + elementToBeRemoved.classList.remove("slide-out"); + } finally { + elementToBeRemoved.removeEventListener("animationend", handleSlideOutAnimationEnd); } }; // remove the clone animation before deleting - elementToBeRemoved.classList.remove('slide-in'); - elementToBeRemoved.classList.add('slide-out'); - elementToBeRemoved.addEventListener('animationend', handleSlideOutAnimationEnd); - }; + elementToBeRemoved.classList.remove("slide-in"); + elementToBeRemoved.classList.add("slide-out"); + elementToBeRemoved.addEventListener("animationend", handleSlideOutAnimationEnd); + } #getElementToBeRemoved(path, recordType) { - const recordId = path.substring(path.lastIndexOf('/') + 1); + const recordId = path.substring(path.lastIndexOf("/") + 1); const elementDomId = `${recordType}_${recordId}`; return document.getElementById(elementDomId); - }; + } } diff --git a/app/webpacker/controllers/scoped_channel_controller.js b/app/webpacker/controllers/scoped_channel_controller.js index eb777da09f..cede4613e1 100644 --- a/app/webpacker/controllers/scoped_channel_controller.js +++ b/app/webpacker/controllers/scoped_channel_controller.js @@ -12,7 +12,7 @@ export default class extends Controller { received(data) { if (data.cableReady) CableReady.perform(data.operations); }, - } + }, ); } diff --git a/app/webpacker/controllers/search-input_controller.js b/app/webpacker/controllers/search-input_controller.js index 47aee17134..79c3d3f173 100644 --- a/app/webpacker/controllers/search-input_controller.js +++ b/app/webpacker/controllers/search-input_controller.js @@ -3,16 +3,12 @@ import ApplicationController from "./application_controller"; export default class extends ApplicationController { connect() { super.connect(); - this.element - .querySelector("input") - .addEventListener("keydown", this.searchOnEnter); + this.element.querySelector("input").addEventListener("keydown", this.searchOnEnter); } disconnect() { super.disconnect(); - this.element - .querySelector("input") - .removeEventListener("keydown", this.searchOnEnter); + this.element.querySelector("input").removeEventListener("keydown", this.searchOnEnter); } searchOnEnter = (e) => { @@ -22,7 +18,6 @@ export default class extends ApplicationController { }; search(e) { - this.element.querySelector(".search-button").dataset["value"] = - e.target.value; + this.element.querySelector(".search-button").dataset["value"] = e.target.value; } } diff --git a/app/webpacker/controllers/select_customer_controller.js b/app/webpacker/controllers/select_customer_controller.js index d1ffaa4739..a99bbe3e58 100644 --- a/app/webpacker/controllers/select_customer_controller.js +++ b/app/webpacker/controllers/select_customer_controller.js @@ -42,11 +42,11 @@ export default class extends TomSelectController { }); this.setValueOnTomSelectController( document.querySelector(attribute_wrapper + "state_id"), - data ? data.state_id : "" + data ? data.state_id : "", ); this.setValueOnTomSelectController( document.querySelector(attribute_wrapper + "country_id"), - data ? data.country_id : "" + data ? data.country_id : "", ); }); document.querySelector("#order_email").value = customer.email; diff --git a/app/webpacker/controllers/selector_with_filter_controller.js b/app/webpacker/controllers/selector_with_filter_controller.js index dc049305b6..b760d929db 100644 --- a/app/webpacker/controllers/selector_with_filter_controller.js +++ b/app/webpacker/controllers/selector_with_filter_controller.js @@ -7,9 +7,7 @@ export default class extends SelectorController { const query = event.target.value; this.itemsTargets.forEach((el, i) => { - el.style.display = el.textContent.toLowerCase().includes(query) - ? "" - : "none"; + el.style.display = el.textContent.toLowerCase().includes(query) ? "" : "none"; }); }; } diff --git a/app/webpacker/controllers/shippingmethod_controller.js b/app/webpacker/controllers/shippingmethod_controller.js index 1e33d1e4a1..47579f9e0c 100644 --- a/app/webpacker/controllers/shippingmethod_controller.js +++ b/app/webpacker/controllers/shippingmethod_controller.js @@ -17,13 +17,10 @@ export default class extends Controller { }); // but not the one we want ie. the one that matches the shipping method id this.shippingMethodDescriptionTargets.find( - (e) => e.dataset["shippingmethodid"] == input.value + (e) => e.dataset["shippingmethodid"] == input.value, ).style.display = "block"; // -- Require a ship address - if ( - input.dataset.requireaddress === "true" && - !this.shippingAddressCheckboxTarget.checked - ) { + if (input.dataset.requireaddress === "true" && !this.shippingAddressCheckboxTarget.checked) { this.shippingMethodAddressTarget.style.display = "block"; } else { this.shippingMethodAddressTarget.style.display = "none"; diff --git a/app/webpacker/controllers/sticky_controller.js b/app/webpacker/controllers/sticky_controller.js index 4c165bdd86..92eac7f0ad 100644 --- a/app/webpacker/controllers/sticky_controller.js +++ b/app/webpacker/controllers/sticky_controller.js @@ -17,7 +17,7 @@ export default class extends Controller { ([e]) => { e.target.classList.toggle("sticked", e.intersectionRatio < 1); }, - { threshold: [1] } + { threshold: [1] }, ); observer.observe(this.containerTarget); } diff --git a/app/webpacker/controllers/stripe_controller.js b/app/webpacker/controllers/stripe_controller.js index f7f0e2e99f..90baf0017f 100644 --- a/app/webpacker/controllers/stripe_controller.js +++ b/app/webpacker/controllers/stripe_controller.js @@ -1,15 +1,7 @@ import { Controller } from "stimulus"; export default class extends Controller { - static targets = [ - "cardElement", - "cardErrors", - "expMonth", - "expYear", - "brand", - "last4", - "pmId", - ]; + static targets = ["cardElement", "cardErrors", "expMonth", "expYear", "brand", "last4", "pmId"]; static styles = { base: { fontFamily: "Roboto, Arial, sans-serif", @@ -27,12 +19,10 @@ export default class extends Controller { // Initialize Stripe JS this.stripe = Stripe(this.data.get("key")); - this.stripeElement = this.stripe - .elements({ locale: I18n.base_locale }) - .create("card", { - style: this.constructor.styles, - hidePostalCode: true, - }); + this.stripeElement = this.stripe.elements({ locale: I18n.base_locale }).create("card", { + style: this.constructor.styles, + hidePostalCode: true, + }); // Mount Stripe Elements JS to the form field this.stripeElement.mount(this.cardElementTarget); @@ -58,34 +48,20 @@ export default class extends Controller { event.preventDefault(); event.stopPropagation(); - this.stripe - .createPaymentMethod({ type: "card", card: this.stripeElement }) - .then((response) => { - if (response.error) { - this.updateErrors(response); - } else { - this.pmIdTarget.setAttribute("value", response.paymentMethod.id); - this.expMonthTarget.setAttribute( - "value", - response.paymentMethod.card.exp_month - ); - this.expYearTarget.setAttribute( - "value", - response.paymentMethod.card.exp_year - ); - this.brandTarget.setAttribute( - "value", - response.paymentMethod.card.brand - ); - this.last4Target.setAttribute( - "value", - response.paymentMethod.card.last4 - ); - this.catchFormSubmit = false; + this.stripe.createPaymentMethod({ type: "card", card: this.stripeElement }).then((response) => { + if (response.error) { + this.updateErrors(response); + } else { + this.pmIdTarget.setAttribute("value", response.paymentMethod.id); + this.expMonthTarget.setAttribute("value", response.paymentMethod.card.exp_month); + this.expYearTarget.setAttribute("value", response.paymentMethod.card.exp_year); + this.brandTarget.setAttribute("value", response.paymentMethod.card.brand); + this.last4Target.setAttribute("value", response.paymentMethod.card.last4); + this.catchFormSubmit = false; - event.submitter.click(); - } - }); + event.submitter.click(); + } + }); }; // Update validation messages from Stripe shown in the form diff --git a/app/webpacker/controllers/terms_and_conditions_controller.js b/app/webpacker/controllers/terms_and_conditions_controller.js index a98e0faa83..988fd19219 100644 --- a/app/webpacker/controllers/terms_and_conditions_controller.js +++ b/app/webpacker/controllers/terms_and_conditions_controller.js @@ -17,10 +17,7 @@ export default class extends ApplicationController { let confirmation = confirm(this.messageValue); if (confirmation) { location.hash = ""; - this.stimulate( - "EnterpriseEdit#remove_terms_and_conditions", - event.target - ); + this.stimulate("EnterpriseEdit#remove_terms_and_conditions", event.target); } } diff --git a/app/webpacker/controllers/toggle_control_controller.js b/app/webpacker/controllers/toggle_control_controller.js index a6e48cd236..97fbf47ce2 100644 --- a/app/webpacker/controllers/toggle_control_controller.js +++ b/app/webpacker/controllers/toggle_control_controller.js @@ -1,6 +1,6 @@ import { Controller } from "stimulus"; -const BUTTON_TYPES = ['submit', 'button']; +const BUTTON_TYPES = ["submit", "button"]; // Toggle state of a control based on a condition. // @@ -65,7 +65,7 @@ export default class extends Controller { #toggleDisplay(show) { this.controlTargets.forEach((target) => { - target.style.display = (show ? "block" : "none"); + target.style.display = show ? "block" : "none"; }); // Focus first when displayed @@ -83,6 +83,6 @@ export default class extends Controller { #focusFieldControl() { const control = this.controlTargets[0]; const isButton = BUTTON_TYPES.includes(control.type); - if(!isButton) control.focus(); + if (!isButton) control.focus(); } } diff --git a/app/webpacker/controllers/trixeditor_controller.js b/app/webpacker/controllers/trixeditor_controller.js index e386352361..937bb34196 100644 --- a/app/webpacker/controllers/trixeditor_controller.js +++ b/app/webpacker/controllers/trixeditor_controller.js @@ -20,7 +20,7 @@ export default class extends Controller { #trixActionInvoke = (event) => { if (event.actionName === "hr") { this.element.editor.insertAttachment( - new Trix.Attachment({ content: "
", contentType: "text/html" }) + new Trix.Attachment({ content: "
", contentType: "text/html" }), ); } }; @@ -39,7 +39,7 @@ export default class extends Controller { const button_html = ` `; const buttonGroup = this.element.toolbarElement.querySelector( - ".trix-button-group--block-tools" + ".trix-button-group--block-tools", ); buttonGroup.insertAdjacentHTML("beforeend", button_html); buttonGroup.querySelector(".trix-button--icon-hr").addEventListener("click", (event) => { diff --git a/app/webpacker/controllers/unsaved_changes_controller.js b/app/webpacker/controllers/unsaved_changes_controller.js index afdb7ea8eb..b002403110 100644 --- a/app/webpacker/controllers/unsaved_changes_controller.js +++ b/app/webpacker/controllers/unsaved_changes_controller.js @@ -34,11 +34,9 @@ import { Controller } from "stimulus"; export default class extends Controller { connect() { // add onChange event to all form element - this.element - .querySelectorAll("input, select, textarea") - .forEach((input) => { - input.addEventListener("change", this.formIsChanged.bind(this)); - }); + this.element.querySelectorAll("input, select, textarea").forEach((input) => { + input.addEventListener("change", this.formIsChanged.bind(this)); + }); this.element.addEventListener("submit", this.handleSubmit.bind(this)); diff --git a/app/webpacker/css/admin/components/stripe_connect_button.scss b/app/webpacker/css/admin/components/stripe_connect_button.scss index 7f1dd864a8..9c70eefea4 100644 --- a/app/webpacker/css/admin/components/stripe_connect_button.scss +++ b/app/webpacker/css/admin/components/stripe_connect_button.scss @@ -21,7 +21,11 @@ a.stripe-connect { line-height: 30px; color: white; font-weight: bold; - font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + font-family: + Helvetica Neue, + Helvetica, + Arial, + sans-serif; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); border-radius: 3px; diff --git a/app/webpacker/css/admin/order_cycles.scss b/app/webpacker/css/admin/order_cycles.scss index ace5c65498..134a87fa0a 100644 --- a/app/webpacker/css/admin/order_cycles.scss +++ b/app/webpacker/css/admin/order_cycles.scss @@ -63,6 +63,6 @@ form.order_cycle { } } -#linked-order-warning-modal .reveal-modal{ +#linked-order-warning-modal .reveal-modal { width: 28rem; -} \ No newline at end of file +} diff --git a/app/webpacker/css/admin/plugins/font-awesome.scss b/app/webpacker/css/admin/plugins/font-awesome.scss index d4f8f5533c..4e839f3438 100644 --- a/app/webpacker/css/admin/plugins/font-awesome.scss +++ b/app/webpacker/css/admin/plugins/font-awesome.scss @@ -28,7 +28,8 @@ @font-face { font-family: "FontAwesome"; src: url("../fonts/fontawesome-webfont.eot?v=3.2.1"); - src: url("../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"), + src: + url("../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=3.2.1") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=3.2.1") format("truetype"), url("../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg"); diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 9944f515af..4dd6331775 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -184,8 +184,9 @@ } // Hide columns - $columns: "image", "name", "sku", "unit_scale", "unit", "price", "on_hand", "producer", - "category", "tax_category", "tags", "inherits_properties"; + $columns: + "image", "name", "sku", "unit_scale", "unit", "price", "on_hand", "producer", "category", + "tax_category", "tags", "inherits_properties"; @each $col in $columns { &.hide-#{$col} { .col-#{$col} { diff --git a/app/webpacker/css/admin/reports.scss b/app/webpacker/css/admin/reports.scss index efe6979cbf..4d3e44f18c 100644 --- a/app/webpacker/css/admin/reports.scss +++ b/app/webpacker/css/admin/reports.scss @@ -67,7 +67,8 @@ table.report__table { #report-table { margin-bottom: 4em; - .loading, .download { + .loading, + .download { text-align: center; height: 2em; padding: 4em; diff --git a/app/webpacker/css/admin_v3/components/dropdown.scss b/app/webpacker/css/admin_v3/components/dropdown.scss index 6f8bd99c8a..93d1bb6129 100644 --- a/app/webpacker/css/admin_v3/components/dropdown.scss +++ b/app/webpacker/css/admin_v3/components/dropdown.scss @@ -187,7 +187,6 @@ font-size: 13px; } - &[open] >, details[open] > { summary:after { diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss index 49540120be..bba1cc6037 100644 --- a/app/webpacker/css/admin_v3/components/select2.scss +++ b/app/webpacker/css/admin_v3/components/select2.scss @@ -1,7 +1,7 @@ .select2-container { border: $border-input; border-radius: $border-radius; - padding-bottom: 7px; // hack to make the height match other inputs + padding-bottom: 7px; // hack to make the height match other inputs } .select2-container { diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss index b8fe640c64..67b28dd0c2 100644 --- a/app/webpacker/css/admin_v3/components/tom_select.scss +++ b/app/webpacker/css/admin_v3/components/tom_select.scss @@ -184,7 +184,7 @@ height: auto; min-height: 0; - .ts-control { + .ts-control { padding: ($vpadding-txt - 1px) ($hpadding-txt - 1px); // Minus 1px for border height: auto; @@ -227,7 +227,8 @@ // Display as "changed" if sibling select is marked as changed. select.changed + .ts-wrapper { - &.single, &.multi { + &.single, + &.multi { .ts-control { border-color: $color-txt-changed-brd; } diff --git a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss index f52b935619..e1642f4d21 100644 --- a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss +++ b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss @@ -195,7 +195,6 @@ div.dashboard_item { &:focus { border-color: $color-btn-hover-bg; } - } &:hover { diff --git a/app/webpacker/css/admin_v3/pages/_unit_popout.scss b/app/webpacker/css/admin_v3/pages/_unit_popout.scss index 475bc9bcd2..696998bc20 100644 --- a/app/webpacker/css/admin_v3/pages/_unit_popout.scss +++ b/app/webpacker/css/admin_v3/pages/_unit_popout.scss @@ -1,4 +1,4 @@ -// Popout widget +// Popout widget @mixin unit_popout { position: relative; @@ -84,4 +84,3 @@ } } } - diff --git a/app/webpacker/css/admin_v3/pages/dfc_product_imports.scss b/app/webpacker/css/admin_v3/pages/dfc_product_imports.scss index 4f96a6b3c3..9380b5e207 100644 --- a/app/webpacker/css/admin_v3/pages/dfc_product_imports.scss +++ b/app/webpacker/css/admin_v3/pages/dfc_product_imports.scss @@ -1,4 +1,3 @@ - #dfc_product_imports { // Ensure label reaches to edge of table cell td:has(> label) { @@ -9,4 +8,4 @@ padding: 7px 5px; font-size: inherit; } -} \ No newline at end of file +} diff --git a/app/webpacker/css/admin_v3/pages/edit_variant.scss b/app/webpacker/css/admin_v3/pages/edit_variant.scss index 694c72bd93..01d1a77dd2 100644 --- a/app/webpacker/css/admin_v3/pages/edit_variant.scss +++ b/app/webpacker/css/admin_v3/pages/edit_variant.scss @@ -1,7 +1,6 @@ @import "unit_popout"; #edit_variant { - .popout { @include unit_popout; diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss index a3e2b9fb76..e9631328e3 100644 --- a/app/webpacker/css/admin_v3/shared/forms.scss +++ b/app/webpacker/css/admin_v3/shared/forms.scss @@ -21,7 +21,6 @@ textarea { font-size: 14px; line-height: 22px; - // Appears just like other text on the page. // See table.products tr:hover for example of revealing them .naked_inputs & { diff --git a/app/webpacker/css/admin_v3/shared/layout.scss b/app/webpacker/css/admin_v3/shared/layout.scss index 7950b4b711..ce532052de 100644 --- a/app/webpacker/css/admin_v3/shared/layout.scss +++ b/app/webpacker/css/admin_v3/shared/layout.scss @@ -134,6 +134,6 @@ // Text Colors .black-text { - color: $near-black + color: $near-black; } //------------ diff --git a/app/webpacker/js/matomo.js b/app/webpacker/js/matomo.js index e6ba5facf4..8669be904d 100644 --- a/app/webpacker/js/matomo.js +++ b/app/webpacker/js/matomo.js @@ -1,10 +1,13 @@ // Call Matomo on asynchronous page loads ["turbo:load", "ujs:afterMorph"].forEach((listener) => document.addEventListener(listener, (event) => { - if (typeof event?.detail?.timing === "object" && Object.keys(event?.detail?.timing).length === 0) { + if ( + typeof event?.detail?.timing === "object" && + Object.keys(event?.detail?.timing).length === 0 + ) { return; } - window._mtm?.push({ "event": "mtm.PageView" }); - }) + window._mtm?.push({ event: "mtm.PageView" }); + }), ); diff --git a/app/webpacker/packs/admin.js b/app/webpacker/packs/admin.js index 1625ce11bb..abff631679 100644 --- a/app/webpacker/packs/admin.js +++ b/app/webpacker/packs/admin.js @@ -19,4 +19,3 @@ document.addEventListener("trix-before-initialize", (event) => { document.addEventListener("trix-file-accept", (event) => { event.preventDefault(); }); - diff --git a/spec/javascripts/application_spec.js b/spec/javascripts/application_spec.js index 76e961e315..52706fa692 100644 --- a/spec/javascripts/application_spec.js +++ b/spec/javascripts/application_spec.js @@ -14,6 +14,6 @@ //= require handlebars //= require jquery2 -angular.module('templates', []) -angular.module('uiGmapgoogle-maps', []); -angular.module('duScroll', []); +angular.module("templates", []); +angular.module("uiGmapgoogle-maps", []); +angular.module("duScroll", []); diff --git a/spec/javascripts/services/variant_unit_manager_test.js b/spec/javascripts/services/variant_unit_manager_test.js index cfd9c6f376..f89ee7a7cd 100644 --- a/spec/javascripts/services/variant_unit_manager_test.js +++ b/spec/javascripts/services/variant_unit_manager_test.js @@ -4,27 +4,33 @@ import VariantUnitManager from "../../../app/webpacker/js/services/variant_unit_manager"; -describe("VariantUnitManager", function() { +describe("VariantUnitManager", function () { let subject; - describe("with default units", function() { + describe("with default units", function () { beforeAll(() => { // Requires global var from page global.ofn_available_units_sorted = { - "weight":{ - "1.0":{"name":"g","system":"metric"},"28.35":{"name":"oz","system":"imperial"},"453.6":{"name":"lb","system":"imperial"},"1000.0":{"name":"kg","system":"metric"},"1000000.0":{"name":"T","system":"metric"} + weight: { + "1.0": { name: "g", system: "metric" }, + 28.35: { name: "oz", system: "imperial" }, + 453.6: { name: "lb", system: "imperial" }, + "1000.0": { name: "kg", system: "metric" }, + "1000000.0": { name: "T", system: "metric" }, }, - "volume":{ - "0.001":{"name":"mL","system":"metric"},"1.0":{"name":"L","system":"metric"},"1000.0":{"name":"kL","system":"metric"} + volume: { + 0.001: { name: "mL", system: "metric" }, + "1.0": { name: "L", system: "metric" }, + "1000.0": { name: "kL", system: "metric" }, }, }; - }) + }); beforeEach(() => { subject = new VariantUnitManager(); - }) + }); - describe("getUnitName", function() { - it("returns the unit name based on the scale and unit type (weight/volume) provided", function() { + describe("getUnitName", function () { + it("returns the unit name based on the scale and unit type (weight/volume) provided", function () { expect(subject.getUnitName(1, "weight")).toEqual("g"); expect(subject.getUnitName(1000, "weight")).toEqual("kg"); expect(subject.getUnitName(1000000, "weight")).toEqual("T"); @@ -36,8 +42,8 @@ describe("VariantUnitManager", function() { }); }); - describe("compatibleUnitScales", function() { - it("returns a sorted set of compatible scales based on the scale and unit type provided", function() { + describe("compatibleUnitScales", function () { + it("returns a sorted set of compatible scales based on the scale and unit type provided", function () { expect(subject.compatibleUnitScales(1, "weight")).toEqual([1.0, 1000.0, 1000000.0]); expect(subject.compatibleUnitScales(453.6, "weight")).toEqual([28.35, 453.6]); expect(subject.compatibleUnitScales(0.001, "volume")).toEqual([0.001, 1.0, 1000.0]); @@ -45,28 +51,31 @@ describe("VariantUnitManager", function() { }); }); - describe("should only load available units", function() { + describe("should only load available units", function () { beforeAll(() => { // Available units: "g,T,mL,L,kL,lb" global.ofn_available_units_sorted = { - "weight":{ - "1.0":{"name":"g","system":"metric"},"453.6":{"name":"lb","system":"imperial"},"1000000.0":{"name":"T","system":"metric"} + weight: { + "1.0": { name: "g", system: "metric" }, + 453.6: { name: "lb", system: "imperial" }, + "1000000.0": { name: "T", system: "metric" }, }, - "volume":{ - "0.001":{"name":"mL","system":"metric"},"1.0":{"name":"L","system":"metric"},"1000.0":{"name":"kL","system":"metric"} + volume: { + 0.001: { name: "mL", system: "metric" }, + "1.0": { name: "L", system: "metric" }, + "1000.0": { name: "kL", system: "metric" }, }, }; - }) + }); beforeEach(() => { subject = new VariantUnitManager(); - }) + }); - describe("compatibleUnitScales", function() { - it("returns a sorted set of compatible scales based on the scale and unit type provided", function() { + describe("compatibleUnitScales", function () { + it("returns a sorted set of compatible scales based on the scale and unit type provided", function () { expect(subject.compatibleUnitScales(1, "weight")).toEqual([1.0, 1000000.0]); expect(subject.compatibleUnitScales(453.6, "weight")).toEqual([453.6]); }); }); }); }); - diff --git a/spec/javascripts/stimulus/add_blank_to_link_controller_test.js b/spec/javascripts/stimulus/add_blank_to_link_controller_test.js index 97fdc884e0..b9d7f8860a 100644 --- a/spec/javascripts/stimulus/add_blank_to_link_controller_test.js +++ b/spec/javascripts/stimulus/add_blank_to_link_controller_test.js @@ -17,8 +17,8 @@ describe("AddBlankToLink", () => { }); it("adds target='_blank' to anchor tags", () => { - const anchorTag = document.querySelector('a') - expect(anchorTag.getAttribute('target')).toBe("_blank"); + const anchorTag = document.querySelector("a"); + expect(anchorTag.getAttribute("target")).toBe("_blank"); }); }); }); diff --git a/spec/javascripts/stimulus/checkbox_display_controller_test.js b/spec/javascripts/stimulus/checkbox_display_controller_test.js index 2af8fad59c..ce954bc107 100644 --- a/spec/javascripts/stimulus/checkbox_display_controller_test.js +++ b/spec/javascripts/stimulus/checkbox_display_controller_test.js @@ -24,7 +24,7 @@ describe("CheckboxDisplayController", () => { it("show the content if the checkbox is checked, hide content either", () => { const checkbox = document.getElementById("checkbox"); const content = document.getElementById("content"); - + expect(content.style.display).toBe("none"); checkbox.click(); diff --git a/spec/javascripts/stimulus/checked_controller_test.js b/spec/javascripts/stimulus/checked_controller_test.js index 1018f1ff6d..87b3447a1b 100644 --- a/spec/javascripts/stimulus/checked_controller_test.js +++ b/spec/javascripts/stimulus/checked_controller_test.js @@ -39,13 +39,13 @@ describe("CheckedController", () => { expect(checkboxA.checked).toBe(false); expect(checkboxB.checked).toBe(false); - selectAllCheckbox.click() + selectAllCheckbox.click(); expect(selectAllCheckbox.checked).toBe(true); expect(checkboxA.checked).toBe(true); expect(checkboxB.checked).toBe(true); - selectAllCheckbox.click() + selectAllCheckbox.click(); expect(selectAllCheckbox.checked).toBe(false); expect(checkboxA.checked).toBe(false); @@ -58,18 +58,18 @@ describe("CheckedController", () => { const selectAllCheckbox = document.getElementById("selectAllCheckbox"); const checkboxA = document.getElementById("checkboxA"); const checkboxB = document.getElementById("checkboxB"); - checkboxA.click() + checkboxA.click(); expect(selectAllCheckbox.checked).toBe(false); expect(checkboxA.checked).toBe(true); expect(checkboxB.checked).toBe(false); - checkboxB.click() + checkboxB.click(); expect(selectAllCheckbox.checked).toBe(true); expect(checkboxA.checked).toBe(true); expect(checkboxB.checked).toBe(true); - checkboxB.click() + checkboxB.click(); expect(selectAllCheckbox.checked).toBe(false); expect(checkboxA.checked).toBe(true); diff --git a/spec/javascripts/stimulus/dropdown_controller_test.js b/spec/javascripts/stimulus/dropdown_controller_test.js index 9e8c60c5ed..fbaea23f9b 100644 --- a/spec/javascripts/stimulus/dropdown_controller_test.js +++ b/spec/javascripts/stimulus/dropdown_controller_test.js @@ -34,11 +34,11 @@ describe("Dropdown controller", () => { document.body.innerHTML = ""; }); - it ("hide menu when click outside", () => { + it("hide menu when click outside", () => { const dropdown = document.getElementById("dropdown"); const menu = document.getElementById("menu"); //open the details - dropdown.toggleAttribute('open') + dropdown.toggleAttribute("open"); //click elsewhere document.body.click(); diff --git a/spec/javascripts/stimulus/flash_controller_test.js b/spec/javascripts/stimulus/flash_controller_test.js index 665c07aa47..238792939c 100644 --- a/spec/javascripts/stimulus/flash_controller_test.js +++ b/spec/javascripts/stimulus/flash_controller_test.js @@ -15,7 +15,6 @@ describe("FlashController", () => { document.body.innerHTML = `
`; - }); describe("autoClose", () => { diff --git a/spec/javascripts/stimulus/help_modal_controller_test.js b/spec/javascripts/stimulus/help_modal_controller_test.js index 944cdea04c..3d956bd83c 100644 --- a/spec/javascripts/stimulus/help_modal_controller_test.js +++ b/spec/javascripts/stimulus/help_modal_controller_test.js @@ -8,10 +8,10 @@ import help_modal_link_controller from "../../../app/webpacker/controllers/help_ expect.extend({ toBeVisible(element) { - if(element.className.includes("in") && element.style.display == "block") { - return { pass: true } + if (element.className.includes("in") && element.style.display == "block") { + return { pass: true }; } else { - return { pass: false } + return { pass: false }; } }, }); @@ -21,7 +21,7 @@ describe("HelpModalController", () => { const application = Application.start(); application.register("help-modal", help_modal_controller); application.register("help-modal-link", help_modal_link_controller); - jest.useFakeTimers() + jest.useFakeTimers(); }); beforeEach(() => { @@ -54,36 +54,36 @@ describe("HelpModalController", () => { const modal = document.getElementById("modal"); const openLink = document.getElementById("open-link"); const closeLink = document.getElementById("close-link"); - expect(document.body.className).not.toContain("modal-open") - expect(background).not.toBeVisible() - expect(modal).not.toBeVisible() + expect(document.body.className).not.toContain("modal-open"); + expect(background).not.toBeVisible(); + expect(modal).not.toBeVisible(); openLink.click(); jest.runAllTimers(); - expect(document.body.className).toContain("modal-open") - expect(background).toBeVisible() - expect(modal).toBeVisible() + expect(document.body.className).toContain("modal-open"); + expect(background).toBeVisible(); + expect(modal).toBeVisible(); closeLink.click(); jest.runAllTimers(); - expect(document.body.className).not.toContain("modal-open") - expect(background).not.toBeVisible() - expect(modal).not.toBeVisible() + expect(document.body.className).not.toContain("modal-open"); + expect(background).not.toBeVisible(); + expect(modal).not.toBeVisible(); }); it("closes when the escape key is pressed", () => { const modal = document.getElementById("modal"); const openLink = document.getElementById("open-link"); openLink.click(); - jest.runAllTimers() - expect(modal).toBeVisible() + jest.runAllTimers(); + expect(modal).toBeVisible(); - document.dispatchEvent(new KeyboardEvent('keyup', { 'code': 'Escape' })); - jest.runAllTimers() + document.dispatchEvent(new KeyboardEvent("keyup", { code: "Escape" })); + jest.runAllTimers(); - expect(modal).not.toBeVisible() + expect(modal).not.toBeVisible(); }); it("closes when the background is clicked", () => { @@ -91,13 +91,12 @@ describe("HelpModalController", () => { const modal = document.getElementById("modal"); const openLink = document.getElementById("open-link"); openLink.click(); - jest.runAllTimers() - expect(modal).toBeVisible() + jest.runAllTimers(); + expect(modal).toBeVisible(); - background.click() - jest.runAllTimers() + background.click(); + jest.runAllTimers(); - expect(modal).not.toBeVisible() + expect(modal).not.toBeVisible(); }); }); - diff --git a/spec/javascripts/stimulus/popout_controller_test.js b/spec/javascripts/stimulus/popout_controller_test.js index ddb9f5bb8f..830a23dc32 100644 --- a/spec/javascripts/stimulus/popout_controller_test.js +++ b/spec/javascripts/stimulus/popout_controller_test.js @@ -57,7 +57,7 @@ describe("PopoutController", () => { // For some reason this has to be in a separate block beforeEach(() => { button.dispatchEvent(new Event("click")); // Dialog is open - }) + }); it("closes the dialog when click outside", () => { input4.click(); @@ -97,7 +97,7 @@ describe("PopoutController", () => { }); it("doesn't close the dialog when a field is invalid", () => { - input1.value = "" // field is required + input1.value = ""; // field is required input4.click(); expectToBeShown(dialog); @@ -115,8 +115,8 @@ describe("PopoutController", () => { describe("disable update-display", () => { beforeEach(() => { - document.body.innerHTML = htmlTemplate({updateDisplay: "false" }); - }) + document.body.innerHTML = htmlTemplate({ updateDisplay: "false" }); + }); it("doesn't update display value", () => { expect(button.textContent).toBe("On demand"); @@ -133,9 +133,9 @@ describe("PopoutController", () => { }); }); -function htmlTemplate(opts = {updateDisplay: ""}) { +function htmlTemplate(opts = { updateDisplay: "" }) { return ` -
+
` - }) +
`; + }); it("#activate by clicking on tab", () => { - const peakTab = document.getElementById("peek_tab") - const kaTab = document.getElementById("ka_tab") - const booTab = document.getElementById("boo_tab") - const peakPanel = document.getElementById("peek_panel") - const kaPanel = document.getElementById("ka_panel") - const booPanel = document.getElementById("boo_panel") + const peakTab = document.getElementById("peek_tab"); + const kaTab = document.getElementById("ka_tab"); + const booTab = document.getElementById("boo_tab"); + const peakPanel = document.getElementById("peek_panel"); + const kaPanel = document.getElementById("ka_panel"); + const booPanel = document.getElementById("boo_panel"); - expect(peakTab.classList.contains("selected")).toBe(true) - expect(kaTab.classList.contains("selected")).toBe(false) - expect(booTab.classList.contains("selected")).toBe(false) + expect(peakTab.classList.contains("selected")).toBe(true); + expect(kaTab.classList.contains("selected")).toBe(false); + expect(booTab.classList.contains("selected")).toBe(false); - expect(peakPanel.style.display).toBe("block") - expect(kaPanel.style.display).toBe("none") - expect(booPanel.style.display).toBe("none") + expect(peakPanel.style.display).toBe("block"); + expect(kaPanel.style.display).toBe("none"); + expect(booPanel.style.display).toBe("none"); - kaTab.click() + kaTab.click(); - expect(peakTab.classList.contains("selected")).toBe(false) - expect(kaTab.classList.contains("selected")).toBe(true) - expect(booTab.classList.contains("selected")).toBe(false) + expect(peakTab.classList.contains("selected")).toBe(false); + expect(kaTab.classList.contains("selected")).toBe(true); + expect(booTab.classList.contains("selected")).toBe(false); - expect(peakPanel.style.display).toBe("none") - expect(kaPanel.style.display).toBe("block") - expect(booPanel.style.display).toBe("none") - }) + expect(peakPanel.style.display).toBe("none"); + expect(kaPanel.style.display).toBe("block"); + expect(booPanel.style.display).toBe("none"); + }); it("#activateDefaultPanel on orderCycleSelected event", () => { - const peakTab = document.getElementById("peek_tab") - const kaTab = document.getElementById("ka_tab") - const booTab = document.getElementById("boo_tab") - const peakPanel = document.getElementById("peek_panel") - const kaPanel = document.getElementById("ka_panel") - const booPanel = document.getElementById("boo_panel") + const peakTab = document.getElementById("peek_tab"); + const kaTab = document.getElementById("ka_tab"); + const booTab = document.getElementById("boo_tab"); + const peakPanel = document.getElementById("peek_panel"); + const kaPanel = document.getElementById("ka_panel"); + const booPanel = document.getElementById("boo_panel"); - expect(peakTab.classList.contains("selected")).toBe(true) - expect(kaTab.classList.contains("selected")).toBe(false) - expect(booTab.classList.contains("selected")).toBe(false) + expect(peakTab.classList.contains("selected")).toBe(true); + expect(kaTab.classList.contains("selected")).toBe(false); + expect(booTab.classList.contains("selected")).toBe(false); - expect(peakPanel.style.display).toBe("block") - expect(kaPanel.style.display).toBe("none") - expect(booPanel.style.display).toBe("none") + expect(peakPanel.style.display).toBe("block"); + expect(kaPanel.style.display).toBe("none"); + expect(booPanel.style.display).toBe("none"); - kaTab.click() + kaTab.click(); - expect(peakTab.classList.contains("selected")).toBe(false) - expect(kaTab.classList.contains("selected")).toBe(true) - expect(booTab.classList.contains("selected")).toBe(false) + expect(peakTab.classList.contains("selected")).toBe(false); + expect(kaTab.classList.contains("selected")).toBe(true); + expect(booTab.classList.contains("selected")).toBe(false); - expect(peakPanel.style.display).toBe("none") - expect(kaPanel.style.display).toBe("block") - expect(booPanel.style.display).toBe("none") + expect(peakPanel.style.display).toBe("none"); + expect(kaPanel.style.display).toBe("block"); + expect(booPanel.style.display).toBe("none"); - const event = new Event("orderCycleSelected") + const event = new Event("orderCycleSelected"); window.dispatchEvent(event); - expect(peakTab.classList.contains("selected")).toBe(true) - expect(kaTab.classList.contains("selected")).toBe(false) - expect(booTab.classList.contains("selected")).toBe(false) + expect(peakTab.classList.contains("selected")).toBe(true); + expect(kaTab.classList.contains("selected")).toBe(false); + expect(booTab.classList.contains("selected")).toBe(false); - expect(peakPanel.style.display).toBe("block") - expect(kaPanel.style.display).toBe("none") - expect(booPanel.style.display).toBe("none") - }) + expect(peakPanel.style.display).toBe("block"); + expect(kaPanel.style.display).toBe("none"); + expect(booPanel.style.display).toBe("none"); + }); describe("when valid anchor is specified in the url", () => { - const oldWindowLocation = window.location + const oldWindowLocation = window.location; beforeAll(() => { Object.defineProperty(window, "location", { value: new URL("http://example.com/#boo_panel"), configurable: true, - }) - }) + }); + }); afterAll(() => { - delete window.location - window.location = oldWindowLocation - }) + delete window.location; + window.location = oldWindowLocation; + }); it("#activateFromWindowLocationOrDefaultPanelTarget show panel based on anchor", () => { - const peakTab = document.getElementById("peek_tab") - const kaTab = document.getElementById("ka_tab") - const booTab = document.getElementById("boo_tab") - const peakPanel = document.getElementById("peek_panel") - const kaPanel = document.getElementById("ka_panel") - const booPanel = document.getElementById("boo_panel") + const peakTab = document.getElementById("peek_tab"); + const kaTab = document.getElementById("ka_tab"); + const booTab = document.getElementById("boo_tab"); + const peakPanel = document.getElementById("peek_panel"); + const kaPanel = document.getElementById("ka_panel"); + const booPanel = document.getElementById("boo_panel"); - expect(peakTab.classList.contains("selected")).toBe(false) - expect(kaTab.classList.contains("selected")).toBe(false) - expect(booTab.classList.contains("selected")).toBe(true) + expect(peakTab.classList.contains("selected")).toBe(false); + expect(kaTab.classList.contains("selected")).toBe(false); + expect(booTab.classList.contains("selected")).toBe(true); - expect(peakPanel.style.display).toBe("none") - expect(kaPanel.style.display).toBe("none") - expect(booPanel.style.display).toBe("block") - }) - }) + expect(peakPanel.style.display).toBe("none"); + expect(kaPanel.style.display).toBe("none"); + expect(booPanel.style.display).toBe("block"); + }); + }); describe("when non valid anchor is specified in the url", () => { - const oldWindowLocation = window.location + const oldWindowLocation = window.location; beforeAll(() => { Object.defineProperty(window, "location", { value: new URL("http://example.com/#non_valid_panel"), configurable: true, - }) - }) + }); + }); afterAll(() => { - delete window.location - window.location = oldWindowLocation - }) + delete window.location; + window.location = oldWindowLocation; + }); it("#activateFromWindowLocationOrDefaultPanelTarget show default panel", () => { - const peakTab = document.getElementById("peek_tab") - const kaTab = document.getElementById("ka_tab") - const booTab = document.getElementById("boo_tab") - const peakPanel = document.getElementById("peek_panel") - const kaPanel = document.getElementById("ka_panel") - const booPanel = document.getElementById("boo_panel") + const peakTab = document.getElementById("peek_tab"); + const kaTab = document.getElementById("ka_tab"); + const booTab = document.getElementById("boo_tab"); + const peakPanel = document.getElementById("peek_panel"); + const kaPanel = document.getElementById("ka_panel"); + const booPanel = document.getElementById("boo_panel"); - expect(peakTab.classList.contains("selected")).toBe(true) - expect(kaTab.classList.contains("selected")).toBe(false) - expect(booTab.classList.contains("selected")).toBe(false) + expect(peakTab.classList.contains("selected")).toBe(true); + expect(kaTab.classList.contains("selected")).toBe(false); + expect(booTab.classList.contains("selected")).toBe(false); - expect(peakPanel.style.display).toBe("block") - expect(kaPanel.style.display).toBe("none") - expect(booPanel.style.display).toBe("none") - }) - }) -}) + expect(peakPanel.style.display).toBe("block"); + expect(kaPanel.style.display).toBe("none"); + expect(booPanel.style.display).toBe("none"); + }); + }); +}); diff --git a/spec/javascripts/stimulus/tabs_controller_test.js b/spec/javascripts/stimulus/tabs_controller_test.js index fa4ab5d737..3742ee84ad 100644 --- a/spec/javascripts/stimulus/tabs_controller_test.js +++ b/spec/javascripts/stimulus/tabs_controller_test.js @@ -33,19 +33,19 @@ describe("TabsController", () => { }); it("shows the corresponding content when a tab button is clicked", () => { - const dogs_button = document.querySelectorAll('button')[0]; - const cats_button = document.querySelectorAll('button')[1]; - const birds_button = document.querySelectorAll('button')[2]; - const dogs_content = document.querySelectorAll('.content-area')[0]; - const cats_content = document.querySelectorAll('.content-area')[1]; - const birds_content = document.querySelectorAll('.content-area')[2]; + const dogs_button = document.querySelectorAll("button")[0]; + const cats_button = document.querySelectorAll("button")[1]; + const birds_button = document.querySelectorAll("button")[2]; + const dogs_content = document.querySelectorAll(".content-area")[0]; + const cats_content = document.querySelectorAll(".content-area")[1]; + const birds_content = document.querySelectorAll(".content-area")[2]; expect(dogs_content.hidden).toBe(false); expect(cats_content.hidden).toBe(true); expect(birds_content.hidden).toBe(true); - expect(document.querySelectorAll('button.active').length).toBe(1); - expect(document.querySelectorAll('button.active')[0]).toBe(dogs_button); + expect(document.querySelectorAll("button.active").length).toBe(1); + expect(document.querySelectorAll("button.active")[0]).toBe(dogs_button); birds_button.click(); @@ -53,8 +53,8 @@ describe("TabsController", () => { expect(cats_content.hidden).toBe(true); expect(birds_content.hidden).toBe(false); - expect(document.querySelectorAll('button.active').length).toBe(1); - expect(document.querySelectorAll('button.active')[0]).toBe(birds_button); + expect(document.querySelectorAll("button.active").length).toBe(1); + expect(document.querySelectorAll("button.active")[0]).toBe(birds_button); cats_button.click(); @@ -62,8 +62,8 @@ describe("TabsController", () => { expect(cats_content.hidden).toBe(false); expect(birds_content.hidden).toBe(true); - expect(document.querySelectorAll('button.active').length).toBe(1); - expect(document.querySelectorAll('button.active')[0]).toBe(cats_button); + expect(document.querySelectorAll("button.active").length).toBe(1); + expect(document.querySelectorAll("button.active")[0]).toBe(cats_button); }); }); }); diff --git a/spec/javascripts/stimulus/toggle_control_controller_test.js b/spec/javascripts/stimulus/toggle_control_controller_test.js index 12746389e7..adff663ad1 100644 --- a/spec/javascripts/stimulus/toggle_control_controller_test.js +++ b/spec/javascripts/stimulus/toggle_control_controller_test.js @@ -44,17 +44,17 @@ describe("ToggleControlController", () => { }); it("Disables when input is filled", () => { - input.value = "test" + input.value = "test"; input.dispatchEvent(new Event("input")); expect(control.disabled).toBe(true); }); it("Enables when input is emptied", () => { - input.value = "test" + input.value = "test"; input.dispatchEvent(new Event("input")); - input.value = "" + input.value = ""; input.dispatchEvent(new Event("input")); expect(control.disabled).toBe(false); @@ -72,7 +72,7 @@ describe("ToggleControlController", () => { }); it("Enables when input is filled and focuses the control", () => { - input.value = "a" + input.value = "a"; input.dispatchEvent(new Event("input")); expect(control.disabled).toBe(false); @@ -80,10 +80,10 @@ describe("ToggleControlController", () => { }); it("Disables when input is emptied", () => { - input.value = "test" + input.value = "test"; input.dispatchEvent(new Event("input")); - input.value = "" + input.value = ""; input.dispatchEvent(new Event("input")); expect(control.disabled).toBe(true); @@ -100,7 +100,7 @@ describe("ToggleControlController", () => { it("Enables the button control when input is filled, focus remains on input", () => { // Simulating click on input to focus it input.focus(); - input.value = "test" + input.value = "test"; input.dispatchEvent(new Event("input")); expect(control.disabled).toBe(false); @@ -110,16 +110,16 @@ describe("ToggleControlController", () => { it("Disables the button control when input is emptied, focus remains on input", () => { // Simulating click on input to focus it input.focus(); - input.value = "test" + input.value = "test"; input.dispatchEvent(new Event("input")); - input.value = "" + input.value = ""; input.dispatchEvent(new Event("input")); expect(control.disabled).toBe(true); expect(document.activeElement).toBe(input); }); - }) + }); }); describe("#displayIfMatch", () => { @@ -135,14 +135,14 @@ describe("ToggleControlController", () => { }); it("Shows when match is selected", () => { - select.value = "items" + select.value = "items"; select.dispatchEvent(new Event("change")); expect(control.style.display).toBe("block"); }); it("Hides when match is not selected", () => { - select.value = "weight_1" + select.value = "weight_1"; select.dispatchEvent(new Event("change")); expect(control.style.display).toBe("none"); diff --git a/spec/javascripts/stimulus/unsaved_changes_controller_test.js b/spec/javascripts/stimulus/unsaved_changes_controller_test.js index 9379c3745d..6410ba5baf 100644 --- a/spec/javascripts/stimulus/unsaved_changes_controller_test.js +++ b/spec/javascripts/stimulus/unsaved_changes_controller_test.js @@ -2,14 +2,14 @@ * @jest-environment jsdom */ -import { Application } from "stimulus" -import unsaved_changes_controller from "../../../app/webpacker/controllers/unsaved_changes_controller" +import { Application } from "stimulus"; +import unsaved_changes_controller from "../../../app/webpacker/controllers/unsaved_changes_controller"; describe("UnsavedChangesController", () => { beforeAll(() => { - const application = Application.start() - application.register("unsaved-changes", unsaved_changes_controller) - }) + const application = Application.start(); + application.register("unsaved-changes", unsaved_changes_controller); + }); beforeEach(() => { document.body.innerHTML = ` @@ -22,8 +22,8 @@ describe("UnsavedChangesController", () => { - ` - }) + `; + }); describe("#connect", () => { describe("when disable-submit-button is true", () => { @@ -39,15 +39,15 @@ describe("UnsavedChangesController", () => { - ` - }) + `; + }); it("disables any submit button", () => { - const submit = document.getElementById("test-submit") + const submit = document.getElementById("test-submit"); - expect(submit.disabled).toBe(true) - }) - }) + expect(submit.disabled).toBe(true); + }); + }); describe("when disable-submit-button is false", () => { beforeEach(() => { @@ -62,171 +62,171 @@ describe("UnsavedChangesController", () => { - ` - }) + `; + }); it("doesn't disable any submit button", () => { - const submit = document.getElementById("test-submit") + const submit = document.getElementById("test-submit"); - expect(submit.disabled).toBe(false) - }) - }) + expect(submit.disabled).toBe(false); + }); + }); describe("when disable-submit-button is not set", () => { it("doesn't disable any submit button", () => { - const submit = document.getElementById("test-submit") + const submit = document.getElementById("test-submit"); - expect(submit.disabled).toBe(false) - }) - }) - }) + expect(submit.disabled).toBe(false); + }); + }); + }); describe("#formIsChanged", () => { - let checkbox - let submit + let checkbox; + let submit; beforeEach(() => { - checkbox = document.getElementById("test-checkbox") - submit = document.getElementById("test-submit") - }) + checkbox = document.getElementById("test-checkbox"); + submit = document.getElementById("test-submit"); + }); it("changed is set to true", () => { - const form = document.getElementById("test-form") + const form = document.getElementById("test-form"); - checkbox.click() + checkbox.click(); - expect(form.dataset.unsavedChangesChanged).toBe("true") - }) + expect(form.dataset.unsavedChangesChanged).toBe("true"); + }); describe("when disable-submit-button is true", () => { it("enables any submit button", () => { - checkbox.click() + checkbox.click(); - expect(submit.disabled).toBe(false) - }) - }) + expect(submit.disabled).toBe(false); + }); + }); describe("when disable-submit-button is false", () => { it("does nothing", () => { - expect(submit.disabled).toBe(false) + expect(submit.disabled).toBe(false); - checkbox.click() + checkbox.click(); - expect(submit.disabled).toBe(false) - }) - }) - }) + expect(submit.disabled).toBe(false); + }); + }); + }); - describe('#leavingPage', () => { - let checkbox + describe("#leavingPage", () => { + let checkbox; beforeEach(() => { // Add a mock I18n object to - const mockedT = jest.fn() - mockedT.mockImplementation((string) => (string)) + const mockedT = jest.fn(); + mockedT.mockImplementation((string) => string); - global.I18n = { - t: mockedT - } + global.I18n = { + t: mockedT, + }; - checkbox = document.getElementById("test-checkbox") - }) + checkbox = document.getElementById("test-checkbox"); + }); afterEach(() => { - delete global.I18n - }) + delete global.I18n; + }); - describe('when triggering a beforeunload event', () => { + describe("when triggering a beforeunload event", () => { it("triggers leave page pop up when leaving page and form has been interacted with", () => { // interact with the form - checkbox.click() + checkbox.click(); // trigger beforeunload to simulate leaving the page - const beforeunloadEvent = new Event("beforeunload") - window.dispatchEvent(beforeunloadEvent) + const beforeunloadEvent = new Event("beforeunload"); + window.dispatchEvent(beforeunloadEvent); // Test the event returnValue has been set, we don't really care about the value as - // the brower will ignore it - expect(beforeunloadEvent.returnValue).toBeTruthy() - }) - }) + // the brower will ignore it + expect(beforeunloadEvent.returnValue).toBeTruthy(); + }); + }); - describe('when triggering a turbolinks:before-visit event', () => { - let confirmSpy + describe("when triggering a turbolinks:before-visit event", () => { + let confirmSpy; beforeEach(() => { - confirmSpy = jest.spyOn(window, 'confirm') - }) + confirmSpy = jest.spyOn(window, "confirm"); + }); afterEach(() => { // cleanup - confirmSpy.mockRestore() - }) + confirmSpy.mockRestore(); + }); it("triggers a confirm popup up when leaving page and form has been interacted with", () => { - confirmSpy.mockImplementation((msg) => {}) + confirmSpy.mockImplementation((msg) => {}); // interact with the form - checkbox.click() + checkbox.click(); // trigger turbolinks:before-visit to simulate leaving the page - const turbolinkEv = new Event("turbolinks:before-visit") - window.dispatchEvent(turbolinkEv) + const turbolinkEv = new Event("turbolinks:before-visit"); + window.dispatchEvent(turbolinkEv); - expect(confirmSpy).toHaveBeenCalled() - }) + expect(confirmSpy).toHaveBeenCalled(); + }); it("stays on the page if user clicks cancel on the confirm popup", () => { // return false to simulate a user clicking on cancel - confirmSpy.mockImplementation((msg) => (false)) + confirmSpy.mockImplementation((msg) => false); // interact with the form - checkbox.click() + checkbox.click(); // trigger turbolinks:before-visit to simulate leaving the page - const turbolinkEv = new Event("turbolinks:before-visit") - const preventDefaultSpy = jest.spyOn(turbolinkEv, 'preventDefault') + const turbolinkEv = new Event("turbolinks:before-visit"); + const preventDefaultSpy = jest.spyOn(turbolinkEv, "preventDefault"); - window.dispatchEvent(turbolinkEv) + window.dispatchEvent(turbolinkEv); - expect(confirmSpy).toHaveBeenCalled() - expect(preventDefaultSpy).toHaveBeenCalled() - }) - }) - }) + expect(confirmSpy).toHaveBeenCalled(); + expect(preventDefaultSpy).toHaveBeenCalled(); + }); + }); + }); - describe('#handleSubmit', () => { - let checkbox + describe("#handleSubmit", () => { + let checkbox; beforeEach(() => { // Add a mock I18n object to - const mockedT = jest.fn() - mockedT.mockImplementation((string) => (string)) + const mockedT = jest.fn(); + mockedT.mockImplementation((string) => string); - global.I18n = { - t: mockedT - } + global.I18n = { + t: mockedT, + }; - checkbox = document.getElementById("test-checkbox") - }) + checkbox = document.getElementById("test-checkbox"); + }); afterEach(() => { - delete global.I18n - }) + delete global.I18n; + }); - describe('when submiting the form', () => { + describe("when submiting the form", () => { it("changed is set to true", () => { - const form = document.getElementById("test-form") + const form = document.getElementById("test-form"); // interact with the form - checkbox.click() + checkbox.click(); - // submit the form - const submitEvent = new Event("submit") - form.dispatchEvent(submitEvent) + // submit the form + const submitEvent = new Event("submit"); + form.dispatchEvent(submitEvent); - expect(form.dataset.unsavedChangesChanged).toBe("false") - }) - }) - }) -}) + expect(form.dataset.unsavedChangesChanged).toBe("false"); + }); + }); + }); +}); diff --git a/spec/support/fixtures/stripejs-mock.js b/spec/support/fixtures/stripejs-mock.js index 42c68f9066..21bc953363 100644 --- a/spec/support/fixtures/stripejs-mock.js +++ b/spec/support/fixtures/stripejs-mock.js @@ -8,7 +8,7 @@ class Element { el = document.querySelector(el); } - el.classList.add('StripeElement'); + el.classList.add("StripeElement"); el.innerHTML = ` @@ -29,31 +29,31 @@ window.Stripe = () => { return { createPaymentMethod: () => { - return new Promise(resolve => { + return new Promise((resolve) => { resolve({ paymentMethod: { id: "pm_123", card: { - brand: 'visa', + brand: "visa", last4: fetchLastFour(), exp_month: "10", - exp_year: "2050" - } - } + exp_year: "2050", + }, + }, }); }); }, elements: () => { return { - create: (type, options) => new Element() + create: (type, options) => new Element(), }; }, - createToken: card => { - return new Promise(resolve => { + createToken: (card) => { + return new Promise((resolve) => { resolve({ token: { id: "tok_123", card: { last4: fetchLastFour() } } }); }); - } + }, }; };