Some small e2e tests for report viewer

.github/workflows/report-viewer-e2e.yml

@@ -32,9 +32,27 @@ jobs:
         with:
           node-version: "18"
 
-      - name: Install and Test 🧪
+      - name: Install and Build 🔧
         working-directory: report-viewer
         run: |
           npm install
-          npx playwright install --with-deps
-          npm run test:e2e
+          npm run build
+
+      - name: Install playwright 🔧
+        working-directory: report-viewer
+        run: npx playwright install --with-deps
+
+      - name: Run tests 🧪
+        working-directory: report-viewer
+        run: |
+          npm run test:e2e
+
+      - name: Upload test results 📤
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: test-results
+          path: |
+            report-viewer/test-results
+            report-viewer/playwright-report
+          retention-days: 30

report-viewer/playwright.config.ts

@@ -19,7 +19,10 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000
+    timeout: 5000,
+    toMatchSnapshot: {
+      maxDiffPixelRatio: 0.01
+    }
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
@@ -34,13 +37,13 @@ const config: PlaywrightTestConfig = {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:5173',
+    baseURL: 'http://localhost:8080',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
 
     /* Only on CI systems run the tests headless */
-    headless: !!process.env.CI
+    headless: true
   },
 
   /* Configure projects for major browsers */
@@ -103,8 +106,8 @@ const config: PlaywrightTestConfig = {
      * Use the preview server on CI for more realistic testing.
     Playwright will re-use the local server if there is already a dev-server running.
      */
-    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
-    port: 5173,
+    command: 'vite preview --port 8080',
+    port: 8080,
     reuseExistingServer: !process.env.CI
   }
 }

report-viewer/tests/e2e/Cluster.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect, Page } from '@playwright/test'
+import { uploadFile } from './TestUtils'
+
+test('Test cluster view', async ({ page }) => {
+  await page.goto('/')
+
+  await uploadFile('result_small_cluster.zip', page)
+
+  // check for all clusters being shown
+  expect(await page.getByText('submissions in cluster').all()).toHaveLength(6)
+
+  await page.getByText('4 94.75%').first().click()
+  await page.waitForURL(/\/cluster\/.*/)
+
+  // Check cluster diagramm
+  await compareClusterDiagramm(page, 'C')
+  await page.getByRole('combobox').selectOption('B')
+  await compareClusterDiagramm(page, 'B')
+
+  // Check comparison table
+  const comparisonTable = await page
+    .getByText('Comparisons of Cluster Members:Submissions in Comparison')
+    .textContent()
+  compareTableRow(comparisonTable, 1, 'C', 'A', 99.6, 99.6)
+  compareTableRow(comparisonTable, 2, 'D', 'C', 76.06, 95.93)
+  compareTableRow(comparisonTable, 3, 'D', 'A', 76.06, 95.93)
+  compareTableRow(comparisonTable, 4, 'B', 'D', 28.32, 80.85)
+  compareTableRow(comparisonTable, 5, 'B', 'C', 23.78, 97.16)
+  compareTableRow(comparisonTable, 6, 'B', 'A', 23.78, 97.16)
+})
+
+/**
+ *
+ * @param page Page currently tested on
+ * @param submissionId Id of the selected submission
+ */
+async function compareClusterDiagramm(page: Page, submissionId: string) {
+  expect(page.getByRole('combobox').first()).toHaveValue(submissionId)
+  // This timeout is so that the screenshot is taken after the animation is finished
+  await page.waitForTimeout(3000)
+  const radarChart = await page.locator('canvas').first().screenshot()
+  expect(radarChart).toMatchSnapshot(`cluster_${submissionId}.png`)
+}
+
+function compareTableRow(
+  table: string,
+  row: number,
+  id1: string,
+  id2: string,
+  similarityAVG: number,
+  similarityMAX: number
+) {
+  expect(table).toContain(
+    `${row}${id1}${id2}${similarityAVG.toFixed(2)}% ${similarityMAX.toFixed(2)}%`
+  )
+}

report-viewer/tests/e2e/Comparison.spec.ts

@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/test'
+import { uploadFile } from './TestUtils'
+
+test('Test comparison table and comparsion view', async ({ page }) => {
+  await page.goto('/')
+
+  await uploadFile('result_small_cluster.zip', page)
+
+  const comparisonContainer = page.getByText(
+    'Top Comparisons: Type in the name of a submission to only show comparisons that contain this submission. Fully written out names get unhidden.Hide AllSort By'
+  )
+
+  // check for elements in average similarity table
+  const comparisonTableAverageSorted = await page.getByText('Cluster1').textContent()
+  expect(comparisonTableAverageSorted).toContain('1CA')
+  expect(comparisonTableAverageSorted).toContain('2DC')
+
+  await comparisonContainer.getByText('Maximum Similarity', { exact: true }).click()
+  // check for elements in maximum similarity table
+  const comparisonTableMaxSorted = await page.getByText('Cluster1').textContent()
+  expect(comparisonTableMaxSorted).toContain('1CA')
+  expect(comparisonTableMaxSorted).toContain('2BC')
+
+  await page.getByText('Hide All').click()
+  // check for elements being hidden
+  const comparisonTableOverviewHidden = await page.getByText('Cluster1').textContent()
+  expect(comparisonTableOverviewHidden).toContain('1HiddenHidden')
+  expect(comparisonTableOverviewHidden).toContain('3HiddenHidden')
+  expect(comparisonTableOverviewHidden).toContain('4HiddenHidden')
+
+  await page.getByPlaceholder('Filter/Unhide Comparisons').fill('A')
+  // check for elements being unhidden and filtered
+  const comparisonTableOverviewFilteredA = await page.getByText('Cluster1').textContent()
+  expect(comparisonTableOverviewFilteredA).toContain('1HiddenA')
+  expect(comparisonTableOverviewFilteredA).toContain('3HiddenA')
+  // we cant check for 4Hidden because the dynamic scroller just moves it of screen, so the text is still there but not visible
+
+  await page.getByPlaceholder('Filter/Unhide Comparisons').fill('A C')
+  // check for elements being unhidden and filtered
+  const comparisonTableOverviewFilteredAC = await page.getByText('Cluster1').textContent()
+  expect(comparisonTableOverviewFilteredAC).toContain('1CA')
+  expect(comparisonTableOverviewFilteredAC).toContain('3HiddenA')
+  expect(comparisonTableOverviewFilteredAC).toContain('4HiddenC')
+
+  // go to comparison page
+  await page.getByRole('link', { name: '1 C A 99.60% 99.60%' }).click()
+  await page.waitForURL(/\/comparison\/.*/)
+
+  // check for elements in comparison page
+  const bodyComparison = await page.locator('body').textContent()
+  expect(bodyComparison).toContain('Average Similarity: 99.59%')
+  expect(bodyComparison).toContain('GSTiling.java - GSTiling.java: 308')
+  expect(bodyComparison).toContain('Matches.java - Matches.java: 58')
+  expect(bodyComparison).toContain('A/Match.java')
+  expect(bodyComparison).toContain('C/Match.java')
+
+  // check for being able to hide and unhide elements
+  expect(bodyComparison).not.toContain('public class Match')
+  await page.getByText('A/Match.java').click()
+  const bodyComparisonShowMatch = await page.locator('body').textContent()
+  expect(bodyComparisonShowMatch).toContain('public class Match')
+  await page.getByText('A/Match.java').click()
+  const bodyComparisonHideMatch = await page.locator('body').textContent()
+  expect(bodyComparisonHideMatch).not.toContain('public class Match')
+
+  // unhide elements by clicking match list
+  expect(bodyComparisonHideMatch).not.toContain('public class GSTiling')
+  await page.getByText('GSTiling.java - GSTiling.java: 308').click()
+  const bodyComparisonShowGSTiling = await page.locator('body').textContent()
+  expect(bodyComparisonShowGSTiling).toContain('public class GSTiling')
+})

report-viewer/tests/e2e/Distribution.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect, Page } from '@playwright/test'
+import { uploadFile } from './TestUtils'
+
+test('Test all distribution combinations', async ({ page }) => {
+  await page.goto('/')
+
+  await uploadFile('result_small_cluster.zip', page)
+
+  const options = getAllOptionCombinations()
+  for (const option of options) {
+    await compareDistributionDiagramm(page, option)
+  }
+})
+
+/**
+ * Checks if the distribution diagramm is correct for the given options
+ * @param page Page currently tested on
+ * @param options Options to be selected
+ */
+async function compareDistributionDiagramm(page: Page, options: string[]) {
+  const distributionDiagrammContainer = page.getByText('Distribution of Comparisons:Options:')
+  for (const option of options) {
+    await distributionDiagrammContainer.getByText(option).first().click()
+  }
+  // This timeout is so that the screenshot is taken after the animation is finished
+  await page.waitForTimeout(3000)
+  const distributionDiagramm = await page.locator('canvas').first().screenshot()
+  expect(distributionDiagramm).toMatchSnapshot(`distribution_${options.join('_')}.png`)
+}
+
+function getAllOptionCombinations() {
+  const options = [
+    ['Average', 'Maximum'],
+    ['Linear', 'Logarithmic']
+  ]
+
+  function combine(a: string[][], b: string[]) {
+    const combinations: string[][] = []
+    for (let i = 0; i < a.length; i++) {
+      for (let j = 0; j < b.length; j++) {
+        combinations.push(a[i].concat(b[j]))
+      }
+    }
+    return combinations
+  }
+
+  let combinations: string[][] = []
+  for (let i = 0; i < options[0].length; i++) {
+    combinations.push([options[0][i]])
+  }
+
+  for (let i = 1; i < options.length; i++) {
+    combinations = combine(combinations, options[i])
+  }
+  return combinations
+}

report-viewer/tests/e2e/Information.spec.ts

@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test'
+import { uploadFile } from './TestUtils'
+
+test('Test information page', async ({ page }) => {
+  await page.goto('/')
+  await uploadFile('result_small_cluster.zip', page)
+
+  // check displayed information on overview page
+  const bodyOverview = await page.locator('body').textContent()
+  expect(bodyOverview).toContain('Directory: files')
+  expect(bodyOverview).toContain('Total Submissions: 4')
+  expect(bodyOverview).toContain('Total Comparisons: 6')
+  expect(bodyOverview).toContain('Min Match Length: 9')
+
+  // go to information page
+  await page.getByText('More', { exact: true }).click()
+  await page.waitForURL('/info')
+
+  // check displayed run options on information page
+  const runOptions = await page.getByText('Run Options:Submission Folder:').textContent()
+  expect(runOptions).toContain('Submission Folder: files')
+  expect(runOptions).toContain('Basecode Folder:')
+  expect(runOptions).toContain('Language: Javac based AST plugin')
+  expect(runOptions).toContain('File Extentions: .java, .JAVA')
+  expect(runOptions).toContain('Minimum Token Match:: 9')
+
+  const runData = await page.getByText('Run Data:Date of Execution:').textContent()
+  expect(runData).toContain('Date of Execution: 02/09/23')
+  expect(runData).toContain('Execution Duration: 12 ms')
+  expect(runData).toContain('Submission Count: 4')
+  expect(runData).toContain('Total Comparisons: 6')
+  expect(runData).toContain('Shown Comparisons: 6')
+  expect(runData).toContain('Missing Comparisons: 0')
+})

report-viewer/tests/e2e/TestUtils.ts

@@ -0,0 +1,19 @@
+import { Page, expect } from '@playwright/test'
+
+/**
+ * Selects a file in the file chooser and uploads it.
+ * Expects the file to be in the tests/e2e/assets folder.
+ * Expects to be on the file upload page.
+ * @param fileName
+ */
+export async function uploadFile(fileName: string, page: Page) {
+  expect(page).toHaveURL('/')
+
+  // upload file through file chooser
+  const fileChooserPromise = page.waitForEvent('filechooser')
+  await page.getByText('Drag and Drop zip/Json file on this page').click()
+  const fileChooser = await fileChooserPromise
+  await fileChooser.setFiles(`tests/e2e/assets/${fileName}`)
+
+  await page.waitForURL('/overview')
+}