feat(google-rules-mvp): unified e2e tests v2 results (#4432)

lisli1 · web-flow · commit e601525b4156 · 2021-07-14T12:35:04.000-07:00
Details Adding E2E tests for when the ATFA results feature flag is on, because the results_v2 are different. Motivation Adding/updating E2E tests to use the feature flag Context #4431 added the results_v2.json that is used for the added tests
diff --git a/src/tests/electron/tests/automated-checks-view.test.ts b/src/tests/electron/tests/automated-checks-view.test.ts
@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import * as path from 'path';
+import { UnifiedFeatureFlags } from 'electron/common/unified-feature-flags';
 import { createApplication } from 'tests/electron/common/create-application';
 import { scanForAccessibilityIssuesInAllModes } from 'tests/electron/common/scan-for-accessibility-issues';
 import { AppController } from 'tests/electron/common/view-controllers/app-controller';
@@ -18,9 +19,6 @@ describe('AutomatedChecksView', () => {
             'beforeEach',
         );
         app = await createApplication({ suppressFirstTimeDialog: true });
-        const resultsView = await app.openResultsView();
-        await resultsView.waitForScreenshotViewVisible();
-        cardsView = resultsView.createCardsViewController();
     });
 
     afterEach(async () => {
@@ -30,17 +28,22 @@ describe('AutomatedChecksView', () => {
     });
 
     it('should use the expected window title', async () => {
+        await openResultsAndCardsViews();
         await app.waitForTitle('Accessibility Insights for Android - Automated checks');
     });
 
     it('displays automated checks results collapsed by default', async () => {
+        await openResultsAndCardsViews();
         await cardsView.waitForRuleGroupCount(3);
 
         const collapsibleContentElements = await cardsView.queryRuleGroupContents();
         expect(collapsibleContentElements).toHaveLength(0);
     });
 
-    it('supports expanding and collapsing rule groups', async () => {
+    it('supports expanding and collapsing rule groups with results (v1)', async () => {
+        app.setFeatureFlag(UnifiedFeatureFlags.atfaResults, false);
+        await openResultsAndCardsViews();
+
         await cardsView.waitForHighlightBoxCount(4);
         expect(await cardsView.queryRuleGroupContents()).toHaveLength(0);
 
@@ -67,7 +70,44 @@ describe('AutomatedChecksView', () => {
         await cardsView.assertExpandedRuleGroup(3, 'TouchSizeWcag', 1);
     });
 
-    it('should pass accessibility rvalidation in all contrast modes', async () => {
+    it('supports expanding and collapsing rule groups with results_v2', async () => {
+        app.setFeatureFlag(UnifiedFeatureFlags.atfaResults, true);
+        await openResultsAndCardsViews();
+
+        await cardsView.waitForHighlightBoxCount(3);
+        expect(await cardsView.queryRuleGroupContents()).toHaveLength(0);
+
+        await cardsView.toggleRuleGroupAtPosition(1);
+        await cardsView.assertExpandedRuleGroup(1, 'EditTextValue', 1);
+
+        await cardsView.toggleRuleGroupAtPosition(2);
+        await cardsView.assertExpandedRuleGroup(2, 'TouchSizeWcag', 1);
+
+        await cardsView.toggleRuleGroupAtPosition(3);
+        await cardsView.assertExpandedRuleGroup(3, 'ImageViewName', 1);
+
+        await cardsView.waitForHighlightBoxCount(3);
+        expect(await cardsView.queryRuleGroupContents()).toHaveLength(3);
+
+        await cardsView.toggleRuleGroupAtPosition(1);
+        await cardsView.assertCollapsedRuleGroup(1, 'EditTextValue');
+
+        await cardsView.toggleRuleGroupAtPosition(2);
+        await cardsView.assertCollapsedRuleGroup(2, 'TouchSizeWcag');
+
+        await cardsView.waitForHighlightBoxCount(1);
+        expect(await cardsView.queryRuleGroupContents()).toHaveLength(1);
+        await cardsView.assertExpandedRuleGroup(3, 'ImageViewName', 1);
+    });
+
+    it('should pass accessibility validation in all contrast modes', async () => {
+        await openResultsAndCardsViews();
         await scanForAccessibilityIssuesInAllModes(app);
     });
+
+    async function openResultsAndCardsViews(): Promise<void> {
+        const resultsView = await app.openResultsView();
+        await resultsView.waitForScreenshotViewVisible();
+        cardsView = resultsView.createCardsViewController();
+    }
 });
diff --git a/src/tests/electron/tests/needs-review-view.test.ts b/src/tests/electron/tests/needs-review-view.test.ts
@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import * as path from 'path';
 import { getNarrowModeThresholdsForUnified } from 'electron/common/narrow-mode-thresholds';
+import { UnifiedFeatureFlags } from 'electron/common/unified-feature-flags';
 import { createApplication } from 'tests/electron/common/create-application';
 import { ResultsViewSelectors } from 'tests/electron/common/element-identifiers/results-view-selectors';
 import { scanForAccessibilityIssuesInAllModes } from 'tests/electron/common/scan-for-accessibility-issues';
@@ -24,8 +25,6 @@ describe('NeedsReviewView', () => {
 
         app = await createApplication({ suppressFirstTimeDialog: true });
         app.client.browserWindow.setSize(windowWidth, windowHeight);
-        resultsViewController = await app.openResultsView();
-        await resultsViewController.clickLeftNavItem('needs-review');
     });
 
     afterEach(async () => {
@@ -35,10 +34,13 @@ describe('NeedsReviewView', () => {
     });
 
     it('should use the expected window title', async () => {
+        await openNeedsReview();
         await app.waitForTitle('Accessibility Insights for Android - Needs review');
     });
 
-    it('displays needs review results with one failing result', async () => {
+    it('displays needs review results with one failing result (results v1)', async () => {
+        app.setFeatureFlag(UnifiedFeatureFlags.atfaResults, false);
+        await openNeedsReview();
         const cardsView = resultsViewController.createCardsViewController();
         await cardsView.waitForRuleGroupCount(1);
         expect(await cardsView.queryRuleGroupContents()).toHaveLength(0);
@@ -50,13 +52,34 @@ describe('NeedsReviewView', () => {
         expect(await cardsView.queryRuleGroupContents()).toHaveLength(1);
     });
 
+    it('displays needs review results with 5 failing results (results_v2)', async () => {
+        app.setFeatureFlag(UnifiedFeatureFlags.atfaResults, true);
+        await openNeedsReview();
+        const cardsView = resultsViewController.createCardsViewController();
+        await cardsView.waitForRuleGroupCount(1);
+        expect(await cardsView.queryRuleGroupContents()).toHaveLength(0);
+        await cardsView.waitForHighlightBoxCount(5);
+
+        await cardsView.toggleRuleGroupAtPosition(1);
+        await cardsView.assertExpandedRuleGroup(1, 'TextContrastCheck', 5);
+
+        expect(await cardsView.queryRuleGroupContents()).toHaveLength(1);
+    });
+
     it('should pass accessibility validation in all contrast modes', async () => {
+        await openNeedsReview();
         await scanForAccessibilityIssuesInAllModes(app);
     });
 
     it('export report button does not exist', async () => {
+        await openNeedsReview();
         await resultsViewController.waitForSelectorToDisappear(
             ResultsViewSelectors.exportReportButton,
         );
     });
+
+    async function openNeedsReview(): Promise<void> {
+        resultsViewController = await app.openResultsView();
+        await resultsViewController.clickLeftNavItem('needs-review');
+    }
 });
diff --git a/src/tests/electron/tests/results-view.test.ts b/src/tests/electron/tests/results-view.test.ts
@@ -3,6 +3,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { getNarrowModeThresholdsForUnified } from 'electron/common/narrow-mode-thresholds';
+import { UnifiedFeatureFlags } from 'electron/common/unified-feature-flags';
 import { androidTestConfigs } from 'electron/platform/android/test-configs/android-test-configs';
 import { createApplication } from 'tests/electron/common/create-application';
 import { ResultsViewSelectors } from 'tests/electron/common/element-identifiers/results-view-selectors';
@@ -26,8 +27,6 @@ describe('ResultsView', () => {
             'beforeEach',
         );
         app = await createApplication({ suppressFirstTimeDialog: true });
-        resultsView = await app.openResultsView();
-        await resultsView.waitForScreenshotViewVisible();
     });
 
     afterEach(async () => {
@@ -37,6 +36,8 @@ describe('ResultsView', () => {
     });
 
     it('should pass accessibility validation when left nav is showing', async () => {
+        await openResultsView();
+
         await app.client.browserWindow.setSize(
             narrowModeThresholds.collapseCommandBarThreshold + 1,
             height,
@@ -51,6 +52,8 @@ describe('ResultsView', () => {
             config => config.featureFlag === undefined,
         )[testIndex].contentPageInfo.title;
 
+        await openResultsView();
+
         await app.client.browserWindow.setSize(
             narrowModeThresholds.collapseCommandBarThreshold + 1,
             height,
@@ -62,10 +65,14 @@ describe('ResultsView', () => {
     });
 
     it('should pass accessibility validation in all contrast modes', async () => {
+        await openResultsView();
         await scanForAccessibilityIssuesInAllModes(app);
     });
 
-    it('ScreenshotView renders screenshot image from specified source', async () => {
+    it('ScreenshotView renders screenshot image from specified source for v1 results', async () => {
+        app.setFeatureFlag(UnifiedFeatureFlags.atfaResults, false);
+        await openResultsView();
+
         const resultExamplePath = path.join(
             testResourceServerConfig.absolutePath,
             'AccessibilityInsights/result.json',
@@ -85,7 +92,33 @@ describe('ResultsView', () => {
         expect(actualScreenshotImage).toEqual(expectedScreenshotImage);
     });
 
-    it('ScreenshotView renders expected number/size of highlight boxes in expected positions', async () => {
+    it('ScreenshotView renders screenshot image from specified source for results_v2', async () => {
+        app.setFeatureFlag(UnifiedFeatureFlags.atfaResults, true);
+        await openResultsView();
+
+        const resultExamplePath = path.join(
+            testResourceServerConfig.absolutePath,
+            'AccessibilityInsights/result_v2.json',
+        );
+        const axeRuleResultExample = JSON.parse(
+            fs.readFileSync(resultExamplePath, { encoding: 'utf-8' }),
+        );
+        const expectedScreenshotImage =
+            'data:image/png;base64,' + axeRuleResultExample.AxeResults.axeContext.screenshot;
+
+        await resultsView.waitForSelector(ScreenshotViewSelectors.screenshotImage);
+        const actualScreenshotImage = await resultsView.client.getAttribute(
+            ScreenshotViewSelectors.screenshotImage,
+            'src',
+        );
+
+        expect(actualScreenshotImage).toEqual(expectedScreenshotImage);
+    });
+
+    it('ScreenshotView renders expected number/size of highlight boxes in expected positions for v1 results', async () => {
+        app.setFeatureFlag(UnifiedFeatureFlags.atfaResults, false);
+        await openResultsView();
+
         await resultsView.waitForSelector(ScreenshotViewSelectors.highlightBox);
 
         const boxes = await resultsView.client.$$(ScreenshotViewSelectors.highlightBox);
@@ -99,6 +132,22 @@ describe('ResultsView', () => {
         ]);
     });
 
+    it('ScreenshotView renders expected number/size of highlight boxes in expected positions for results_v2', async () => {
+        app.setFeatureFlag(UnifiedFeatureFlags.atfaResults, true);
+        await openResultsView();
+
+        await resultsView.waitForSelector(ScreenshotViewSelectors.highlightBox);
+
+        const boxes = await resultsView.client.$$(ScreenshotViewSelectors.highlightBox);
+        const styles = await Promise.all(boxes.map(async b => await b.getAttribute('style')));
+        const actualHighlightBoxStyles = styles.map(extractPositionStyles);
+        verifyHighlightBoxStyles(actualHighlightBoxStyles, [
+            { width: 73.6111, height: 3.42593, top: 38.7037, left: 13.1481 },
+            { width: 73.6111, height: 3.42593, top: 38.7037, left: 13.1481 },
+            { width: 100, height: 35.4167, top: 42.1296, left: 0 },
+        ]);
+    });
+
     type PositionStyles = {
         width: number;
         height: number;
@@ -144,6 +193,7 @@ describe('ResultsView', () => {
     };
 
     it('command bar reflows when narrow mode threshold is crossed', async () => {
+        await openResultsView();
         await setupWindowForCommandBarReflowTest('narrow');
         await resultsView.waitForSelector(ResultsViewSelectors.leftNavHamburgerButton);
 
@@ -156,6 +206,7 @@ describe('ResultsView', () => {
     };
 
     it('hamburger button click opens and closes left nav', async () => {
+        await openResultsView();
         await setupWindowForCommandBarReflowTest('narrow');
         await waitForFluentLeftNavToDisappear();
         await resultsView.client.click(ResultsViewSelectors.leftNavHamburgerButton);
@@ -168,6 +219,7 @@ describe('ResultsView', () => {
     });
 
     it('left nav closes when item is selected', async () => {
+        await openResultsView();
         await setupWindowForCommandBarReflowTest('narrow');
         await resultsView.client.click(ResultsViewSelectors.leftNavHamburgerButton);
         await resultsView.waitForSelector(ResultsViewSelectors.fluentLeftNav);
@@ -178,7 +230,13 @@ describe('ResultsView', () => {
     });
 
     it('export report button exists', async () => {
+        await openResultsView();
         await setupWindowForCommandBarReflowTest('wide');
         await resultsView.waitForSelector(ResultsViewSelectors.exportReportButton);
     });
+
+    async function openResultsView(): Promise<void> {
+        resultsView = await app.openResultsView();
+        await resultsView.waitForScreenshotViewVisible();
+    }
 });
