From 5dd70a106b66d133e7377628e496d1d25ce37847 Mon Sep 17 00:00:00 2001
From: MihailHadzhiev2022 <mihail@budibase.com>
Date: Wed, 18 May 2022 14:09:58 +0300
Subject: [PATCH] adding interact locators for AddMultiOptionDataType test

---
 .../integration/addMultiOptionDatatype.spec.js  | 17 +++++++++--------
 packages/builder/cypress/support/interact.js    | 10 +++++++++-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js
index e67f1eb2a2..3e0ba92ba4 100644
--- a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js
+++ b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js
@@ -1,4 +1,5 @@
 import filterTests from "../support/filterTests"
+const interact = require('../support/interact')
 
 filterTests(['all'], () => {
   context("Add Multi-Option Datatype", () => {
@@ -17,19 +18,19 @@ filterTests(['all'], () => {
     cy.navigateToFrontend()
     cy.wait(500)
     // Add data provider
-    cy.get(`[data-cy="category-Data"]`).click()
-    cy.get(`[data-cy="component-Data Provider"]`).click()
-    cy.get('[data-cy="dataSource-prop-control"]').click()
-    cy.get(".dropdown").contains("Multi Data").click()
+    cy.get(interact.CATEGORY_DATA).click()
+    cy.get(interact.COMPONENT_DATA_PROVIDER).click()
+    cy.get(interact.DATASOURCE_PROP_CONTROL).click()
+    cy.get(interact.DROPDOWN).contains("Multi Data").click()
     cy.wait(500)
     // Add Form with schema to match table
     cy.addComponent("Form", "Form")
-    cy.get('[data-cy="dataSource-prop-control"').click()
-    cy.get(".dropdown").contains("Multi Data").click()
+    cy.get(interact.DATASOURCE_PROP_CONTROL).click()
+    cy.get(interact.DROPDOWN).contains("Multi Data").click()
     cy.wait(500)
     // Add multi-select picker to form
     cy.addComponent("Form", "Multi-select Picker").then(componentId => {
-      cy.get('[data-cy="field-prop-control"]').type("Test Data").type("{enter}")
+      cy.get(interact.DATASOURCE_FIELD_CONTROL).type("Test Data").type("{enter}")
       cy.wait(1000)
       cy.getComponent(componentId).contains("Choose some options").click()
       // Check picker has 5 items
@@ -40,7 +41,7 @@ filterTests(['all'], () => {
       }
       // Check items have been selected
       cy.getComponent(componentId)
-        .find(".spectrum-Picker-label")
+        .find(interact.SPECTRUM_Picker_LABEL)
         .contains("(5)")
       })
     })
diff --git a/packages/builder/cypress/support/interact.js b/packages/builder/cypress/support/interact.js
index 46954227de..cff16325da 100644
--- a/packages/builder/cypress/support/interact.js
+++ b/packages/builder/cypress/support/interact.js
@@ -8,6 +8,14 @@ export const TEMPLATE_CATEGORY_ACTIONGROUP = ".template-category"
 export const TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON =
   ".template-category-filters .spectrum-ActionButton"
 export const SPECTRUM_MODAL = ".spectrum-Modal"
-export const APP_NAME_INPUT = "input" // we need to update this with atribute cy-data
+export const APP_NAME_INPUT = "input" // we need to update this with atribute cy-data;
 export const SPECTRUM_BUTTON_GROUP = ".spectrum-ButtonGroup"
 export const SPECTRUM_MODAL_INPUT = ".spectrum-Modal input"
+
+//AddMultiOptionDatatype test
+export const CATEGORY_DATA = '[data-cy="category-Data"]'
+export const COMPONENT_DATA_PROVIDER = '[data-cy="component-Data Provider"]'
+export const DATASOURCE_PROP_CONTROL = '[data-cy="dataSource-prop-control"]'
+export const DROPDOWN = ".dropdown"
+export const SPECTRUM_Picker_LABEL = ".spectrum-Picker-label"
+export const DATASOURCE_FIELD_CONTROL = '[data-cy="field-prop-control"]'