raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-26 01:33:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13643 from deivid-rodriguez/fix-prettier-issues

Browse Source 
Fix all existing prettier issues
This commit is contained in:
Maikel
2025-10-29 11:36:54 +11:00
committed by GitHub
parent 52174b1e06 852e7fa81e
commit 44cca40db6
64 changed files with 501 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/webpacker/channels/session_channel.js
View File

@@ -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);
},
});

16
app/webpacker/controllers/bulk_actions_controller.js
View File

@@ -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());
}
}

9
app/webpacker/controllers/checked_controller.js
View File

@@ -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) {

24
app/webpacker/controllers/column_preferences_controller.js
View File

@@ -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();
}
}

4
app/webpacker/controllers/csv_select_controller.js
View File

@@ -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() {

1
app/webpacker/controllers/dropdown_controller.js
View File

@@ -2,7 +2,6 @@ import { Controller } from "stimulus";
// Close a <details> 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));

2
app/webpacker/controllers/flash_controller.js
View File

@@ -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 {

4
app/webpacker/controllers/guest_checkout_controller.js
View File

@@ -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);
}
}
}

5
app/webpacker/controllers/input_char_count_controller.js
View File

@@ -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) {

13
app/webpacker/controllers/login_modal_controller.js
View File

@@ -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");

6
app/webpacker/controllers/metadata_toggle_controller.js
View File

@@ -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");
}
}
}
}

15
app/webpacker/controllers/mixins/useRenderCustomer.js
View File

@@ -10,12 +10,8 @@ export const useRenderCustomer = (controller) => {
${
item.bill_address.firstname
? `<strong>${I18n.t("bill_address")}</strong>
${item.bill_address.firstname} ${
item.bill_address.lastname
}<br>
${item.bill_address.address1}, ${
item.bill_address.address2
}<br>
${item.bill_address.firstname} ${item.bill_address.lastname}<br>
${item.bill_address.address1}, ${item.bill_address.address2}<br>
${item.bill_address.city}
<br>
${
@@ -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 `<div class='customer-autocomplete-item'>
<div class='customer-details'><h5>${escape(
item.email
)}</h5></div>
<div class='customer-details'><h5>${escape(item.email)}</h5></div>
</div>`;
},
});

8
app/webpacker/controllers/modal_controller.js
View File

@@ -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);
}
}

2
app/webpacker/controllers/modal_link_controller.js
View File

@@ -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();
}

26
app/webpacker/controllers/open_street_map_controller.js
View File

@@ -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"));
}

53
app/webpacker/controllers/order_cycle_form_controller.js
View File

@@ -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);
}
}
}

14
app/webpacker/controllers/page_alert_controller.js
View File

@@ -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

7
app/webpacker/controllers/paymentmethod_controller.js
View File

@@ -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";

4
app/webpacker/controllers/permalink_controller.js
View File

@@ -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) {

4
app/webpacker/controllers/popout_controller.js
View File

@@ -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"]'));

2
app/webpacker/controllers/primary_details_controller.js
View File

@@ -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) => {

45
app/webpacker/controllers/products_controller.js
View File

@@ -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);
};
}
}

2
app/webpacker/controllers/scoped_channel_controller.js
View File

@@ -12,7 +12,7 @@ export default class extends Controller {
received(data) {
if (data.cableReady) CableReady.perform(data.operations);
},
}
},
);
}

11
app/webpacker/controllers/search-input_controller.js
View File

@@ -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;
}
}

4
app/webpacker/controllers/select_customer_controller.js
View File

@@ -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;

4
app/webpacker/controllers/selector_with_filter_controller.js
View File

@@ -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";
});
};
}

7
app/webpacker/controllers/shippingmethod_controller.js
View File

@@ -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";

2
app/webpacker/controllers/sticky_controller.js
View File

@@ -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);
}

60
app/webpacker/controllers/stripe_controller.js
View File

@@ -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

5
app/webpacker/controllers/terms_and_conditions_controller.js
View File

@@ -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);
}
}

6
app/webpacker/controllers/toggle_control_controller.js
View File

@@ -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();
}
}

4
app/webpacker/controllers/trixeditor_controller.js
View File

@@ -20,7 +20,7 @@ export default class extends Controller {
#trixActionInvoke = (event) => {
if (event.actionName === "hr") {
this.element.editor.insertAttachment(
new Trix.Attachment({ content: "<hr />", contentType: "text/html" })
new Trix.Attachment({ content: "<hr />", contentType: "text/html" }),
);
}
};
@@ -39,7 +39,7 @@ export default class extends Controller {
const button_html = `
<button type="button" class="trix-button trix-button--icon trix-button--icon-hr" data-trix-action="hr" title="Horizontal Rule" tabindex="-1">HR</button>`;
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) => {

8
app/webpacker/controllers/unsaved_changes_controller.js
View File

@@ -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));

6
app/webpacker/css/admin/components/stripe_connect_button.scss
View File

@@ -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;

4
app/webpacker/css/admin/order_cycles.scss
View File

@@ -63,6 +63,6 @@ form.order_cycle {
}
}
#linked-order-warning-modal .reveal-modal{
#linked-order-warning-modal .reveal-modal {
width: 28rem;
}
}

3
app/webpacker/css/admin/plugins/font-awesome.scss vendored
View File

@@ -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");

5
app/webpacker/css/admin/products_v3.scss
View File

@@ -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} {

3
app/webpacker/css/admin/reports.scss
View File

@@ -67,7 +67,8 @@ table.report__table {
#report-table {
margin-bottom: 4em;
.loading, .download {
.loading,
.download {
text-align: center;
height: 2em;
padding: 4em;

1
app/webpacker/css/admin_v3/components/dropdown.scss
View File

@@ -187,7 +187,6 @@
font-size: 13px;
}
&[open] >,
details[open] > {
summary:after {

2
app/webpacker/css/admin_v3/components/select2.scss
View File

@@ -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 {

5
app/webpacker/css/admin_v3/components/tom_select.scss
View File

@@ -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;
}

1
app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
View File

@@ -195,7 +195,6 @@ div.dashboard_item {
&:focus {
border-color: $color-btn-hover-bg;
}
}
&:hover {

3
app/webpacker/css/admin_v3/pages/_unit_popout.scss
View File

@@ -1,4 +1,4 @@
// Popout widget
// Popout widget
@mixin unit_popout {
position: relative;
@@ -84,4 +84,3 @@
}
}
}

3
app/webpacker/css/admin_v3/pages/dfc_product_imports.scss
View File

@@ -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;
}
}
}

1
app/webpacker/css/admin_v3/pages/edit_variant.scss
View File

@@ -1,7 +1,6 @@
@import "unit_popout";
#edit_variant {
.popout {
@include unit_popout;

1
app/webpacker/css/admin_v3/shared/forms.scss
View File

@@ -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 & {

2
app/webpacker/css/admin_v3/shared/layout.scss
View File

@@ -134,6 +134,6 @@
// Text Colors
.black-text {
color: $near-black
color: $near-black;
}
//------------

9
app/webpacker/js/matomo.js
View File

@@ -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" });
}),
);

1
app/webpacker/packs/admin.js
View File

@@ -19,4 +19,3 @@ document.addEventListener("trix-before-initialize", (event) => {
document.addEventListener("trix-file-accept", (event) => {
event.preventDefault();
});

6
spec/javascripts/application_spec.js
View File

@@ -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", []);

53
spec/javascripts/services/variant_unit_manager_test.js
View File

@@ -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]);
});
});
});
});

4
spec/javascripts/stimulus/add_blank_to_link_controller_test.js
View File

@@ -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");
});
});
});

2
spec/javascripts/stimulus/checkbox_display_controller_test.js
View File

@@ -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();

10
spec/javascripts/stimulus/checked_controller_test.js
View File

@@ -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);

4
spec/javascripts/stimulus/dropdown_controller_test.js
View File

@@ -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();

1
spec/javascripts/stimulus/flash_controller_test.js
View File

@@ -15,7 +15,6 @@ describe("FlashController", () => {
document.body.innerHTML = `
<div id="element" data-controller='flash' data-flash-auto-close-value='true'></div>
`;
});
describe("autoClose", () => {

47
spec/javascripts/stimulus/help_modal_controller_test.js
View File

@@ -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();
});
});

12
spec/javascripts/stimulus/popout_controller_test.js
View File

@@ -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 `
<div data-controller="popout" data-popout-update-display-value="${opts['updateDisplay']}">
<div data-controller="popout" data-popout-update-display-value="${opts["updateDisplay"]}">
<button id="button" data-popout-target="button">On demand</button>
<div id="dialog" data-popout-target="dialog" style="display: none;">
<input id="input1" value="value1" required>

16
spec/javascripts/stimulus/stripe_cards_controller_test.js
View File

@@ -28,9 +28,7 @@ describe("StripeCardsController", () => {
const select = document.getElementById("select");
select.value = "";
select.dispatchEvent(new Event("change"));
expect(document.getElementById("stripeelements").style.display).toBe(
"block"
);
expect(document.getElementById("stripeelements").style.display).toBe("block");
});
});
describe("#selectCard", () => {
@@ -39,23 +37,17 @@ describe("StripeCardsController", () => {
select.value = "1";
select.dispatchEvent(new Event("change"));
expect(document.getElementById("stripeelements").style.display).toBe(
"none"
);
expect(document.getElementById("stripeelements").style.display).toBe("none");
expect(document.getElementById("input_1").disabled).toBe(true);
select.value = "2";
select.dispatchEvent(new Event("change"));
expect(document.getElementById("stripeelements").style.display).toBe(
"none"
);
expect(document.getElementById("stripeelements").style.display).toBe("none");
expect(document.getElementById("input_1").disabled).toBe(true);
select.value = "";
select.dispatchEvent(new Event("change"));
expect(document.getElementById("stripeelements").style.display).toBe(
"block"
);
expect(document.getElementById("stripeelements").style.display).toBe("block");
expect(document.getElementById("input_1").disabled).toBe(false);
});
});

188
spec/javascripts/stimulus/tabs_and_panels_controller_test.js
View File

@@ -2,13 +2,13 @@
* @jest-environment jsdom
*/
import { Application } from 'stimulus';
import tabs_and_panels_controller from '../../../app/webpacker/controllers/tabs_and_panels_controller';
import { Application } from "stimulus";
import tabs_and_panels_controller from "../../../app/webpacker/controllers/tabs_and_panels_controller";
describe('TabsAndPanelsController', () => {
describe("TabsAndPanelsController", () => {
beforeAll(() => {
const application = Application.start();
application.register('tabs-and-panels', tabs_and_panels_controller);
application.register("tabs-and-panels", tabs_and_panels_controller);
});
beforeEach(() => {
@@ -21,133 +21,133 @@ describe('TabsAndPanelsController', () => {
<div id="peek_panel" data-tabs-and-panels-target="panel default">Peek me</div>
<div id="ka_panel" data-tabs-and-panels-target="panel">Ka you</div>
<div id="boo_panel" data-tabs-and-panels-target="panel">Boo three</div>
</div>`
})
</div>`;
});
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");
});
});
});

24
spec/javascripts/stimulus/tabs_controller_test.js
View File

@@ -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);
});
});
});

24
spec/javascripts/stimulus/toggle_control_controller_test.js
View File

@@ -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");

212
spec/javascripts/stimulus/unsaved_changes_controller_test.js
View File

@@ -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", () => {
<input id="test-checkbox" type="checkbox" />
<input id="test-submit" type="submit"/>
</form>
`
})
`;
});
describe("#connect", () => {
describe("when disable-submit-button is true", () => {
@@ -39,15 +39,15 @@ describe("UnsavedChangesController", () => {
<input id="test-checkbox" type="checkbox" />
<input id="test-submit" type="submit"/>
</form>
`
})
`;
});
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", () => {
<input id="test-checkbox" type="checkbox" />
<input id="test-submit" type="submit"/>
</form>
`
})
`;
});
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");
});
});
});
});

20
spec/support/fixtures/stripejs-mock.js
View File

@@ -8,7 +8,7 @@ class Element {
el = document.querySelector(el);
}
el.classList.add('StripeElement');
el.classList.add("StripeElement");
el.innerHTML = `
<input id="stripe-cardnumber" name="cardnumber" placeholder="Card number" size="16" type="text">
@@ -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() } } });
});
}
},
};
};