From 2b808797f5e73f6216871b8012ce6f069a06d1b3 Mon Sep 17 00:00:00 2001
From: devrk96 <rohit.kumawat@primathon.in>
Date: Mon, 14 Sep 2020 22:28:54 +0530
Subject: [PATCH] Cypress selector added in component system (#534)

* cypress-selector added in component system

* unused import removed
---
 app/client/src/components/ads/AppIcon.tsx             | 9 +++++++--
 app/client/src/components/ads/Checkbox.tsx            | 2 +-
 app/client/src/components/ads/ColorSelector.tsx       | 2 +-
 app/client/src/components/ads/Dropdown.tsx            | 6 +++++-
 app/client/src/components/ads/EditableText.tsx        | 5 +++--
 app/client/src/components/ads/IconSelector.tsx        | 2 +-
 app/client/src/components/ads/Menu.tsx                | 2 +-
 app/client/src/components/ads/MenuItem.tsx            | 6 +++++-
 app/client/src/components/ads/Radio.tsx               | 1 +
 app/client/src/components/ads/SearchInput.tsx         | 1 +
 app/client/src/components/ads/TableDropdown.tsx       | 1 +
 app/client/src/components/ads/Tabs.tsx                | 9 ++++++---
 app/client/src/components/ads/Text.tsx                | 7 ++++---
 app/client/src/components/ads/TextInput.tsx           | 2 +-
 app/client/src/components/ads/Toggle.tsx              | 1 +
 app/client/src/components/ads/Tooltip.tsx             | 2 +-
 app/client/src/components/stories/Radio.stories.tsx   | 8 +-------
 app/client/src/components/stories/Tooltip.stories.tsx | 1 -
 18 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/app/client/src/components/ads/AppIcon.tsx b/app/client/src/components/ads/AppIcon.tsx
index d3bee95975..82a321fdab 100644
--- a/app/client/src/components/ads/AppIcon.tsx
+++ b/app/client/src/components/ads/AppIcon.tsx
@@ -14,6 +14,7 @@ import { ReactComponent as FlightIcon } from "assets/icons/ads/flight.svg";
 
 import styled from "styled-components";
 import { Size } from "./Button";
+import { CommonComponentProps } from "./common";
 
 export const AppIconCollection = [
   "bag",
@@ -80,7 +81,7 @@ const IconWrapper = styled.div<AppIconProps & { styledProps: cssAttributes }>`
   background-color: ${props => props.color};
 `;
 
-export type AppIconProps = {
+export type AppIconProps = CommonComponentProps & {
   size: Size;
   color: string;
   name: AppIconName;
@@ -132,7 +133,11 @@ const AppIcon = (props: AppIconProps) => {
       break;
   }
   return returnIcon ? (
-    <IconWrapper {...props} styledProps={styledProps}>
+    <IconWrapper
+      data-cy={props.cypressSelector}
+      {...props}
+      styledProps={styledProps}
+    >
       {returnIcon}
     </IconWrapper>
   ) : null;
diff --git a/app/client/src/components/ads/Checkbox.tsx b/app/client/src/components/ads/Checkbox.tsx
index 8221668fa6..19e6400bec 100644
--- a/app/client/src/components/ads/Checkbox.tsx
+++ b/app/client/src/components/ads/Checkbox.tsx
@@ -82,7 +82,7 @@ const Checkbox = (props: CheckboxProps) => {
   };
 
   return (
-    <StyledCheckbox disabled={props.disabled}>
+    <StyledCheckbox data-cy={props.cypressSelector} disabled={props.disabled}>
       {props.label}
       <input
         type="checkbox"
diff --git a/app/client/src/components/ads/ColorSelector.tsx b/app/client/src/components/ads/ColorSelector.tsx
index 565739348b..09b33aa407 100644
--- a/app/client/src/components/ads/ColorSelector.tsx
+++ b/app/client/src/components/ads/ColorSelector.tsx
@@ -70,7 +70,7 @@ const ColorSelector = (props: ColorSelectorProps) => {
   const [selected, setSelected] = useState<string>(appColorPalette[0]);
 
   return (
-    <Palette fill={props.fill}>
+    <Palette fill={props.fill} data-cy={props.cypressSelector}>
       {props.colorPalette &&
         props.colorPalette.map((hex: string, index: number) => {
           return (
diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx
index d7e91c022f..fa98463c94 100644
--- a/app/client/src/components/ads/Dropdown.tsx
+++ b/app/client/src/components/ads/Dropdown.tsx
@@ -127,7 +127,11 @@ export default function Dropdown(props: DropdownProps) {
   }, []);
 
   return (
-    <DropdownContainer tabIndex={0} onBlur={() => setIsOpen(false)}>
+    <DropdownContainer
+      tabIndex={0}
+      onBlur={() => setIsOpen(false)}
+      data-cy={props.cypressSelector}
+    >
       <Selected
         isOpen={isOpen}
         disabled={props.disabled}
diff --git a/app/client/src/components/ads/EditableText.tsx b/app/client/src/components/ads/EditableText.tsx
index b64ef37ce0..d2af0989da 100644
--- a/app/client/src/components/ads/EditableText.tsx
+++ b/app/client/src/components/ads/EditableText.tsx
@@ -3,7 +3,7 @@ import { EditableText as BlueprintEditableText } from "@blueprintjs/core";
 import styled from "styled-components";
 import Text, { TextType } from "./Text";
 import Spinner from "./Spinner";
-import { hexToRgba, Classes } from "./common";
+import { hexToRgba, Classes, CommonComponentProps } from "./common";
 import { theme } from "constants/DefaultTheme";
 import { noop } from "lodash";
 import Icon, { IconSize } from "./Icon";
@@ -24,7 +24,7 @@ export enum SavingState {
   ERROR = "ERROR",
 }
 
-type EditableTextProps = {
+type EditableTextProps = CommonComponentProps & {
   defaultValue: string;
   onTextChanged: (value: string) => void;
   placeholder: string;
@@ -246,6 +246,7 @@ export const EditableText = (props: EditableTextProps) => {
 
   return (
     <EditableTextWrapper
+      data-cy={props.cypressSelector}
       fill={props.fill}
       onMouseEnter={nonEditMode}
       onDoubleClick={
diff --git a/app/client/src/components/ads/IconSelector.tsx b/app/client/src/components/ads/IconSelector.tsx
index 3614e2f536..d5518ad11c 100644
--- a/app/client/src/components/ads/IconSelector.tsx
+++ b/app/client/src/components/ads/IconSelector.tsx
@@ -48,7 +48,7 @@ const IconSelector = (props: IconSelectorProps) => {
   }, [props.selectedIcon]);
 
   return (
-    <IconPalette fill={props.fill}>
+    <IconPalette fill={props.fill} data-cy={props.cypressSelector}>
       {props.iconPalette &&
         props.iconPalette.map((iconName: AppIconName, index: number) => {
           return (
diff --git a/app/client/src/components/ads/Menu.tsx b/app/client/src/components/ads/Menu.tsx
index 8f89cd01d3..e53e1f4c37 100644
--- a/app/client/src/components/ads/Menu.tsx
+++ b/app/client/src/components/ads/Menu.tsx
@@ -28,7 +28,7 @@ const MenuOption = styled.div`
 
 const Menu = (props: MenuProps) => {
   return (
-    <Popover minimal position={props.position}>
+    <Popover minimal position={props.position} data-cy={props.cypressSelector}>
       {props.target}
       <MenuWrapper>
         {props.children.map((el, index) => {
diff --git a/app/client/src/components/ads/MenuItem.tsx b/app/client/src/components/ads/MenuItem.tsx
index 7107f2f04b..0c3e0de70c 100644
--- a/app/client/src/components/ads/MenuItem.tsx
+++ b/app/client/src/components/ads/MenuItem.tsx
@@ -51,7 +51,11 @@ const IconContainer = styled.div`
 
 function MenuItem(props: MenuItemProps) {
   return (
-    <ItemRow onClick={props.onSelect} disabled={props.disabled}>
+    <ItemRow
+      onClick={props.onSelect}
+      disabled={props.disabled}
+      data-cy={props.cypressSelector}
+    >
       <IconContainer>
         {props.icon ? <Icon name={props.icon} size={IconSize.LARGE} /> : null}
         {props.text ? (
diff --git a/app/client/src/components/ads/Radio.tsx b/app/client/src/components/ads/Radio.tsx
index 7486b67c82..d79b2b63bc 100644
--- a/app/client/src/components/ads/Radio.tsx
+++ b/app/client/src/components/ads/Radio.tsx
@@ -127,6 +127,7 @@ export default function RadioComponent(props: RadioProps) {
 
   return (
     <RadioGroup
+      data-cy={props.cypressSelector}
       rows={props.rows}
       onChange={(e: any) => onChangeHandler(e.target.value)}
     >
diff --git a/app/client/src/components/ads/SearchInput.tsx b/app/client/src/components/ads/SearchInput.tsx
index eb1e04c775..c3b43c3030 100644
--- a/app/client/src/components/ads/SearchInput.tsx
+++ b/app/client/src/components/ads/SearchInput.tsx
@@ -115,6 +115,7 @@ const SearchInput = forwardRef(
 
     return (
       <InputWrapper
+        data-cy={props.cypressSelector}
         value={searchValue}
         isFocused={isFocused}
         variant={props.variant}
diff --git a/app/client/src/components/ads/TableDropdown.tsx b/app/client/src/components/ads/TableDropdown.tsx
index 3ba911b5d8..00d74ae7b8 100644
--- a/app/client/src/components/ads/TableDropdown.tsx
+++ b/app/client/src/components/ads/TableDropdown.tsx
@@ -81,6 +81,7 @@ const TableDropdown = (props: DropdownProps) => {
 
   return (
     <Popover
+      data-cy={props.cypressSelector}
       usePortal={false}
       position={props.position || Position.BOTTOM_LEFT}
       isOpen={isDropdownOpen}
diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx
index 9170f78e68..de662634f6 100644
--- a/app/client/src/components/ads/Tabs.tsx
+++ b/app/client/src/components/ads/Tabs.tsx
@@ -3,7 +3,7 @@ import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import styled from "styled-components";
 import Icon, { IconName, IconSize } from "./Icon";
-import { Classes } from "./common";
+import { Classes, CommonComponentProps } from "./common";
 
 export type TabProp = {
   key: string;
@@ -105,7 +105,7 @@ const TabTitle = styled.span`
   letter-spacing: ${props => props.theme.typography.h4.letterSpacing}px;
 `;
 
-type TabbedViewComponentType = {
+type TabbedViewComponentType = CommonComponentProps & {
   tabs: Array<TabProp>;
   selectedIndex?: number;
   onSelect?: Function;
@@ -114,7 +114,10 @@ type TabbedViewComponentType = {
 
 export const TabComponent = (props: TabbedViewComponentType) => {
   return (
-    <TabsWrapper shouldOverflow={props.overflow}>
+    <TabsWrapper
+      shouldOverflow={props.overflow}
+      data-cy={props.cypressSelector}
+    >
       <Tabs
         selectedIndex={props.selectedIndex}
         onSelect={(index: number) => {
diff --git a/app/client/src/components/ads/Text.tsx b/app/client/src/components/ads/Text.tsx
index cd3cd83ed2..d3c3922349 100644
--- a/app/client/src/components/ads/Text.tsx
+++ b/app/client/src/components/ads/Text.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ThemeProp, Classes } from "./common";
+import { ThemeProp, Classes, CommonComponentProps } from "./common";
 
 export enum TextType {
   P1 = "p1",
@@ -24,7 +24,7 @@ export enum FontWeight {
   NORMAL = "normal",
 }
 
-export type TextProps = {
+export type TextProps = CommonComponentProps & {
   type: TextType;
   underline?: boolean;
   italic?: boolean;
@@ -52,8 +52,9 @@ const typeSelector = (props: TextProps & ThemeProp): string => {
   return color;
 };
 
-const Text = styled.span.attrs(() => ({
+const Text = styled.span.attrs((props: TextProps) => ({
   className: Classes.TEXT,
+  "data-cy": props.cypressSelector,
 }))<TextProps>`
   text-decoration: ${props => (props.underline ? "underline" : "unset")};
   font-style: ${props => (props.italic ? "italic" : "normal")};
diff --git a/app/client/src/components/ads/TextInput.tsx b/app/client/src/components/ads/TextInput.tsx
index e4bb8b9cd4..60cf33319b 100644
--- a/app/client/src/components/ads/TextInput.tsx
+++ b/app/client/src/components/ads/TextInput.tsx
@@ -155,7 +155,7 @@ const TextInput = forwardRef(
     );
 
     return (
-      <InputWrapper>
+      <InputWrapper data-cy={props.cypressSelector}>
         <StyledInput
           type="text"
           ref={ref}
diff --git a/app/client/src/components/ads/Toggle.tsx b/app/client/src/components/ads/Toggle.tsx
index 1b1dc1de23..01a78a1b93 100644
--- a/app/client/src/components/ads/Toggle.tsx
+++ b/app/client/src/components/ads/Toggle.tsx
@@ -126,6 +126,7 @@ export default function Toggle(props: ToggleProps) {
 
   return (
     <StyledToggle
+      data-cy={props.cypressSelector}
       isLoading={props.isLoading}
       disabled={props.disabled}
       value={value}
diff --git a/app/client/src/components/ads/Tooltip.tsx b/app/client/src/components/ads/Tooltip.tsx
index 1a021f7b8d..1d1a3f5af1 100644
--- a/app/client/src/components/ads/Tooltip.tsx
+++ b/app/client/src/components/ads/Tooltip.tsx
@@ -39,7 +39,7 @@ const TooltipWrapper = styled.div<{ variant?: Variant }>`
 
 const TooltipComponent = (props: TooltipProps) => {
   return (
-    <TooltipWrapper variant={props.variant}>
+    <TooltipWrapper variant={props.variant} data-cy={props.cypressSelector}>
       <Tooltip
         content={props.content}
         position={props.position}
diff --git a/app/client/src/components/stories/Radio.stories.tsx b/app/client/src/components/stories/Radio.stories.tsx
index ff0d9480b5..d3a54c0f1a 100644
--- a/app/client/src/components/stories/Radio.stories.tsx
+++ b/app/client/src/components/stories/Radio.stories.tsx
@@ -1,11 +1,5 @@
 import React from "react";
-import {
-  withKnobs,
-  select,
-  boolean,
-  text,
-  number,
-} from "@storybook/addon-knobs";
+import { withKnobs, select, boolean, number } from "@storybook/addon-knobs";
 import { withDesign } from "storybook-addon-designs";
 import { StoryWrapper } from "components/ads/common";
 import RadioComponent from "components/ads/Radio";
diff --git a/app/client/src/components/stories/Tooltip.stories.tsx b/app/client/src/components/stories/Tooltip.stories.tsx
index c5cddb6cc3..46fd641e41 100644
--- a/app/client/src/components/stories/Tooltip.stories.tsx
+++ b/app/client/src/components/stories/Tooltip.stories.tsx
@@ -5,7 +5,6 @@ import { Position } from "@blueprintjs/core";
 import TooltipComponent from "components/ads/Tooltip";
 import { StoryWrapper } from "components/ads/common";
 import Text, { TextType } from "components/ads/Text";
-import Button from "components/ads/Button";
 
 export default {
   title: "Tooltip",