diff --git a/frontend/packages/data-portal/_templates/e2e/new/pageObject.cjs.t b/frontend/packages/data-portal/_templates/e2e/new/pageObject.cjs.t index 2f234977c..fbdd261f2 100644 --- a/frontend/packages/data-portal/_templates/e2e/new/pageObject.cjs.t +++ b/frontend/packages/data-portal/_templates/e2e/new/pageObject.cjs.t @@ -1,7 +1,7 @@ --- to: e2e/pageObjects/<%= name %>/<%= name %>Page.ts --- -import { expect } from '@playwright/test' +import { expect } from '@chromatic-com/playwright' import { BasePage } from 'e2e/pageObjects/basePage' export class <%= h.changeCase.pascal(name) %>Page extends BasePage { diff --git a/frontend/packages/data-portal/_templates/e2e/new/testFile.cjs.t b/frontend/packages/data-portal/_templates/e2e/new/testFile.cjs.t index 02be478e3..24269cace 100644 --- a/frontend/packages/data-portal/_templates/e2e/new/testFile.cjs.t +++ b/frontend/packages/data-portal/_templates/e2e/new/testFile.cjs.t @@ -2,7 +2,7 @@ to: e2e/<%= name %>.test.ts --- import { ApolloClient, NormalizedCacheObject } from '@apollo/client' -import { test } from '@playwright/test' +import { test } from '@chromatic-com/playwright' import { <%= h.changeCase.pascal(name) %>Page } from 'e2e/pageObjects/<%= name %>/<%= name %>Page' test.describe('<%= name %>', () => { diff --git a/frontend/packages/data-portal/app/graphql/getDatasetsV2.server.ts b/frontend/packages/data-portal/app/graphql/getDatasetsV2.server.ts index b19a9c184..f1060e9e2 100644 --- a/frontend/packages/data-portal/app/graphql/getDatasetsV2.server.ts +++ b/frontend/packages/data-portal/app/graphql/getDatasetsV2.server.ts @@ -73,13 +73,13 @@ export async function getDatasetsV2({ page, titleOrderDirection, searchText, - params, + params = new URLSearchParams(), client, }: { page: number titleOrderDirection?: OrderBy searchText?: string - params: URLSearchParams + params?: URLSearchParams client: ApolloClient }): Promise> { return client.query({ diff --git a/frontend/packages/data-portal/app/graphql/getRunByIdV2.server.ts b/frontend/packages/data-portal/app/graphql/getRunByIdV2.server.ts index 7dbc4781c..7ae0aae12 100644 --- a/frontend/packages/data-portal/app/graphql/getRunByIdV2.server.ts +++ b/frontend/packages/data-portal/app/graphql/getRunByIdV2.server.ts @@ -555,7 +555,7 @@ export interface GetRunByIdV2Params { client: ApolloClient id: number annotationsPage: number - params: URLSearchParams + params?: URLSearchParams depositionId?: number } @@ -563,7 +563,7 @@ export async function getRunByIdV2({ client, id, annotationsPage, - params, + params = new URLSearchParams(), depositionId, }: GetRunByIdV2Params): Promise> { return client.query({ diff --git a/frontend/packages/data-portal/e2e/browseDatasetFilters.test.ts b/frontend/packages/data-portal/e2e/browseDatasetFilters.test.ts index 4a0c65766..abfb17608 100644 --- a/frontend/packages/data-portal/e2e/browseDatasetFilters.test.ts +++ b/frontend/packages/data-portal/e2e/browseDatasetFilters.test.ts @@ -1,2573 +1,1346 @@ -// import { ApolloClient, NormalizedCacheObject } from '@apollo/client' -// import { test } from '@playwright/test' -// import { FiltersActor } from 'e2e/pageObjects/filters/filtersActor' -// import { FiltersPage } from 'e2e/pageObjects/filters/filtersPage' -// import { serializeAvailableFiles } from 'e2e/pageObjects/filters/utils' - -// import { QueryParams } from 'app/constants/query' -// import { ObjectShapeType } from 'app/types/shapeTypes' -// import { getPrefixedId } from 'app/utils/idPrefixes' - -// import { getApolloClient } from './apollo' -// import { BROWSE_DATASETS_URL, E2E_CONFIG, translations } from './constants' -// import { getObjectShapeTypeLabel, onlyRunIfEnabled } from './utils' - -// // eslint-disable-next-line playwright/no-skipped-test -// test('Browse datasets page filters', () => { -// let client: ApolloClient -// let filtersPage: FiltersPage -// let filtersActor: FiltersActor - -// test.beforeEach(({ page }) => { -// client = getApolloClient() - -// filtersPage = new FiltersPage(page) -// filtersActor = new FiltersActor(filtersPage) -// }) -// test.describe('Ground Truth Annotation Filter', () => { -// test('should filter on click', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersPage.toggleGroundTruthFilter() - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'true', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'true', -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'true', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'true', -// }, -// ], -// }) -// }) -// test('should disable filter on click', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'true', -// }, -// ], -// }) - -// await filtersPage.toggleGroundTruthFilter() - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'false', -// }, -// ], -// }) -// }) -// }) - -// // TODO: (ehoops) add multi-select filter tests -// test.describe('Available files filter', () => { -// test.describe(translations.rawFrames, () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.availableFiles, -// value: translations.rawFrames, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.rawFrames, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.rawFrames, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.rawFrames, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.rawFrames, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.rawFrames, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersPage.removeFilterOption(translations.rawFrames) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe(translations.tiltSeries, () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.availableFiles, -// value: translations.tiltSeries, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeries, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeries, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeries, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeries, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeries, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersPage.removeFilterOption(translations.tiltSeries) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe(translations.tiltSeriesAlignment, () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.availableFiles, -// value: translations.tiltSeriesAlignment, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeriesAlignment, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeriesAlignment, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeriesAlignment, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeriesAlignment, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeriesAlignment, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersPage.removeFilterOption(translations.tiltSeriesAlignment) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe(translations.tomograms, () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.availableFiles, -// value: translations.tomograms, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tomograms, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tomograms, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tomograms, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tomograms, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tomograms, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersPage.removeFilterOption(translations.tomograms) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('multiple values', () => { -// test('should filter multiple values', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.availableFiles, -// value: translations.rawFrames, -// }) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.availableFiles, -// value: translations.tiltSeries, -// }) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.availableFiles, -// value: translations.tiltSeriesAlignment, -// }) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.availableFiles, -// value: translations.tomograms, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.rawFrames, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeries, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeriesAlignment, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tomograms, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.rawFrames, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeries, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeriesAlignment, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tomograms, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) -// }) -// test('should filter multiple values when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.rawFrames, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeries, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeriesAlignment, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tomograms, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.rawFrames, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeries, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeriesAlignment, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tomograms, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) -// }) -// test('should clear filters', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.rawFrames, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeries, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tiltSeriesAlignment, -// }, -// { -// queryParamKey: QueryParams.AvailableFiles, -// queryParamValue: translations.tomograms, -// }, -// ], -// serialize: serializeAvailableFiles, -// }) - -// await filtersPage.removeFilterOption(translations.rawFrames) -// await filtersPage.removeFilterOption(translations.tiltSeries) -// await filtersPage.removeFilterOption(translations.tiltSeriesAlignment) -// await filtersPage.removeFilterOption(translations.tomograms) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// }) - -// test.describe('Dataset IDs filter group', () => { -// test.describe('Dataset ID filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.datasetIds, -// filter: { -// label: translations.datasetId, -// value: E2E_CONFIG.datasetId, -// }, -// hasMultipleFilters: true, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DatasetId, -// queryParamValue: E2E_CONFIG.datasetId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DatasetId, -// queryParamValue: E2E_CONFIG.datasetId, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DatasetId, -// queryParamValue: E2E_CONFIG.datasetId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DatasetId, -// queryParamValue: E2E_CONFIG.datasetId, -// }, -// ], -// }) -// }) -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DatasetId, -// queryParamValue: E2E_CONFIG.datasetId, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter(E2E_CONFIG.datasetId) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('EMPIAR ID filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.datasetIds, -// filter: { -// label: translations.empiarID, -// value: E2E_CONFIG.empiarId, -// }, -// hasMultipleFilters: true, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.EmpiarId, -// queryParamValue: E2E_CONFIG.empiarId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.EmpiarId, -// queryParamValue: E2E_CONFIG.empiarId, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.EmpiarId, -// queryParamValue: E2E_CONFIG.empiarId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.EmpiarId, -// queryParamValue: E2E_CONFIG.empiarId, -// }, -// ], -// }) -// }) -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.EmpiarId, -// queryParamValue: E2E_CONFIG.empiarId, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter(E2E_CONFIG.empiarId) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('EMDB ID filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.datasetIds, -// filter: { -// label: translations.emdb, -// value: E2E_CONFIG.emdbId, -// }, -// hasMultipleFilters: true, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.EmdbId, -// queryParamValue: E2E_CONFIG.emdbId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.EmdbId, -// queryParamValue: E2E_CONFIG.emdbId, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.EmdbId, -// queryParamValue: E2E_CONFIG.emdbId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.EmdbId, -// queryParamValue: E2E_CONFIG.emdbId, -// }, -// ], -// }) -// }) -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.EmdbId, -// queryParamValue: E2E_CONFIG.emdbId, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter(E2E_CONFIG.emdbId) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// }) - -// test.describe('Author filter group', () => { -// test.describe('Author Name filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.author, -// filter: { -// label: translations.authorName, -// value: E2E_CONFIG.authorName, -// }, -// hasMultipleFilters: true, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorName, -// queryParamValue: E2E_CONFIG.authorName, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorName, -// queryParamValue: E2E_CONFIG.authorName, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorName, -// queryParamValue: E2E_CONFIG.authorName, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorName, -// queryParamValue: E2E_CONFIG.authorName, -// }, -// ], -// }) -// }) -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorName, -// queryParamValue: E2E_CONFIG.authorName, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter(E2E_CONFIG.authorName) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// test.describe('Author ORCID filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.author, -// filter: { -// label: translations.authorOrcid, -// value: E2E_CONFIG.authorOrcId, -// }, -// hasMultipleFilters: true, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorOrcid, -// queryParamValue: E2E_CONFIG.authorOrcId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorOrcid, -// queryParamValue: E2E_CONFIG.authorOrcId, -// }, -// ], -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorOrcid, -// queryParamValue: E2E_CONFIG.authorOrcId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorOrcid, -// queryParamValue: E2E_CONFIG.authorOrcId, -// }, -// ], -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorOrcid, -// queryParamValue: E2E_CONFIG.authorOrcId, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter(E2E_CONFIG.authorOrcId) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// }) - -// test.describe('Deposition IDs filter group', () => { -// onlyRunIfEnabled('depositions') - -// test.describe('Deposition ID filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.depositionId, -// filter: { -// label: translations.depositionId, -// value: E2E_CONFIG.depositionId, -// }, -// hasMultipleFilters: false, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) - -// await filtersPage.expectFilterTagToExist( -// getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), -// ) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) - -// await filtersPage.expectFilterTagToExist( -// getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), -// ) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) -// }) -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter( -// getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), -// ) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// }) - -// // TODO: (ehoops) add multi-select filter tests -// test.describe('Organism Name filter', () => { -// test.describe('Selecting one organism', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.organismName, -// value: E2E_CONFIG.organismName1, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName1, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName1, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName1, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName1, -// }, -// ], -// }) -// }) -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName1, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption(E2E_CONFIG.organismName1) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// test.describe('Selecting multiple organisms', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.organismName, -// value: E2E_CONFIG.organismName1, -// }) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.organismName, -// value: E2E_CONFIG.organismName2, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName1, -// }, -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName2, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName1, -// }, -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName2, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName1, -// }, -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName2, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName1, -// }, -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName2, -// }, -// ], -// }) -// }) -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName1, -// }, -// { -// queryParamKey: QueryParams.Organism, -// queryParamValue: E2E_CONFIG.organismName2, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption(E2E_CONFIG.organismName1) -// await filtersPage.removeFilterOption(E2E_CONFIG.organismName2) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// test.describe('Searching for an organism name in the filter', () => { -// test('should filter the list of organisms', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersPage.clickFilterDropdown(translations.organismName) -// await filtersPage.fillSearchInput(E2E_CONFIG.organismNameQuery) - -// await filtersActor.expectOrganismNamesFromDataToMatchFilterList({ -// client, -// testQuery: E2E_CONFIG.organismNameQuery, -// url: BROWSE_DATASETS_URL, -// }) -// }) -// }) -// }) - -// test.describe('Number of runs filter', () => { -// test.describe('>1 run', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.numberOfRuns, -// value: '>1', -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>1', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>1', -// }, -// ], -// serialize: JSON.stringify, -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>1', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>1', -// }, -// ], -// serialize: JSON.stringify, -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>1', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersPage.removeFilterOption('>1') - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('>5 runs', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.numberOfRuns, -// value: '>5', -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>5', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>5', -// }, -// ], -// serialize: JSON.stringify, -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>5', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>5', -// }, -// ], -// serialize: JSON.stringify, -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>5', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersPage.removeFilterOption('>5') - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('>10 runs', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.numberOfRuns, -// value: '>10', -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>10', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>10', -// }, -// ], -// serialize: JSON.stringify, -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>10', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>10', -// }, -// ], -// serialize: JSON.stringify, -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>10', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersPage.removeFilterOption('>10') - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('>20 runs', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.numberOfRuns, -// value: '>20', -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>20', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>20', -// }, -// ], -// serialize: JSON.stringify, -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>20', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>20', -// }, -// ], -// serialize: JSON.stringify, -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>20', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersPage.removeFilterOption('>20') - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('>100 runs', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.numberOfRuns, -// value: '>100', -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>100', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>100', -// }, -// ], -// serialize: JSON.stringify, -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>100', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>100', -// }, -// ], -// serialize: JSON.stringify, -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.NumberOfRuns, -// queryParamValue: '>100', -// }, -// ], -// serialize: JSON.stringify, -// }) - -// await filtersPage.removeFilterOption('>100') - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// }) - -// test.describe('Camera Manufacturer filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.cameraManufacturer, -// value: E2E_CONFIG.cameraManufacturer, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.CameraManufacturer, -// queryParamValue: E2E_CONFIG.cameraManufacturer, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.CameraManufacturer, -// queryParamValue: E2E_CONFIG.cameraManufacturer, -// }, -// ], -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.CameraManufacturer, -// queryParamValue: E2E_CONFIG.cameraManufacturer, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.CameraManufacturer, -// queryParamValue: E2E_CONFIG.cameraManufacturer, -// }, -// ], -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.CameraManufacturer, -// queryParamValue: E2E_CONFIG.cameraManufacturer, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption(E2E_CONFIG.cameraManufacturer) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('Fiducial Alignment Status filter', () => { -// test.describe('True', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.fiducialAlignmentStatus, -// value: 'True', -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.FiducialAlignmentStatus, -// queryParamValue: 'true', -// }, -// ], -// serialize: (value) => value.toLowerCase(), -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.FiducialAlignmentStatus, -// queryParamValue: 'true', -// }, -// ], -// serialize: (value) => value.toLowerCase(), -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.FiducialAlignmentStatus, -// queryParamValue: 'True', -// }, -// ], -// serialize: (value) => value.toLowerCase(), -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.FiducialAlignmentStatus, -// queryParamValue: 'true', -// }, -// ], -// serialize: (value) => value.toLowerCase(), -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.FiducialAlignmentStatus, -// queryParamValue: 'True', -// }, -// ], -// serialize: (value) => value.toLowerCase(), -// }) - -// await filtersPage.removeFilterOption('True') - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('False', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.fiducialAlignmentStatus, -// value: 'False', -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.FiducialAlignmentStatus, -// queryParamValue: 'false', -// }, -// ], -// serialize: (value) => value.toLowerCase(), -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.FiducialAlignmentStatus, -// queryParamValue: 'false', -// }, -// ], -// serialize: (value) => value.toLowerCase(), -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.FiducialAlignmentStatus, -// queryParamValue: 'False', -// }, -// ], -// serialize: (value) => value.toLowerCase(), -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.FiducialAlignmentStatus, -// queryParamValue: 'false', -// }, -// ], -// serialize: (value) => value.toLowerCase(), -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.FiducialAlignmentStatus, -// queryParamValue: 'False', -// }, -// ], -// serialize: (value) => value.toLowerCase(), -// }) - -// await filtersPage.removeFilterOption('False') - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// }) - -// test.describe('Reconstruction Method filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.reconstructionMethod, -// value: E2E_CONFIG.reconstructionMethod, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ReconstructionMethod, -// queryParamValue: E2E_CONFIG.reconstructionMethod, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ReconstructionMethod, -// queryParamValue: E2E_CONFIG.reconstructionMethod, -// }, -// ], -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ReconstructionMethod, -// queryParamValue: E2E_CONFIG.reconstructionMethod, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ReconstructionMethod, -// queryParamValue: E2E_CONFIG.reconstructionMethod, -// }, -// ], -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ReconstructionMethod, -// queryParamValue: E2E_CONFIG.reconstructionMethod, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption(E2E_CONFIG.reconstructionMethod) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('Reconstruction Software filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.reconstructionSoftware, -// value: E2E_CONFIG.reconstructionSoftware, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ReconstructionSoftware, -// queryParamValue: E2E_CONFIG.reconstructionSoftware, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ReconstructionSoftware, -// queryParamValue: E2E_CONFIG.reconstructionSoftware, -// }, -// ], -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ReconstructionSoftware, -// queryParamValue: E2E_CONFIG.reconstructionSoftware, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ReconstructionSoftware, -// queryParamValue: E2E_CONFIG.reconstructionSoftware, -// }, -// ], -// }) -// }) - -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ReconstructionSoftware, -// queryParamValue: E2E_CONFIG.reconstructionSoftware, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption(E2E_CONFIG.reconstructionSoftware) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('Object Name filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.objectName, -// value: E2E_CONFIG.objectName, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) -// }) -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption(E2E_CONFIG.objectName) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('Object Shape Type filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(BROWSE_DATASETS_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.objectShapeType, -// value: getObjectShapeTypeLabel( -// E2E_CONFIG.objectShapeType as ObjectShapeType, -// ), -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) -// }) -// test('should disable filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption( -// getObjectShapeTypeLabel(E2E_CONFIG.objectShapeType as ObjectShapeType), -// ) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndDatasetsTableToMatch({ -// client, -// url: BROWSE_DATASETS_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// }) +import { test } from '@chromatic-com/playwright' +import { FiltersActor } from 'e2e/pageObjects/filters/filtersActor' +import { FiltersPage } from 'e2e/pageObjects/filters/filtersPage' + +import { QueryParams } from 'app/constants/query' +import { ObjectShapeType } from 'app/types/shapeTypes' +import { getPrefixedId } from 'app/utils/idPrefixes' + +import { BROWSE_DATASETS_URL, E2E_CONFIG, translations } from './constants' +import { getObjectShapeTypeLabel, onlyRunIfEnabled } from './utils' + +test.describe('Browse datasets page filters', () => { + let filtersPage: FiltersPage + let filtersActor: FiltersActor + + test.beforeEach(({ page }) => { + filtersPage = new FiltersPage(page) + filtersActor = new FiltersActor(filtersPage) + }) + test.describe('Ground Truth Annotation Filter', () => { + test('should filter on click', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersPage.toggleGroundTruthFilter() + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.GroundTruthAnnotation, + queryParamValue: 'true', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.GroundTruthAnnotation, + queryParamValue: 'true', + }, + ], + }) + }) + test('should disable filter on click', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.GroundTruthAnnotation, + queryParamValue: 'true', + }, + ], + }) + + await filtersPage.toggleGroundTruthFilter() + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('Dataset IDs filter group', () => { + test.describe('Dataset ID filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.datasetIds, + filter: { + label: translations.datasetId, + value: E2E_CONFIG.datasetId, + }, + hasMultipleFilters: true, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DatasetId, + queryParamValue: E2E_CONFIG.datasetId, + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DatasetId, + queryParamValue: E2E_CONFIG.datasetId, + }, + ], + }) + }) + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DatasetId, + queryParamValue: E2E_CONFIG.datasetId, + }, + ], + }) + + await filtersPage.removeMultiInputFilter(E2E_CONFIG.datasetId) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('EMPIAR ID filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.datasetIds, + filter: { + label: translations.empiarID, + value: E2E_CONFIG.empiarId, + }, + hasMultipleFilters: true, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.EmpiarId, + queryParamValue: E2E_CONFIG.empiarId, + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.EmpiarId, + queryParamValue: E2E_CONFIG.empiarId, + }, + ], + }) + }) + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.EmpiarId, + queryParamValue: E2E_CONFIG.empiarId, + }, + ], + }) + + await filtersPage.removeMultiInputFilter(E2E_CONFIG.empiarId) + await filtersPage.waitForTableLoad() + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + }) + }) + + test.describe('EMDB ID filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.datasetIds, + filter: { + label: translations.emdb, + value: E2E_CONFIG.emdbId, + }, + hasMultipleFilters: true, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.EmdbId, + queryParamValue: E2E_CONFIG.emdbId, + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.EmdbId, + queryParamValue: E2E_CONFIG.emdbId, + }, + ], + }) + }) + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.EmdbId, + queryParamValue: E2E_CONFIG.emdbId, + }, + ], + }) + + await filtersPage.removeMultiInputFilter(E2E_CONFIG.emdbId) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + }) + + test.describe('Author filter group', () => { + test.describe('Author Name filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.author, + filter: { + label: translations.authorName, + value: E2E_CONFIG.authorName, + }, + hasMultipleFilters: true, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorName, + queryParamValue: E2E_CONFIG.authorName, + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorName, + queryParamValue: E2E_CONFIG.authorName, + }, + ], + }) + }) + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorName, + queryParamValue: E2E_CONFIG.authorName, + }, + ], + }) + + await filtersPage.removeMultiInputFilter(E2E_CONFIG.authorName) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + test.describe('Author ORCID filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.author, + filter: { + label: translations.authorOrcid, + value: E2E_CONFIG.authorOrcId, + }, + hasMultipleFilters: true, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorOrcid, + queryParamValue: E2E_CONFIG.authorOrcId, + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorOrcid, + queryParamValue: E2E_CONFIG.authorOrcId, + }, + ], + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorOrcid, + queryParamValue: E2E_CONFIG.authorOrcId, + }, + ], + }) + + await filtersPage.removeMultiInputFilter(E2E_CONFIG.authorOrcId) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + }) + + test.describe('Deposition IDs filter group', () => { + onlyRunIfEnabled('depositions') + + test.describe('Deposition ID filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.depositionId, + filter: { + label: translations.depositionId, + value: E2E_CONFIG.depositionId, + }, + hasMultipleFilters: false, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DepositionId, + queryParamValue: E2E_CONFIG.depositionId, + }, + ], + }) + + await filtersPage.expectFilterTagToExist( + getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), + ) + + await filtersPage.waitForTableLoad() + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DepositionId, + queryParamValue: E2E_CONFIG.depositionId, + }, + ], + }) + + await filtersPage.expectFilterTagToExist( + getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), + ) + }) + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DepositionId, + queryParamValue: E2E_CONFIG.depositionId, + }, + ], + }) + + await filtersPage.removeMultiInputFilter( + getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), + ) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + }) + + // TODO: (ehoops) add multi-select filter tests + test.describe('Organism Name filter', () => { + test.describe('Selecting one organism', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.organismName, + value: E2E_CONFIG.organismName1, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.Organism, + queryParamValue: E2E_CONFIG.organismName1, + }, + ], + }) + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.Organism, + queryParamValue: E2E_CONFIG.organismName1, + }, + ], + }) + }) + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.Organism, + queryParamValue: E2E_CONFIG.organismName1, + }, + ], + }) + + await filtersPage.removeFilterOption(E2E_CONFIG.organismName1) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + test.describe('Selecting multiple organisms', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.organismName, + value: E2E_CONFIG.organismName1, + }) + + await filtersActor.addSingleSelectFilter({ + label: translations.organismName, + value: E2E_CONFIG.organismName2, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.Organism, + queryParamValue: E2E_CONFIG.organismName1, + }, + { + queryParamKey: QueryParams.Organism, + queryParamValue: E2E_CONFIG.organismName2, + }, + ], + }) + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.Organism, + queryParamValue: E2E_CONFIG.organismName1, + }, + { + queryParamKey: QueryParams.Organism, + queryParamValue: E2E_CONFIG.organismName2, + }, + ], + }) + }) + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.Organism, + queryParamValue: E2E_CONFIG.organismName1, + }, + { + queryParamKey: QueryParams.Organism, + queryParamValue: E2E_CONFIG.organismName2, + }, + ], + }) + + await filtersPage.removeFilterOption(E2E_CONFIG.organismName1) + await filtersPage.removeFilterOption(E2E_CONFIG.organismName2) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + test.describe('Searching for an organism name in the filter', () => { + test('should filter the list of organisms', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersPage.clickFilterDropdown(translations.organismName) + await filtersPage.fillSearchInput(E2E_CONFIG.organismNameQuery) + }) + }) + }) + + test.describe('Number of runs filter', () => { + test.describe('>1 run', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.numberOfRuns, + value: '>1', + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>1', + }, + ], + serialize: JSON.stringify, + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>1', + }, + ], + serialize: JSON.stringify, + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>1', + }, + ], + serialize: JSON.stringify, + }) + + await filtersPage.removeFilterOption('>1') + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('>5 runs', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.numberOfRuns, + value: '>5', + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>5', + }, + ], + serialize: JSON.stringify, + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>5', + }, + ], + serialize: JSON.stringify, + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>5', + }, + ], + serialize: JSON.stringify, + }) + + await filtersPage.removeFilterOption('>5') + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('>10 runs', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.numberOfRuns, + value: '>10', + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>10', + }, + ], + serialize: JSON.stringify, + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>10', + }, + ], + serialize: JSON.stringify, + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>10', + }, + ], + serialize: JSON.stringify, + }) + + await filtersPage.removeFilterOption('>10') + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('>20 runs', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.numberOfRuns, + value: '>20', + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>20', + }, + ], + serialize: JSON.stringify, + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>20', + }, + ], + serialize: JSON.stringify, + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>20', + }, + ], + serialize: JSON.stringify, + }) + + await filtersPage.removeFilterOption('>20') + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('>100 runs', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.numberOfRuns, + value: '>100', + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>100', + }, + ], + serialize: JSON.stringify, + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>100', + }, + ], + serialize: JSON.stringify, + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.NumberOfRuns, + queryParamValue: '>100', + }, + ], + serialize: JSON.stringify, + }) + + await filtersPage.removeFilterOption('>100') + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + }) + + test.describe('Camera Manufacturer filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.cameraManufacturer, + value: E2E_CONFIG.cameraManufacturer, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.CameraManufacturer, + queryParamValue: E2E_CONFIG.cameraManufacturer, + }, + ], + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.CameraManufacturer, + queryParamValue: E2E_CONFIG.cameraManufacturer, + }, + ], + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.CameraManufacturer, + queryParamValue: E2E_CONFIG.cameraManufacturer, + }, + ], + }) + + await filtersPage.removeFilterOption(E2E_CONFIG.cameraManufacturer) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('Fiducial Alignment Status filter', () => { + test.describe('True', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.fiducialAlignmentStatus, + value: 'True', + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.FiducialAlignmentStatus, + queryParamValue: 'true', + }, + ], + serialize: (value) => value.toLowerCase(), + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.FiducialAlignmentStatus, + queryParamValue: 'True', + }, + ], + serialize: (value) => value.toLowerCase(), + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.FiducialAlignmentStatus, + queryParamValue: 'True', + }, + ], + serialize: (value) => value.toLowerCase(), + }) + + await filtersPage.removeFilterOption('True') + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('False', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.fiducialAlignmentStatus, + value: 'False', + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.FiducialAlignmentStatus, + queryParamValue: 'false', + }, + ], + serialize: (value) => value.toLowerCase(), + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.FiducialAlignmentStatus, + queryParamValue: 'False', + }, + ], + serialize: (value) => value.toLowerCase(), + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.FiducialAlignmentStatus, + queryParamValue: 'False', + }, + ], + serialize: (value) => value.toLowerCase(), + }) + + await filtersPage.removeFilterOption('False') + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + }) + + test.describe('Reconstruction Method filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.reconstructionMethod, + value: E2E_CONFIG.reconstructionMethod, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ReconstructionMethod, + queryParamValue: E2E_CONFIG.reconstructionMethod, + }, + ], + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ReconstructionMethod, + queryParamValue: E2E_CONFIG.reconstructionMethod, + }, + ], + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ReconstructionMethod, + queryParamValue: E2E_CONFIG.reconstructionMethod, + }, + ], + }) + + await filtersPage.removeFilterOption(E2E_CONFIG.reconstructionMethod) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('Reconstruction Software filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.reconstructionSoftware, + value: E2E_CONFIG.reconstructionSoftware, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ReconstructionSoftware, + queryParamValue: E2E_CONFIG.reconstructionSoftware, + }, + ], + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ReconstructionSoftware, + queryParamValue: E2E_CONFIG.reconstructionSoftware, + }, + ], + }) + }) + + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ReconstructionSoftware, + queryParamValue: E2E_CONFIG.reconstructionSoftware, + }, + ], + }) + + await filtersPage.removeFilterOption(E2E_CONFIG.reconstructionSoftware) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('Object Name filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.objectName, + value: E2E_CONFIG.objectName, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectName, + queryParamValue: E2E_CONFIG.objectName, + }, + ], + }) + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectName, + queryParamValue: E2E_CONFIG.objectName, + }, + ], + }) + }) + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectName, + queryParamValue: E2E_CONFIG.objectName, + }, + ], + }) + + await filtersPage.removeFilterOption(E2E_CONFIG.objectName) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('Object Shape Type filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(BROWSE_DATASETS_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.objectShapeType, + value: getObjectShapeTypeLabel( + E2E_CONFIG.objectShapeType as ObjectShapeType, + ), + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectShapeType, + queryParamValue: E2E_CONFIG.objectShapeType, + }, + ], + }) + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectShapeType, + queryParamValue: E2E_CONFIG.objectShapeType, + }, + ], + }) + }) + test('should disable filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectShapeType, + queryParamValue: E2E_CONFIG.objectShapeType, + }, + ], + }) + + await filtersPage.removeFilterOption( + getObjectShapeTypeLabel(E2E_CONFIG.objectShapeType as ObjectShapeType), + ) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: BROWSE_DATASETS_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) +}) diff --git a/frontend/packages/data-portal/e2e/carryOver.test.ts b/frontend/packages/data-portal/e2e/carryOver.test.ts index 4473a3d26..a0d1dd4df 100644 --- a/frontend/packages/data-portal/e2e/carryOver.test.ts +++ b/frontend/packages/data-portal/e2e/carryOver.test.ts @@ -1,78 +1,94 @@ -import { test } from '@chromatic-com/playwright' +import { expect, test } from '@chromatic-com/playwright' -import { BROWSE_DATASETS_URL, SINGLE_DATASET_URL } from './constants' +import { QueryParams } from 'app/constants/query' -// let filtersPage: FiltersPage -// let filtersActor: FiltersActor -// let tablePage: TablePage -// let tableActor: TableActor -// let breadcrumbsPage: BreadcrumbsPage +import { + BROWSE_DATASETS_URL, + E2E_CONFIG, + SINGLE_DATASET_URL, + translations, +} from './constants' +import { BreadcrumbsPage } from './pageObjects/breadcrumbsPage' +import { FiltersActor } from './pageObjects/filters/filtersActor' +import { FiltersPage } from './pageObjects/filters/filtersPage' +import { TableActor } from './pageObjects/table/tableActor' +import { TablePage } from './pageObjects/table/tablePage' -// test.beforeEach(({ page }) => { -// filtersPage = new FiltersPage(page) -// filtersActor = new FiltersActor(filtersPage) -// tablePage = new TablePage(page) -// tableActor = new TableActor(tablePage) -// breadcrumbsPage = new BreadcrumbsPage(page) -// }) +let filtersPage: FiltersPage +let filtersActor: FiltersActor +let tablePage: TablePage +let tableActor: TableActor +let breadcrumbsPage: BreadcrumbsPage -// const TEST_PARAM = QueryParams.ObjectName -// const TEST_VALUE = E2E_CONFIG.objectName +test.beforeEach(({ page }) => { + filtersPage = new FiltersPage(page) + filtersActor = new FiltersActor(filtersPage) + tablePage = new TablePage(page) + tableActor = new TableActor(tablePage) + breadcrumbsPage = new BreadcrumbsPage(page) +}) + +const TEST_PARAM = QueryParams.ObjectName +const TEST_VALUE = E2E_CONFIG.objectName test.describe('Carry over filters', () => { test('should carry over datasets filter into single dataset page', async ({ page, }) => { await page.goto(BROWSE_DATASETS_URL) - // await filtersActor.addSingleSelectFilter({ - // label: translations.objectName, - // value: TEST_VALUE, - // }) + await filtersActor.addSingleSelectFilter({ + label: translations.objectName, + value: TEST_VALUE, + }) + + await tableActor.openFirstResult(TEST_PARAM, TEST_VALUE) }) test('should carry over single dataset filter into single run page', async ({ page, }) => { await page.goto(SINGLE_DATASET_URL) - // await filtersActor.addSingleSelectFilter({ - // label: translations.objectName, - // value: TEST_VALUE, - // }) + await filtersActor.addSingleSelectFilter({ + label: translations.objectName, + value: TEST_VALUE, + }) + + await tableActor.openFirstResult(TEST_PARAM, TEST_VALUE) }) test('should have filter in browse dataset breadcrumb url', async ({ page, }) => { await page.goto(BROWSE_DATASETS_URL) - // await filtersActor.addSingleSelectFilter({ - // label: translations.objectName, - // value: TEST_VALUE, - // }) + await filtersActor.addSingleSelectFilter({ + label: translations.objectName, + value: TEST_VALUE, + }) // Check links at single dataset level - // await tableActor.openFirstResult(TEST_PARAM, TEST_VALUE) + await tableActor.openFirstResult(TEST_PARAM, TEST_VALUE) - // await expect( - // breadcrumbsPage.getBreadcrumb({ - // index: 0, - // param: TEST_PARAM, - // value: TEST_VALUE, - // }), - // ).toBeVisible() + await expect( + breadcrumbsPage.getBreadcrumb({ + index: 0, + param: TEST_PARAM, + value: TEST_VALUE, + }), + ).toBeVisible() // Check links at single run level - // await tableActor.openFirstResult(TEST_PARAM, TEST_VALUE) + await tableActor.openFirstResult(TEST_PARAM, TEST_VALUE) }) test('should have filter in single dataset breadcrumb url', async ({ page, }) => { await page.goto(SINGLE_DATASET_URL) - // await filtersActor.addSingleSelectFilter({ - // label: translations.objectName, - // value: TEST_VALUE, - // }) + await filtersActor.addSingleSelectFilter({ + label: translations.objectName, + value: TEST_VALUE, + }) - // await tableActor.openFirstResult(TEST_PARAM, TEST_VALUE) + await tableActor.openFirstResult(TEST_PARAM, TEST_VALUE) }) // TODO When we have more data to test with diff --git a/frontend/packages/data-portal/e2e/config.json b/frontend/packages/data-portal/e2e/config.json index b4961c8d4..9a1433f63 100644 --- a/frontend/packages/data-portal/e2e/config.json +++ b/frontend/packages/data-portal/e2e/config.json @@ -6,7 +6,7 @@ "datasetId": "10001", "depositionId": "10000", "emdbId": "17241", - "empiarId": "11221", + "empiarId": "11830", "objectId": "GO:0005835", "methodType": "automated", "objectName": "membrane-enclosed lumen", diff --git a/frontend/packages/data-portal/e2e/downloadDialog.test.ts b/frontend/packages/data-portal/e2e/downloadDialog.test.ts index 88c411720..9da96b687 100644 --- a/frontend/packages/data-portal/e2e/downloadDialog.test.ts +++ b/frontend/packages/data-portal/e2e/downloadDialog.test.ts @@ -1,855 +1,845 @@ -// import { ApolloClient, NormalizedCacheObject } from '@apollo/client' -// import { expect, test } from '@playwright/test' -// import { DownloadDialogPage } from 'e2e/pageObjects/downloadDialog/downloadDialogPage' - -// import { IdPrefix } from 'app/constants/idPrefixes' -// import { DownloadConfig, DownloadStep, DownloadTab } from 'app/types/download' - -// import { getApolloClient } from './apollo' -// import { SINGLE_DATASET_URL, SINGLE_RUN_URL, translations } from './constants' -// import { DownloadDialogActor } from './pageObjects/downloadDialog/downloadDialogActor' -// import { -// ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS, -// SINGLE_DATASET_DOWNLOAD_TABS, -// TOMOGRAM_DOWNLOAD_TABS, -// } from './pageObjects/downloadDialog/types' -// import { -// fetchTestSingleRun, -// skipClipboardTestsForWebkit, -// } from './pageObjects/downloadDialog/utils' - -// test.describe('downloadDialog', () => { -// let client: ApolloClient -// let downloadDialogPage: DownloadDialogPage -// let downloadDialogActor: DownloadDialogActor - -// test.beforeEach(({ page }) => { -// client = getApolloClient() -// downloadDialogPage = new DownloadDialogPage(page) -// downloadDialogActor = new DownloadDialogActor(downloadDialogPage) -// }) - -// test.describe('Single Dataset', () => { -// test('should open when clicking download button', async () => { -// await downloadDialogPage.goTo(SINGLE_DATASET_URL) -// await downloadDialogPage.openDialog(translations.downloadDataset) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// downloadDialogActor.expectDialogUrlToMatch({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.AWS, -// }) -// }) - -// test('should display correct content', async () => { -// await downloadDialogPage.goTo(SINGLE_DATASET_URL) -// await downloadDialogPage.openDialog(translations.downloadDataset) - -// await downloadDialogActor.expectDownloadDatasetDialogToShowCorrectContent( -// { client }, -// ) -// downloadDialogActor.expectDialogUrlToMatch({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.AWS, -// }) -// }) - -// test.describe('AWS Tab', () => { -// test('should open tab via url', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.AWS, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab: DownloadTab.AWS, -// tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, -// }) -// }) - -// test('should open tab when clicking', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.API, -// }) -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// await downloadDialogPage.clickTab(DownloadTab.AWS) - -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab: DownloadTab.AWS, -// tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, -// }) -// downloadDialogActor.expectDialogUrlToMatch({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.AWS, -// }) -// }) - -// test('should copy from aws tab', async ({ browserName }) => { -// skipClipboardTestsForWebkit(browserName) - -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.AWS, -// }) -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// await downloadDialogPage.clickCopyButton() - -// await downloadDialogActor.expectClipboardToHaveAwsValue() -// }) - -// test('should close dialog', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.AWS, -// }) -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// await downloadDialogPage.clickCloseButton() - -// await downloadDialogPage.expectDialogToBeHidden() -// }) -// }) - -// test.describe('API Tab', () => { -// test('should open api tab via url', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.API, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab: DownloadTab.API, -// tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, -// }) -// }) - -// test('should open api tab by clicking', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.AWS, -// }) -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// await downloadDialogPage.clickTab(DownloadTab.API) - -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab: DownloadTab.API, -// tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, -// }) -// downloadDialogActor.expectDialogUrlToMatch({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.API, -// }) -// }) - -// test('should copy from api tab', async ({ browserName }) => { -// skipClipboardTestsForWebkit(browserName) - -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.API, -// }) -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// await downloadDialogPage.clickCopyButton() - -// await downloadDialogActor.expectClipboardToHaveApiValue() -// }) -// test('should close dialog', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_DATASET_URL, -// tab: DownloadTab.API, -// }) -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// await downloadDialogPage.clickCloseButton() - -// await downloadDialogPage.expectDialogToBeHidden() -// }) -// }) -// }) - -// test.describe('Single Run', () => { -// test('should open when clicking download button', async () => { -// await downloadDialogPage.goTo(SINGLE_RUN_URL) -// await downloadDialogPage.openDialog(translations.download) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) -// downloadDialogActor.expectDialogUrlToMatch({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Configure, -// }) -// }) - -// test('should open configure step from url', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Configure, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) -// }) - -// test('should contain subfield data in step 1', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// config: DownloadConfig.AllAnnotations, -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Configure, -// }) - -// await downloadDialogActor.expectDownloadRunStepOneToShowCorrectContent({ -// client, -// }) -// }) - -// test('should close step 1 when x button clicked', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Configure, -// }) -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) -// await downloadDialogPage.clickXButton() - -// await downloadDialogPage.expectDialogToBeHidden() -// }) - -// // TODO: test info box once expanding/collapsing is fixed - -// test.describe('All Annotations', () => { -// test('should select on click', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Configure, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) - -// await downloadDialogPage.clickDialogRadio( -// translations.downloadAllAnnotations, -// ) - -// await downloadDialogPage.expectRadioToBeSelected( -// DownloadConfig.AllAnnotations, -// ) - -// downloadDialogActor.expectDialogUrlToMatch({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Configure, -// config: DownloadConfig.AllAnnotations, -// }) -// }) - -// test('should select from url', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// config: DownloadConfig.AllAnnotations, -// step: DownloadStep.Configure, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) - -// await downloadDialogPage.expectRadioToBeSelected( -// DownloadConfig.AllAnnotations, -// ) -// }) - -// test('should change selection on click', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// config: DownloadConfig.Tomogram, -// step: DownloadStep.Configure, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) - -// await downloadDialogPage.clickDialogRadio( -// translations.downloadAllAnnotations, -// ) - -// await downloadDialogPage.expectRadioToBeSelected( -// DownloadConfig.AllAnnotations, -// ) -// }) - -// test('should go to next step on click', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// config: DownloadConfig.AllAnnotations, -// step: DownloadStep.Configure, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) - -// await downloadDialogPage.clickNextButton() - -// downloadDialogActor.expectDialogUrlToMatch({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.AWS, -// }) -// }) - -// test('should go back on click', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.AWS, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickBackButton() - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) - -// downloadDialogActor.expectDialogUrlToMatch({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Configure, -// config: DownloadConfig.AllAnnotations, -// }) -// }) - -// test('should open aws tab from url', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.AWS, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab: DownloadTab.AWS, -// tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, -// }) -// }) - -// test('should open api tab from url', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.API, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab: DownloadTab.API, -// tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, -// }) -// }) - -// test('should contain subfield data in step 2', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.AWS, -// }) - -// await downloadDialogActor.expectDownloadRunStepTwoToShowCorrectContent({ -// client, -// }) -// }) - -// test('should change tabs from aws to api on click', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.AWS, -// fileFormat: 'mrc', -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickTab(DownloadTab.API) - -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab: DownloadTab.API, -// tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, -// }) -// downloadDialogActor.expectDialogUrlToMatch({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.API, -// fileFormat: 'mrc', -// }) -// }) - -// test('should copy from aws tab', async ({ browserName }) => { -// skipClipboardTestsForWebkit(browserName) - -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.AWS, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickCopyButton() - -// await downloadDialogActor.expectClipboardToHaveCorrectDownloadRunAnnotationsAwsCommand( -// { client }, -// ) -// }) - -// test('should copy from api tab', async ({ browserName }) => { -// skipClipboardTestsForWebkit(browserName) - -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.API, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickCopyButton() - -// await downloadDialogActor.expectClipboardToHaveCorrectDownloadRunAnnotationsAPICommand( -// { client }, -// ) -// }) - -// test('should close step 2 when x button clicked', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.AWS, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickXButton() - -// await downloadDialogPage.expectDialogToBeHidden() -// }) - -// test('should close step 2 when close button clicked', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Download, -// config: DownloadConfig.AllAnnotations, -// tab: DownloadTab.AWS, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickCloseButton() - -// await downloadDialogPage.expectDialogToBeHidden() -// }) -// }) - -// test.describe('Download Tomogram', () => { -// test('should select on click', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// step: DownloadStep.Configure, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) - -// await downloadDialogPage.clickDialogRadio(translations.downloadTomogram) - -// await downloadDialogPage.expectRadioToBeSelected( -// DownloadConfig.Tomogram, -// ) - -// await downloadDialogActor.expectTomogramDialogUrlToMatch({ -// baseUrl: SINGLE_RUN_URL, -// client, -// step: DownloadStep.Configure, -// config: DownloadConfig.Tomogram, -// fileFormat: 'mrc', -// }) -// }) - -// test('should select from url', async () => { -// await downloadDialogActor.goToTomogramDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// client, -// config: DownloadConfig.Tomogram, -// step: DownloadStep.Configure, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) - -// await downloadDialogPage.expectRadioToBeSelected( -// DownloadConfig.Tomogram, -// ) -// }) - -// test('should change selection on click', async () => { -// await downloadDialogActor.goToDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// config: DownloadConfig.AllAnnotations, -// step: DownloadStep.Configure, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) - -// await downloadDialogPage.clickDialogRadio(translations.downloadTomogram) - -// await downloadDialogPage.expectRadioToBeSelected( -// DownloadConfig.Tomogram, -// ) - -// await downloadDialogActor.expectTomogramDialogUrlToMatch({ -// baseUrl: SINGLE_RUN_URL, -// client, -// step: DownloadStep.Configure, -// config: DownloadConfig.Tomogram, -// fileFormat: 'mrc', -// }) -// }) - -// test('should auto-select tomogram from row', async ({ page }) => { -// const lastTomogramId = ( -// await fetchTestSingleRun(client) -// ).data.tomograms.at(-1)!.id -// await downloadDialogPage.goTo(SINGLE_RUN_URL) -// await page -// .locator(`button:has-text("${translations.tomograms}")`) -// .click() -// await page.locator('button:has-text("DOWNLOAD")').last().click() - -// await expect(downloadDialogPage.getDialog()).toContainText( -// `Select Tomogram:${lastTomogramId} `, -// ) - -// await downloadDialogPage.clickNextButton() - -// await expect(downloadDialogPage.getDialog()).toContainText( -// `Tomogram ID: ${IdPrefix.Tomogram}-${lastTomogramId}`, -// ) -// }) - -// // TODO(bchu): Add tomogram selector test. - -// test('should change file type', async () => { -// await downloadDialogPage.goTo(SINGLE_RUN_URL) -// await downloadDialogPage.openDialog( -// translations.downloadWithAdditionalOptions, -// ) - -// await expect( -// downloadDialogPage.getDialog().getByRole('radio', { checked: true }), -// ).toHaveCount(0) - -// await downloadDialogPage.clickDialogRadio(translations.downloadTomogram) -// await downloadDialogPage.selectFileType('OME-ZARR') -// await downloadDialogPage.clickNextButton() - -// await expect(downloadDialogPage.getDialog()).toContainText( -// /.*s3\s.*\.zarr\s.*/, -// ) -// }) - -// test.describe('should open tabs from url', () => { -// TOMOGRAM_DOWNLOAD_TABS.forEach((tab) => { -// test(`should open ${tab} tab from url`, async () => { -// await downloadDialogActor.goToTomogramDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// client, -// config: DownloadConfig.Tomogram, -// step: DownloadStep.Download, -// fileFormat: 'mrc', -// tab, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab, -// tabGroup: TOMOGRAM_DOWNLOAD_TABS, -// }) -// }) -// }) -// }) - -// test.describe('should change tabs on click', () => { -// const testCases = TOMOGRAM_DOWNLOAD_TABS.flatMap((v1, i) => -// TOMOGRAM_DOWNLOAD_TABS.toSpliced(i, 1).map((v2) => ({ -// fromTab: v1, -// toTab: v2, -// })), -// ) -// testCases.forEach(({ fromTab, toTab }) => { -// test(`should change from ${fromTab} to ${toTab} on click`, async () => { -// await downloadDialogActor.goToTomogramDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// client, -// config: DownloadConfig.Tomogram, -// fileFormat: 'mrc', -// step: DownloadStep.Download, -// tab: fromTab, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickTab(toTab) - -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab: toTab, -// tabGroup: TOMOGRAM_DOWNLOAD_TABS, -// }) -// await downloadDialogActor.expectTomogramDialogUrlToMatch({ -// baseUrl: SINGLE_RUN_URL, -// client, -// config: DownloadConfig.Tomogram, -// fileFormat: 'mrc', -// step: DownloadStep.Download, -// tab: toTab, -// }) -// }) -// }) -// }) - -// test.describe('should copy from tabs', () => { -// const testCases = TOMOGRAM_DOWNLOAD_TABS.filter( -// (tab) => tab !== DownloadTab.Download, -// ) - -// testCases.forEach((tab) => { -// test(`should copy from ${tab} tab`, async ({ browserName }) => { -// skipClipboardTestsForWebkit(browserName) - -// await downloadDialogActor.goToTomogramDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// client, -// config: DownloadConfig.Tomogram, -// fileFormat: 'mrc', -// step: DownloadStep.Download, -// tab, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickCopyButton() - -// await downloadDialogActor.expectClipboardToHaveCorrectDownloadTomogramCommand( -// { client, fileFormat: 'mrc', tab }, -// ) -// }) -// }) -// }) - -// test('should close when x button clicked', async () => { -// await downloadDialogActor.goToTomogramDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// client, -// config: DownloadConfig.Tomogram, -// fileFormat: 'mrc', -// step: DownloadStep.Download, -// tab: DownloadTab.AWS, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickXButton() - -// await downloadDialogPage.expectDialogToBeHidden() -// }) - -// test('should close when close button clicked', async () => { -// await downloadDialogActor.goToTomogramDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// client, -// config: DownloadConfig.Tomogram, -// fileFormat: 'mrc', -// step: DownloadStep.Download, -// tab: DownloadTab.AWS, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickCloseButton() - -// await downloadDialogPage.expectDialogToBeHidden() -// }) -// }) - -// test.describe('Download Annotation', () => { -// test('should select from url', async () => { -// const { data } = await fetchTestSingleRun(client) -// const annotationFile = data.annotation_files[0] -// await downloadDialogActor.goToAnnotationDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// client, -// step: DownloadStep.Configure, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.configureDownload, -// }) -// await expect(downloadDialogPage.getDialog()).toContainText( -// annotationFile.format, -// ) -// }) - -// test.describe('should open tabs from url', () => { -// ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS.forEach((tab) => { -// test(`should open ${tab} tab from url`, async () => { -// await downloadDialogActor.goToAnnotationDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// client, -// step: DownloadStep.Download, -// tab, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab, -// tabGroup: ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS, -// }) -// }) -// }) -// }) - -// test.describe('should change tabs on click', () => { -// const testCases = -// ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS.flatMap((v1, i) => -// ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS.toSpliced(i, 1).map( -// (v2) => ({ -// fromTab: v1, -// toTab: v2, -// }), -// ), -// ) -// testCases.forEach(({ fromTab, toTab }) => { -// test(`should change from ${fromTab} to ${toTab} on click`, async () => { -// await downloadDialogActor.goToAnnotationDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// client, -// step: DownloadStep.Download, -// tab: fromTab, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickTab(toTab) - -// await downloadDialogActor.expectDialogToBeOnCorrectTab({ -// tab: toTab, -// tabGroup: ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS, -// }) -// await downloadDialogActor.expectAnnotationDialogUrlToMatch({ -// baseUrl: SINGLE_RUN_URL, -// client, -// step: DownloadStep.Download, -// tab: toTab, -// }) -// }) -// }) -// }) - -// test.describe('should copy from tabs', () => { -// const testCases = ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS.filter( -// (tab) => tab !== DownloadTab.Download, -// ) - -// testCases.forEach((tab) => { -// test(`should copy from ${tab} tab`, async ({ browserName }) => { -// skipClipboardTestsForWebkit(browserName) - -// await downloadDialogActor.goToAnnotationDownloadDialogUrl({ -// baseUrl: SINGLE_RUN_URL, -// client, -// step: DownloadStep.Download, -// tab, -// }) - -// await downloadDialogActor.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// }) - -// await downloadDialogPage.clickCopyButton() - -// await downloadDialogActor.expectClipboardToHaveCorrectDownloadAnnotationCommand( -// { client, tab }, -// ) -// }) -// }) -// }) -// }) -// }) -// }) +import { ApolloClient, NormalizedCacheObject } from '@apollo/client' +import { expect, test } from '@chromatic-com/playwright' +import { DownloadDialogPage } from 'e2e/pageObjects/downloadDialog/downloadDialogPage' + +import { IdPrefix } from 'app/constants/idPrefixes' +import { DownloadConfig, DownloadStep, DownloadTab } from 'app/types/download' + +import { getApolloClientV2 } from './apollo' +import { SINGLE_DATASET_URL, SINGLE_RUN_URL, translations } from './constants' +import { DownloadDialogActor } from './pageObjects/downloadDialog/downloadDialogActor' +import { + ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS, + SINGLE_DATASET_DOWNLOAD_TABS, + TOMOGRAM_DOWNLOAD_TABS, +} from './pageObjects/downloadDialog/types' +import { + fetchTestSingleRun, + skipClipboardTestsForWebkit, +} from './pageObjects/downloadDialog/utils' + +test.describe('downloadDialog', () => { + let client: ApolloClient + let downloadDialogPage: DownloadDialogPage + let downloadDialogActor: DownloadDialogActor + + test.beforeEach(({ page }) => { + client = getApolloClientV2() + downloadDialogPage = new DownloadDialogPage(page) + downloadDialogActor = new DownloadDialogActor(downloadDialogPage) + }) + + test.describe('Single Dataset', () => { + test('should open when clicking download button', async () => { + await downloadDialogPage.goTo(SINGLE_DATASET_URL) + await downloadDialogPage.openDialog(translations.downloadDataset) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadDatasetTitle, + }) + downloadDialogActor.expectDialogUrlToMatch({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.AWS, + }) + }) + + test('should display correct content', async () => { + await downloadDialogPage.goTo(SINGLE_DATASET_URL) + await downloadDialogPage.openDialog(translations.downloadDataset) + + downloadDialogActor.expectDialogUrlToMatch({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.AWS, + }) + }) + + test.describe('AWS Tab', () => { + test('should open tab via url', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.AWS, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadDatasetTitle, + }) + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab: DownloadTab.AWS, + tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, + }) + }) + + test('should open tab when clicking', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.API, + }) + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadDatasetTitle, + }) + await downloadDialogPage.clickTab(DownloadTab.AWS) + + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab: DownloadTab.AWS, + tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, + }) + downloadDialogActor.expectDialogUrlToMatch({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.AWS, + }) + }) + + test('should copy from aws tab', async ({ browserName }) => { + skipClipboardTestsForWebkit(browserName) + + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.AWS, + }) + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadDatasetTitle, + }) + await downloadDialogPage.clickCopyButton() + + await downloadDialogActor.expectClipboardToHaveAwsValue() + }) + + test('should close dialog', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.AWS, + }) + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadDatasetTitle, + }) + await downloadDialogPage.clickCloseButton() + + await downloadDialogPage.expectDialogToBeHidden() + }) + }) + + test.describe('API Tab', () => { + test('should open api tab via url', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.API, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadDatasetTitle, + }) + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab: DownloadTab.API, + tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, + }) + }) + + test('should open api tab by clicking', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.AWS, + }) + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadDatasetTitle, + }) + await downloadDialogPage.clickTab(DownloadTab.API) + + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab: DownloadTab.API, + tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, + }) + downloadDialogActor.expectDialogUrlToMatch({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.API, + }) + }) + + test('should copy from api tab', async ({ browserName }) => { + skipClipboardTestsForWebkit(browserName) + + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.API, + }) + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadDatasetTitle, + }) + await downloadDialogPage.clickCopyButton() + + await downloadDialogActor.expectClipboardToHaveApiValue() + }) + test('should close dialog', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_DATASET_URL, + tab: DownloadTab.API, + }) + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadDatasetTitle, + }) + await downloadDialogPage.clickCloseButton() + + await downloadDialogPage.expectDialogToBeHidden() + }) + }) + }) + + test.describe('Single Run', () => { + test('should open when clicking download button', async () => { + await downloadDialogPage.goTo(SINGLE_RUN_URL) + await downloadDialogPage.openDialog(translations.download) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + downloadDialogActor.expectDialogUrlToMatch({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Configure, + }) + }) + + test('should open configure step from url', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Configure, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + }) + + test('should contain subfield data in step 1', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + config: DownloadConfig.AllAnnotations, + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Configure, + }) + }) + + test('should close step 1 when x button clicked', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Configure, + }) + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + await downloadDialogPage.clickXButton() + + await downloadDialogPage.expectDialogToBeHidden() + }) + + // TODO: test info box once expanding/collapsing is fixed + + test.describe('All Annotations', () => { + test('should select on click', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Configure, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + + await downloadDialogPage.clickDialogRadio( + translations.downloadAllAnnotations, + ) + + await downloadDialogPage.expectRadioToBeSelected( + DownloadConfig.AllAnnotations, + ) + + downloadDialogActor.expectDialogUrlToMatch({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Configure, + config: DownloadConfig.AllAnnotations, + }) + }) + + test('should select from url', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + config: DownloadConfig.AllAnnotations, + step: DownloadStep.Configure, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + + await downloadDialogPage.expectRadioToBeSelected( + DownloadConfig.AllAnnotations, + ) + }) + + test('should change selection on click', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + config: DownloadConfig.Tomogram, + step: DownloadStep.Configure, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + + await downloadDialogPage.clickDialogRadio( + translations.downloadAllAnnotations, + ) + + await downloadDialogPage.expectRadioToBeSelected( + DownloadConfig.AllAnnotations, + ) + }) + + test('should go to next step on click', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + config: DownloadConfig.AllAnnotations, + step: DownloadStep.Configure, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + + await downloadDialogPage.clickNextButton() + + downloadDialogActor.expectDialogUrlToMatch({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.AWS, + }) + }) + + test('should go back on click', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.AWS, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickBackButton() + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + + downloadDialogActor.expectDialogUrlToMatch({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Configure, + config: DownloadConfig.AllAnnotations, + }) + }) + + test('should open aws tab from url', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.AWS, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab: DownloadTab.AWS, + tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, + }) + }) + + test('should open api tab from url', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.API, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab: DownloadTab.API, + tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, + }) + }) + + test('should contain subfield data in step 2', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.AWS, + }) + }) + + test('should change tabs from aws to api on click', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.AWS, + fileFormat: 'mrc', + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickTab(DownloadTab.API) + + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab: DownloadTab.API, + tabGroup: SINGLE_DATASET_DOWNLOAD_TABS, + }) + downloadDialogActor.expectDialogUrlToMatch({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.API, + fileFormat: 'mrc', + }) + }) + + test('should copy from aws tab', async ({ browserName }) => { + skipClipboardTestsForWebkit(browserName) + + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.AWS, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickCopyButton() + + await downloadDialogActor.expectClipboardToHaveCorrectDownloadRunAnnotationsAwsCommand( + { client }, + ) + }) + + test('should copy from api tab', async ({ browserName }) => { + skipClipboardTestsForWebkit(browserName) + + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.API, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickCopyButton() + + await downloadDialogActor.expectClipboardToHaveCorrectDownloadRunAnnotationsAPICommand( + { client }, + ) + }) + + test('should close step 2 when x button clicked', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.AWS, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickXButton() + + await downloadDialogPage.expectDialogToBeHidden() + }) + + test('should close step 2 when close button clicked', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Download, + config: DownloadConfig.AllAnnotations, + tab: DownloadTab.AWS, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickCloseButton() + + await downloadDialogPage.expectDialogToBeHidden() + }) + }) + + test.describe('Download Tomogram', () => { + test('should select on click', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + step: DownloadStep.Configure, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + + await downloadDialogPage.clickDialogRadio(translations.downloadTomogram) + + await downloadDialogPage.expectRadioToBeSelected( + DownloadConfig.Tomogram, + ) + + await downloadDialogActor.expectTomogramDialogUrlToMatch({ + baseUrl: SINGLE_RUN_URL, + client, + step: DownloadStep.Configure, + config: DownloadConfig.Tomogram, + fileFormat: 'mrc', + }) + }) + + test('should select from url', async () => { + await downloadDialogActor.goToTomogramDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + client, + config: DownloadConfig.Tomogram, + step: DownloadStep.Configure, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + + await downloadDialogPage.expectRadioToBeSelected( + DownloadConfig.Tomogram, + ) + }) + + test('should change selection on click', async () => { + await downloadDialogActor.goToDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + config: DownloadConfig.AllAnnotations, + step: DownloadStep.Configure, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + + await downloadDialogPage.clickDialogRadio(translations.downloadTomogram) + + await downloadDialogPage.expectRadioToBeSelected( + DownloadConfig.Tomogram, + ) + + await downloadDialogActor.expectTomogramDialogUrlToMatch({ + baseUrl: SINGLE_RUN_URL, + client, + step: DownloadStep.Configure, + config: DownloadConfig.Tomogram, + fileFormat: 'mrc', + }) + }) + + test('should auto-select tomogram from row', async ({ page }) => { + const lastTomogramId = ( + await fetchTestSingleRun(client) + ).data.tomograms.at(-1)!.id + await downloadDialogPage.goTo(SINGLE_RUN_URL) + await page + .locator(`button:has-text("${translations.tomograms}")`) + .click() + await page.locator('button:has-text("DOWNLOAD")').last().click() + + await expect(downloadDialogPage.getDialog()).toContainText( + `Select Tomogram:${lastTomogramId} `, + ) + + await downloadDialogPage.clickNextButton() + + await expect(downloadDialogPage.getDialog()).toContainText( + `Tomogram ID: ${IdPrefix.Tomogram}-${lastTomogramId}`, + ) + }) + + // TODO(bchu): Add tomogram selector test. + + test('should change file type', async () => { + await downloadDialogPage.goTo(SINGLE_RUN_URL) + await downloadDialogPage.openDialog( + translations.downloadWithAdditionalOptions, + ) + + await expect( + downloadDialogPage.getDialog().getByRole('radio', { checked: true }), + ).toHaveCount(0) + + await downloadDialogPage.clickDialogRadio(translations.downloadTomogram) + await downloadDialogPage.selectFileType('OME-ZARR') + await downloadDialogPage.clickNextButton() + + await expect(downloadDialogPage.getDialog()).toContainText( + /.*s3\s.*\.zarr\s.*/, + ) + }) + + test.describe('should open tabs from url', () => { + TOMOGRAM_DOWNLOAD_TABS.forEach((tab) => { + test(`should open ${tab} tab from url`, async () => { + await downloadDialogActor.goToTomogramDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + client, + config: DownloadConfig.Tomogram, + step: DownloadStep.Download, + fileFormat: 'mrc', + tab, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab, + tabGroup: TOMOGRAM_DOWNLOAD_TABS, + }) + }) + }) + }) + + test.describe('should change tabs on click', () => { + const testCases = TOMOGRAM_DOWNLOAD_TABS.flatMap((v1, i) => + TOMOGRAM_DOWNLOAD_TABS.toSpliced(i, 1).map((v2) => ({ + fromTab: v1, + toTab: v2, + })), + ) + testCases.forEach(({ fromTab, toTab }) => { + test(`should change from ${fromTab} to ${toTab} on click`, async () => { + await downloadDialogActor.goToTomogramDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + client, + config: DownloadConfig.Tomogram, + fileFormat: 'mrc', + step: DownloadStep.Download, + tab: fromTab, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickTab(toTab) + + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab: toTab, + tabGroup: TOMOGRAM_DOWNLOAD_TABS, + }) + await downloadDialogActor.expectTomogramDialogUrlToMatch({ + baseUrl: SINGLE_RUN_URL, + client, + config: DownloadConfig.Tomogram, + fileFormat: 'mrc', + step: DownloadStep.Download, + tab: toTab, + }) + }) + }) + }) + + test.describe('should copy from tabs', () => { + const testCases = TOMOGRAM_DOWNLOAD_TABS.filter( + (tab) => tab !== DownloadTab.Download, + ) + + testCases.forEach((tab) => { + test(`should copy from ${tab} tab`, async ({ browserName }) => { + skipClipboardTestsForWebkit(browserName) + + await downloadDialogActor.goToTomogramDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + client, + config: DownloadConfig.Tomogram, + fileFormat: 'mrc', + step: DownloadStep.Download, + tab, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickCopyButton() + + await downloadDialogActor.expectClipboardToHaveCorrectDownloadTomogramCommand( + { client, fileFormat: 'mrc', tab }, + ) + }) + }) + }) + + test('should close when x button clicked', async () => { + await downloadDialogActor.goToTomogramDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + client, + config: DownloadConfig.Tomogram, + fileFormat: 'mrc', + step: DownloadStep.Download, + tab: DownloadTab.AWS, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickXButton() + + await downloadDialogPage.expectDialogToBeHidden() + }) + + test('should close when close button clicked', async () => { + await downloadDialogActor.goToTomogramDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + client, + config: DownloadConfig.Tomogram, + fileFormat: 'mrc', + step: DownloadStep.Download, + tab: DownloadTab.AWS, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickCloseButton() + + await downloadDialogPage.expectDialogToBeHidden() + }) + }) + + test.describe('Download Annotation', () => { + test('should select from url', async () => { + const fileFormat = 'mrc' + await downloadDialogActor.goToAnnotationDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + client, + step: DownloadStep.Configure, + fileFormat, + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.configureDownload, + }) + await expect(downloadDialogPage.getDialog()).toContainText(fileFormat) + }) + + test.describe('should open tabs from url', () => { + ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS.forEach((tab) => { + test(`should open ${tab} tab from url`, async () => { + await downloadDialogActor.goToAnnotationDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + client, + step: DownloadStep.Download, + tab, + fileFormat: 'mrc', + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab, + tabGroup: ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS, + }) + }) + }) + }) + + test.describe('should change tabs on click', () => { + const testCases = + ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS.flatMap((v1, i) => + ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS.toSpliced(i, 1).map( + (v2) => ({ + fromTab: v1, + toTab: v2, + }), + ), + ) + testCases.forEach(({ fromTab, toTab }) => { + test(`should change from ${fromTab} to ${toTab} on click`, async () => { + await downloadDialogActor.goToAnnotationDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + client, + step: DownloadStep.Download, + tab: fromTab, + fileFormat: 'mrc', + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickTab(toTab) + + await downloadDialogActor.expectDialogToBeOnCorrectTab({ + tab: toTab, + tabGroup: ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS, + }) + await downloadDialogActor.expectAnnotationDialogUrlToMatch({ + baseUrl: SINGLE_RUN_URL, + client, + step: DownloadStep.Download, + tab: toTab, + }) + }) + }) + }) + + test.describe('should copy from tabs', () => { + const testCases = ANNOTATION_NON_STANDARD_TOMOGRAM_DOWNLOAD_TABS.filter( + (tab) => tab !== DownloadTab.Download, + ) + + testCases.forEach((tab) => { + test(`should copy from ${tab} tab`, async ({ browserName }) => { + skipClipboardTestsForWebkit(browserName) + + await downloadDialogActor.goToAnnotationDownloadDialogUrl({ + baseUrl: SINGLE_RUN_URL, + client, + step: DownloadStep.Download, + tab, + fileFormat: 'mrc', + }) + + await downloadDialogActor.expectDialogToBeOpen({ + title: translations.downloadOptions, + }) + + await downloadDialogPage.clickCopyButton() + + await downloadDialogActor.expectClipboardToHaveCorrectDownloadAnnotationCommand( + { client, tab }, + ) + }) + }) + }) + }) + }) +}) diff --git a/frontend/packages/data-portal/e2e/filters/utils.ts b/frontend/packages/data-portal/e2e/filters/utils.ts index ee434b6d6..b5e59dc4a 100644 --- a/frontend/packages/data-portal/e2e/filters/utils.ts +++ b/frontend/packages/data-portal/e2e/filters/utils.ts @@ -2,6 +2,8 @@ // import { E2E_CONFIG, translations } from 'e2e/constants' // import { TableValidatorOptions } from 'e2e/pageObjects/filters/types' +import { Page } from '@playwright/test' + // import { // GetDatasetByIdQuery, // GetDatasetsDataQuery, @@ -144,24 +146,24 @@ // await validateRows(page) // } -// /** -// * When loading the page, we need to wait a bit after so that the SDS components -// * have time to become interactive. Without the timeout, the tests become more -// * flaky and occasionally fail. For example, the filter dropdowns sometimes -// * don't open when clicked on because the playwright browser starts clicking on -// * it too fast while the JavaScript is still loading and hydrating. -// */ -// const TIME_UNTIL_INTERACTIVE = 3000 - -// export async function waitForInteractive(page: Page) { -// // eslint-disable-next-line playwright/no-wait-for-timeout -// await page.waitForTimeout(TIME_UNTIL_INTERACTIVE) -// } - -// export async function goTo(page: Page, url: string) { -// await page.goto(url) -// await waitForInteractive(page) -// } +/** + * When loading the page, we need to wait a bit after so that the SDS components + * have time to become interactive. Without the timeout, the tests become more + * flaky and occasionally fail. For example, the filter dropdowns sometimes + * don't open when clicked on because the playwright browser starts clicking on + * it too fast while the JavaScript is still loading and hydrating. + */ +const TIME_UNTIL_INTERACTIVE = 3000 + +export async function waitForInteractive(page: Page) { + // eslint-disable-next-line playwright/no-wait-for-timeout + await page.waitForTimeout(TIME_UNTIL_INTERACTIVE) +} + +export async function goTo(page: Page, url: string) { + await page.goto(url) + await waitForInteractive(page) +} // export function skipClipboardTestsForWebkit(browserName: string) { // // eslint-disable-next-line playwright/no-skipped-test diff --git a/frontend/packages/data-portal/e2e/metadataDrawer.test.ts b/frontend/packages/data-portal/e2e/metadataDrawer.test.ts index 3590d7b9a..884520780 100644 --- a/frontend/packages/data-portal/e2e/metadataDrawer.test.ts +++ b/frontend/packages/data-portal/e2e/metadataDrawer.test.ts @@ -1,166 +1,139 @@ -// import { ApolloClient, NormalizedCacheObject } from '@apollo/client' -// import { test } from '@playwright/test' -// import { MetadataDrawerPage } from 'e2e/pageObjects/metadataDrawer/metadataDrawerPage' -// import { -// getAnnotationTestData, -// getSingleDatasetTestMetadata, -// getSingleRunTestMetadata, -// } from 'e2e/pageObjects/metadataDrawer/utils' - -// import { getApolloClient } from './apollo' -// import { -// SINGLE_DATASET_PATH, -// SINGLE_DATASET_URL, -// SINGLE_RUN_PATH, -// SINGLE_RUN_URL, -// } from './constants' - -// let client: ApolloClient -// // let clientV2: ApolloClient -// test.beforeEach(() => { -// client = getApolloClient() -// // clientV2 = getApolloClientV2() -// }) - -// test.describe('Metadata Drawer', () => { -// test.describe(`Single Dataset: ${SINGLE_DATASET_PATH}`, () => { -// test('should open metadata drawer', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(SINGLE_DATASET_URL) - -// await metadataDrawerPage.expectMetadataDrawerToBeHidden() -// await metadataDrawerPage.openViewAllInfoDrawer() -// await metadataDrawerPage.expectMetadataDrawerToBeVisible() -// }) - -// test('should close metadata drawer on click x', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(SINGLE_DATASET_URL) - -// await metadataDrawerPage.openViewAllInfoDrawer() -// await metadataDrawerPage.waitForMetadataDrawerToBeVisible() - -// await metadataDrawerPage.closeMetadataDrawer() -// await metadataDrawerPage.expectMetadataDrawerToBeHidden() -// }) - -// test('metadata should have correct data', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(SINGLE_DATASET_URL) -// await metadataDrawerPage.openViewAllInfoDrawer() -// await metadataDrawerPage.waitForMetadataDrawerToBeVisible() - -// const data = await getSingleDatasetTestMetadata(client) -// // TODO: Uncomment. -// // await metadataDrawerPage.expectMetadataDrawerToShowTitle(data.title) -// await metadataDrawerPage.expandAllAccordions() -// await metadataDrawerPage.expectMetadataTableCellsToDisplayValues(data) -// }) -// }) - -// test.describe(`Single Run: ${SINGLE_RUN_PATH}`, () => { -// test('should open metadata drawer', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(SINGLE_RUN_URL) - -// await metadataDrawerPage.expectMetadataDrawerToBeHidden() -// await metadataDrawerPage.openViewAllInfoDrawer() -// await metadataDrawerPage.expectMetadataDrawerToBeVisible() -// }) - -// test('should close metadata drawer on click x', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(SINGLE_RUN_URL) - -// await metadataDrawerPage.openViewAllInfoDrawer() -// await metadataDrawerPage.waitForMetadataDrawerToBeVisible() - -// await metadataDrawerPage.closeMetadataDrawer() -// await metadataDrawerPage.expectMetadataDrawerToBeHidden() -// }) - -// test('metadata should have correct data', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(SINGLE_RUN_URL) -// await metadataDrawerPage.openViewAllInfoDrawer() -// await metadataDrawerPage.waitForMetadataDrawerToBeVisible() - -// const data = await getSingleRunTestMetadata(client) -// // TODO: Uncomment. -// // await metadataDrawerPage.expectMetadataDrawerToShowTitle(data.title) -// await metadataDrawerPage.expandAllAccordions() -// await metadataDrawerPage.expectMetadataTableCellsToDisplayValues(data) -// }) -// }) - -// test.describe(`Annotation Metadata: ${SINGLE_RUN_PATH}`, () => { -// test('should open metadata drawer', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(SINGLE_RUN_URL) - -// await metadataDrawerPage.expectMetadataDrawerToBeHidden() -// await metadataDrawerPage.openInfoDrawer() -// await metadataDrawerPage.expectMetadataDrawerToBeVisible() -// }) - -// test('should close metadata drawer on click x', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(SINGLE_RUN_URL) - -// await metadataDrawerPage.openInfoDrawer() -// await metadataDrawerPage.waitForMetadataDrawerToBeVisible() - -// await metadataDrawerPage.closeMetadataDrawer() -// await metadataDrawerPage.expectMetadataDrawerToBeHidden() -// }) - -// test('metadata should have correct data', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(SINGLE_RUN_URL) -// await metadataDrawerPage.openInfoDrawer() -// await metadataDrawerPage.waitForMetadataDrawerToBeVisible() - -// const data = await getAnnotationTestData(client) -// // TODO: Uncomment. -// // await metadataDrawerPage.expectMetadataDrawerToShowTitle(data.title) -// await metadataDrawerPage.expandAllAccordions() -// await metadataDrawerPage.expectMetadataTableCellsToDisplayValues(data) -// }) -// }) - -// test.describe(`Tomogram Metadata: ${SINGLE_RUN_PATH}`, () => { -// const url = `${SINGLE_RUN_URL}?table-tab=Tomograms` - -// test('should open metadata drawer', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(url) - -// await metadataDrawerPage.expectMetadataDrawerToBeHidden() -// await metadataDrawerPage.openInfoDrawer() -// await metadataDrawerPage.expectMetadataDrawerToBeVisible() -// }) - -// test('should close metadata drawer on click x', async ({ page }) => { -// const metadataDrawerPage = new MetadataDrawerPage(page) -// await metadataDrawerPage.goTo(url) - -// await metadataDrawerPage.openInfoDrawer() -// await metadataDrawerPage.waitForMetadataDrawerToBeVisible() - -// await metadataDrawerPage.closeMetadataDrawer() -// await metadataDrawerPage.expectMetadataDrawerToBeHidden() -// }) - -// // test('metadata should have correct data', async ({ page }) => { -// // const metadataDrawerPage = new MetadataDrawerPage(page) -// // await metadataDrawerPage.goTo(url) -// // await metadataDrawerPage.openInfoDrawer() -// // await metadataDrawerPage.waitForMetadataDrawerToBeVisible() - -// // const data = await getTomogramTestData(clientV2) -// // await metadataDrawerPage.expectMetadataDrawerToShowTitle(data.title) -// // await metadataDrawerPage.expandAllAccordions() -// // await metadataDrawerPage.expectMetadataTableCellsToDisplayValues(data) -// // }) -// }) -// }) +import { test } from '@chromatic-com/playwright' +import { MetadataDrawerPage } from 'e2e/pageObjects/metadataDrawer/metadataDrawerPage' + +import { + SINGLE_DATASET_PATH, + SINGLE_DATASET_URL, + SINGLE_RUN_PATH, + SINGLE_RUN_URL, +} from './constants' + +test.describe('Metadata Drawer', () => { + test.use({ + // Wait for the drawer to animate before taking snapshot + delay: 1000, + }) + + test.describe(`Single Dataset: ${SINGLE_DATASET_PATH}`, () => { + test('should open metadata drawer', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(SINGLE_DATASET_URL) + + await metadataDrawerPage.expectMetadataDrawerToBeHidden() + await metadataDrawerPage.openViewAllInfoDrawer() + await metadataDrawerPage.expectMetadataDrawerToBeVisible() + }) + + test('should close metadata drawer on click x', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(SINGLE_DATASET_URL) + + await metadataDrawerPage.openViewAllInfoDrawer() + await metadataDrawerPage.waitForMetadataDrawerToBeVisible() + + await metadataDrawerPage.closeMetadataDrawer() + await metadataDrawerPage.expectMetadataDrawerToBeHidden() + }) + + test('metadata should have correct data', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(SINGLE_DATASET_URL) + await metadataDrawerPage.openViewAllInfoDrawer() + await metadataDrawerPage.waitForMetadataDrawerToBeVisible() + + // TODO: Uncomment. + // await metadataDrawerPage.expectMetadataDrawerToShowTitle(data.title) + await metadataDrawerPage.expandAllAccordions() + }) + }) + + test.describe(`Single Run: ${SINGLE_RUN_PATH}`, () => { + test('should open metadata drawer', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(SINGLE_RUN_URL) + + await metadataDrawerPage.expectMetadataDrawerToBeHidden() + await metadataDrawerPage.openViewAllInfoDrawer() + await metadataDrawerPage.expectMetadataDrawerToBeVisible() + }) + + test('should close metadata drawer on click x', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(SINGLE_RUN_URL) + + await metadataDrawerPage.openViewAllInfoDrawer() + await metadataDrawerPage.waitForMetadataDrawerToBeVisible() + + await metadataDrawerPage.closeMetadataDrawer() + await metadataDrawerPage.expectMetadataDrawerToBeHidden() + }) + + test('metadata should have correct data', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(SINGLE_RUN_URL) + await metadataDrawerPage.openViewAllInfoDrawer() + await metadataDrawerPage.waitForMetadataDrawerToBeVisible() + + // TODO: Uncomment. + // await metadataDrawerPage.expectMetadataDrawerToShowTitle(data.title) + await metadataDrawerPage.expandAllAccordions() + }) + }) + + test.describe(`Annotation Metadata: ${SINGLE_RUN_PATH}`, () => { + test('should open metadata drawer', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(SINGLE_RUN_URL) + + await metadataDrawerPage.expectMetadataDrawerToBeHidden() + await metadataDrawerPage.openInfoDrawer() + await metadataDrawerPage.expectMetadataDrawerToBeVisible() + }) + + test('should close metadata drawer on click x', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(SINGLE_RUN_URL) + + await metadataDrawerPage.openInfoDrawer() + await metadataDrawerPage.waitForMetadataDrawerToBeVisible() + + await metadataDrawerPage.closeMetadataDrawer() + await metadataDrawerPage.expectMetadataDrawerToBeHidden() + }) + + test('metadata should have correct data', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(SINGLE_RUN_URL) + await metadataDrawerPage.openInfoDrawer() + await metadataDrawerPage.waitForMetadataDrawerToBeVisible() + + // TODO: Uncomment. + // await metadataDrawerPage.expectMetadataDrawerToShowTitle(data.title) + await metadataDrawerPage.expandAllAccordions() + }) + }) + + test.describe(`Tomogram Metadata: ${SINGLE_RUN_PATH}`, () => { + const url = `${SINGLE_RUN_URL}?table-tab=Tomograms` + + test('should open metadata drawer', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(url) + + await metadataDrawerPage.expectMetadataDrawerToBeHidden() + await metadataDrawerPage.openInfoDrawer() + await metadataDrawerPage.expectMetadataDrawerToBeVisible() + }) + + test('should close metadata drawer on click x', async ({ page }) => { + const metadataDrawerPage = new MetadataDrawerPage(page) + await metadataDrawerPage.goTo(url) + + await metadataDrawerPage.openInfoDrawer() + await metadataDrawerPage.waitForMetadataDrawerToBeVisible() + + await metadataDrawerPage.closeMetadataDrawer() + await metadataDrawerPage.expectMetadataDrawerToBeHidden() + }) + }) +}) diff --git a/frontend/packages/data-portal/e2e/pageObjects/basePage.ts b/frontend/packages/data-portal/e2e/pageObjects/basePage.ts index ce1172703..36a080fbd 100644 --- a/frontend/packages/data-portal/e2e/pageObjects/basePage.ts +++ b/frontend/packages/data-portal/e2e/pageObjects/basePage.ts @@ -1,4 +1,5 @@ import { Page } from '@playwright/test' +import { goTo, waitForInteractive } from 'e2e/filters/utils' // import { goTo, waitForInteractive } from 'e2e/filters/utils' import { QueryParams } from 'app/constants/query' @@ -23,17 +24,17 @@ export abstract class BasePage { * it too fast while the JavaScript is still loading and hydrating. */ - // public async goTo(url: string) { - // await goTo(this.page, url) - // } + public async goTo(url: string) { + await goTo(this.page, url) + } /** * Wait for page to become interactive. Useful for waiting for the page to * become interactive after a navigation within the UI. */ - // public async waitForInteractive() { - // await waitForInteractive(this.page) - // } + public async waitForInteractive() { + await waitForInteractive(this.page) + } // #endregion Navigate diff --git a/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/downloadDialogActor.ts b/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/downloadDialogActor.ts index 538fba1d0..fedbe36f1 100644 --- a/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/downloadDialogActor.ts +++ b/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/downloadDialogActor.ts @@ -1,418 +1,359 @@ -// /** -// * This file contains combinations of page interactions or data fetching. Remove if not needed. -// */ -// import { ApolloClient, NormalizedCacheObject } from '@apollo/client' -// import { expect } from '@playwright/test' -// import { E2E_CONFIG, translations } from 'e2e/constants' -// import { DownloadDialogPage } from 'e2e/pageObjects/downloadDialog/downloadDialogPage' - -// import { -// getAllTomogramsCodeSnippet, -// getDatasetCodeSnippet, -// } from 'app/components/Download/APIDownloadTab' -// import { getAwsCommand } from 'app/components/Download/AWSDownloadTab' -// import { DownloadConfig, DownloadStep, DownloadTab } from 'app/types/download' - -// import { -// constructDialogUrl, -// fetchTestSingleDataset, -// fetchTestSingleRun, -// getAnnotationDownloadCommand, -// getTomogramDownloadCommand, -// } from './utils' - -// export class DownloadDialogActor { -// private downloadDialogPage: DownloadDialogPage - -// constructor(downloadDialogPage: DownloadDialogPage) { -// this.downloadDialogPage = downloadDialogPage -// } - -// // #region Navigate -// public async goToDownloadDialogUrl({ -// config, -// fileFormat, -// baseUrl, -// step, -// tab, -// annotationFile, -// tomogram, -// }: { -// config?: DownloadConfig -// fileFormat?: string -// baseUrl: string -// step?: DownloadStep -// tab?: DownloadTab -// annotationFile?: { annotation: { id: string }; shape_type: string } -// tomogram?: { id: number; sampling: number; processing: string } -// }) { -// const expectedUrl = constructDialogUrl(baseUrl, { -// config, -// fileFormat, -// step, -// tab, -// annotationFile, -// tomogram, -// }) -// await this.downloadDialogPage.goTo(expectedUrl.href) -// } - -// public async goToTomogramDownloadDialogUrl({ -// client, -// config, -// fileFormat, -// baseUrl, -// step, -// tab, -// }: { -// client: ApolloClient -// config?: DownloadConfig -// fileFormat?: string -// baseUrl: string -// step?: DownloadStep -// tab?: DownloadTab -// }) { -// const { data } = await fetchTestSingleRun(client) -// const tomogram = data.tomograms[0] - -// await this.goToDownloadDialogUrl({ -// baseUrl, -// config, -// fileFormat, -// step, -// tab, -// tomogram: { -// id: tomogram.id, -// sampling: tomogram.voxel_spacing, -// processing: tomogram.processing, -// }, -// }) -// } - -// public async goToAnnotationDownloadDialogUrl({ -// client, -// baseUrl, -// step, -// tab, -// }: { -// client: ApolloClient -// baseUrl: string -// step?: DownloadStep -// tab?: DownloadTab -// }) { -// const { data } = await fetchTestSingleRun(client) -// const annotationFile = data.annotation_files[0] -// const tomogram = data.tomograms[0] - -// await this.goToDownloadDialogUrl({ -// baseUrl, -// fileFormat: annotationFile.format, -// step, -// tab, -// annotationFile: { -// annotation: { -// id: annotationFile.annotation.id.toString(), -// }, -// shape_type: annotationFile.shape_type, -// }, -// tomogram: { -// id: tomogram.id, -// sampling: tomogram.voxel_spacing, -// processing: tomogram.processing, -// }, -// }) -// } -// // #endregion Navigate - -// // #region Click -// // #endregion Click - -// // #region Hover -// // #endregion Hover - -// // #region Get -// // #endregion Get - -// // #region Macro -// // #endregion Macro - -// // #region Validation -// public async expectDialogToBeOpen({ -// title, -// substrings, -// }: { -// title: string -// substrings?: string[] -// }) { -// const dialog = this.downloadDialogPage.getDialog() -// await this.downloadDialogPage.expectDialogToBeVisible(dialog) -// await this.downloadDialogPage.expectDialogToHaveTitle(dialog, title) -// if (substrings) { -// await Promise.all( -// substrings.map(async (str) => { -// await this.downloadDialogPage.expectSubstringToBeVisible(dialog, str) -// }), -// ) -// } -// } - -// public async expectDownloadDatasetDialogToShowCorrectContent({ -// client, -// }: { -// client: ApolloClient -// }) { -// const { data } = await fetchTestSingleDataset(client) -// await this.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// substrings: [`${translations.datasetName}: ${data.datasets[0].title}`], -// }) -// } - -// public async expectDownloadRunStepOneToShowCorrectContent({ -// client, -// }: { -// client: ApolloClient -// }) { -// const { data } = await fetchTestSingleRun(client) -// const runName = data.runs[0].name -// const datasetName = data.runs[0].dataset.title -// await this.expectDialogToBeOpen({ -// title: translations.configureDownload, -// substrings: [ -// `${translations.datasetName}: ${datasetName}`, -// `${translations.runName}: ${runName}`, -// ], -// }) -// } - -// public async expectDownloadRunStepTwoToShowCorrectContent({ -// client, -// }: { -// client: ApolloClient -// }) { -// const { data } = await fetchTestSingleRun(client) -// const runName = data.runs[0].name -// const datasetName = data.runs[0].dataset.title -// await this.expectDialogToBeOpen({ -// title: translations.downloadOptions, -// substrings: [ -// `${translations.datasetName}: ${datasetName}`, -// `${translations.runName}: ${runName}`, -// `${translations.annotations}: ${translations.all}`, -// ], -// }) -// } - -// public expectDialogUrlToMatch({ -// baseUrl, -// config, -// fileFormat, -// tab, -// tomogram, -// step, -// }: { -// baseUrl: string -// config?: string -// fileFormat?: string -// tab?: DownloadTab -// annotationFile?: { annotation: { id: string }; shape_type: string } -// tomogram?: { id: number; sampling: number; processing: string } -// step?: DownloadStep -// }) { -// const expectedUrl = constructDialogUrl(baseUrl, { -// config, -// fileFormat, -// tab, -// tomogram, -// step, -// }) -// const actualUrl = new URL(this.downloadDialogPage.url()) -// expect(actualUrl.pathname).toBe(expectedUrl.pathname) -// expect(actualUrl.searchParams.sort()).toBe(expectedUrl.searchParams.sort()) -// } - -// public async expectTomogramDialogUrlToMatch({ -// baseUrl, -// client, -// config, -// fileFormat, -// tab, -// step, -// }: { -// baseUrl: string -// client: ApolloClient -// config?: string -// fileFormat?: string -// tab?: DownloadTab -// step?: DownloadStep -// }) { -// const { data } = await fetchTestSingleRun(client) -// const tomogram = data.tomograms[0] - -// this.expectDialogUrlToMatch({ -// baseUrl, -// config, -// fileFormat, -// tab, -// tomogram: { -// id: tomogram.id, -// sampling: tomogram.voxel_spacing, -// processing: tomogram.processing, -// }, -// step, -// }) -// } - -// public async expectAnnotationDialogUrlToMatch({ -// baseUrl, -// client, -// config, -// fileFormat, -// tab, -// step, -// }: { -// baseUrl: string -// client: ApolloClient -// config?: string -// fileFormat?: string -// tab?: DownloadTab -// step?: DownloadStep -// }) { -// const { data } = await fetchTestSingleRun(client) -// const annotationFile = data.annotation_files[0] -// const tomogram = data.tomograms[0] - -// this.expectDialogUrlToMatch({ -// baseUrl, -// config, -// fileFormat, -// tab, -// annotationFile: { -// annotation: { -// id: annotationFile.annotation.id.toString(), -// }, -// shape_type: annotationFile.shape_type, -// }, -// tomogram: { -// id: tomogram.id, -// sampling: tomogram.voxel_spacing, -// processing: tomogram.processing, -// }, -// step, -// }) -// } - -// public async expectDialogToBeOnCorrectTab({ -// tab, -// tabGroup, -// }: { -// tab: DownloadTab -// tabGroup: DownloadTab[] -// }) { -// const dialog = this.downloadDialogPage.getDialog() -// await this.downloadDialogPage.expectTabSelected({ -// dialog, -// tab, -// isSelected: true, -// }) - -// await Promise.all( -// tabGroup.map(async (t) => { -// if (t !== tab) { -// await this.downloadDialogPage.expectTabSelected({ -// dialog, -// tab: t, -// isSelected: false, -// }) -// } -// }), -// ) -// } - -// public async expectClipboardToHaveAwsValue() { -// const clipboard = await this.downloadDialogPage.getClipboardHandle() -// const clipboardValue = await clipboard.jsonValue() -// expect(clipboardValue).toContain('aws s3') -// expect(clipboardValue).toContain(E2E_CONFIG.datasetId) -// } - -// public async expectClipboardToHaveCorrectDownloadRunAnnotationsAwsCommand({ -// client, -// }: { -// client: ApolloClient -// }) { -// const clipboard = await this.downloadDialogPage.getClipboardHandle() -// const clipboardValue = await clipboard.jsonValue() -// const { data } = await fetchTestSingleRun(client) -// const s3Prefix = `${data.runs[0].tomogram_voxel_spacings[0].s3_prefix}Annotations` -// const expectedCommand = getAwsCommand({ -// s3Path: s3Prefix, -// s3Command: 'sync', -// isAllAnnotations: true, -// }) -// expect(clipboardValue).toBe(expectedCommand) -// } - -// public async expectClipboardToHaveCorrectDownloadTomogramCommand({ -// client, -// fileFormat, -// tab, -// }: { -// client: ApolloClient -// fileFormat?: string -// tab: DownloadTab -// }) { -// const clipboard = await this.downloadDialogPage.getClipboardHandle() -// const clipboardValue = await clipboard.jsonValue() -// const { data } = await fetchTestSingleRun(client) - -// const expectedCommand = getTomogramDownloadCommand({ -// data, -// fileFormat, -// tab, -// }) - -// expect(clipboardValue).toBe(expectedCommand) -// } - -// public async expectClipboardToHaveCorrectDownloadAnnotationCommand({ -// client, -// tab, -// }: { -// client: ApolloClient -// tab: DownloadTab -// }) { -// const clipboard = await this.downloadDialogPage.getClipboardHandle() -// const clipboardValue = await clipboard.jsonValue() -// const { data } = await fetchTestSingleRun(client) - -// const expectedCommand = getAnnotationDownloadCommand({ -// data, -// tab, -// }) - -// expect(clipboardValue).toBe(expectedCommand) -// } - -// public async expectClipboardToHaveApiValue() { -// const clipboard = await this.downloadDialogPage.getClipboardHandle() -// const clipboardValue = await clipboard.jsonValue() -// expect(clipboardValue).toBe(getDatasetCodeSnippet(+E2E_CONFIG.datasetId)) -// } - -// public async expectClipboardToHaveCorrectDownloadRunAnnotationsAPICommand({ -// client, -// }: { -// client: ApolloClient -// }) { -// const clipboard = await this.downloadDialogPage.getClipboardHandle() -// const clipboardValue = await clipboard.jsonValue() - -// const { data } = await fetchTestSingleRun(client) -// const runId = data.runs[0].id -// const expectedCommand = getAllTomogramsCodeSnippet(runId) - -// expect(clipboardValue).toBe(expectedCommand) -// } -// // #endregion Validation -// } +/** + * This file contains combinations of page interactions or data fetching. Remove if not needed. + */ + +import { ApolloClient, NormalizedCacheObject } from '@apollo/client' +import { expect } from '@chromatic-com/playwright' +import { E2E_CONFIG } from 'e2e/constants' + +import { + getAllTomogramsCodeSnippet, + getDatasetCodeSnippet, +} from 'app/components/Download/APIDownloadTab' +import { getAwsCommand } from 'app/components/Download/AWSDownloadTab' +import { DownloadConfig, DownloadStep, DownloadTab } from 'app/types/download' + +import { DownloadDialogPage } from './downloadDialogPage' +import { + constructDialogUrl, + fetchTestSingleRun, + getAnnotationDownloadCommand, + getTomogramDownloadCommand, +} from './utils' + +export class DownloadDialogActor { + private downloadDialogPage: DownloadDialogPage + + constructor(downloadDialogPage: DownloadDialogPage) { + this.downloadDialogPage = downloadDialogPage + } + + // #region Navigate + public async goToDownloadDialogUrl({ + config, + fileFormat, + baseUrl, + step, + tab, + annotationFile, + tomogram, + }: { + config?: DownloadConfig + fileFormat?: string + baseUrl: string + step?: DownloadStep + tab?: DownloadTab + annotationFile?: { annotation: { id: string }; shape_type: string } + tomogram?: { id: number; sampling: number; processing: string } + }) { + const expectedUrl = constructDialogUrl(baseUrl, { + config, + fileFormat, + step, + tab, + annotationFile, + tomogram, + }) + await this.downloadDialogPage.goTo(expectedUrl.href) + } + + public async goToTomogramDownloadDialogUrl({ + client, + config, + fileFormat, + baseUrl, + step, + tab, + }: { + client: ApolloClient + config?: DownloadConfig + fileFormat?: string + baseUrl: string + step?: DownloadStep + tab?: DownloadTab + }) { + const { data } = await fetchTestSingleRun(client) + const tomogram = data.tomograms[0] + await this.goToDownloadDialogUrl({ + baseUrl, + config, + fileFormat, + step, + tab, + tomogram: { + id: tomogram.id, + sampling: tomogram.voxelSpacing, + processing: tomogram.processing, + }, + }) + } + + public async goToAnnotationDownloadDialogUrl({ + client, + baseUrl, + step, + tab, + fileFormat, + }: { + client: ApolloClient + baseUrl: string + step?: DownloadStep + tab?: DownloadTab + fileFormat?: string + }) { + const { data } = await fetchTestSingleRun(client) + const annotationShape = data.annotationShapes[0] + const tomogram = data.tomograms[0] + await this.goToDownloadDialogUrl({ + baseUrl, + fileFormat, + step, + tab, + annotationFile: { + annotation: { + id: annotationShape?.annotation?.id.toString() ?? '', + }, + shape_type: annotationShape.shapeType ?? '', + }, + tomogram: { + id: tomogram.id, + sampling: tomogram.voxelSpacing, + processing: tomogram.processing, + }, + }) + } + + // // #endregion Navigate + // // #region Click + // // #endregion Click + // // #region Hover + // // #endregion Hover + // // #region Get + // // #endregion Get + // // #region Macro + // // #endregion Macro + // // #region Validation + public async expectDialogToBeOpen({ + title, + substrings, + }: { + title: string + substrings?: string[] + }) { + const dialog = this.downloadDialogPage.getDialog() + await this.downloadDialogPage.expectDialogToBeVisible(dialog) + await this.downloadDialogPage.expectDialogToHaveTitle(dialog, title) + if (substrings) { + await Promise.all( + substrings.map(async (str) => { + await this.downloadDialogPage.expectSubstringToBeVisible(dialog, str) + }), + ) + } + } + + public expectDialogUrlToMatch({ + baseUrl, + config, + fileFormat, + tab, + tomogram, + step, + }: { + baseUrl: string + config?: string + fileFormat?: string + tab?: DownloadTab + annotationFile?: { annotation: { id: string }; shape_type: string } + tomogram?: { id: number; sampling: number; processing: string } + step?: DownloadStep + }) { + const expectedUrl = constructDialogUrl(baseUrl, { + config, + fileFormat, + tab, + tomogram, + step, + }) + const actualUrl = new URL(this.downloadDialogPage.url()) + expect(actualUrl.pathname).toBe(expectedUrl.pathname) + expect(actualUrl.searchParams.sort()).toBe(expectedUrl.searchParams.sort()) + } + + public async expectTomogramDialogUrlToMatch({ + baseUrl, + client, + config, + fileFormat, + tab, + step, + }: { + baseUrl: string + client: ApolloClient + config?: string + fileFormat?: string + tab?: DownloadTab + step?: DownloadStep + }) { + const { data } = await fetchTestSingleRun(client) + const tomogram = data.tomograms[0] + this.expectDialogUrlToMatch({ + baseUrl, + config, + fileFormat, + tab, + tomogram: { + id: tomogram.id, + sampling: tomogram.voxelSpacing, + processing: tomogram.processing, + }, + step, + }) + } + + public async expectAnnotationDialogUrlToMatch({ + baseUrl, + client, + config, + fileFormat, + tab, + step, + }: { + baseUrl: string + client: ApolloClient + config?: string + fileFormat?: string + tab?: DownloadTab + step?: DownloadStep + }) { + const { data } = await fetchTestSingleRun(client) + const annotationShape = data.annotationShapes[0] + const tomogram = data.tomograms[0] + this.expectDialogUrlToMatch({ + baseUrl, + config, + fileFormat, + tab, + annotationFile: { + annotation: { + id: annotationShape.annotation?.id.toString() ?? '', + }, + shape_type: annotationShape.shapeType ?? '', + }, + tomogram: { + id: tomogram.id, + sampling: tomogram.voxelSpacing, + processing: tomogram.processing, + }, + step, + }) + } + + public async expectDialogToBeOnCorrectTab({ + tab, + tabGroup, + }: { + tab: DownloadTab + tabGroup: DownloadTab[] + }) { + const dialog = this.downloadDialogPage.getDialog() + await this.downloadDialogPage.expectTabSelected({ + dialog, + tab, + isSelected: true, + }) + await Promise.all( + tabGroup.map(async (t) => { + if (t !== tab) { + await this.downloadDialogPage.expectTabSelected({ + dialog, + tab: t, + isSelected: false, + }) + } + }), + ) + } + + public async expectClipboardToHaveAwsValue() { + const clipboard = await this.downloadDialogPage.getClipboardHandle() + const clipboardValue = await clipboard.jsonValue() + expect(clipboardValue).toContain('aws s3') + expect(clipboardValue).toContain(E2E_CONFIG.datasetId) + } + + public async expectClipboardToHaveCorrectDownloadRunAnnotationsAwsCommand({ + client, + }: { + client: ApolloClient + }) { + const clipboard = await this.downloadDialogPage.getClipboardHandle() + const clipboardValue = await clipboard.jsonValue() + const { data } = await fetchTestSingleRun(client) + const s3Prefix = `${data.runs[0].tomogramVoxelSpacings.edges[0].node.s3Prefix}Annotations` + const expectedCommand = getAwsCommand({ + s3Path: s3Prefix, + s3Command: 'sync', + isAllAnnotations: true, + }) + expect(clipboardValue).toBe(expectedCommand) + } + + public async expectClipboardToHaveCorrectDownloadTomogramCommand({ + client, + fileFormat, + tab, + }: { + client: ApolloClient + fileFormat?: string + tab: DownloadTab + }) { + const clipboard = await this.downloadDialogPage.getClipboardHandle() + const clipboardValue = await clipboard.jsonValue() + const { data } = await fetchTestSingleRun(client) + const expectedCommand = getTomogramDownloadCommand({ + data, + fileFormat, + tab, + }) + expect(clipboardValue).toBe(expectedCommand) + } + + public async expectClipboardToHaveCorrectDownloadAnnotationCommand({ + client, + tab, + }: { + client: ApolloClient + tab: DownloadTab + }) { + const clipboard = await this.downloadDialogPage.getClipboardHandle() + const clipboardValue = await clipboard.jsonValue() + const { data } = await fetchTestSingleRun(client) + const expectedCommand = getAnnotationDownloadCommand({ + data, + tab, + fileFormat: 'mrc', + }) + expect(clipboardValue).toBe(expectedCommand) + } + + public async expectClipboardToHaveApiValue() { + const clipboard = await this.downloadDialogPage.getClipboardHandle() + const clipboardValue = await clipboard.jsonValue() + expect(clipboardValue).toBe(getDatasetCodeSnippet(+E2E_CONFIG.datasetId)) + } + + public async expectClipboardToHaveCorrectDownloadRunAnnotationsAPICommand({ + client, + }: { + client: ApolloClient + }) { + const clipboard = await this.downloadDialogPage.getClipboardHandle() + const clipboardValue = await clipboard.jsonValue() + const { data } = await fetchTestSingleRun(client) + const runId = data.runs[0].id + const expectedCommand = getAllTomogramsCodeSnippet(runId) + expect(clipboardValue).toBe(expectedCommand) + } + // #endregion Validation +} diff --git a/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/downloadDialogPage.ts b/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/downloadDialogPage.ts index 5d42c1312..962ad67ce 100644 --- a/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/downloadDialogPage.ts +++ b/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/downloadDialogPage.ts @@ -1,4 +1,5 @@ -import { expect, Locator } from '@playwright/test' +import { expect } from '@chromatic-com/playwright' +import { Locator } from '@playwright/test' import { translations } from 'e2e/constants' import { BasePage } from 'e2e/pageObjects/basePage' @@ -28,7 +29,10 @@ export class DownloadDialogPage extends BasePage { public async clickCopyButton(): Promise { const dialog = this.getDialog() - await dialog.getByRole('button', { name: translations.copy }).click() + await dialog + .getByRole('button', { name: translations.copy }) + .first() + .click() } public async clickCloseButton(): Promise { diff --git a/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/utils.ts b/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/utils.ts index fc4c4d31d..60907ab8d 100644 --- a/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/utils.ts +++ b/frontend/packages/data-portal/e2e/pageObjects/downloadDialog/utils.ts @@ -1,6 +1,19 @@ // import { ApolloClient, NormalizedCacheObject } from '@apollo/client' -// import { test } from '@playwright/test' +import { ApolloClient, NormalizedCacheObject } from '@apollo/client' +import { test } from '@chromatic-com/playwright' +import { E2E_CONFIG } from 'e2e/constants' + +import { GetRunByIdV2Query } from 'app/__generated_v2__/graphql' +import { + getAnnotationCodeSnippet, + getTomogramCodeSnippet, +} from 'app/components/Download/APIDownloadTab' +import { getAwsCommand } from 'app/components/Download/AWSDownloadTab' +import { getCurlCommand } from 'app/components/Download/CurlDownloadTab' // import { E2E_CONFIG } from 'e2e/constants' +import { QueryParams } from 'app/constants/query' +import { getRunByIdV2 } from 'app/graphql/getRunByIdV2.server' +import { DownloadTab } from 'app/types/download' // import { GetRunByIdQuery } from 'app/__generated__/graphql' // import { @@ -14,64 +27,64 @@ // import { getRunById } from 'app/graphql/getRunById.server' // import { DownloadTab } from 'app/types/download' -// export function skipClipboardTestsForWebkit(browserName: string) { -// // eslint-disable-next-line playwright/no-skipped-test -// test.skip( -// browserName === 'webkit', -// 'Skipping for safari because clipboard permissions are not availabe.', -// ) -// } +export function skipClipboardTestsForWebkit(browserName: string) { + // eslint-disable-next-line playwright/no-skipped-test + test.skip( + browserName === 'webkit', + 'Skipping for safari because clipboard permissions are not availabe.', + ) +} -// export function constructDialogUrl( -// url: URL | string, -// { -// tab, -// step, -// config, -// annotationFile, -// tomogram, -// fileFormat, -// }: { -// tab?: string -// step?: string -// config?: string -// annotationFile?: { annotation: { id: string }; shape_type: string } -// tomogram?: { id: number; sampling: number; processing: string } -// fileFormat?: string -// }, -// ): URL { -// const expectedUrl = new URL(url) -// const params = expectedUrl.searchParams - -// if (step) { -// params.append(QueryParams.DownloadStep, step) -// } - -// if (config) { -// params.append(QueryParams.DownloadConfig, config) -// } - -// if (annotationFile) { -// params.append(QueryParams.ReferenceTomogramId, String(tomogram!.id)) -// params.append( -// QueryParams.AnnotationId, -// String(annotationFile.annotation.id), -// ) -// params.append(QueryParams.ObjectShapeType, annotationFile.shape_type) -// } else if (tomogram) { -// params.append(QueryParams.DownloadTomogramId, String(tomogram.id)) -// } - -// if (fileFormat) { -// params.append(QueryParams.FileFormat, fileFormat) -// } - -// if (tab) { -// params.append(QueryParams.DownloadTab, tab) -// } - -// return expectedUrl -// } +export function constructDialogUrl( + url: URL | string, + { + tab, + step, + config, + annotationFile, + tomogram, + fileFormat, + }: { + tab?: string + step?: string + config?: string + annotationFile?: { annotation: { id: string }; shape_type: string } + tomogram?: { id: number; sampling: number; processing: string } + fileFormat?: string + }, +): URL { + const expectedUrl = new URL(url) + const params = expectedUrl.searchParams + + if (step) { + params.append(QueryParams.DownloadStep, step) + } + + if (config) { + params.append(QueryParams.DownloadConfig, config) + } + + if (annotationFile) { + params.append(QueryParams.ReferenceTomogramId, String(tomogram!.id)) + params.append( + QueryParams.AnnotationId, + String(annotationFile.annotation.id), + ) + params.append(QueryParams.ObjectShapeType, annotationFile.shape_type) + } else if (tomogram) { + params.append(QueryParams.DownloadTomogramId, String(tomogram.id)) + } + + if (fileFormat) { + params.append(QueryParams.FileFormat, fileFormat) + } + + if (tab) { + params.append(QueryParams.DownloadTab, tab) + } + + return expectedUrl +} // export function fetchTestSingleDataset( // client: ApolloClient, @@ -79,79 +92,85 @@ // return getDatasetById({ client, id: +E2E_CONFIG.datasetId }) // } -// export function fetchTestSingleRun( -// client: ApolloClient, -// ) { -// return getRunById({ client, id: +E2E_CONFIG.runId, annotationsPage: 1 }) -// } +export function fetchTestSingleRun( + client: ApolloClient, +) { + return getRunByIdV2({ + client, + id: +E2E_CONFIG.runId, + annotationsPage: 1, + }) +} -// export function getTomogramDownloadCommand({ -// data, -// fileFormat, -// tab, -// }: { -// data: GetRunByIdQuery -// fileFormat?: string -// tab: DownloadTab -// }): string { -// const tomogram = data.runs[0].tomogram_voxel_spacings[0].tomograms[0] -// const activeTomogram = data.tomograms.find((tomo) => { -// return ( -// tomo.voxel_spacing === tomogram.voxel_spacing && -// tomo.processing === tomogram.processing -// ) -// }) - -// switch (tab) { -// case DownloadTab.API: -// return getTomogramCodeSnippet(activeTomogram?.id, fileFormat) -// case DownloadTab.AWS: -// return getAwsCommand({ -// s3Path: activeTomogram?.s3_mrc_scale0, -// s3Command: 'cp', -// }) -// case DownloadTab.Curl: -// return getCurlCommand(activeTomogram?.https_mrc_scale0) -// case DownloadTab.Download: -// return '' -// default: -// throw new Error('Invalid tab') -// } -// } +export function getTomogramDownloadCommand({ + data, + fileFormat, + tab, +}: { + data: GetRunByIdV2Query + fileFormat?: string + tab: DownloadTab +}): string { + const tomogram = + data.runs[0].tomogramVoxelSpacings.edges[0].node.tomograms.edges[0].node + const activeTomogram = data.tomograms.find((tomo) => { + return ( + tomo.voxelSpacing === tomogram.voxelSpacing && + tomo.processing === tomogram.processing + ) + }) -// export function getAnnotationDownloadCommand({ -// data, -// tab, -// }: { -// data: GetRunByIdQuery -// tab: DownloadTab -// }): string { -// const annotationFile = data.annotation_files[0] -// const fileFormat = annotationFile.format - -// switch (tab) { -// case DownloadTab.PortalCLI: // TODO(bchu): Update. -// case DownloadTab.API: -// return getAnnotationCodeSnippet( -// annotationFile.annotation.id.toString(), -// fileFormat, -// ) -// case DownloadTab.AWS: -// return getAwsCommand({ -// s3Path: annotationFile.annotation.files.find( -// (file) => file.format === fileFormat, -// )!.s3_path, -// s3Command: 'cp', -// }) -// case DownloadTab.Curl: -// return getCurlCommand( -// annotationFile.annotation.files.find( -// (file) => file.format === fileFormat, -// )!.https_path, -// ) -// case DownloadTab.Download: -// return '' -// default: -// throw new Error('Invalid tab') -// } -// } + switch (tab) { + case DownloadTab.API: + return getTomogramCodeSnippet(activeTomogram?.id, fileFormat) + case DownloadTab.AWS: + return getAwsCommand({ + s3Path: activeTomogram?.s3MrcFile ?? '', + s3Command: 'cp', + }) + case DownloadTab.Curl: + return getCurlCommand(activeTomogram?.httpsMrcFile ?? '') + case DownloadTab.Download: + return '' + default: + throw new Error('Invalid tab') + } +} + +export function getAnnotationDownloadCommand({ + data, + tab, + fileFormat, +}: { + data: GetRunByIdV2Query + tab: DownloadTab + fileFormat: string +}): string { + const annotationShape = data.annotationShapes[0] + + switch (tab) { + case DownloadTab.PortalCLI: // TODO(bchu): Update. + case DownloadTab.API: + return getAnnotationCodeSnippet( + annotationShape.annotation?.id.toString() ?? '', + fileFormat, + ) + case DownloadTab.AWS: + return getAwsCommand({ + s3Path: annotationShape.annotationFiles.edges.find( + (file) => file.node.format === fileFormat, + )!.node.s3Path, + s3Command: 'cp', + }) + case DownloadTab.Curl: + return getCurlCommand( + annotationShape.annotationFiles.edges.find( + (file) => file.node.format === fileFormat, + )!.node.httpsPath, + ) + case DownloadTab.Download: + return '' + default: + throw new Error('Invalid tab') + } +} diff --git a/frontend/packages/data-portal/e2e/pageObjects/filters/filtersActor.ts b/frontend/packages/data-portal/e2e/pageObjects/filters/filtersActor.ts index efc56d148..5f174ff89 100644 --- a/frontend/packages/data-portal/e2e/pageObjects/filters/filtersActor.ts +++ b/frontend/packages/data-portal/e2e/pageObjects/filters/filtersActor.ts @@ -1,411 +1,82 @@ -// import { ApolloClient, NormalizedCacheObject } from '@apollo/client' -// import { translations } from 'e2e/constants' -// import { waitForTableReload } from 'e2e/utils' - -// import { -// GetDatasetByIdQuery, -// GetDatasetsDataQuery, -// GetRunByIdQuery, -// } from 'app/__generated__/graphql' -// import { getBrowseDatasets } from 'app/graphql/getBrowseDatasets.server' -// import { getDatasetById } from 'app/graphql/getDatasetById.server' -// import { getDatasetsFilterData } from 'app/graphql/getDatasetsFilterData.server' -// import { getRunById } from 'app/graphql/getRunById.server' - -// import { FiltersPage } from './filtersPage' -// import { MultiInputFilterType, QueryParamObjectType } from './types' -// import { -// getAnnotationRowCountFromData, -// getDatasetIdCountsFromData, -// getExpectedFilterCount, -// getExpectedTotalCount, -// getExpectedUrlWithQueryParams, -// getFilteredOrganismNamesFromData, -// getRunIdCountsFromData, -// } from './utils' - -// export class FiltersActor { -// private filtersPage: FiltersPage - -// constructor(filtersPage: FiltersPage) { -// this.filtersPage = filtersPage -// } - -// // #region Navigation -// public async goToFilteredUrl({ -// baseUrl, -// queryParamsList, -// serialize, -// }: { -// baseUrl: string -// queryParamsList: QueryParamObjectType[] -// serialize?: (value: string) => string -// }) { -// const url = this.filtersPage.getFilteredUrl({ -// baseUrl, -// queryParamsList, -// serialize, -// }) -// await this.filtersPage.goTo(url.href) -// } -// // #endregion Navigation - -// // #region Data -// public async getSingleRunDataUsingParams({ -// client, -// id, -// pageNumber = 1, -// url, -// queryParamsList, -// serialize, -// }: { -// client: ApolloClient -// id: number -// pageNumber: number -// url: string -// queryParamsList: QueryParamObjectType[] -// serialize?: (value: string) => string -// }) { -// const { params } = getExpectedUrlWithQueryParams({ -// url, -// queryParamsList, -// serialize, -// }) - -// const { data } = await getRunById({ -// client, -// params, -// id, -// annotationsPage: pageNumber, -// }) - -// return data -// } - -// public async getSingleDatasetUsingParams({ -// client, -// id, -// pageNumber = 1, -// url, -// queryParamsList, -// serialize, -// }: { -// client: ApolloClient -// id: number -// pageNumber?: number -// url: string -// queryParamsList: QueryParamObjectType[] -// serialize?: (value: string) => string -// }) { -// const { params } = getExpectedUrlWithQueryParams({ -// url, -// queryParamsList, -// serialize, -// }) - -// const { data } = await getDatasetById({ -// client, -// id, -// params, -// page: pageNumber, -// }) - -// return data -// } - -// public async getDatasetsDataUsingParams({ -// client, -// pageNumber = 1, -// url, -// queryParamsList, -// serialize, -// }: { -// client: ApolloClient -// pageNumber?: number -// url: string -// queryParamsList?: QueryParamObjectType[] -// serialize?: (value: string) => string -// }) { -// const { params } = getExpectedUrlWithQueryParams({ -// url, -// queryParamsList, -// serialize, -// }) - -// const { data } = await getBrowseDatasets({ -// client, -// params, -// page: pageNumber, -// }) - -// return data -// } -// // #endregion Data - -// // #region Macro -// public async addSingleSelectFilter({ -// label, -// value, -// }: { -// label: string -// value: string -// }) { -// await this.filtersPage.clickFilterDropdown(label) -// await this.filtersPage.selectFilterOption(value) -// // Click again to close -// await this.filtersPage.clickFilterDropdown(label) -// await waitForTableReload(this.filtersPage.page) -// } - -// public async removeSingleSelectFilter({ -// label, -// value, -// }: { -// label: string -// value: string -// }) { -// await this.filtersPage.clickFilterDropdown(label) -// await this.filtersPage.removeFilterOption(value) -// } - -// public async addMultiInputFilter({ -// buttonLabel, -// filter, -// hasMultipleFilters, -// }: { -// buttonLabel: string -// filter: MultiInputFilterType -// hasMultipleFilters: boolean -// }) { -// await this.filtersPage.clickFilterDropdown(buttonLabel) -// await this.filtersPage.fillInputFilter({ -// label: `${filter.label}${hasMultipleFilters ? ':' : ''}`, -// value: filter.value, -// }) -// await this.filtersPage.applyMultiInputFilter() -// } - -// // #endregion Macro - -// // #region Validate -// public async expectUrlQueryParamsToBeCorrect({ -// url, -// queryParamsList, -// serialize, -// }: { -// url: string -// queryParamsList: QueryParamObjectType[] -// serialize?: (value: string) => string -// }) { -// const { expectedUrl } = getExpectedUrlWithQueryParams({ -// url, -// queryParamsList, -// serialize, -// }) - -// await this.filtersPage.expectNavigationToMatch(expectedUrl.href) -// } - -// public async expectAnnotationsTableToBeCorrect({ -// singleRunData, -// }: { -// singleRunData: GetRunByIdQuery -// }) { -// // Extract counts from response -// const expectedGroundTruthCount = -// singleRunData.annotation_files_aggregate_for_ground_truth.aggregate -// ?.count ?? 0 -// const expectedOtherCount = -// singleRunData.annotation_files_aggregate_for_other.aggregate?.count ?? 0 -// const expectedFilterCount = getExpectedFilterCount({ singleRunData }) -// const expectedTotalCount = getExpectedTotalCount({ singleRunData }) - -// // Wait for table subtitle to be correct: `^${expectedFilterCount} of ${expectedTotalCount} ${countLabel}$` -// await this.filtersPage.waitForTableCountChange({ -// countLabel: translations.annotations, -// expectedFilterCount, -// expectedTotalCount, -// }) - -// // Ensure all annotation ids from the expected data are in the table -// this.filtersPage.expectRowCountsToMatch( -// getAnnotationRowCountFromData({ -// singleRunData, -// }), -// await this.filtersPage.getAnnotationRowCountFromTable(), -// ) - -// // Expect annotation dividers to have correct counts -// await this.filtersPage.expectAnnotationDividerCountsToMatch( -// expectedGroundTruthCount, -// expectedOtherCount, -// ) -// } - -// public async expectDataAndAnnotationsTableToMatch({ -// client, -// id = 1, -// pageNumber = 1, -// url, -// queryParamsList, -// serialize, -// }: { -// client: ApolloClient -// id: number -// pageNumber?: number -// url: string -// queryParamsList: QueryParamObjectType[] -// serialize?: (value: string) => string -// }) { -// const singleRunData = await this.getSingleRunDataUsingParams({ -// client, -// id, -// pageNumber, -// url, -// queryParamsList, -// serialize, -// }) - -// await this.expectAnnotationsTableToBeCorrect({ singleRunData }) -// } - -// public async expectRunsTableToBeCorrect({ -// singleDatasetData, -// }: { -// singleDatasetData: GetDatasetByIdQuery -// }) { -// // Extract expectedFilterCount and expectedTotalCount from data -// const expectedFilterCount = getExpectedFilterCount({ singleDatasetData }) -// const expectedTotalCount = getExpectedTotalCount({ singleDatasetData }) - -// // Wait for table subtitle to be correct: `^${expectedFilterCount} of ${expectedTotalCount} ${countLabel}$` -// await this.filtersPage.waitForTableCountChange({ -// countLabel: translations.runs, -// expectedFilterCount, -// expectedTotalCount, -// }) - -// // Validate rows -// // Get all run ids from the expected data -// const runIdCountFromData = getRunIdCountsFromData({ singleDatasetData }) -// // Get all run rows from the table -// const runRowCountFromTable = -// await this.filtersPage.getRunRowCountFromTable() - -// // Ensure all run ids from the expected data are in the table -// this.filtersPage.expectRowCountsToMatch( -// runIdCountFromData, -// runRowCountFromTable, -// ) -// } - -// public async expectDataAndRunsTableToMatch({ -// client, -// id = 1, -// pageNumber, -// url, -// queryParamsList, -// serialize, -// }: { -// client: ApolloClient -// id: number -// pageNumber?: number -// url: string -// queryParamsList: QueryParamObjectType[] -// serialize?: (value: string) => string -// }) { -// const singleDatasetData = await this.getSingleDatasetUsingParams({ -// client, -// id, -// pageNumber, -// url, -// queryParamsList, -// serialize, -// }) - -// await this.expectRunsTableToBeCorrect({ singleDatasetData }) -// } - -// public async expectDatasetsTableToBeCorrect({ -// browseDatasetsData, -// }: { -// browseDatasetsData: GetDatasetsDataQuery -// }) { -// // Extract expectedFilterCount and expectedTotalCount from data -// const expectedFilterCount = getExpectedFilterCount({ browseDatasetsData }) -// const expectedTotalCount = getExpectedTotalCount({ browseDatasetsData }) - -// // Wait for table subtitle to be correct: `^${expectedFilterCount} of ${expectedTotalCount} ${countLabel}$` -// await this.filtersPage.waitForTableCountChange({ -// countLabel: translations.datasets, -// expectedFilterCount, -// expectedTotalCount, -// }) - -// // Validate rows -// // Get all dataset ids from the expected data -// const datasetIdCountFromData = getDatasetIdCountsFromData({ -// browseDatasetsData, -// }) -// // Get all dataset rows from the table -// const datasetRowCountFromTable = -// await this.filtersPage.getDatasetRowCountFromTable() - -// // Ensure all dataset ids from the expected data are in the table -// this.filtersPage.expectRowCountsToMatch( -// datasetIdCountFromData, -// datasetRowCountFromTable, -// ) -// } - -// public async expectDataAndDatasetsTableToMatch({ -// client, -// pageNumber = 1, -// url, -// queryParamsList, -// serialize, -// }: { -// client: ApolloClient -// pageNumber?: number -// url: string -// queryParamsList: QueryParamObjectType[] -// serialize?: (value: string) => string -// }) { -// const browseDatasetsData = await this.getDatasetsDataUsingParams({ -// client, -// pageNumber, -// url, -// queryParamsList, -// serialize, -// }) - -// await this.expectDatasetsTableToBeCorrect({ browseDatasetsData }) -// } - -// // TODO: this matches the existing test by checking for values from the filtered data in the UI list -// // However, we may want to add the reverse check to ensure there are no extra values in the UI list -// public async expectOrganismNamesFromDataToMatchFilterList({ -// client, -// testQuery, -// }: { -// client: ApolloClient -// testQuery: string -// url: string -// }) { -// const { data: datasetsFilterData } = await getDatasetsFilterData({ -// client, -// }) - -// const organismNames = getFilteredOrganismNamesFromData({ -// datasetsFilterData, -// testQuery, -// }) - -// await Promise.all( -// organismNames.map((name) => -// this.filtersPage.expectOrganismNameToBeVisibleInFilterList(name), -// ), -// ) -// } -// // #endregion Validate -// } +import { waitForTableReload } from 'e2e/utils' + +import { FiltersPage } from './filtersPage' +import { MultiInputFilterType, QueryParamObjectType } from './types' +import { getExpectedUrlWithQueryParams } from './utils' + +export class FiltersActor { + private filtersPage: FiltersPage + + constructor(filtersPage: FiltersPage) { + this.filtersPage = filtersPage + } + + // #region Navigation + public async goToFilteredUrl({ + baseUrl, + queryParamsList, + serialize, + }: { + baseUrl: string + queryParamsList: QueryParamObjectType[] + serialize?: (value: string) => string + }) { + const url = this.filtersPage.getFilteredUrl({ + baseUrl, + queryParamsList, + serialize, + }) + await this.filtersPage.goTo(url.href) + } + + // #region Macro + public async addSingleSelectFilter({ + label, + value, + }: { + label: string + value: string + }) { + await this.filtersPage.clickFilterDropdown(label) + await this.filtersPage.selectFilterOption(value) + // Click again to close + await this.filtersPage.clickFilterDropdown(label) + await waitForTableReload(this.filtersPage.page) + } + + public async addMultiInputFilter({ + buttonLabel, + filter, + hasMultipleFilters, + }: { + buttonLabel: string + filter: MultiInputFilterType + hasMultipleFilters: boolean + }) { + await this.filtersPage.clickFilterDropdown(buttonLabel) + await this.filtersPage.fillInputFilter({ + label: `${filter.label}${hasMultipleFilters ? ':' : ''}`, + value: filter.value, + }) + await this.filtersPage.applyMultiInputFilter() + } + + // #region Validate + public async expectUrlQueryParamsToBeCorrect({ + url, + queryParamsList, + serialize, + }: { + url: string + queryParamsList: QueryParamObjectType[] + serialize?: (value: string) => string + }) { + const { expectedUrl } = getExpectedUrlWithQueryParams({ + url, + queryParamsList, + serialize, + }) + + await this.filtersPage.expectNavigationToMatch(expectedUrl.href) + } +} diff --git a/frontend/packages/data-portal/e2e/pageObjects/filters/filtersPage.ts b/frontend/packages/data-portal/e2e/pageObjects/filters/filtersPage.ts index e7c77afb9..2c3832254 100644 --- a/frontend/packages/data-portal/e2e/pageObjects/filters/filtersPage.ts +++ b/frontend/packages/data-portal/e2e/pageObjects/filters/filtersPage.ts @@ -1,5 +1,7 @@ -import { expect } from '@playwright/test' +import { expect } from '@chromatic-com/playwright' +import { translations } from 'e2e/constants' import { BasePage } from 'e2e/pageObjects/basePage' +import { waitForTableReload } from 'e2e/utils' import { escapeRegExp } from 'lodash-es' import { TestIds } from 'app/constants/testIds' @@ -62,7 +64,9 @@ export class FiltersPage extends BasePage { } public async toggleGroundTruthFilter() { - await this.page.getByText('Ground Truth Annotation').click() + await this.page + .getByText(translations.groundTruthAnnotationAvailableFilter) + .click() } // #endregion Click @@ -196,4 +200,8 @@ export class FiltersPage extends BasePage { // #region Bool // #endregion Bool + + async waitForTableLoad() { + await waitForTableReload(this.page) + } } diff --git a/frontend/packages/data-portal/e2e/pageObjects/filters/utils.ts b/frontend/packages/data-portal/e2e/pageObjects/filters/utils.ts index 8b5b064e7..c52a6ee9a 100644 --- a/frontend/packages/data-portal/e2e/pageObjects/filters/utils.ts +++ b/frontend/packages/data-portal/e2e/pageObjects/filters/utils.ts @@ -1,5 +1,4 @@ -// import { translations } from 'e2e/constants' -// import { isString } from 'lodash-es' +import { translations } from 'e2e/constants' // import { // GetDatasetByIdQuery, @@ -7,35 +6,37 @@ // GetDatasetsFilterDataQuery, // GetRunByIdQuery, // } from 'app/__generated__/graphql' -// import { AVAILABLE_FILES_VALUE_TO_I18N_MAP } from 'app/components/DatasetFilter/constants' +import { AVAILABLE_FILES_VALUE_TO_I18N_MAP } from 'app/components/DatasetFilter/constants' + +import { QueryParamObjectType } from './types' // import { QueryParamObjectType, RowCounterType } from './types' -// export function getExpectedUrlWithQueryParams({ -// url, -// queryParamsList, -// serialize, -// }: { -// url: string -// queryParamsList?: QueryParamObjectType[] -// serialize?: (value: string) => string -// }): { expectedUrl: URL; params: URLSearchParams } { -// const expectedUrl = new URL(url) -// const params = expectedUrl.searchParams -// if (!queryParamsList) { -// return { expectedUrl, params } -// } +export function getExpectedUrlWithQueryParams({ + url, + queryParamsList, + serialize, +}: { + url: string + queryParamsList?: QueryParamObjectType[] + serialize?: (value: string) => string +}): { expectedUrl: URL; params: URLSearchParams } { + const expectedUrl = new URL(url) + const params = expectedUrl.searchParams + if (!queryParamsList) { + return { expectedUrl, params } + } -// queryParamsList.forEach(({ queryParamKey, queryParamValue }) => { -// if (queryParamKey) { -// params.append( -// queryParamKey, -// serialize ? serialize(queryParamValue) : queryParamValue, -// ) -// } -// }) -// return { expectedUrl, params: expectedUrl.searchParams } -// } + queryParamsList.forEach(({ queryParamKey, queryParamValue }) => { + if (queryParamKey) { + params.append( + queryParamKey, + serialize ? serialize(queryParamValue) : queryParamValue, + ) + } + }) + return { expectedUrl, params: expectedUrl.searchParams } +} // export function getExpectedFilterCount({ // browseDatasetsData, @@ -123,14 +124,14 @@ // return rowCounter // } -// export const serializeAvailableFiles = (value: string): string => { -// return ( -// Object.entries(AVAILABLE_FILES_VALUE_TO_I18N_MAP).find( -// ([, i18nKey]) => -// translations[i18nKey as keyof typeof translations] === value, -// )?.[0] ?? value -// ) -// } +export const serializeAvailableFiles = (value: string): string => { + return ( + Object.entries(AVAILABLE_FILES_VALUE_TO_I18N_MAP).find( + ([, i18nKey]) => + translations[i18nKey as keyof typeof translations] === value, + )?.[0] ?? value + ) +} // export function getFilteredOrganismNamesFromData({ // datasetsFilterData, diff --git a/frontend/packages/data-portal/e2e/pageObjects/metadataDrawer/metadataDrawerPage.ts b/frontend/packages/data-portal/e2e/pageObjects/metadataDrawer/metadataDrawerPage.ts index 39dd53bb1..f8e541f5f 100644 --- a/frontend/packages/data-portal/e2e/pageObjects/metadataDrawer/metadataDrawerPage.ts +++ b/frontend/packages/data-portal/e2e/pageObjects/metadataDrawer/metadataDrawerPage.ts @@ -1,4 +1,4 @@ -import { expect } from '@playwright/test' +import { expect } from '@chromatic-com/playwright' import { translations } from 'e2e/constants' import { isArray } from 'lodash-es' import { _DeepPartialArray } from 'utility-types/dist/mapped-types' diff --git a/frontend/packages/data-portal/e2e/pageObjects/singleRunPage.ts b/frontend/packages/data-portal/e2e/pageObjects/singleRunPage.ts index 7a2d33705..50b7d29fe 100644 --- a/frontend/packages/data-portal/e2e/pageObjects/singleRunPage.ts +++ b/frontend/packages/data-portal/e2e/pageObjects/singleRunPage.ts @@ -1,56 +1,33 @@ -// import { -// ApolloClient, -// ApolloQueryResult, -// NormalizedCacheObject, -// } from '@apollo/client' -// import { Locator, Page } from '@playwright/test' -// import { E2E_CONFIG, SINGLE_RUN_URL } from 'e2e/constants' - -// import { GetRunByIdQuery } from 'app/__generated__/graphql' -// import { getRunById } from 'app/graphql/getRunById.server' - -// import { BasePage } from './basePage' - -// /** /runs/$id */ -// export class SingleRunPage extends BasePage { -// constructor( -// playwrightPage: Page, -// private readonly client: ApolloClient, -// ) { -// super(playwrightPage) -// } - -// goToPage(): Promise { -// return this.goTo(SINGLE_RUN_URL) -// } - -// loadData(): Promise> { -// return getRunById({ -// client: this.client, -// id: Number(E2E_CONFIG.runId), -// annotationsPage: 1, -// }) -// } - -// getPrimaryViewTomogramButton(): Locator { -// return this.page.locator('a:has-text("View Tomogram")') -// } - -// findProcessingMethodsCell(): Locator { -// return this.page -// .locator(`td:has-text("Tomogram Processing")`) -// .locator('+ td') -// } - -// findAnnotatedObjectsCell(): Locator { -// return this.page.locator(`td:has-text("Annotated Objects")`).locator('+ td') -// } - -// async findAnnotatedObjectsTexts(): Promise> { -// return (await this.findAnnotatedObjectsCell().textContent())!.split(',') -// } - -// findAnnotatedObjectsCollapseToggle(): Locator { -// return this.findAnnotatedObjectsCell().locator('svg') -// } -// } +import { Locator } from '@playwright/test' +import { SINGLE_RUN_URL } from 'e2e/constants' + +import { BasePage } from './basePage' + +/** /runs/$id */ +export class SingleRunPage extends BasePage { + goToPage(): Promise { + return this.goTo(SINGLE_RUN_URL) + } + + getPrimaryViewTomogramButton(): Locator { + return this.page.locator('a:has-text("View Tomogram")') + } + + findProcessingMethodsCell(): Locator { + return this.page + .locator(`td:has-text("Tomogram Processing")`) + .locator('+ td') + } + + findAnnotatedObjectsCell(): Locator { + return this.page.locator(`td:has-text("Annotated Objects")`).locator('+ td') + } + + async findAnnotatedObjectsTexts(): Promise> { + return (await this.findAnnotatedObjectsCell().textContent())!.split(',') + } + + findAnnotatedObjectsCollapseToggle(): Locator { + return this.findAnnotatedObjectsCell().locator('svg') + } +} diff --git a/frontend/packages/data-portal/e2e/pageObjects/table/tableActor.ts b/frontend/packages/data-portal/e2e/pageObjects/table/tableActor.ts index dadc86a47..d2a4fc7d7 100644 --- a/frontend/packages/data-portal/e2e/pageObjects/table/tableActor.ts +++ b/frontend/packages/data-portal/e2e/pageObjects/table/tableActor.ts @@ -1,22 +1,22 @@ -// import { expect } from '@playwright/test' -// import { waitForTableReload } from 'e2e/utils' +import { expect } from '@chromatic-com/playwright' +import { waitForTableReload } from 'e2e/utils' -// import { QueryParams } from 'app/constants/query' +import { QueryParams } from 'app/constants/query' -// import { TablePage } from './tablePage' +import { TablePage } from './tablePage' -// export class TableActor { -// constructor(private tablePage: TablePage) {} +export class TableActor { + constructor(private tablePage: TablePage) {} -// async expectResultWithUrlParam(param: QueryParams, value: string) { -// await expect( -// this.tablePage.getResultLink({ param, value, index: 0 }), -// ).toBeVisible() -// } + async expectResultWithUrlParam(param: QueryParams, value: string) { + await expect( + this.tablePage.getResultLink({ param, value, index: 0 }), + ).toBeVisible() + } -// async openFirstResult(param?: QueryParams, value?: string) { -// await this.tablePage.getResultLink({ index: 0, param, value }).click() -// await waitForTableReload(this.tablePage.page) -// await this.tablePage.waitForInteractive() -// } -// } + async openFirstResult(param?: QueryParams, value?: string) { + await this.tablePage.getResultLink({ index: 0, param, value }).click() + await waitForTableReload(this.tablePage.page) + await this.tablePage.waitForInteractive() + } +} diff --git a/frontend/packages/data-portal/e2e/pagination.test.ts b/frontend/packages/data-portal/e2e/pagination.test.ts index d07a72dd4..3ed0c2dd4 100644 --- a/frontend/packages/data-portal/e2e/pagination.test.ts +++ b/frontend/packages/data-portal/e2e/pagination.test.ts @@ -1,63 +1,23 @@ -// /* -// * NOTE: This file does not use the preferred page object pattern. -// * This is because we did not have time to refactor. -// * Please do not use this file as an example of how to write tests. -// */ -// import { TableValidatorOptions } from 'e2e/pageObjects/filters/types' - -// import { MAX_PER_PAGE } from 'app/constants/pagination' -// import { getBrowseDatasets } from 'app/graphql/getBrowseDatasets.server' -// import { getDatasetById } from 'app/graphql/getDatasetById.server' - -// import { BROWSE_DATASETS_URL, E2E_CONFIG, translations } from './constants' -// import { validateDatasetsTable, validateRunsTable } from './filters/utils' -// import { testPagination } from './pagination/testPagination' -// import { getParamsFromFilter } from './pagination/utils' - -// const { pagination } = E2E_CONFIG -// const { browseDatasets, singleDataset } = pagination - -// testPagination({ -// rowLoadedSelector: `:has-text("${translations.datasetId}:")`, -// testFilter: browseDatasets.filter, -// testFilterWithNoPages: browseDatasets.filterWithNoPages, -// url: BROWSE_DATASETS_URL, -// validateTable: validateDatasetsTable, - -// async getMaxPages(client, filter, pageNumber) { -// const { data } = await getBrowseDatasets({ -// client, -// params: getParamsFromFilter(filter), -// page: pageNumber, -// }) -// const count = data.filtered_datasets_aggregate.aggregate?.count ?? 0 - -// return Math.ceil(count / MAX_PER_PAGE) -// }, -// }) - -// const validateRunsTableWithId = (options: TableValidatorOptions) => -// validateRunsTable({ -// ...options, -// id: +singleDataset.id, -// }) - -// testPagination({ -// rowLoadedSelector: `:has-text("${translations.runId}:")`, -// testFilter: singleDataset.filter, -// testFilterWithNoPages: singleDataset.filterWithNoPages, -// url: `${E2E_CONFIG.url}/datasets/${singleDataset.id}`, -// validateTable: validateRunsTableWithId, - -// async getMaxPages(client, filter, pageNumber) { -// const { data } = await getDatasetById({ -// client, -// params: getParamsFromFilter(filter), -// page: pageNumber, -// id: +singleDataset.id, -// }) -// const count = data.datasets.at(0)?.filtered_runs_count.aggregate?.count ?? 0 - -// return Math.ceil(count / MAX_PER_PAGE) -// }, -// }) +/* + * NOTE: This file does not use the preferred page object pattern. + * This is because we did not have time to refactor. + * Please do not use this file as an example of how to write tests. + */ + +import { BROWSE_DATASETS_URL, E2E_CONFIG } from './constants' +import { testPagination } from './pagination/testPagination' + +const { pagination } = E2E_CONFIG +const { browseDatasets, singleDataset } = pagination + +testPagination({ + testFilter: browseDatasets.filter, + testFilterWithNoPages: browseDatasets.filterWithNoPages, + url: BROWSE_DATASETS_URL, +}) + +testPagination({ + testFilter: singleDataset.filter, + testFilterWithNoPages: singleDataset.filterWithNoPages, + url: `${E2E_CONFIG.url}/datasets/${singleDataset.id}`, +}) diff --git a/frontend/packages/data-portal/e2e/pagination/testPagination.ts b/frontend/packages/data-portal/e2e/pagination/testPagination.ts index 56033fb3f..f282570f4 100644 --- a/frontend/packages/data-portal/e2e/pagination/testPagination.ts +++ b/frontend/packages/data-portal/e2e/pagination/testPagination.ts @@ -1,211 +1,181 @@ -// /* -// * NOTE: This file does not use the preferred page object pattern. -// * This is because we did not have time to refactor. -// * Please do not use this file as an example of how to write tests. -// */ -// import { expect, Page, test } from '@playwright/test' -// import { getApolloClient } from 'e2e/apollo' -// import { E2E_CONFIG } from 'e2e/constants' -// import { goTo } from 'e2e/filters/utils' -// import { TableValidator } from 'e2e/pageObjects/filters/types' -// import { isNumber } from 'lodash-es' - -// import { QueryParams } from 'app/constants/query' -// import { TestIds } from 'app/constants/testIds' - -// import { -// GetMaxPages, -// PaginationFilter, -// TestOptions as PaginationTestOptions, -// } from './types' -// import { getParamsFromFilter } from './utils' - -// function getPagination(page: Page) { -// return page.getByTestId(TestIds.Pagination) -// } - -// function getPreviousButton(page: Page) { -// return page.locator(`[data-order="first"]`) -// } - -// function getNextButton(page: Page) { -// return page.locator(`[data-order="last"]`) -// } - -// async function clickVisiblePageButton(page: Page, pageNumber: number) { -// await getPagination(page).getByText(`${pageNumber}`).click() -// } - -// async function openPaginationDropdown(page: Page) { -// await page.getByLabel('Go to a page').click() -// } - -// async function selectPaginationDropdownOption(page: Page, pageNumber: number) { -// await page.getByRole('menu').getByText(`${pageNumber}`).click() -// } - -// async function waitForPageNumber(page: Page, pageNumber: number) { -// await page.waitForURL( -// (url) => url.searchParams.get(QueryParams.Page) === `${pageNumber}`, -// ) -// } - -// const { pagination } = E2E_CONFIG - -// export function testPagination({ -// getMaxPages, -// rowLoadedSelector, -// testFilter, -// testFilterWithNoPages, -// url, -// validateTable, -// }: { -// getMaxPages: GetMaxPages -// rowLoadedSelector: string -// testFilter: PaginationFilter -// testFilterWithNoPages: PaginationFilter -// url: string -// validateTable: TableValidator -// }) { -// test.describe(url.replace(E2E_CONFIG.url, ''), () => { -// let client = getApolloClient() - -// test.beforeEach(() => { -// client = getApolloClient() -// }) - -// async function openPage({ -// filter, -// page, -// pageNumber, -// }: { -// filter?: PaginationFilter -// page: Page -// pageNumber?: number -// }) { -// const nextUrl = new URL(url) - -// if (filter) { -// nextUrl.searchParams.set(filter.key, filter.value) -// } - -// if (isNumber(pageNumber)) { -// nextUrl.searchParams.set('page', `${pageNumber}`) -// } - -// await goTo(page, nextUrl.href) -// } - -// function testMaxPageCount({ filter }: PaginationTestOptions = {}) { -// test(`should show correct max page count${ -// filter ? ' when filtered' : '' -// }`, async ({ page }) => { -// await openPage({ page, filter }) - -// const maxPages = await getMaxPages(client, filter) -// await expect(getPagination(page)).toContainText(`${maxPages}`) -// }) -// } - -// function testSelectPage({ pageNumber = 1, filter }: PaginationTestOptions) { -// test(`should load correct items when selecting a page${ -// filter ? ' and is filtered' : '' -// }`, async ({ page }) => { -// await openPage({ page, filter }) - -// await clickVisiblePageButton(page, pageNumber) -// await page.waitForSelector(rowLoadedSelector) - -// await waitForPageNumber(page, pageNumber) -// await validateTable({ -// client, -// page, -// pageNumber, -// params: getParamsFromFilter(filter), -// }) -// }) -// } - -// function testSelectPageFromDropdown({ -// filter, -// pageNumber = 1, -// }: PaginationTestOptions) { -// test(`should load correct items when selecting a page from dropdown${ -// filter ? ' and is filtered' : '' -// }`, async ({ page }) => { -// await openPage({ page, filter }) - -// await openPaginationDropdown(page) -// await selectPaginationDropdownOption(page, pageNumber) -// await page.waitForSelector(rowLoadedSelector) - -// await waitForPageNumber(page, pageNumber) -// await validateTable({ -// client, -// page, -// pageNumber, -// params: getParamsFromFilter(filter), -// }) -// }) -// } - -// testMaxPageCount() -// testMaxPageCount({ filter: testFilter }) - -// testSelectPage({ pageNumber: pagination.selectPage }) -// testSelectPage({ pageNumber: pagination.selectPage, filter: testFilter }) - -// testSelectPageFromDropdown({ -// pageNumber: pagination.selectPageFromDropdown, -// }) -// testSelectPageFromDropdown({ -// pageNumber: pagination.selectPageFromDropdown, -// filter: testFilter, -// }) - -// test('should load next page when clicking on next button', async ({ -// page, -// }) => { -// await openPage({ page }) -// await getNextButton(page).click() -// await page.waitForSelector(rowLoadedSelector) -// await waitForPageNumber(page, 2) -// await validateTable({ -// client, -// page, -// pageNumber: 2, -// }) -// }) - -// test('should load previous page when clicking on previous button', async ({ -// page, -// }) => { -// await openPage({ page, pageNumber: 2 }) -// await getPreviousButton(page).click() -// await page.waitForSelector(rowLoadedSelector) -// await waitForPageNumber(page, 1) -// await validateTable({ -// client, -// page, -// }) -// }) - -// test('should disable previous button when on first page', async ({ -// page, -// }) => { -// await openPage({ page }) -// await expect(getPreviousButton(page)).toHaveAttribute('disabled') -// }) - -// test('should disable next button when on last page', async ({ page }) => { -// const maxPages = await getMaxPages(client) -// await openPage({ page, pageNumber: maxPages }) -// await expect(getNextButton(page)).toHaveAttribute('disabled') -// }) - -// test('should hide pagination when maxPages is 1', async ({ page }) => { -// await openPage({ page, filter: testFilterWithNoPages }) -// await expect(getPagination(page)).toBeHidden() -// }) -// }) -// } +/* + * NOTE: This file does not use the preferred page object pattern. + * This is because we did not have time to refactor. + * Please do not use this file as an example of how to write tests. + */ +import { expect, test } from '@chromatic-com/playwright' +import { Page } from '@playwright/test' +import { E2E_CONFIG } from 'e2e/constants' +import { goTo } from 'e2e/filters/utils' +import { waitForTableReload } from 'e2e/utils' +import { isNumber } from 'lodash-es' + +import { QueryParams } from 'app/constants/query' +import { TestIds } from 'app/constants/testIds' + +import { PaginationFilter, TestOptions as PaginationTestOptions } from './types' + +function getPagination(page: Page) { + return page.getByTestId(TestIds.Pagination) +} + +function getPreviousButton(page: Page) { + return page.locator(`[data-order="first"]`) +} + +function getNextButton(page: Page) { + return page.locator(`[data-order="last"]`) +} + +async function getLastPageButton(page: Page) { + const items = getPagination(page).locator('li') + const itemCount = await items.count() + return items.nth(itemCount - 2) +} + +async function clickVisiblePageButton(page: Page, pageNumber: number) { + await getPagination(page).getByText(`${pageNumber}`).click() +} + +async function openPaginationDropdown(page: Page) { + await page.getByLabel('Go to a page').click() +} + +async function selectPaginationDropdownOption(page: Page, pageNumber: number) { + await page + .getByRole('menu') + .getByText(`${pageNumber}`, { exact: true }) + .click() +} + +async function waitForPageNumber(page: Page, pageNumber: number) { + await page.waitForURL( + (url) => url.searchParams.get(QueryParams.Page) === `${pageNumber}`, + ) +} + +const { pagination } = E2E_CONFIG + +export function testPagination({ + testFilter, + testFilterWithNoPages, + url, +}: { + testFilter: PaginationFilter + testFilterWithNoPages: PaginationFilter + url: string +}) { + test.describe(url.replace(E2E_CONFIG.url, ''), () => { + async function openPage({ + filter, + page, + pageNumber, + }: { + filter?: PaginationFilter + page: Page + pageNumber?: number + }) { + const nextUrl = new URL(url) + + if (filter) { + nextUrl.searchParams.set(filter.key, filter.value) + } + + if (isNumber(pageNumber)) { + nextUrl.searchParams.set('page', `${pageNumber}`) + } + + await goTo(page, nextUrl.href) + } + + function testMaxPageCount({ filter }: PaginationTestOptions = {}) { + test(`should show correct max page count${ + filter ? ' when filtered' : '' + }`, async ({ page }) => { + await openPage({ page, filter }) + }) + } + + function testSelectPage({ pageNumber = 1, filter }: PaginationTestOptions) { + test(`should load correct items when selecting a page${ + filter ? ' and is filtered' : '' + }`, async ({ page }) => { + await openPage({ page, filter }) + await clickVisiblePageButton(page, pageNumber) + + await waitForPageNumber(page, pageNumber) + await waitForTableReload(page) + }) + } + + function testSelectPageFromDropdown({ + filter, + pageNumber = 1, + }: PaginationTestOptions) { + test(`should load correct items when selecting a page from dropdown${ + filter ? ' and is filtered' : '' + }`, async ({ page }) => { + await openPage({ page, filter }) + + await openPaginationDropdown(page) + await selectPaginationDropdownOption(page, pageNumber) + + await waitForPageNumber(page, pageNumber) + await waitForTableReload(page) + }) + } + + testMaxPageCount() + testMaxPageCount({ filter: testFilter }) + + testSelectPage({ pageNumber: pagination.selectPage }) + testSelectPage({ pageNumber: pagination.selectPage, filter: testFilter }) + + testSelectPageFromDropdown({ + pageNumber: pagination.selectPageFromDropdown, + }) + testSelectPageFromDropdown({ + pageNumber: pagination.selectPageFromDropdown, + filter: testFilter, + }) + + test('should load next page when clicking on next button', async ({ + page, + }) => { + await openPage({ page }) + await getNextButton(page).click() + await waitForPageNumber(page, 2) + await waitForTableReload(page) + }) + + test('should load previous page when clicking on previous button', async ({ + page, + }) => { + await openPage({ page, pageNumber: 2 }) + await getPreviousButton(page).click() + await waitForPageNumber(page, 1) + await waitForTableReload(page) + }) + + test('should disable previous button when on first page', async ({ + page, + }) => { + await openPage({ page }) + await expect(getPreviousButton(page)).toHaveAttribute('disabled') + }) + + test('should disable next button when on last page', async ({ page }) => { + await openPage({ page }) + + const lastPageButton = await getLastPageButton(page) + await lastPageButton.click() + + await expect(getNextButton(page)).toHaveAttribute('disabled') + }) + + test('should hide pagination when maxPages is 1', async ({ page }) => { + await openPage({ page, filter: testFilterWithNoPages }) + await expect(getPagination(page)).toBeHidden() + }) + }) +} diff --git a/frontend/packages/data-portal/e2e/singleDatasetFilters.test.ts b/frontend/packages/data-portal/e2e/singleDatasetFilters.test.ts index 775290b77..27a6a18aa 100644 --- a/frontend/packages/data-portal/e2e/singleDatasetFilters.test.ts +++ b/frontend/packages/data-portal/e2e/singleDatasetFilters.test.ts @@ -1,402 +1,265 @@ -// import { ApolloClient, NormalizedCacheObject } from '@apollo/client' -// import { test } from '@playwright/test' -// import { FiltersActor } from 'e2e/pageObjects/filters/filtersActor' -// import { FiltersPage } from 'e2e/pageObjects/filters/filtersPage' - -// import { QueryParams } from 'app/constants/query' -// import { ObjectShapeType } from 'app/types/shapeTypes' -// import { getPrefixedId } from 'app/utils/idPrefixes' - -// import { getApolloClient } from './apollo' -// import { E2E_CONFIG, SINGLE_DATASET_URL, translations } from './constants' -// import { getObjectShapeTypeLabel, onlyRunIfEnabled } from './utils' - -// test.describe('Single dataset page filters', () => { -// let client: ApolloClient -// let filtersPage: FiltersPage -// let filtersActor: FiltersActor - -// test.beforeEach(({ page }) => { -// client = getApolloClient() - -// filtersPage = new FiltersPage(page) -// filtersActor = new FiltersActor(filtersPage) -// }) -// test.describe('Ground Truth Annotation Filter', () => { -// test('should filter on click', async () => { -// await filtersPage.goTo(SINGLE_DATASET_URL) - -// await filtersPage.toggleGroundTruthFilter() - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'true', -// }, -// ], -// }) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'true', -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'true', -// }, -// ], -// }) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'true', -// }, -// ], -// }) -// }) -// test('should disable filter on click', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.GroundTruthAnnotation, -// queryParamValue: 'true', -// }, -// ], -// }) - -// await filtersPage.toggleGroundTruthFilter() - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// test.describe('Deposition ID filter', () => { -// onlyRunIfEnabled('depositions') - -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_DATASET_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.depositionId, -// filter: { -// label: translations.depositionId, -// value: E2E_CONFIG.depositionId, -// }, -// hasMultipleFilters: false, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) - -// await filtersPage.expectFilterTagToExist( -// getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), -// ) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) -// }) -// test('should filter by deposition ID when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) - -// await filtersPage.expectFilterTagToExist( -// getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), -// ) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) -// }) -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter( -// getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), -// ) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// test.describe('Object Name filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_DATASET_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.objectName, -// value: E2E_CONFIG.objectName, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) -// }) -// test('should filter by object name when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) -// }) -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption(E2E_CONFIG.objectName) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// test.describe('Object Shape Type filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_DATASET_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.objectShapeType, -// value: getObjectShapeTypeLabel( -// E2E_CONFIG.objectShapeType as ObjectShapeType, -// ), -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) -// }) -// test('should filter by object shape type when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) -// }) -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption( -// getObjectShapeTypeLabel(E2E_CONFIG.objectShapeType as ObjectShapeType), -// ) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndRunsTableToMatch({ -// client, -// id: +E2E_CONFIG.datasetId, -// url: SINGLE_DATASET_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// }) +import { test } from '@chromatic-com/playwright' +import { FiltersActor } from 'e2e/pageObjects/filters/filtersActor' +import { FiltersPage } from 'e2e/pageObjects/filters/filtersPage' + +import { QueryParams } from 'app/constants/query' +import { ObjectShapeType } from 'app/types/shapeTypes' +import { getPrefixedId } from 'app/utils/idPrefixes' + +import { E2E_CONFIG, SINGLE_DATASET_URL, translations } from './constants' +import { getObjectShapeTypeLabel, onlyRunIfEnabled } from './utils' + +test.describe('Single dataset page filters', () => { + let filtersPage: FiltersPage + let filtersActor: FiltersActor + + test.beforeEach(({ page }) => { + filtersPage = new FiltersPage(page) + filtersActor = new FiltersActor(filtersPage) + }) + test.describe('Ground Truth Annotation Filter', () => { + test('should filter on click', async () => { + await filtersPage.goTo(SINGLE_DATASET_URL) + + await filtersPage.toggleGroundTruthFilter() + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.GroundTruthAnnotation, + queryParamValue: 'true', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.GroundTruthAnnotation, + queryParamValue: 'true', + }, + ], + }) + }) + test('should disable filter on click', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.GroundTruthAnnotation, + queryParamValue: 'true', + }, + ], + }) + + await filtersPage.toggleGroundTruthFilter() + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + test.describe('Deposition ID filter', () => { + onlyRunIfEnabled('depositions') + + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_DATASET_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.depositionId, + filter: { + label: translations.depositionId, + value: E2E_CONFIG.depositionId, + }, + hasMultipleFilters: false, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DepositionId, + queryParamValue: E2E_CONFIG.depositionId, + }, + ], + }) + + await filtersPage.expectFilterTagToExist( + getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), + ) + + await filtersPage.waitForTableLoad() + }) + test('should filter by deposition ID when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DepositionId, + queryParamValue: E2E_CONFIG.depositionId, + }, + ], + }) + + await filtersPage.expectFilterTagToExist( + getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), + ) + }) + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DepositionId, + queryParamValue: E2E_CONFIG.depositionId, + }, + ], + }) + + await filtersPage.removeMultiInputFilter( + getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), + ) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + test.describe('Object Name filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_DATASET_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.objectName, + value: E2E_CONFIG.objectName, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectName, + queryParamValue: E2E_CONFIG.objectName, + }, + ], + }) + }) + test('should filter by object name when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectName, + queryParamValue: E2E_CONFIG.objectName, + }, + ], + }) + }) + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectName, + queryParamValue: E2E_CONFIG.objectName, + }, + ], + }) + + await filtersPage.removeFilterOption(E2E_CONFIG.objectName) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + test.describe('Object Shape Type filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_DATASET_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.objectShapeType, + value: getObjectShapeTypeLabel( + E2E_CONFIG.objectShapeType as ObjectShapeType, + ), + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectShapeType, + queryParamValue: E2E_CONFIG.objectShapeType, + }, + ], + }) + }) + test('should filter by object shape type when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectShapeType, + queryParamValue: E2E_CONFIG.objectShapeType, + }, + ], + }) + }) + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectShapeType, + queryParamValue: E2E_CONFIG.objectShapeType, + }, + ], + }) + + await filtersPage.removeFilterOption( + getObjectShapeTypeLabel(E2E_CONFIG.objectShapeType as ObjectShapeType), + ) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_DATASET_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) +}) diff --git a/frontend/packages/data-portal/e2e/singleRun.test.ts b/frontend/packages/data-portal/e2e/singleRun.test.ts index ccb87b2cc..146a95c95 100644 --- a/frontend/packages/data-portal/e2e/singleRun.test.ts +++ b/frontend/packages/data-portal/e2e/singleRun.test.ts @@ -1,94 +1,51 @@ -// import { ApolloClient, NormalizedCacheObject } from '@apollo/client' -// import { expect, test } from '@playwright/test' - -// import { getApolloClient } from './apollo' -// import { NeuroglancerPage } from './pageObjects/neuroglancerPage' -// import { SingleRunPage } from './pageObjects/singleRunPage' - -// test.describe('Single run page: ', () => { -// let client: ApolloClient -// let page: SingleRunPage -// let neuroglancerPage: NeuroglancerPage - -// test.beforeEach(async ({ page: playwrightPage }) => { -// client = getApolloClient() -// page = new SingleRunPage(playwrightPage, client) -// neuroglancerPage = new NeuroglancerPage(playwrightPage) - -// await page.goToPage() -// }) - -// /** This test ensures that the test after it is not a false negative. */ -// test('Invalid Neuroglancer URL results in error on Neuroglancer page', async () => { -// await page.goTo( -// (await page.getPrimaryViewTomogramButton().getAttribute('href'))!.replace( -// '#!', -// "#!'", -// ), -// ) - -// await expect(neuroglancerPage.findViewer()).toBeVisible() -// await expect(neuroglancerPage.findErrorText()).toHaveCount(1) -// }) - -// test('Neuroglancer URL does not result in error on Neuroglancer page', async () => { -// await page.goTo( -// (await page.getPrimaryViewTomogramButton().getAttribute('href'))!, -// ) - -// await expect(neuroglancerPage.findViewer()).toBeVisible() -// await expect(neuroglancerPage.findErrorText()).toHaveCount(0) -// }) - -// test('Processing methods displayed', async () => { -// const response = ( -// await page.loadData() -// ).data.tomograms_for_distinct_processing_methods.map( -// (tomogram) => tomogram.processing, -// ) - -// expect( -// (await page.findProcessingMethodsCell().textContent())! -// .toLowerCase() -// .split(','), -// ).toEqual(response) -// }) - -// test('Annotated Objects collapse after 7 items', async () => { -// const response = (await page.loadData()).data.annotations_for_object_names - -// if (response.length > 7) { -// // Collapsed: -// expect((await page.findAnnotatedObjectsTexts()).length).toBe(6) -// await expect( -// page -// .findAnnotatedObjectsCell() -// .getByText( -// `Show ${ -// response.length - (await page.findAnnotatedObjectsTexts()).length -// } More`, -// ), -// ).toBeVisible() - -// await page.findAnnotatedObjectsCollapseToggle().click() - -// // Expanded: -// expect((await page.findAnnotatedObjectsTexts()).length).toBe( -// response.length, -// ) -// await expect( -// page.findAnnotatedObjectsCell().getByText('Show less'), -// ).toBeVisible() - -// await page.findAnnotatedObjectsCollapseToggle().click() - -// // Collapsed: -// expect((await page.findAnnotatedObjectsTexts()).length).toBe(6) -// } else { -// expect((await page.findAnnotatedObjectsTexts()).length).toBe( -// response.length, -// ) -// await expect(page.findAnnotatedObjectsCollapseToggle()).toHaveCount(0) -// } -// }) -// }) +import { expect, takeSnapshot, test } from '@chromatic-com/playwright' + +import { NeuroglancerPage } from './pageObjects/neuroglancerPage' +import { SingleRunPage } from './pageObjects/singleRunPage' + +test.describe('Single run page: ', () => { + let page: SingleRunPage + let neuroglancerPage: NeuroglancerPage + + test.beforeEach(async ({ page: playwrightPage }) => { + page = new SingleRunPage(playwrightPage) + neuroglancerPage = new NeuroglancerPage(playwrightPage) + + await page.goToPage() + }) + + /** This test ensures that the test after it is not a false negative. */ + test('Invalid Neuroglancer URL results in error on Neuroglancer page', async () => { + await page.goTo( + (await page.getPrimaryViewTomogramButton().getAttribute('href'))!.replace( + '#!', + "#!'", + ), + ) + + await expect(neuroglancerPage.findViewer()).toBeVisible() + await expect(neuroglancerPage.findErrorText()).toHaveCount(1) + }) + + test('Neuroglancer URL does not result in error on Neuroglancer page', async () => { + await page.goTo( + (await page.getPrimaryViewTomogramButton().getAttribute('href'))!, + ) + + await expect(neuroglancerPage.findViewer()).toBeVisible() + await expect(neuroglancerPage.findErrorText()).toHaveCount(0) + }) + + test('Processing methods displayed', async () => {}) + + test('Annotated Objects collapse after 7 items', async ({ + page: playwrightPage, + }, testInfo) => { + const showMoreButton = page.findAnnotatedObjectsCollapseToggle() + const isShowMoreVisible = await showMoreButton.isVisible() + if (isShowMoreVisible) { + await takeSnapshot(playwrightPage, 'before expanding', testInfo) + await showMoreButton.click() + } + }) +}) diff --git a/frontend/packages/data-portal/e2e/singleRunFilters.test.ts b/frontend/packages/data-portal/e2e/singleRunFilters.test.ts index fa3634c1f..9eacf1182 100644 --- a/frontend/packages/data-portal/e2e/singleRunFilters.test.ts +++ b/frontend/packages/data-portal/e2e/singleRunFilters.test.ts @@ -1,789 +1,526 @@ -// import { ApolloClient, NormalizedCacheObject } from '@apollo/client' -// import { test } from '@playwright/test' -// import { FiltersActor } from 'e2e/pageObjects/filters/filtersActor' -// import { FiltersPage } from 'e2e/pageObjects/filters/filtersPage' - -// import { QueryParams } from 'app/constants/query' -// import { ObjectShapeType } from 'app/types/shapeTypes' -// import { getPrefixedId } from 'app/utils/idPrefixes' - -// import { getApolloClient } from './apollo' -// import { E2E_CONFIG, SINGLE_RUN_URL, translations } from './constants' -// import { getObjectShapeTypeLabel, onlyRunIfEnabled } from './utils' - -// test.describe('Single run page filters', () => { -// let client: ApolloClient -// let filtersPage: FiltersPage -// let filtersActor: FiltersActor - -// test.beforeEach(({ page }) => { -// client = getApolloClient() -// filtersPage = new FiltersPage(page) -// filtersActor = new FiltersActor(filtersPage) -// }) - -// test.describe('Annotation Author filter', () => { -// test.describe('Author Name filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_RUN_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.annotationAuthor, -// filter: { -// label: translations.authorName, -// value: E2E_CONFIG.authorName, -// }, -// hasMultipleFilters: true, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorName, -// queryParamValue: E2E_CONFIG.authorName, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorName, -// queryParamValue: E2E_CONFIG.authorName, -// }, -// ], -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorName, -// queryParamValue: E2E_CONFIG.authorName, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorName, -// queryParamValue: E2E_CONFIG.authorName, -// }, -// ], -// }) -// }) - -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorName, -// queryParamValue: E2E_CONFIG.authorName, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter(E2E_CONFIG.authorName) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// test.describe('Author ORCID filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_RUN_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.annotationAuthor, -// filter: { -// label: translations.authorOrcid, -// value: E2E_CONFIG.authorOrcId, -// }, -// hasMultipleFilters: true, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorOrcid, -// queryParamValue: E2E_CONFIG.authorOrcId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorOrcid, -// queryParamValue: E2E_CONFIG.authorOrcId, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorOrcid, -// queryParamValue: E2E_CONFIG.authorOrcId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorOrcid, -// queryParamValue: E2E_CONFIG.authorOrcId, -// }, -// ], -// }) -// }) -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AuthorOrcid, -// queryParamValue: E2E_CONFIG.authorOrcId, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter(E2E_CONFIG.authorOrcId) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// }) -// test.describe('Deposition ID filter', () => { -// onlyRunIfEnabled('depositions') - -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_RUN_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.depositionId, -// filter: { -// label: translations.depositionId, -// value: E2E_CONFIG.depositionId, -// }, -// hasMultipleFilters: false, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) - -// await filtersPage.expectFilterTagToExist( -// getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), -// ) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) - -// await filtersPage.expectFilterTagToExist( -// getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), -// ) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) -// }) -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.DepositionId, -// queryParamValue: E2E_CONFIG.depositionId, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter( -// getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), -// ) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [], -// }) -// }) -// }) -// test.describe('Object Name filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_RUN_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.objectName, -// value: E2E_CONFIG.objectName, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) -// }) - -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectName, -// queryParamValue: E2E_CONFIG.objectName, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption(E2E_CONFIG.objectName) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('Object ID filter (GO ID)', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_RUN_URL) - -// await filtersActor.addMultiInputFilter({ -// buttonLabel: translations.objectId, -// filter: { -// label: translations.objectId, -// value: E2E_CONFIG.objectId, -// }, -// hasMultipleFilters: false, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectId, -// queryParamValue: E2E_CONFIG.objectId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectId, -// queryParamValue: E2E_CONFIG.objectId, -// }, -// ], -// }) -// }) -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectId, -// queryParamValue: E2E_CONFIG.objectId, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectId, -// queryParamValue: E2E_CONFIG.objectId, -// }, -// ], -// }) -// }) - -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectId, -// queryParamValue: E2E_CONFIG.objectId, -// }, -// ], -// }) - -// await filtersPage.removeMultiInputFilter(E2E_CONFIG.objectId) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('Object Shape Type filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_RUN_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.objectShapeType, -// value: getObjectShapeTypeLabel( -// E2E_CONFIG.objectShapeType as ObjectShapeType, -// ), -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) -// }) - -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.ObjectShapeType, -// queryParamValue: E2E_CONFIG.objectShapeType, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption( -// getObjectShapeTypeLabel(E2E_CONFIG.objectShapeType as ObjectShapeType), -// ) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('Method Type filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_RUN_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.methodType, -// value: E2E_CONFIG.methodType, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.MethodType, -// queryParamValue: E2E_CONFIG.methodType, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.MethodType, -// queryParamValue: E2E_CONFIG.methodType, -// }, -// ], -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.MethodType, -// queryParamValue: E2E_CONFIG.methodType, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.MethodType, -// queryParamValue: E2E_CONFIG.methodType, -// }, -// ], -// }) -// }) - -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.MethodType, -// queryParamValue: E2E_CONFIG.methodType, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption(E2E_CONFIG.methodType) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) - -// test.describe('Annotation software filter', () => { -// test('should filter when selecting', async () => { -// await filtersPage.goTo(SINGLE_RUN_URL) - -// await filtersActor.addSingleSelectFilter({ -// label: translations.annotationSoftware, -// value: E2E_CONFIG.annotationSoftware, -// }) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AnnotationSoftware, -// queryParamValue: E2E_CONFIG.annotationSoftware, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AnnotationSoftware, -// queryParamValue: E2E_CONFIG.annotationSoftware, -// }, -// ], -// }) -// }) - -// test('should filter when opening URL', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AnnotationSoftware, -// queryParamValue: E2E_CONFIG.annotationSoftware, -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AnnotationSoftware, -// queryParamValue: E2E_CONFIG.annotationSoftware, -// }, -// ], -// }) -// }) - -// test('should remove filter when deselecting', async () => { -// await filtersActor.goToFilteredUrl({ -// baseUrl: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: QueryParams.AnnotationSoftware, -// queryParamValue: E2E_CONFIG.annotationSoftware, -// }, -// ], -// }) - -// await filtersPage.removeFilterOption(E2E_CONFIG.annotationSoftware) - -// await filtersActor.expectUrlQueryParamsToBeCorrect({ -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) - -// await filtersActor.expectDataAndAnnotationsTableToMatch({ -// client, -// id: +E2E_CONFIG.runId, -// url: SINGLE_RUN_URL, -// queryParamsList: [ -// { -// queryParamKey: undefined, -// queryParamValue: '', -// }, -// ], -// }) -// }) -// }) -// }) +import { test } from '@chromatic-com/playwright' +import { FiltersActor } from 'e2e/pageObjects/filters/filtersActor' +import { FiltersPage } from 'e2e/pageObjects/filters/filtersPage' + +import { QueryParams } from 'app/constants/query' +import { ObjectShapeType } from 'app/types/shapeTypes' +import { getPrefixedId } from 'app/utils/idPrefixes' + +import { E2E_CONFIG, SINGLE_RUN_URL, translations } from './constants' +import { getObjectShapeTypeLabel, onlyRunIfEnabled } from './utils' + +test.describe('Single run page filters', () => { + let filtersPage: FiltersPage + let filtersActor: FiltersActor + + test.beforeEach(({ page }) => { + filtersPage = new FiltersPage(page) + filtersActor = new FiltersActor(filtersPage) + }) + + test.describe('Annotation Author filter', () => { + test.describe('Author Name filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_RUN_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.annotationAuthor, + filter: { + label: translations.authorName, + value: E2E_CONFIG.authorName, + }, + hasMultipleFilters: true, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorName, + queryParamValue: E2E_CONFIG.authorName, + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorName, + queryParamValue: E2E_CONFIG.authorName, + }, + ], + }) + }) + + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorName, + queryParamValue: E2E_CONFIG.authorName, + }, + ], + }) + + await filtersPage.removeMultiInputFilter(E2E_CONFIG.authorName) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + test.describe('Author ORCID filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_RUN_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.annotationAuthor, + filter: { + label: translations.authorOrcid, + value: E2E_CONFIG.authorOrcId, + }, + hasMultipleFilters: true, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorOrcid, + queryParamValue: E2E_CONFIG.authorOrcId, + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorOrcid, + queryParamValue: E2E_CONFIG.authorOrcId, + }, + ], + }) + }) + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AuthorOrcid, + queryParamValue: E2E_CONFIG.authorOrcId, + }, + ], + }) + + await filtersPage.removeMultiInputFilter(E2E_CONFIG.authorOrcId) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + }) + test.describe('Deposition ID filter', () => { + onlyRunIfEnabled('depositions') + + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_RUN_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.depositionId, + filter: { + label: translations.depositionId, + value: E2E_CONFIG.depositionId, + }, + hasMultipleFilters: false, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DepositionId, + queryParamValue: E2E_CONFIG.depositionId, + }, + ], + }) + + await filtersPage.expectFilterTagToExist( + getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), + ) + + await filtersPage.waitForTableLoad() + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DepositionId, + queryParamValue: E2E_CONFIG.depositionId, + }, + ], + }) + + await filtersPage.expectFilterTagToExist( + getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), + ) + }) + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.DepositionId, + queryParamValue: E2E_CONFIG.depositionId, + }, + ], + }) + + await filtersPage.removeMultiInputFilter( + getPrefixedId(E2E_CONFIG.depositionId, QueryParams.DepositionId), + ) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + test.describe('Object Name filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_RUN_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.objectName, + value: E2E_CONFIG.objectName, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectName, + queryParamValue: E2E_CONFIG.objectName, + }, + ], + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectName, + queryParamValue: E2E_CONFIG.objectName, + }, + ], + }) + }) + + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectName, + queryParamValue: E2E_CONFIG.objectName, + }, + ], + }) + + await filtersPage.removeFilterOption(E2E_CONFIG.objectName) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('Object ID filter (GO ID)', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_RUN_URL) + + await filtersActor.addMultiInputFilter({ + buttonLabel: translations.objectId, + filter: { + label: translations.objectId, + value: E2E_CONFIG.objectId, + }, + hasMultipleFilters: false, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectId, + queryParamValue: E2E_CONFIG.objectId, + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectId, + queryParamValue: E2E_CONFIG.objectId, + }, + ], + }) + }) + + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectId, + queryParamValue: E2E_CONFIG.objectId, + }, + ], + }) + + await filtersPage.removeMultiInputFilter(E2E_CONFIG.objectId) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('Object Shape Type filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_RUN_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.objectShapeType, + value: getObjectShapeTypeLabel( + E2E_CONFIG.objectShapeType as ObjectShapeType, + ), + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectShapeType, + queryParamValue: E2E_CONFIG.objectShapeType, + }, + ], + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectShapeType, + queryParamValue: E2E_CONFIG.objectShapeType, + }, + ], + }) + }) + + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.ObjectShapeType, + queryParamValue: E2E_CONFIG.objectShapeType, + }, + ], + }) + + await filtersPage.removeFilterOption( + getObjectShapeTypeLabel(E2E_CONFIG.objectShapeType as ObjectShapeType), + ) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('Method Type filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_RUN_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.methodType, + value: E2E_CONFIG.methodType, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.MethodType, + queryParamValue: E2E_CONFIG.methodType, + }, + ], + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.MethodType, + queryParamValue: E2E_CONFIG.methodType, + }, + ], + }) + }) + + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.MethodType, + queryParamValue: E2E_CONFIG.methodType, + }, + ], + }) + + await filtersPage.removeFilterOption(E2E_CONFIG.methodType) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) + + test.describe('Annotation software filter', () => { + test('should filter when selecting', async () => { + await filtersPage.goTo(SINGLE_RUN_URL) + + await filtersActor.addSingleSelectFilter({ + label: translations.annotationSoftware, + value: E2E_CONFIG.annotationSoftware, + }) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AnnotationSoftware, + queryParamValue: E2E_CONFIG.annotationSoftware, + }, + ], + }) + }) + + test('should filter when opening URL', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AnnotationSoftware, + queryParamValue: E2E_CONFIG.annotationSoftware, + }, + ], + }) + }) + + test('should remove filter when deselecting', async () => { + await filtersActor.goToFilteredUrl({ + baseUrl: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: QueryParams.AnnotationSoftware, + queryParamValue: E2E_CONFIG.annotationSoftware, + }, + ], + }) + + await filtersPage.removeFilterOption(E2E_CONFIG.annotationSoftware) + + await filtersActor.expectUrlQueryParamsToBeCorrect({ + url: SINGLE_RUN_URL, + queryParamsList: [ + { + queryParamKey: undefined, + queryParamValue: '', + }, + ], + }) + + await filtersPage.waitForTableLoad() + }) + }) +}) diff --git a/frontend/packages/data-portal/e2e/utils.ts b/frontend/packages/data-portal/e2e/utils.ts index 42a6517ad..63e4bd82e 100644 --- a/frontend/packages/data-portal/e2e/utils.ts +++ b/frontend/packages/data-portal/e2e/utils.ts @@ -1,4 +1,5 @@ -import { Page, test } from '@playwright/test' +import { test } from '@chromatic-com/playwright' +import { Page } from '@playwright/test' import { shapeTypeToI18nKey } from 'app/constants/objectShapeTypes' import { ObjectShapeType } from 'app/types/shapeTypes'