Setup main PreviewController unit tests

Test loading the last device size from localStorage

Ensure selected device size class is applied on connect

Add test for using ResizeObserver in PreviewController

Add tests for default PreviewController behaviour

Add test for opening preview in a new tab

Add test for handling a request error when opening preview in a new tab

Add test for showing the spinner when loading the preview

Add test for enforcing rendered preview width when there are errors

Split PreviewController tests into separate describe blocks

Use fake timers for all PreviewController tests

Add more detailed assertions in initializeOpenedPanel

Add assertions for setTimeout in PreviewController test

Add test for auto-update cycle

Add test for disabling auto update on panel close

Add tests for manually updating the preview

Add tests for switching preview modes

Only add the mode select element for these tests, to ensure that the
preview panel works even without it (e.g. for models that only define a
single preview mode)

Add tests for PreviewController.disconnect and for requiring the url value

Add test for assuming the first size input is the default

Add ResizeObserver test for preview controller

Reuse url variable in PreviewController tests
pull/12295/head
Sage Abdullah 2024-04-07 01:54:36 +07:00 zatwierdzone przez LB (Ben Johnston)
rodzic 0b14ae31dc
commit 054e72b4c2
2 zmienionych plików z 1554 dodań i 11 usunięć

Wyświetl plik

@ -204,12 +204,20 @@ export class PreviewController extends Controller<HTMLElement> {
const deviceWidth = target.dataset.deviceWidth;
this.setPreviewWidth(deviceWidth);
this.applySelectedSizeClass(device);
try {
localStorage.setItem(this.deviceLocalStorageKeyValue, device);
} catch (e) {
// Skip saving the device if localStorage fails.
}
}
/**
* Applies the selected size class to the specified device input's label, and
* removes the class from all other device inputs' labels.
* @param device Selected device name
*/
applySelectedSizeClass(device: string) {
// Ensure only one selected class is applied
this.sizeTargets.forEach((input) => {
// The <input> is invisible and we're using a <label> parent to style it.
@ -582,5 +590,9 @@ export class PreviewController extends Controller<HTMLElement> {
this.sizeTargets.find((input) => input.value === lastDevice) ||
this.defaultSizeInput;
lastDeviceInput.click();
// If lastDeviceInput resolves to the defaultSizeInput, the click event will
// not trigger the togglePreviewSize method, so we need to apply the
// selected size class manually.
this.applySelectedSizeClass(lastDeviceInput.value);
}
}