fix: make ProviderResultPage do not change input values (#5030)

Signed-off-by: Philippe Martin <phmartin@redhat.com>
This commit is contained in:
Philippe Martin 2023-11-29 10:07:53 +01:00 committed by GitHub
parent 67c96de94e
commit fd174382a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 33 deletions

View file

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

View file

@ -24,6 +24,8 @@ export let providers: ProviderUI[] = [];
export let results: CheckUI[] = [];
let selectedProviders = new Map<string, boolean>();
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<string, boolean>): 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'}
<SlideToggle
on:checked="{event => onProviderChecked(provider.info.id, event.detail)}"
checked="{provider.checked ?? true}" />
checked="{selectedProviders.get(provider.info.id) ?? true}" />
{/if}
</div>
{#if provider.error}

View file

@ -5,7 +5,6 @@ export interface ProviderUI {
info: ImageCheckerInfo;
state: 'running' | 'success' | 'failed' | 'canceled';
error?: Error;
checked?: boolean;
}
export interface CheckUI {