chore(e2e): add translations to scorecard tests (#1731)

* add translations

* add accessibility checks in each test

* mdfd fr project str

* test restructure

---------

Co-authored-by: HusneShabbir <[email protected]>

Author: HusneShabbir

workspaces/scorecard/packages/app/e2e-tests/pages/CatalogPage.ts

@@ -22,16 +22,24 @@ export class CatalogPage {
     this.page = page;
   }
 
-  async navigateToCatalog() {
+  async navigateToCatalog(locale: string) {
     const enterButton = this.page.getByRole('button', { name: 'Enter' });
     await expect(enterButton).toBeVisible();
     await enterButton.click();
     await expect(this.page.getByText('My Company Catalog')).toBeVisible();
+    await this.switchToLocale(this.page, locale);
   }
 
   async openComponent(componentName: string) {
     const link = this.page.getByRole('link', { name: componentName });
     await expect(link).toBeVisible();
     await link.click();
   }
+
+  async switchToLocale(page: Page, locale: string): Promise<void> {
+    await page.getByRole('link', { name: 'Settings' }).click();
+    await page.getByRole('button', { name: 'English' }).click();
+    await page.getByRole('option', { name: locale }).click();
+    await page.locator('a').filter({ hasText: 'Home' }).click();
+  }
 }

workspaces/scorecard/packages/app/e2e-tests/pages/ComponentImportPage.ts

@@ -16,25 +16,26 @@
 
 import { Page, expect } from '@playwright/test';
 import { waitUntilApiCallSucceeds } from '../utils/apiUtils';
+import { ScorecardMessages } from '../utils/translationUtils';
 
 export class ScorecardPage {
   readonly page: Page;
+  readonly translations: ScorecardMessages;
 
-  constructor(page: Page) {
+  constructor(page: Page, translations: ScorecardMessages) {
     this.page = page;
+    this.translations = translations;
   }
 
   get scorecardMetrics() {
     return [
       {
-        title: 'GitHub open PRs',
-        description:
-          'Current count of open Pull Requests for a given GitHub repository.',
+        title: this.translations.metric['github.open_prs'].title,
+        description: this.translations.metric['github.open_prs'].description,
       },
       {
-        title: 'Jira open blocking tickets',
-        description:
-          'Highlights the number of critical, blocking issues that are currently open in Jira.',
+        title: this.translations.metric['jira.open_issues'].title,
+        description: this.translations.metric['jira.open_issues'].description,
       },
     ];
   }
@@ -56,12 +57,16 @@ export class ScorecardPage {
   }
 
   async expectEmptyState() {
-    await expect(this.page.getByText('No scorecards added yet')).toBeVisible();
+    await expect(
+      this.page.getByText(this.translations.emptyState.title),
+    ).toBeVisible();
     await expect(this.page.getByRole('article')).toContainText(
-      'Scorecards help you monitor component health at a glance. To begin, explore our documentation for setup guidelines.',
+      this.translations.emptyState.description,
     );
     await expect(
-      this.page.getByRole('link', { name: 'View documentation' }),
+      this.page.getByRole('link', {
+        name: this.translations.emptyState.button,
+      }),
     ).toBeVisible();
   }
 
@@ -85,9 +90,15 @@ export class ScorecardPage {
     await expect(scorecardCard.getByText(description)).toBeVisible();
 
     // Check that threshold information is present (Error, Warning, Success)
-    await expect(scorecardCard.getByText(/Error/)).toBeVisible();
-    await expect(scorecardCard.getByText(/Warning/)).toBeVisible();
-    await expect(scorecardCard.getByText(/Success/)).toBeVisible();
+    await expect(
+      scorecardCard.getByText(this.translations.thresholds.error),
+    ).toBeVisible();
+    await expect(
+      scorecardCard.getByText(this.translations.thresholds.warning),
+    ).toBeVisible();
+    await expect(
+      scorecardCard.getByText(this.translations.thresholds.success),
+    ).toBeVisible();
   }
 
   async isScorecardVisible(scorecardTitle: string): Promise<boolean> {

workspaces/scorecard/packages/app/e2e-tests/pages/ScorecardPage.ts

@@ -16,7 +16,6 @@
 
 import { test, expect } from '@playwright/test';
 import { mockScorecardResponse } from './utils/apiUtils';
-import { ComponentImportPage } from './pages/ComponentImportPage';
 import { CatalogPage } from './pages/CatalogPage';
 import { ScorecardPage } from './pages/ScorecardPage';
 import { setupRBAC } from './utils/rbacSetup';
@@ -26,89 +25,115 @@ import {
   unavailableMetricResponse,
   invalidThresholdResponse,
 } from './utils/scorecardResponseUtils';
+import {
+  ScorecardMessages,
+  evaluateMessage,
+  getTranslations,
+} from './utils/translationUtils';
+import { runAccessibilityTests } from './utils/accessibility';
 
 test.describe.serial('Pre-RBAC Access Tests', () => {
+  let translations: ScorecardMessages;
+  let currentLocale: string;
+
+  test.beforeAll(async ({ browser }) => {
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    currentLocale = await page.evaluate(() => globalThis.navigator.language);
+    translations = getTranslations(currentLocale);
+    await context.close();
+  });
+
   test('Display access denied message when RBAC is not configured', async ({
     page,
-  }) => {
+  }, testInfo) => {
     const catalogPage = new CatalogPage(page);
     await page.goto('/');
-    await catalogPage.navigateToCatalog();
+    await catalogPage.navigateToCatalog(currentLocale);
     await catalogPage.openComponent('Red Hat Developer Hub');
     await page.getByText('Scorecard').click();
 
-    await expect(page.getByText('Missing permission')).toBeVisible();
+    await expect(
+      page.getByText(translations.permissionRequired.title),
+    ).toBeVisible();
     await expect(page.getByRole('article')).toContainText(
-      'To view Scorecard plugin, contact your administrator to give the scorecard.metric.read permission.',
+      evaluateMessage(
+        translations.permissionRequired.description,
+        'scorecard.metric.read',
+      ),
     );
+
+    await runAccessibilityTests(page, testInfo);
   });
 });
 
 test.describe.serial('Scorecard Plugin Tests', () => {
   let catalogPage: CatalogPage;
-  let importPage: ComponentImportPage;
   let scorecardPage: ScorecardPage;
+  let translations: ScorecardMessages;
+  let currentLocale: string;
 
   test.beforeAll(async ({ browser }) => {
     const context = await browser.newContext();
     const page = await context.newPage();
 
     await setupRBAC(page);
 
+    currentLocale = await page.evaluate(() => globalThis.navigator.language);
+    translations = getTranslations(currentLocale);
+
     await context.close();
   });
 
   test.beforeEach(async ({ page }) => {
     catalogPage = new CatalogPage(page);
-    importPage = new ComponentImportPage(page);
-    scorecardPage = new ScorecardPage(page);
+    scorecardPage = new ScorecardPage(page, translations);
   });
 
-  test('Import component and validate scorecard tabs for GitHub PRs and Jira tickets', async ({
+  test('Validate scorecard tabs for GitHub PRs and Jira tickets', async ({
     page,
-  }) => {
+  }, testInfo) => {
     await mockScorecardResponse(page, customScorecardResponse);
 
     await page.goto('/');
-    await catalogPage.navigateToCatalog();
-    await importPage.startComponentImport();
-    await importPage.analyzeComponent(
-      'https://github.com/rhdh-pai-qe/backstage-catalog/blob/main/catalog-info.yaml',
-    );
-    await importPage.viewImportedComponent();
+    await catalogPage.navigateToCatalog(currentLocale);
+    await catalogPage.openComponent('Red Hat Developer Hub');
     await scorecardPage.openTab();
-
     await scorecardPage.verifyScorecardValues({
-      'GitHub open PRs': '9',
-      'Jira open blocking tickets': '8',
+      [translations.metric['github.open_prs'].title]: '9',
+      [translations.metric['jira.open_issues'].title]: '8',
     });
 
     for (const metric of scorecardPage.scorecardMetrics) {
       await scorecardPage.validateScorecardAriaFor(metric);
     }
+
+    await runAccessibilityTests(page, testInfo);
   });
 
   test('Display empty state when scorecard API returns no metrics', async ({
     page,
-  }) => {
+  }, testInfo) => {
     await mockScorecardResponse(page, emptyScorecardResponse);
 
     await page.goto('/');
-    await catalogPage.navigateToCatalog();
-    await catalogPage.openComponent('rhdh-app');
+    await catalogPage.navigateToCatalog(currentLocale);
+    await catalogPage.openComponent('Red Hat Developer Hub');
     await scorecardPage.openTab();
 
     await scorecardPage.expectEmptyState();
+
+    await runAccessibilityTests(page, testInfo);
   });
 
   test('Displays error state for unavailable data while rendering metrics', async ({
     page,
-  }) => {
+  }, testInfo) => {
     await mockScorecardResponse(page, unavailableMetricResponse);
 
     await page.goto('/');
-    await catalogPage.navigateToCatalog();
-    await catalogPage.openComponent('rhdh-app');
+    await catalogPage.navigateToCatalog(currentLocale);
+    await catalogPage.openComponent('Red Hat Developer Hub');
     await scorecardPage.openTab();
 
     const jiraMetric = scorecardPage.scorecardMetrics[1];
@@ -125,9 +150,10 @@ test.describe.serial('Scorecard Plugin Tests', () => {
     expect(isGithubVisible).toBe(true);
 
     const errorLocator = page.getByRole('heading', {
-      name: 'Metric data unavailable',
+      name: translations.errors.metricDataUnavailable,
     });
     await expect(errorLocator).toBeVisible();
+    await runAccessibilityTests(page, testInfo);
 
     await errorLocator.hover();
     const errorMetric = unavailableMetricResponse.find(
@@ -145,12 +171,12 @@ test.describe.serial('Scorecard Plugin Tests', () => {
 
   test('Display error state for invalid threshold config while rendering metrics', async ({
     page,
-  }) => {
+  }, testInfo) => {
     await mockScorecardResponse(page, invalidThresholdResponse);
 
     await page.goto('/');
-    await catalogPage.navigateToCatalog();
-    await catalogPage.openComponent('rhdh-app');
+    await catalogPage.navigateToCatalog(currentLocale);
+    await catalogPage.openComponent('Red Hat Developer Hub');
     await scorecardPage.openTab();
 
     const githubMetric = scorecardPage.scorecardMetrics[0];
@@ -167,9 +193,10 @@ test.describe.serial('Scorecard Plugin Tests', () => {
     expect(isJiraVisible).toBe(true);
 
     const errorLocator = page.getByRole('heading', {
-      name: 'Invalid thresholds',
+      name: translations.errors.invalidThresholds,
     });
     await expect(errorLocator).toBeVisible();
+    await runAccessibilityTests(page, testInfo);
 
     await errorLocator.hover();
     const errorTooltip = invalidThresholdResponse.find(

workspaces/scorecard/packages/app/e2e-tests/scorecard.test.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AxeBuilder from '@axe-core/playwright';
+import { expect, Page, TestInfo } from '@playwright/test';
+
+export async function runAccessibilityTests(
+  page: Page,
+  testInfo: TestInfo,
+  attachName = 'accessibility-scan-results.json',
+) {
+  const accessibilityScanResults = await new AxeBuilder({ page })
+    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+    .analyze();
+
+  await testInfo.attach(attachName, {
+    body: JSON.stringify(accessibilityScanResults, null, 2),
+    contentType: 'application/json',
+  });
+
+  expect(
+    accessibilityScanResults.violations,
+    'Accessibility violations found',
+  ).toEqual([]);
+}

workspaces/scorecard/packages/app/e2e-tests/utils/accessibility.ts

@@ -17,7 +17,7 @@ import { Page, expect } from '@playwright/test';
 
 export async function waitUntilApiCallSucceeds(
   page: Page,
-  urlPart: string = '/api/scorecard/metrics/catalog/Component/default/rhdh-app',
+  urlPart: string = '/api/scorecard/metrics/catalog/Component/default/red-hat-developer-hub',
 ): Promise<void> {
   const response = await page.waitForResponse(
     async res => {
@@ -32,7 +32,7 @@ export async function waitUntilApiCallSucceeds(
 }
 
 const SCORECARD_API_ROUTE =
-  '**/api/scorecard/metrics/catalog/Component/default/rhdh-app';
+  '**/api/scorecard/metrics/catalog/Component/default/red-hat-developer-hub';
 
 export async function mockScorecardResponse(
   page: Page,