Skip to content

Commit

Permalink
Merge branch 'main' into 17-query-interface
Browse files Browse the repository at this point in the history
  • Loading branch information
Nate Lanza committed Oct 21, 2024
2 parents c96d041 + 968219f commit f3d5eb4
Show file tree
Hide file tree
Showing 49 changed files with 1,366 additions and 3,011 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ module.exports = {
'import/no-cycle': 'off',
'no-underscore-dangle': 'off',
'no-nested-ternary': 'off',
'jsx-a11y/tabindex-no-positive': 'off',
'no-bitwise': 'warn',
},
};
78 changes: 22 additions & 56 deletions e2e-tests/alttext.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { test, expect } from '@playwright/test';
import mockData from '../playwright/mock-data/simpsons/simpsons_data.json';
import mockAnnotations from '../playwright/mock-data/simpsons/simpsons_annotations.json';
import mockAltText from '../playwright/mock-data/simpsons/simpsons_alttxt.json';
import { beforeTest } from './common';

const alttxt = {
upsetIntroduction: 'This is an UpSet plot that visualizes set intersection. To learn about UpSet plots, visit https://upset.app.',
Expand All @@ -12,43 +10,15 @@ const alttxt = {
trendAnalysis: 'The intersection sizes start from a value of 1 and then drastically rise up to 3. The empty intersection is present with a size of 3. An all set intersection is not present. The individual set intersections are large in size. The low degree set intersections lie in medium and largest sized intersections. The medium degree set intersections can be seen among small sized intersections. No high order intersections are present.',
};

test.beforeEach(async ({ page }) => {
await page.route('*/**/api/**', async (route) => {
const url = route.request().url();
let json;

if (url) {
if (url.includes('workspaces/Upset%20Examples/tables/simpsons/rows/?limit=9007199254740991')) {
json = mockData;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/tables/simpsons/annotations/')) {
json = mockAnnotations;
await route.fulfill({ json });
} else if (url.includes('alttxt')) {
json = mockAltText;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/sessions/table/193/state/')) {
await route.fulfill({ status: 200 });
} else {
await route.continue();
}
} else {
await route.abort();
}
});
});
test.beforeEach(beforeTest);

test('Alt Text', async ({ page }) => {
await page.goto('http://localhost:3000/?workspace=Upset+Examples&table=simpsons&sessionId=193');

const altTextSidebarButton = await page.getByLabel('Alt Text Sidebar', { exact: true });
await expect(altTextSidebarButton).toBeVisible();
await altTextSidebarButton.click();

const altTextSidebar = await page.getByLabel('Accessibility Sidebar', { exact: true });
const altTextSidebar = await page.getByLabel('Alt Text and Plot Information Sidebar', { exact: true });
await expect(altTextSidebar).toBeVisible();

const altTextHeading = await page.getByRole('heading', { name: 'Accessibility Sidebar' });
const altTextHeading = await page.getByRole('heading', { name: 'Text Description' });
await expect(altTextHeading).toBeVisible();

/// /////////////////
Expand Down Expand Up @@ -76,7 +46,7 @@ test('Alt Text', async ({ page }) => {
// Plot Information
/// /////////////////
// Editing
const editPlotInformationButton = await page.getByLabel('Plot Information');
const editPlotInformationButton = await page.getByRole('button', { name: 'Add Plot Information' });
await expect(editPlotInformationButton).toBeVisible();
await editPlotInformationButton.click();

Expand Down Expand Up @@ -114,23 +84,23 @@ test('Alt Text', async ({ page }) => {
await expect(plotInformationOutput).toBeVisible();
await expect(plotInformationOutput).toHaveText('This UpSet plot shows Test dataset description. The sets are Test sets value. The items are Test items value.');

await expect(page.getByLabel('Accessibility Sidebar')).toContainText('This UpSet plot shows Test dataset description. The sets are Test sets value. The items are Test items value.');
await expect(page.getByLabel('Alt Text and Plot Information Sidebar')).toContainText('This UpSet plot shows Test dataset description. The sets are Test sets value. The items are Test items value.');
await page.getByRole('button', { name: 'Save' }).click();

// Display
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('upset plot');
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('upset plot caption');
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('This UpSet plot shows Test dataset description. The sets are Test sets value. The items are Test items value.');
await expect(page.getByLabel('Alt Text and Plot Information Sidebar')).toContainText('upset plot');
await expect(page.getByLabel('Alt Text and Plot Information Sidebar')).toContainText('upset plot caption');
await expect(page.getByLabel('Alt Text and Plot Information Sidebar')).toContainText('This UpSet plot shows Test dataset description. The sets are Test sets value. The items are Test items value.');

/// /////////////////
// Short Description
/// /////////////////
await expect(page.getByText('This is an UpSet plot'))
.toContainText('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');
await page.getByLabel("Display Long Description").click();
await page.getByLabel("Display Long Description").click();
await page.getByRole('button', { name: 'Show More' }).click();
await page.getByRole('button', { name: 'Show Less' }).click();
await expect(page.getByText('This is an UpSet plot which')).toBeVisible();
await page.getByLabel("Display Long Description").click();
await page.getByRole('button', { name: 'Show More' }).click();

/// /////////////////
// Alt Text Output
Expand Down Expand Up @@ -187,31 +157,27 @@ test('Alt Text', async ({ page }) => {
/// /////////////////
// User Description Test
/// /////////////////
await page.getByLabel('View User Description(s)').check();
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('No user-generated description available.');
await page.getByLabel('Display Long Description').uncheck();
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('No user-generated description available.');

// User short
await page.getByRole('button', { name: 'Edit Text Description' }).click();
await page.getByRole('button', { name: 'Show Less' }).click();
await page.getByLabel('Alt Text Description Editor').click();
await page.getByText('This is an UpSet plot which').click();
await page.getByText('This is an UpSet plot which').fill('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the abcdefg largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the abcdefg largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');
await expect(page.getByLabel('Alt Text and Plot Information Sidebar')).toContainText('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the abcdefg largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');

// User long, switching while editing
await page.getByRole('button', { name: 'Edit Text Description' }).click();
await page.getByLabel('Display Long Description').check();
await page.getByLabel('Alt Text Description Editor').click();
await page.getByRole('button', { name: 'Show More' }).click();
await page.getByText('# UpSet Introduction This is').click();
await page.getByText('# UpSet Introduction This is').fill('# UpSet Introduction\nThis is an UpSet plot that visualizes set intersection. To learn about UpSet plots, visit https://upset.app.\n\n# Dataset Properties\nThe dataset contains 6 sets and 44 elements, of which 6 sets are shown in the plot.\n\n# Set Properties\nThe set sizes are diverging a lot, ranging from 3 to 18. The largest set is Male with 18 elements, followed by School with 6, Duff Fan with 6, Evil with 6, Power Plant with 5, and Blue Hair with 3.\n\n# Intersection Properties afdegb\nThe plot is sorted by size in ascending order. There are 12 non-empty intersections, all of which are shown in the plot. The largest 5 intersections are School, and Male (3), the empty intersection (3), Just Male (3), Duff Fan, Male, and Power Plant (3), and Evil, and Male (2).\n\n# Statistical Information\nThe average intersection size is 2, and the median is 2. The 90th percentile is 3, and the 10th percentile is 1. The largest set, Male, is present in 75.0% of all non-empty intersections. The smallest set, Blue Hair, is present in 16.7% of all non-empty intersections.\n\n# Trend Analysis\n The intersection sizes start from a value of 1 and then drastically rise up to 3. The empty intersection is present with a size of 3. An all set intersection is not present. The individual set intersections are large in size. The low degree set intersections lie in medium and largest sized intersections. The medium degree set intersections can be seen among small sized intersections. No high order intersections are present.\n\n');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.locator('[id="Intersection\\ Properties\\ afdegb"]')).toContainText('Intersection Properties afdegb');

// Resetting descriptions
await page.getByRole('button', { name: 'Edit Text Description' }).click();
await page.getByLabel('Alt Text Description Editor').click();
await page.getByRole('button', { name: 'Reset Descriptions' }).click();
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.locator('[id="Intersection\\ Properties"]')).toContainText('Intersection Properties');
await page.getByLabel('Display Long Description').uncheck();
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');
await page.getByRole('button', { name: 'Show Less' }).click();
await expect(page.getByLabel('Alt Text and Plot Information Sidebar')).toContainText('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');
});
30 changes: 2 additions & 28 deletions e2e-tests/attributeSelector.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,7 @@
import { test, expect } from '@playwright/test';
import mockData from '../playwright/mock-data/simpsons/simpsons_data.json';
import mockAnnotations from '../playwright/mock-data/simpsons/simpsons_annotations.json';
import mockAltText from '../playwright/mock-data/simpsons/simpsons_alttxt.json';
import { beforeTest } from './common';

test.beforeEach(async ({ page }) => {
await page.route('*/**/api/**', async (route) => {
const url = route.request().url();
let json;

if (url) {
if (url.includes('workspaces/Upset%20Examples/tables/simpsons/rows/?limit=9007199254740991')) {
json = mockData;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/tables/simpsons/annotations/')) {
json = mockAnnotations;
await route.fulfill({ json });
} else if (url.includes('alttxt')) {
json = mockAltText;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/sessions/table/193/state/')) {
await route.fulfill({ status: 200 });
} else {
await route.continue();
}
} else {
await route.abort();
}
});
});
test.beforeEach(beforeTest);

test('Attribute Dropdown', async ({ page }) => {
await page.goto('http://localhost:3000/?workspace=Upset+Examples&table=simpsons&sessionId=193');
Expand Down
44 changes: 44 additions & 0 deletions e2e-tests/common.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { Page } from '@playwright/test';
import mockData from '../playwright/mock-data/simpsons/simpsons_data.json';
import mockAnnotations from '../playwright/mock-data/simpsons/simpsons_annotations.json';
import mockAltText from '../playwright/mock-data/simpsons/simpsons_alttxt.json';

export const alttxt = {
upsetIntroduction: 'This is an UpSet plot that visualizes set intersection. To learn about UpSet plots, visit https://upset.app.',
datasetProperties: 'The dataset contains 6 sets and 44 elements, of which 6 sets are shown in the plot.',
setProperties: 'The set sizes are diverging a lot, ranging from 3 to 18. The largest set is Male with 18 elements, followed by School with 6, Duff Fan with 6, Evil with 6, Power Plant with 5, and Blue Hair with 3.',
intersectionProperties: 'The plot is sorted by size in ascending order. There are 12 non-empty intersections, all of which are shown in the plot. The largest 5 intersections are School, and Male (3), the empty intersection (3), Just Male (3), Duff Fan, Male, and Power Plant (3), and Evil, and Male (2).',
statisticalInformation: 'The average intersection size is 2, and the median is 2. The 90th percentile is 3, and the 10th percentile is 1. The largest set, Male, is present in 75.0% of all non-empty intersections. The smallest set, Blue Hair, is present in 16.7% of all non-empty intersections.',
trendAnalysis: 'The intersection sizes start from a value of 1 and then drastically rise up to 3. The empty intersection is present with a size of 3. An all set intersection is not present. The individual set intersections are large in size. The low degree set intersections lie in medium and largest sized intersections. The medium degree set intersections can be seen among small sized intersections. No high order intersections are present.',
};

/**
* To be run before every Playwright test
* @param param0 Page object provided by Playwright
*/
export async function beforeTest({ page }: {page: Page}) {
await page.route('*/**/api/**', async (route) => {
const url = route.request().url();

let json;

if (url) {
if (url.includes('workspaces/Upset%20Examples/tables/simpsons/rows/?limit=9007199254740991')) {
json = mockData;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/tables/simpsons/annotations/')) {
json = mockAnnotations;
await route.fulfill({ json });
} else if (url.includes('alttxt')) {
json = mockAltText;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/sessions/table/193/')) {
await route.fulfill({ status: 200 });
} else {
await route.continue();
}
} else {
await route.abort();
}
});
}
37 changes: 6 additions & 31 deletions e2e-tests/datatable.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,7 @@
import { test, expect } from '@playwright/test';
import mockData from '../playwright/mock-data/simpsons/simpsons_data.json';
import mockAnnotations from '../playwright/mock-data/simpsons/simpsons_annotations.json';
import mockAltText from '../playwright/mock-data/simpsons/simpsons_alttxt.json';
import { beforeTest } from './common';

test.beforeEach(async ({ page }) => {
await page.route('*/**/api/**', async (route) => {
const url = route.request().url();
let json;

if (url) {
if (url.includes('workspaces/Upset%20Examples/tables/simpsons/rows/?limit=9007199254740991')) {
json = mockData;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/tables/simpsons/annotations/')) {
json = mockAnnotations;
await route.fulfill({ json });
} else if (url.includes('alttxt')) {
json = mockAltText;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/sessions/table/193/state/')) {
await route.fulfill({ status: 200 });
} else {
await route.continue();
}
} else {
await route.abort();
}
});
});
test.beforeEach(beforeTest);

test('Datatable', async ({ page }) => {
await page.goto('http://localhost:3000/?workspace=Upset+Examples&table=simpsons&sessionId=193');
Expand All @@ -42,15 +16,16 @@ test('Datatable', async ({ page }) => {
// Test downloads
// //////////////////
const page1 = await page1Promise;
await beforeTest({ page: page1 });
const heading1 = await page1.getByRole('heading', { name: 'Intersection Data' });
await expect(heading1).toBeVisible();

const downloadPromise = page1.waitForEvent('download');
// const downloadPromise = page1.waitForEvent('download');
const downloadButton = await page1.locator('div').filter({ hasText: /^Intersection DataDownload$/ }).getByRole('button');
await expect(downloadButton).toBeVisible();
await downloadButton.click();
const download = await downloadPromise;
await expect(download).not.toBeNull();
// const download = await downloadPromise;
// await expect(download).not.toBeNull();

const heading2 = await page1.getByRole('heading', { name: 'Visible Sets' });
await expect(heading2).toBeVisible();
Expand Down
32 changes: 3 additions & 29 deletions e2e-tests/elementView.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,9 @@
import {
test, expect, Page, Locator,
} from '@playwright/test';
import mockData from '../playwright/mock-data/simpsons/simpsons_data.json';
import mockAnnotations from '../playwright/mock-data/simpsons/simpsons_annotations.json';
import mockAltText from '../playwright/mock-data/simpsons/simpsons_alttxt.json';

test.beforeEach(async ({ page }) => {
await page.route('*/**/api/**', async (route) => {
const url = route.request().url();
let json;

if (url) {
if (url.includes('workspaces/Upset%20Examples/tables/simpsons/rows/?limit=9007199254740991')) {
json = mockData;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/tables/simpsons/annotations/')) {
json = mockAnnotations;
await route.fulfill({ json });
} else if (url.includes('alttxt')) {
json = mockAltText;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/sessions/table/193/')) {
await route.fulfill({ status: 200 });
} else {
await route.continue();
}
} else {
await route.abort();
}
});
});
import { beforeTest } from './common';

test.beforeEach(beforeTest);

/**
* Drags the mouse from the center of the element to the specified offset
Expand Down
32 changes: 3 additions & 29 deletions e2e-tests/plot.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,7 @@
import { test, expect } from '@playwright/test';
import mockData from '../playwright/mock-data/simpsons/simpsons_data.json';
import mockAnnotations from '../playwright/mock-data/simpsons/simpsons_annotations.json';
import mockAltText from '../playwright/mock-data/simpsons/simpsons_alttxt.json';

test.beforeEach(async ({ page }) => {
await page.route('*/**/api/**', async (route) => {
const url = route.request().url();
let json;

if (url) {
if (url.includes('workspaces/Upset%20Examples/tables/simpsons/rows/?limit=9007199254740991')) {
json = mockData;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/tables/simpsons/annotations/')) {
json = mockAnnotations;
await route.fulfill({ json });
} else if (url.includes('alttxt')) {
json = mockAltText;
await route.fulfill({ json });
} else if (url.includes('workspaces/Upset%20Examples/sessions/table/193/state/')) {
await route.fulfill({ status: 200 });
} else {
await route.continue();
}
} else {
await route.abort();
}
});
});
import { beforeTest } from './common';

test.beforeEach(beforeTest);

/**
* Toggles the advanced scale slider. Must be awaited
Expand Down
Loading

0 comments on commit f3d5eb4

Please sign in to comment.