From fd174382a38d03f31ed62cb91513b7e602711d07 Mon Sep 17 00:00:00 2001 From: Philippe Martin Date: Wed, 29 Nov 2023 10:07:53 +0100 Subject: [PATCH] fix: make ProviderResultPage do not change input values (#5030) Signed-off-by: Philippe Martin --- .../src/lib/ui/ProviderResultPage.spec.ts | 21 ++++------------- .../src/lib/ui/ProviderResultPage.svelte | 23 +++++++------------ .../renderer/src/lib/ui/ProviderResultPage.ts | 1 - 3 files changed, 12 insertions(+), 33 deletions(-) diff --git a/packages/renderer/src/lib/ui/ProviderResultPage.spec.ts b/packages/renderer/src/lib/ui/ProviderResultPage.spec.ts index 969119acc91..374c55931c1 100644 --- a/packages/renderer/src/lib/ui/ProviderResultPage.spec.ts +++ b/packages/renderer/src/lib/ui/ProviderResultPage.spec.ts @@ -1,6 +1,6 @@ import '@testing-library/jest-dom/vitest'; -import { fireEvent, render, screen, within, cleanup } from '@testing-library/svelte'; -import { afterEach, describe, expect, test } from 'vitest'; +import { fireEvent, render, screen, within } from '@testing-library/svelte'; +import { describe, expect, test } from 'vitest'; import ProviderResultPage from './ProviderResultPage.svelte'; import type { CheckUI, ProviderUI } from './ProviderResultPage'; @@ -89,10 +89,6 @@ describe('test ProviderResultPage', async () => { }, ]; - afterEach(() => { - cleanup(); - }); - test('all providers are displayed as running', () => { const checkProviderRunning = (text: string) => { const providerEntry = screen.getByRole('row', { name: text }); @@ -103,6 +99,8 @@ describe('test ProviderResultPage', async () => { expect(spinner).toBeInTheDocument(); }; + providers[0].state = 'running'; + providers[1].state = 'running'; render(ProviderResultPage, { providers: providers, }); @@ -154,11 +152,6 @@ describe('test ProviderResultPage', async () => { await fireEvent.click(cb); results.filter(r => r.provider.id === 'provider1').forEach(result => checkResultNotDisplayed(result)); results.filter(r => r.provider.id === 'provider2').forEach(result => checkResultDisplayed(result)); - // TODO(feloy) This should not be necessary, as component is unmounted between tests - // but it fails to work correctly without it - await fireEvent.click(cb); - results.filter(r => r.provider.id === 'provider1').forEach(result => checkResultDisplayed(result)); - results.filter(r => r.provider.id === 'provider2').forEach(result => checkResultDisplayed(result)); }); test('results from selected providers -1st- only are displayed', async () => { @@ -174,9 +167,6 @@ describe('test ProviderResultPage', async () => { await fireEvent.click(cb); results.filter(r => r.provider.id === 'provider1').forEach(result => checkResultDisplayed(result)); results.filter(r => r.provider.id === 'provider2').forEach(result => checkResultNotDisplayed(result)); - await fireEvent.click(cb); - results.filter(r => r.provider.id === 'provider1').forEach(result => checkResultDisplayed(result)); - results.filter(r => r.provider.id === 'provider2').forEach(result => checkResultDisplayed(result)); }); test('results from selected severities only are displayed', async () => { @@ -191,8 +181,5 @@ describe('test ProviderResultPage', async () => { await fireEvent.click(criticalButton); results.filter(r => r.check.severity === 'critical').forEach(result => checkResultNotDisplayed(result)); results.filter(r => r.check.severity !== 'critical').forEach(result => checkResultDisplayed(result)); - await fireEvent.click(criticalButton); - results.filter(r => r.check.severity === 'critical').forEach(result => checkResultDisplayed(result)); - results.filter(r => r.check.severity !== 'critical').forEach(result => checkResultDisplayed(result)); }); }); diff --git a/packages/renderer/src/lib/ui/ProviderResultPage.svelte b/packages/renderer/src/lib/ui/ProviderResultPage.svelte index 36bab7a1190..3648f46f393 100644 --- a/packages/renderer/src/lib/ui/ProviderResultPage.svelte +++ b/packages/renderer/src/lib/ui/ProviderResultPage.svelte @@ -24,6 +24,8 @@ export let providers: ProviderUI[] = []; export let results: CheckUI[] = []; +let selectedProviders = new Map(); + const selectedSeverities = { critical: true, high: true, @@ -32,8 +34,7 @@ const selectedSeverities = { success: true, }; -$: checkedProviders = getCheckedProviders(providers); -$: resultsFilteredByProvider = getFilteredResultsByProvider(results, checkedProviders); +$: resultsFilteredByProvider = getFilteredResultsByProvider(results, selectedProviders); $: countBySeverity = getCountBySeverity(resultsFilteredByProvider); $: filtered = getFilteredResultsBySeverity(resultsFilteredByProvider, selectedSeverities); @@ -52,10 +53,6 @@ function getIcon(check: ImageCheck): IconDefinition { } } -function getCheckedProviders(providers: ProviderUI[]): string[] { - return providers.filter(p => p.checked === undefined || p.checked).map(p => p.info.id); -} - function getCountBySeverity(results: CheckUI[]) { return results.reduce( (acc, current) => { @@ -80,16 +77,12 @@ function getCountBySeverity(results: CheckUI[]) { } function onProviderChecked(id: string, checked: boolean) { - providers = providers.map(p => { - if (p.info.id === id) { - p.checked = checked; - } - return p; - }); + selectedProviders.set(id, checked); + selectedProviders = selectedProviders; } -function getFilteredResultsByProvider(results: CheckUI[], checkedProviders: string[]): CheckUI[] { - return results.filter(r => checkedProviders.includes(r.provider.id)); +function getFilteredResultsByProvider(results: CheckUI[], checkedProviders: Map): CheckUI[] { + return results.filter(r => checkedProviders.get(r.provider.id) === undefined || checkedProviders.get(r.provider.id)); } function getFilteredResultsBySeverity(results: CheckUI[], selectedSeverities: any) { @@ -175,7 +168,7 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's {#if provider.state === 'success'} + checked="{selectedProviders.get(provider.info.id) ?? true}" /> {/if} {#if provider.error} diff --git a/packages/renderer/src/lib/ui/ProviderResultPage.ts b/packages/renderer/src/lib/ui/ProviderResultPage.ts index 83c0d1b047e..c795e74b1e9 100644 --- a/packages/renderer/src/lib/ui/ProviderResultPage.ts +++ b/packages/renderer/src/lib/ui/ProviderResultPage.ts @@ -5,7 +5,6 @@ export interface ProviderUI { info: ImageCheckerInfo; state: 'running' | 'success' | 'failed' | 'canceled'; error?: Error; - checked?: boolean; } export interface CheckUI {