fix(ui): honor the application animation setting globally
This commit is contained in:
Sucukdeluxe
+27
-14
@@ -58,7 +58,6 @@ describe("desktop shell", () => {
|
||||
expect(source.match(/menu-dropdown\$\{openMenu ===/g)).toHaveLength(3);
|
||||
expect(css).toMatch(/\.menu-dropdown\s*\{[^}]*opacity:\s*0;[^}]*transform:\s*translateY\(-8px\);[^}]*visibility:\s*hidden;/s);
|
||||
expect(css).toMatch(/\.menu-dropdown\.is-open\s*\{[^}]*opacity:\s*1;[^}]*transform:\s*translateY\(0\);[^}]*visibility:\s*visible;/s);
|
||||
expect(shellCss).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.md-application-menu-tree \.menu-dropdown\s*\{[^}]*transition-duration:\s*150ms, 180ms, 0s !important;/);
|
||||
});
|
||||
|
||||
it("anchors every top-level application dropdown to the right header edge", () => {
|
||||
@@ -78,7 +77,6 @@ describe("desktop shell", () => {
|
||||
expect(shellCss).toMatch(/\.md-application-menu-tree :where\(\.menu-dropdown, \.menu-submenu-dropdown\)\s*\{[^}]*overflow:\s*visible;/s);
|
||||
expect(shellCss).toMatch(/\.md-application-menu-tree \.menu-submenu-dropdown\s*\{[^}]*right:\s*100%;[^}]*left:\s*auto;[^}]*opacity:\s*0;[^}]*transform:\s*translateX\(8px\);[^}]*visibility:\s*hidden;[^}]*pointer-events:\s*none;[^}]*transition:[^}]*transform 220ms cubic-bezier\(0\.22, 0\.76, 0\.22, 1\)/s);
|
||||
expect(shellCss).toMatch(/\.md-application-menu-tree \.menu-submenu-dropdown\.is-open\s*\{[^}]*opacity:\s*1;[^}]*transform:\s*translateX\(0\);[^}]*visibility:\s*visible;[^}]*pointer-events:\s*auto;/s);
|
||||
expect(shellCss).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.md-application-menu-tree \.menu-submenu-dropdown\s*\{[^}]*transition-duration:\s*0\.01ms !important;[^}]*transition-delay:\s*0s !important;/);
|
||||
});
|
||||
|
||||
it("uses the product asset in the header brand", () => {
|
||||
@@ -101,11 +99,10 @@ describe("desktop shell", () => {
|
||||
expect(html).toContain("data-main-view=\"downloads\"");
|
||||
expect(source).toContain("ResizeObserver");
|
||||
expect(css).toMatch(/\.md-shell-navigation::before\s*\{[^}]*transform:\s*translate3d\(var\(--md-navigation-active-x[^}]*transition:\s*transform 420ms cubic-bezier\(0\.22, 0\.76, 0\.22, 1\), width 420ms cubic-bezier\(0\.22, 0\.76, 0\.22, 1\)/s);
|
||||
expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.md-shell-navigation::before\s*\{[^}]*transition-duration:\s*420ms, 420ms, 420ms, 120ms !important;/);
|
||||
expect(css).toMatch(/\.md-shell-navigation-item\.is-active\s*\{[^}]*background:\s*transparent;/s);
|
||||
});
|
||||
|
||||
it("renders context regions without global placeholders", () => {
|
||||
it("renders context regions without global placeholders", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<AppShell
|
||||
activeView="downloads"
|
||||
@@ -126,9 +123,32 @@ describe("desktop shell", () => {
|
||||
expect(html).toContain("data-ui-region=\"sidebar\"");
|
||||
expect(html).toContain("data-ui-region=\"sidebar-status\"");
|
||||
expect(html).toContain("data-ui-region=\"main\"");
|
||||
expect(html).toContain("1–1 von 1");
|
||||
});
|
||||
|
||||
expect(html).toContain("1–1 von 1");
|
||||
});
|
||||
|
||||
it("uses the explicit application animation setting instead of the Windows motion preference", () => {
|
||||
const renderShell = (animationsEnabled: boolean): string => renderToStaticMarkup(
|
||||
<AppShell
|
||||
activeView="downloads"
|
||||
animationsEnabled={animationsEnabled}
|
||||
onViewChange={() => {}}
|
||||
sidebar={null}
|
||||
sidebarStatus={null}
|
||||
headerActions={null}
|
||||
toolbar={null}
|
||||
footer={null}
|
||||
contextInfo={null}
|
||||
sidebarCollapsed={false}
|
||||
onSidebarCollapsedChange={() => {}}
|
||||
>
|
||||
<div>Downloads</div>
|
||||
</AppShell>
|
||||
);
|
||||
|
||||
expect(renderShell(true)).toContain("is-runtime-motion-enabled");
|
||||
expect(renderShell(false)).toContain("is-runtime-motion-disabled");
|
||||
});
|
||||
|
||||
it("does not reserve a collapsed sidebar column when sidebar slots are empty", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<AppShell
|
||||
@@ -186,13 +206,6 @@ describe("desktop shell", () => {
|
||||
expect(shellCss).toMatch(/\.md-shell-sidebar:hover \.md-shell-sidebar-toggle,\s*\.md-shell-sidebar\.is-collapsed \.md-shell-sidebar-toggle,\s*\.md-shell-sidebar-toggle:focus-visible\s*\{[^}]*opacity:\s*1;/s);
|
||||
});
|
||||
|
||||
it("keeps the explicitly requested sidebar motion active when Windows animations are disabled", () => {
|
||||
const shellCss = readFileSync(new URL("../src/renderer/shell/shell.css", import.meta.url), "utf8");
|
||||
|
||||
expect(shellCss).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.md-shell-workspace\s*\{[^}]*transition-duration:\s*520ms !important;/s);
|
||||
expect(shellCss).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.md-shell-sidebar-panel\s*\{[^}]*transition-duration:\s*260ms, 520ms, 0s !important;/s);
|
||||
});
|
||||
|
||||
it("keeps every view sidebar on the same content axis", () => {
|
||||
const shellCss = readFileSync(new URL("../src/renderer/shell/shell.css", import.meta.url), "utf8").replaceAll("\r\n", "\n");
|
||||
|
||||
|
||||
@@ -98,7 +98,6 @@ describe("Downloadtabellen-Spalten", () => {
|
||||
expect(css).toMatch(/\.downloads-table\.is-column-drag-active \[data-download-column\]\s*\{[^}]*transform:\s*translate3d\(var\(--downloads-column-drag-x, 0px\), 0, 0\);[^}]*transition:\s*transform 220ms/s);
|
||||
expect(css).toMatch(/\.downloads-table\.is-column-drag-active \[data-column-dragging="true"\]\s*\{[^}]*transition:\s*none;/s);
|
||||
expect(css).not.toMatch(/\.downloads-table\.is-column-drag-active \[data-column-dragging="true"\]\s*\{[^}]*background:/s);
|
||||
expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.downloads-table\.is-column-drag-active \[data-download-column\][^{]*\{[^}]*transition-duration:\s*220ms !important;/s);
|
||||
});
|
||||
|
||||
it("changes package collapse state only through user actions", () => {
|
||||
@@ -334,8 +333,8 @@ describe("virtualisierte Paketanimation", () => {
|
||||
const css = fs.readFileSync(path.join(process.cwd(), "src/renderer/views/downloads/downloads.css"), "utf8");
|
||||
|
||||
expect(DOWNLOAD_DISCLOSURE_DURATION_MS).toBe(1500);
|
||||
expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.downloads-virtual-spacer\s*\{[^}]*transition-duration:\s*1500ms !important;/s);
|
||||
expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.downloads-virtual-row\s*\{[^}]*transition-duration:\s*1500ms, 1500ms, 1500ms !important;/s);
|
||||
expect(css).toMatch(/\.downloads-virtual-spacer\s*\{[^}]*transition:\s*height 1500ms/s);
|
||||
expect(css).toMatch(/\.downloads-virtual-row\s*\{[^}]*transition:\s*height 1500ms[^}]*transform 1500ms[^}]*opacity 1500ms/s);
|
||||
});
|
||||
|
||||
it("schneidet beim Einfahren den gemeinsamen Paketbereich ab statt Unterzeilen zusammenzuziehen", () => {
|
||||
|
||||
@@ -500,14 +500,14 @@ describe("bandwidth chart palette", () => {
|
||||
expect(palette).toEqual({ accent: "rgb(74, 222, 128)" });
|
||||
});
|
||||
|
||||
it("labels the live chart and slows redraws when reduced motion is requested", () => {
|
||||
it("labels the live chart and follows the explicit application animation setting", () => {
|
||||
const source = readFileSync(new URL("../src/renderer/App.tsx", import.meta.url), "utf8");
|
||||
const chartBlock = source.slice(source.indexOf("const BandwidthChart"), source.indexOf("interface DownloadSpeedSparklineProps"));
|
||||
|
||||
expect(chartBlock).toContain('role="img"');
|
||||
expect(chartBlock).toContain('aria-label="Bandbreitenverlauf der letzten 60 Sekunden"');
|
||||
expect(chartBlock).toContain('window.matchMedia("(prefers-reduced-motion: reduce)")');
|
||||
expect(chartBlock).toContain("reducedMotion ? 1000 : 250");
|
||||
expect(chartBlock).toContain("animationsEnabled ? 250 : 1000");
|
||||
expect(chartBlock).not.toContain("prefers-reduced-motion");
|
||||
});
|
||||
|
||||
it("asks for confirmation before deleting all saved download statistics", () => {
|
||||
|
||||
Reference in New Issue
Block a user