test: re-implement tests using perform

cosmoz-image-viewer.js

@@ -50,6 +50,7 @@ const renderCosmozImageViewer = ({
 	onPrintPdf,
 	detach,
 	detached,
+	syncDetachedState,
 }) =>
 	detached
 		? nothing
@@ -70,8 +71,12 @@ const renderCosmozImageViewer = ({
 					${when(
 						shouldShow(host.showNav, total, 2),
 						() => html`
-							<button class="nav" @click=${previousImage}>${leftArrow}</button>
-							<button class="nav" @click=${nextImage}>${rightArrow}</button>
+							<button class="nav" name="prev" @click=${previousImage}>
+								${leftArrow}
+							</button>
+							<button class="nav" name="next" @click=${nextImage}>
+								${rightArrow}
+							</button>
 						`,
 					)}
 					<div class="flex"></div>
@@ -97,16 +102,28 @@ const renderCosmozImageViewer = ({
 								${launch}
 							</button>`,
 					)}
-					<button
-						class="nav"
-						@click=${onDownloadPdf}
-						title="${_('Download images')}"
-					>
-						${fileDownload}
-					</button>
-					<button class="nav" @click=${onPrintPdf} title="${_('Print images')}">
-						${printFile}
-					</button>
+					${when(
+						shouldShow(true, total),
+						() =>
+							html`<button
+								class="nav"
+								@click=${onDownloadPdf}
+								title="${_('Download images')}"
+							>
+								${fileDownload}
+							</button>`,
+					)}
+					${when(
+						shouldShow(true, total),
+						() =>
+							html`<button
+								class="nav"
+								@click=${onPrintPdf}
+								title="${_('Print images')}"
+							>
+								${printFile}
+							</button>`,
+					)}
 					${when(
 						shouldShow(host.showFullscreen, total),
 						() =>
@@ -147,6 +164,7 @@ const renderCosmozImageViewer = ({
 							@close=${closeFullscreen}
 							.currentImageIndex=${currentImageIndex}
 							@current-image-index-changed=${syncImageIndex}
+							@detached-changed=${syncDetachedState}
 							?show-detach=${host.showDetach}
 							?loop=${host.loop}
 						></cosmoz-image-viewer>`,

lib/hooks/use-cosmoz-image-viewer.js

@@ -64,13 +64,15 @@ const onImageError = (e) => {
 					loop: host.loop,
 					onDetach: () => setDetached(true),
 					onClose: () => setDetached(false),
-				});
+				}),
+			syncDetachedState = (ev) => setDetached(ev.detail.value);
 
 		useNotifyProperty('currentImageIndex', index, [index]);
+
 		useEffect(() => {
 			host.toggleAttribute('hidden', detached);
 		}, [detached]);
-
+		useNotifyProperty('detached', detached, [detached]);
 		useImperativeApi({ syncState: detach }, [detach]);
 
 		return {
@@ -92,6 +94,7 @@ const onImageError = (e) => {
 			onPrintPdf: () => print({ images }),
 			detached,
 			detach,
+			syncDetachedState,
 		};
 	};
 

package.json

@@ -59,7 +59,7 @@
 		}
 	},
 	"dependencies": {
-		"@neovici/cfg": "^1.42.0",
+		"@neovici/cfg": "^1.43.0",
 		"@neovici/cosmoz-i18next": "^3.2.2",
 		"@neovici/cosmoz-slider": "^4.0.0",
 		"@neovici/cosmoz-utils": "^5.0.0",