Merge pull request #327 from visdesignlab/test-alttxt-trend-analysis

Update alttxt test to reflect recent changes to alttxt package

e2e-tests/alttext.spec.ts

@@ -4,6 +4,15 @@ 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';
 
+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.',
+};
+
 test.beforeEach(async ({ page }) => {
   await page.route('*/**/api/**', async (route) => {
     const url = route.request().url();
@@ -88,7 +97,7 @@ test('Alt Text', async ({ page }) => {
   };
   await expect(UpSetIntroduction.heading).toBeVisible();
   await expect(UpSetIntroduction.content).toBeVisible();
-  await expect(UpSetIntroduction.content).toHaveText('This is an UpSet plot that visualizes set intersection. To learn about UpSet plots, visit https://upset.app.');
+  await expect(UpSetIntroduction.content).toHaveText(alttxt.upsetIntroduction);
 
   const datasetProperties = {
     heading: await page.getByRole('heading', { name: 'Dataset Properties' }),
@@ -97,29 +106,37 @@ test('Alt Text', async ({ page }) => {
 
   await expect(datasetProperties.heading).toBeVisible();
   await expect(datasetProperties.content).toBeVisible();
-  await expect(datasetProperties.content).toHaveText('The dataset contains 6 sets, and 44 elements, of which 6 are shown in the plot.');
+  await expect(datasetProperties.content).toHaveText(alttxt.datasetProperties);
 
   const setProperties = {
     heading: await page.getByRole('heading', { name: 'Set Properties', exact: true }),
     content: await page.getByText('The largest set is Male with'),
   };
   await expect(setProperties.heading).toBeVisible();
   await expect(setProperties.content).toBeVisible();
-  await expect(setProperties.content).toHaveText('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.');
+  await expect(setProperties.content).toHaveText(alttxt.setProperties);
 
   const intersectionProperties = {
     heading: await page.getByRole('heading', { name: 'Intersection Properties' }),
-    content: await page.getByText('The plot is sorted by size.'),
+    content: await page.getByText('The plot is sorted by size in'),
   };
   await expect(intersectionProperties.heading).toBeVisible();
   await expect(intersectionProperties.content).toBeVisible();
-  await expect(intersectionProperties.content).toHaveText('The plot is sorted by size. There are 12 non-empty intersections, all of which are shown in the plot. The largest 5 intersections are School, and Male (3), Just Unincluded (3), Just Male (3), Duff Fan, Male, and Power Plant (3), and Evil, and Male (2).');
+  await expect(intersectionProperties.content).toHaveText(alttxt.intersectionProperties);
 
   const statisticalInformation = {
     heading: await page.getByRole('heading', { name: 'Statistical Information' }),
     content: await page.getByText('The average intersection size'),
   };
   await expect(statisticalInformation.heading).toBeVisible();
   await expect(statisticalInformation.content).toBeVisible();
-  await expect(statisticalInformation.content).toHaveText('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.');
+  await expect(statisticalInformation.content).toHaveText(alttxt.statisticalInformation);
+
+  const trendAnalysis = {
+    heading: await page.getByRole('heading', { name: 'Trend Analysis' }),
+    content: await page.getByText('The intersection sizes start'),
+  };
+  await expect(trendAnalysis.heading).toBeVisible();
+  await expect(trendAnalysis.content).toBeVisible();
+  await expect(trendAnalysis.content).toHaveText(alttxt.trendAnalysis);
 });

playwright/mock-data/simpsons/simpsons_alttxt.json

@@ -2,6 +2,6 @@
 	"alttxt": {
 		"techniqueDescription": "This is an UpSet plot that visualizes set intersection. To learn about UpSet plots, visit https://upset.app.",
 		"shortDescription": "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.",
-		"longDescription": "# 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 are shown in the plot.\n\n# Set Properties\nThe 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\nThe plot is sorted by size. There are 12 non-empty intersections, all of which are shown in the plot. The largest 5 intersections are School, and Male (3), Just Unincluded (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"
+		"longDescription": "# 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\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"
 	}
 }