add radio button tests for RAI text dashboard

apps/dashboard-e2e/src/describer/interpretText/individualFeatureImportance/describeClassImportanceWeightsDropdown.ts

@@ -2,10 +2,7 @@
 // Licensed under the MIT License.
 
 import { Locators } from "../../../util/Constants";
-import {
-  selectDropdownWithKeys,
-  getDropdownValue
-} from "../../../util/dropdown";
+import { selectDropdown, getDropdownValue } from "../../../util/dropdown";
 import { getDefaultTopKWords } from "../../../util/getDefaultTopKWords";
 import { validateBarChart } from "../../../util/validateBarChart";
 import { IInterpretTextData } from "../IInterpretTextData";
@@ -25,10 +22,10 @@ export function describeClassImportanceWeightsDropdown(
       );
     });
     it("should be selectable for different classes", () => {
-      selectDropdownWithKeys(Locators.ClassImportanceWeights).then(() => {
+      selectDropdown(Locators.TextWordsDropdown, "Class: spam").then(() => {
         validateTextBarChart(getDefaultTopKWords(dataShape.localExplanations));
       });
-      selectDropdownWithKeys(Locators.ClassImportanceWeights).then(() => {
+      selectDropdown(Locators.TextWordsDropdown, "Class: not spam").then(() => {
         validateTextBarChart(getDefaultTopKWords(dataShape.localExplanations));
       });
     });

apps/dashboard-e2e/src/describer/interpretText/individualFeatureImportance/describeIndividualFeatureImportance.ts

@@ -7,6 +7,7 @@ import { interpretTextDatasets } from "../interpretTextDatasets";
 import { describeBarChart } from "./describeBarChart";
 import { describeClassImportanceWeightsDropdown } from "./describeClassImportanceWeightsDropdown";
 import { describeLegend } from "./describeLegend";
+import { describeRadioButtonFeatureWeightsSelector } from "./describeRadioButtonFeatureWeightsSelector";
 import { describeSlider } from "./describeSlider";
 import { describeTextHighlighting } from "./describeTextHighlighting";
 
@@ -25,5 +26,6 @@ export function describeIndividualFeatureImportance(
     describeBarChart(getDefaultTopKWords(datasetShape.localExplanations));
     describeClassImportanceWeightsDropdown(datasetShape);
     describeSlider(datasetShape);
+    describeRadioButtonFeatureWeightsSelector();
   });
 }

apps/dashboard-e2e/src/describer/interpretText/individualFeatureImportance/describeRadioButtonFeatureWeightsSelector.ts

@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Locators } from "../../../util/Constants";
+import { validateBarChart } from "../../../util/validateBarChart";
+
+function validateTextBarChart(expectedNumValues: number): void {
+  validateBarChart(Locators.TextExplanationChart, expectedNumValues);
+}
+
+function switchRadioButtonValidateSelection(
+  selectedIndex: number,
+  expectedOptionValue: string,
+  expectedNumValues: number
+): void {
+  cy.get(`${Locators.TextChoiceGroup} .ms-ChoiceField-input`)
+    .eq(selectedIndex)
+    .check({ force: true })
+    .then(() => {
+      cy.get(`${Locators.TextChoiceGroup} .is-checked`).contains(
+        expectedOptionValue
+      );
+      validateTextBarChart(expectedNumValues);
+    });
+}
+
+export function describeRadioButtonFeatureWeightsSelector(): void {
+  describe("Radio button", () => {
+    it("should be set to all features by default", () => {
+      cy.get(`${Locators.TextChoiceGroup} [type='radio'][checked]`)
+        .next()
+        .should("have.class", "is-checked")
+        .contains("ALL FEATURES");
+      const notSpamExpectedNumValues = 5;
+      validateTextBarChart(notSpamExpectedNumValues);
+    });
+    it("should be able to set radio button to all positive features", () => {
+      const notSpamPositiveExpectedNumValues = 5;
+      switchRadioButtonValidateSelection(
+        1,
+        "POSITIVE FEATURES",
+        notSpamPositiveExpectedNumValues
+      );
+    });
+    it("should be able to set radio button to all negative features", () => {
+      const notSpamNegativeExpectedNumValues = 5;
+      switchRadioButtonValidateSelection(
+        2,
+        "NEGATIVE FEATURES",
+        notSpamNegativeExpectedNumValues
+      );
+    });
+  });
+}

apps/dashboard-e2e/src/util/Constants.ts

@@ -3,8 +3,10 @@
 
 export enum Locators {
   ClassImportanceWeights = "#ClassImportanceWeights",
+  TextChoiceGroup = "#TextChoiceGroup",
   TextFeatureLegend = "#TextFeatureLegend",
   TextHighlighting = "#TextHighlighting",
   TextExplanationChart = "#TextExplanationChart",
-  TextTopKSlider = "#TextTopKSlider"
+  TextTopKSlider = "#TextTopKSlider",
+  TextWordsDropdown = `#ClassImportanceWeights div.ms-Dropdown-container`
 }

apps/dashboard-e2e/src/util/dropdown.ts

@@ -1,17 +1,17 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { getSpan } from "./getSpan";
-
-export function selectDropdown(selector: string, item: string | number): void {
-  cy.get(`${selector}`).click();
-  getSpan(item.toString()).click();
-}
-
-export function selectDropdownWithKeys(
-  selector: string
+export function selectDropdown(
+  selector: string,
+  item: string | number
 ): Cypress.Chainable<JQuery<HTMLElement>> {
-  return cy.get(`${selector} .ms-Dropdown-title`).type("{downarrow}{enter}");
+  cy.get(selector).eq(0).click();
+  return cy
+    .get(".ms-Callout")
+    .should("be.visible")
+    .get(".ms-Dropdown-optionText")
+    .contains(item)
+    .click();
 }
 
 export function getDropdownValue(selector: string): string | undefined {

libs/e2e/src/lib/describer/modelAssessment/Constants.ts

@@ -20,7 +20,6 @@ export enum Locators {
   IFITopFeaturesText = "div[class^='featureImportanceControls'] span[class^='sliderLabel']",
   IFITopFeaturesValue = "div[class^='featureImportanceControls'] div.ms-Slider-container div.ms-Slider-slideBox",
   IFIAbsoluteValuesToggleButton = "div[class^='featureImportanceLegend'] div.ms-Toggle",
-  IFIDataPointDropdown = "div[class^='featureImportanceLegend'] div[role='listbox']",
   ICEFeatureDropdown = "div[class^='featureImportanceLegend'] div[class^='ms-ComboBox-container'] button[class^='ms-Button ms-Button--icon ms-ComboBox-CaretDown-button']",
   ICEFeatureDropdownOption = "div[class^='featureImportanceLegend'] div[class^='ms-ComboBox-container'] button:contains('workclass')",
   ICEXAxisNewValue = "#subPlotContainer text[class^='highcharts-axis-title']",

libs/interpret-text/src/lib/TextExplanationDashboard/Control/TextExplanationView/TextExplanationView.tsx

@@ -148,7 +148,7 @@ export class TextExplanationView extends React.PureComponent<
                   weightLabels={this.props.weightLabels}
                 />
               </Stack.Item>
-              <Stack.Item>
+              <Stack.Item id="TextChoiceGroup">
                 <ChoiceGroup
                   defaultSelectedKey="all"
                   options={options}