Skip to content

Commit

Permalink
[ALS-7776] Enforce gene req for genomic filters (#284)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JamesPeck
JamesPeck authored Nov 1, 2024
1 parent cc7ec02 commit e6aac9b
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 5 deletions.
10 changes: 6 additions & 4 deletions src/routes/(picsure)/(authorized)/explorer/genome-filter/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@
import { Option } from '$lib/models/GenomeFilter';
import {
selectedGenes,
selectedFrequency,
consequences,
clearGeneFilters,
generateGenomicFilter,
populateFromGeneFilter,
Expand Down Expand Up @@ -67,8 +65,7 @@
}
$: canComplete =
(selectedOption === Option.Genomic &&
($selectedGenes.length > 0 || $selectedFrequency.length > 0 || $consequences.length > 0)) ||
(selectedOption === Option.Genomic && $selectedGenes.length > 0) ||
(selectedOption === Option.SNP && $selectedSNPs.length > 0);
</script>

Expand Down Expand Up @@ -111,6 +108,11 @@
data-testid="add-filter-btn"
type="button"
class="btn btn-sm variant-filled-primary text-lg disabled:opacity-75"
title={canComplete
? 'Add Filter'
: selectedOption === Option.Genomic
? 'A gene is required'
: 'A SNP is required'}
on:click={onComplete}
disabled={!canComplete}
>
Expand Down
150 changes: 149 additions & 1 deletion tests/routes/explorer/genomic-filter/gene-test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,45 @@ userTest.describe('Gene selection', () => {
await expect(selectedContainer.getByLabel(geneValues.results[0])).not.toBeVisible();
await expect(optionsContainer.getByLabel(geneValues.results[0])).toBeVisible();
});
userTest('Selecting a gene enables add filter button', async ({ page }) => {
// Given
await page.goto(mockLoginResponse);
await page.waitForURL('/');
await page.locator('#nav-link-explorer').click();
await page.waitForURL('/explorer');
await page.getByTestId('genomic-filter-btn').click();
await page.getByTestId('gene-variant-option').click();

const optionsContainer = page.locator('#options-container');
const selectedContainer = page.locator('#selected-options-container');

// When
await optionsContainer.getByLabel(geneValues.results[0]).click();

// Then
await expect(selectedContainer.getByLabel(geneValues.results[0])).toBeVisible();
await expect(page.getByTestId('add-filter-btn')).toBeEnabled();
});
userTest('Unselecting a gene disables add filter button', async ({ page }) => {
// Given
await page.goto(mockLoginResponse);
await page.waitForURL('/');
await page.locator('#nav-link-explorer').click();
await page.waitForURL('/explorer');
await page.getByTestId('genomic-filter-btn').click();
await page.getByTestId('gene-variant-option').click();

const optionsContainer = page.locator('#options-container');
const selectedContainer = page.locator('#selected-options-container');

// When
await optionsContainer.getByLabel(geneValues.results[0]).click();
await expect(page.getByTestId('add-filter-btn')).toBeEnabled();

// Then
await selectedContainer.getByLabel(geneValues.results[0]).click();
await expect(page.getByTestId('add-filter-btn')).not.toBeEnabled();
});
});
userTest.describe('Frequency selection', () => {
userTest('Frequency Help', async ({ page }) => {
Expand All @@ -123,6 +162,48 @@ userTest.describe('Frequency selection', () => {
branding?.help?.popups?.genomicFilter?.frequency,
);
});
userTest(
'If only a frequency is selected, the add filter button is disabled',
async ({ page }) => {
// Given
await page.goto(mockLoginResponse);
await page.waitForURL('/');
await page.locator('#nav-link-explorer').click();
await page.waitForURL('/explorer');
await page.getByTestId('genomic-filter-btn').click();
await page.getByTestId('gene-variant-option').click();

// When
await page.getByTestId('select-variant-frequency').getByLabel('Rare').click();

// Then
await expect(page.getByTestId('add-filter-btn')).not.toBeEnabled();
},
);
userTest(
'If only a frequency is selected, the add filter button is disabled, but then adding a gene enables it',
async ({ page }) => {
// Given
await page.goto(mockLoginResponse);
await page.waitForURL('/');
await page.locator('#nav-link-explorer').click();
await page.waitForURL('/explorer');
await page.getByTestId('genomic-filter-btn').click();
await page.getByTestId('gene-variant-option').click();

// When
await page.getByTestId('select-variant-frequency').getByLabel('Rare').click();

// Then
await expect(page.getByTestId('add-filter-btn')).not.toBeEnabled();

// When
await page.getByLabel(geneValues.results[0]).click();

// Then
await expect(page.getByTestId('add-filter-btn')).toBeEnabled();
},
);
});
userTest.describe('Consequnce selection', () => {
userTest('Consequnce Help', async ({ page }) => {
Expand Down Expand Up @@ -189,6 +270,55 @@ userTest.describe('Consequnce selection', () => {
await expect(child).toBeChecked();
await expect(sibling).not.toBeChecked();
});
userTest('When a gene is not selected, the add filter button is disabled', async ({ page }) => {
// Given
await page.goto(mockLoginResponse);
await page.waitForURL('/');
await page.locator('#nav-link-explorer').click();
await page.waitForURL('/explorer');
await page.getByTestId('genomic-filter-btn').click();
await page.getByTestId('gene-variant-option').click();

const consPanel = page.getByTestId('select-calculated-consequence');
const parentNode = consPanel.getByRole('treeitem', { name: 'High Severity' });
const child = consPanel.getByRole('treeitem', { name: 'stop_lost' }).getByRole('checkbox');
// When
await parentNode.click();
await child.click();

// Then
await expect(child).toBeChecked();
await expect(page.getByTestId('add-filter-btn')).not.toBeEnabled();
});
userTest(
'When a gene is not selected, the add filter button is disabled, but then adding a gene enables it',
async ({ page }) => {
// Given
await page.goto(mockLoginResponse);
await page.waitForURL('/');
await page.locator('#nav-link-explorer').click();
await page.waitForURL('/explorer');
await page.getByTestId('genomic-filter-btn').click();
await page.getByTestId('gene-variant-option').click();

const consPanel = page.getByTestId('select-calculated-consequence');
const parentNode = consPanel.getByRole('treeitem', { name: 'High Severity' });
const child = consPanel.getByRole('treeitem', { name: 'stop_lost' }).getByRole('checkbox');
// When
await parentNode.click();
await child.click();

// Then
await expect(child).toBeChecked();
await expect(page.getByTestId('add-filter-btn')).not.toBeEnabled();

// When
await page.getByLabel(geneValues.results[0]).click();

// Then
await expect(page.getByTestId('add-filter-btn')).toBeEnabled();
},
);
});
userTest.describe('Summary panel', () => {
userTest('Displays selected genes', async ({ page }) => {
Expand Down Expand Up @@ -302,9 +432,10 @@ userTest('Apply Filters button enables once a selection is made', async ({ page
await page.getByTestId('gene-variant-option').click();

await expect(page.getByTestId('add-filter-btn')).not.toBeEnabled();
const optionsContainer = page.locator('#options-container');

// When
await page.getByTestId('select-variant-frequency').getByLabel('Rare').click();
await optionsContainer.getByLabel(geneValues.results[0]).click();

// Then
await expect(page.getByTestId('add-filter-btn')).toBeEnabled();
Expand All @@ -318,6 +449,9 @@ userTest('Apply Filter adds to sidepanel', async ({ page }) => {
await page.getByTestId('genomic-filter-btn').click();
await page.getByTestId('gene-variant-option').click();

const optionsContainer = page.locator('#options-container');

await optionsContainer.getByLabel(geneValues.results[0]).click();
await page.getByTestId('select-variant-frequency').getByLabel('Rare').click();

// When
Expand All @@ -337,6 +471,10 @@ userTest(
await page.waitForURL('/explorer');
await page.getByTestId('genomic-filter-btn').click();
await page.getByTestId('gene-variant-option').click();

const optionsContainer = page.locator('#options-container');
const selectedContainer = page.locator('#selected-options-container');
await optionsContainer.getByLabel(geneValues.results[0]).click();
await page.getByTestId('select-variant-frequency').getByLabel('Rare').click();
await mockApiSuccess(page, '*/**/picsure/query/sync', 200);
await page.getByTestId('add-filter-btn').click();
Expand All @@ -349,6 +487,7 @@ userTest(
.click();

// Then
await expect(selectedContainer.getByLabel(geneValues.results[0])).toBeChecked();
await expect(page.getByTestId('select-variant-frequency').getByLabel('Rare')).toBeChecked();
},
);
Expand All @@ -360,6 +499,8 @@ userTest('Editing filter from results panel updates results panel on save', asyn
await page.waitForURL('/explorer');
await page.getByTestId('genomic-filter-btn').click();
await page.getByTestId('gene-variant-option').click();
const optionsContainer = page.locator('#options-container');
await optionsContainer.getByLabel(geneValues.results[0]).click();
await page.getByTestId('select-variant-frequency').getByLabel('Rare').click();
await mockApiSuccess(page, '*/**/picsure/query/sync', 200);
await page.getByTestId('add-filter-btn').click();
Expand All @@ -378,6 +519,9 @@ userTest('Editing filter from results panel updates results panel on save', asyn
.click();

// Then
await expect(
page.getByTestId('added-filter-genomic').getByText(geneValues.results[0]),
).toBeVisible();
await expect(page.getByTestId('added-filter-genomic').getByText('Rare')).toBeVisible();
await expect(page.getByTestId('added-filter-genomic').getByText('Novel')).toBeVisible();
});
Expand All @@ -391,6 +535,9 @@ userTest(
await page.waitForURL('/explorer');
await page.getByTestId('genomic-filter-btn').click();
await page.getByTestId('gene-variant-option').click();
const optionsContainer = page.locator('#options-container');
const selectedContainer = page.locator('#selected-options-container');
await optionsContainer.getByLabel(geneValues.results[0]).click();
await page.getByTestId('select-variant-frequency').getByLabel('Rare').click();
await mockApiSuccess(page, '*/**/picsure/query/sync', 200);
await page.getByTestId('add-filter-btn').click();
Expand All @@ -401,6 +548,7 @@ userTest(
await page.getByTestId('gene-variant-option').click();

// Then
await expect(selectedContainer.getByLabel(geneValues.results[0])).toBeChecked();
await expect(page.getByTestId('select-variant-frequency').getByLabel('Rare')).toBeChecked();
},
);

0 comments on commit e6aac9b

Please sign in to comment.