Adds chart switcher test

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

Author: ashwin-pc

src/plugins/wizard/public/application/components/right_nav.tsx

@@ -32,6 +32,7 @@ export const RightNav = () => {
     value: name,
     inputDisplay: <OptionItem icon={icon} title={title} />,
     dropdownDisplay: <OptionItem icon={icon} title={title} />,
+    'data-test-subj': `visType-${name}`,
   }));
 
   return (
@@ -44,6 +45,7 @@ export const RightNav = () => {
             setNewVisType(name);
           }}
           fullWidth
+          data-test-subj="chartPicker"
         />
       </div>
       <div className="wizSidenav__style">
@@ -72,6 +74,7 @@ export const RightNav = () => {
             setNewVisType(undefined);
           }}
           maxWidth="300px"
+          data-test-subj="confirmVisChangeModal"
         >
           <p>
             <FormattedMessage

test/functional/apps/wizard/_base.ts

@@ -8,6 +8,7 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['visualize', 'wizard', 'visChart']);
+  const testSubjects = getService('testSubjects');
   const log = getService('log');
   const retry = getService('retry');
 
@@ -27,21 +28,33 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should show visualization when a field is added', async () => {
-      await PageObjects.wizard.addField('metric', 'Average', 'machine.ram');
+      const expectedData = [2858, 2904, 2814, 1322, 2784];
+      await PageObjects.wizard.addField('metric', 'Count');
+      await PageObjects.wizard.addField('segment', 'Terms', 'machine.os.raw');
 
-      await retry.try(async () => {
-        const data = await PageObjects.visChart.getBarChartData('Average machine.ram');
-        expect(data).to.eql([13104038093]);
-      });
+      const data = await PageObjects.visChart.getBarChartData();
+      expect(data).to.eql(expectedData);
     });
 
     it('should clear visualization when field is deleted', async () => {
       await PageObjects.wizard.removeField('metric', 0);
 
-      await retry.try(async function tryingForTime() {
-        const isEmptyWorkspace = await PageObjects.wizard.isEmptyWorkspace();
-        expect(isEmptyWorkspace).to.be(true);
-      });
+      const isEmptyWorkspace = await PageObjects.wizard.isEmptyWorkspace();
+      expect(isEmptyWorkspace).to.be(true);
+    });
+
+    it('should show warning before changing visualization type', async () => {
+      await PageObjects.wizard.selectVisType('metric', false);
+      const confirmModalExists = await testSubjects.exists('confirmVisChangeModal');
+      expect(confirmModalExists).to.be(true);
+
+      await testSubjects.click('confirmModalCancelButton');
+    });
+
+    it('should change visualization type', async () => {
+      const pickerValue = await PageObjects.wizard.selectVisType('metric');
+
+      expect(pickerValue).to.eql('Metric');
     });
   });
 }

test/functional/page_objects/wizard_page.ts

@@ -50,20 +50,35 @@ export function WizardPageProvider({ getService, getPageObjects }: FtrProviderCo
       return await dataSourceDropdown.getVisibleText();
     }
 
+    public async selectVisType(type: string, confirm = true) {
+      const chartPicker = await testSubjects.find('chartPicker');
+      await chartPicker.click();
+      await testSubjects.click(`visType-${type}`);
+
+      if (confirm) {
+        await testSubjects.click('confirmModalConfirmButton');
+      }
+
+      return chartPicker.getVisibleText();
+    }
+
     public async addField(
       dropBoxId: string,
       aggValue: string,
-      fieldValue: string,
+      fieldValue?: string,
       returnToMainPanel = true
     ) {
       await testSubjects.click(`dropBoxAddField-${dropBoxId} > dropBoxAddBtn`);
       await common.sleep(500);
       const aggComboBoxElement = await testSubjects.find('defaultEditorAggSelect');
       await comboBox.setElement(aggComboBoxElement, aggValue);
       await common.sleep(500);
-      const fieldComboBoxElement = await testSubjects.find('visDefaultEditorField');
-      await comboBox.setElement(fieldComboBoxElement, fieldValue);
-      await common.sleep(500);
+
+      if (fieldValue) {
+        const fieldComboBoxElement = await testSubjects.find('visDefaultEditorField');
+        await comboBox.setElement(fieldComboBoxElement, fieldValue);
+        await common.sleep(500);
+      }
 
       if (returnToMainPanel) {
         await testSubjects.click('panelCloseBtn');