Merge pull request #379 from dcos-labs/mp/feat/DCOS-56537-testing-sel…

…ectors

DCOS-56537: add data attributes to simplify selectors for Cypress testing

README.md

@@ -93,6 +93,21 @@ describe('Badge', () => {
 });
 ```
 
+## Testing with Cypress
+To make it easier to select DOM nodes of our components, DOM nodes have a `data-cy` attribute.
+
+### `data-cy` value naming convention
+**Parent nodes:** The value of `data-cy` for component's parent node is the same as the component name, but camelCased. For example: The parent node for `<PrimaryButton>` will have `data-cy="primaryButton"`
+
+**Child nodes:** If a child node has a `data-cy` added, there will be a dash between the parent node's name and a string to describe the child node. For example: The footer element of a `<DialogModal>` will have `data-cy="fullscreenModal-footer"`
+
+**States and variants:** If a node has a special "state", `data-cy` will prepend a string describing that state after a dot.
+For example:
+* `<TextInput disabled>` will have `data-cy="textInput textInput.disabled"`
+* A `<TextInput>` with an error will have `data-cy="textInput textInput.error"`
+
+For more information on writing selectors, see the [Cypress guide](https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements).
+
 ## Commits
 
 You should follow [conventional commit](https://conventionalcommits.org/) formatting rules, as they provide a framework to write explicit messages that are easy to comprehend when looking through the project history and enable automatic change log generation.

packages/appChrome/components/AppChrome.tsx

@@ -33,11 +33,17 @@ class AppChrome extends React.PureComponent<AppChromeProps, {}> {
             textSize("m"),
             flex({ direction: "column" })
           )}
+          data-cy="appChrome"
         >
-          <div className="headerBar">{headerBar}</div>
+          <div data-cy="headerBar">{headerBar}</div>
           <div className={cx(flex(), appWrapper)}>
-            <div className={flexItem("shrink")}>{sidebar}</div>
-            <main className={cx(flexItem("grow"), flush("left"), appWrapper)}>
+            <div className={flexItem("shrink")} data-cy="sidebar">
+              {sidebar}
+            </div>
+            <main
+              className={cx(flexItem("grow"), flush("left"), appWrapper)}
+              data-cy="main"
+            >
               {mainContent}
             </main>
           </div>

packages/appChrome/components/SidebarItem.tsx

@@ -14,6 +14,11 @@ export interface SidebarItemProps {
 class SidebarItemComponent extends React.PureComponent<SidebarItemProps, {}> {
   public render() {
     const { children, isActive, onClick } = this.props;
+    const dataCy = [
+      "sidebarItem",
+      ...(isActive ? ["sidebarItem.active"] : [])
+    ].join(" ");
+
     const Item = styled("li")`
       ${props => {
         return css`
@@ -40,6 +45,7 @@ class SidebarItemComponent extends React.PureComponent<SidebarItemProps, {}> {
         tabIndex={0}
         role="link"
         disableFocusOutline={true}
+        dataCy={dataCy}
       >
         <Item>{children}</Item>
       </Clickable>

packages/appChrome/components/SidebarSection.tsx

@@ -51,7 +51,7 @@ class SidebarSection extends React.PureComponent<SidebarSectionProps, {}> {
     `;
 
     return (
-      <div>
+      <div data-cy="sidebarSection">
         {label && (
           <H3
             className={cx(

packages/appChrome/components/SidebarSubMenu.tsx

@@ -52,9 +52,13 @@ export class SidebarSubMenuComponent extends React.PureComponent<
 
   public render() {
     const { children, label, isOpen, theme } = this.props;
+    const dataCy = [
+      "sidebarSubMenu",
+      ...(isOpen ? ["sidebarSubMenu.open"] : [])
+    ];
 
     return (
-      <li>
+      <li data-cy={dataCy}>
         <Expandable
           labelClassName={cx(
             appChromeInsetContent,

packages/appChrome/components/SidebarSubMenuItem.tsx

@@ -65,9 +65,13 @@ class SidebarSubMenuItem extends React.PureComponent<
         )]: isActive
       }
     );
+    const dataCy = [
+      "sidebarSubMenuItem",
+      ...(isActive ? ["sidebarSubMenuItem.active"] : [])
+    ].join(" ");
 
     return (
-      <Clickable action={onClick} tabIndex={0} role="link">
+      <Clickable action={onClick} tabIndex={0} role="link" dataCy={dataCy}>
         <div className={classNames}>
           <span className={subMenuItemText}>{children}</span>
         </div>

packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap

@@ -84,9 +84,10 @@ exports[`AppChrome renders with the app chrome regions 1`] = `
 >
   <div
     className="emotion-3"
+    data-cy="appChrome"
   >
     <div
-      className="headerBar"
+      data-cy="headerBar"
     >
       <div>
         HeaderBar content goes here
@@ -97,13 +98,15 @@ exports[`AppChrome renders with the app chrome regions 1`] = `
     >
       <div
         className="emotion-0"
+        data-cy="sidebar"
       >
         <div>
           Sidebar content
         </div>
       </div>
       <main
         className="emotion-1"
+        data-cy="main"
       >
         <div>
           Main app content goes here

packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`Sidebar SidebarItem renders 1`] = `
 <Clickable
   action={[MockFunction]}
+  dataCy="sidebarItem"
   disableFocusOutline={true}
   role="link"
   tabIndex={0}
@@ -106,7 +107,9 @@ exports[`Sidebar SidebarSection renders 1`] = `
   padding-left: 0;
 }
 
-<div>
+<div
+  data-cy="sidebarSection"
+>
   <Styled(h3)
     className="emotion-0"
   >
@@ -131,7 +134,13 @@ exports[`Sidebar SidebarSubMenu renders 1`] = `
   padding-left: 0;
 }
 
-<li>
+<li
+  data-cy={
+    Array [
+      "sidebarSubMenu",
+    ]
+  }
+>
   <Expandable
     label={
       <div>

packages/avatar/components/Avatar.tsx

@@ -39,6 +39,7 @@ const Avatar: React.StatelessComponent<AvatarProps> = (props: AvatarProps) => {
       className={cx(avatarContainer, avatarSize(size))}
       role="img"
       aria-label={label}
+      data-cy="avatar"
     >
       {/*
           tslint:disable react-a11y-img-has-alt

packages/avatar/tests/__snapshots__/avatar.test.tsx.snap

@@ -19,6 +19,7 @@ exports[`Avatar renders default 1`] = `
 
 <div
   className="emotion-1"
+  data-cy="avatar"
   role="img"
 >
   <img
@@ -49,6 +50,7 @@ exports[`Avatar renders with a src, size, and label 1`] = `
 <div
   aria-label="Kubernetes"
   className="emotion-1"
+  data-cy="avatar"
   role="img"
 >
   <img

packages/badge/components/badge.tsx

@@ -20,7 +20,11 @@ export class Badge extends React.PureComponent<BadgeProps, {}> {
   public render() {
     const { appearance, children } = this.props;
 
-    return <span className={badge(appearance)}>{children}</span>;
+    return (
+      <span className={badge(appearance)} data-cy="badge">
+        {children}
+      </span>
+    );
   }
 }
 

packages/badge/components/badgeButton.tsx

@@ -40,7 +40,7 @@ export class BadgeButton extends React.PureComponent<BadgeButtonProps, {}> {
       ${badgeButton(appearance)};
     `;
     return (
-      <Clickable {...props}>
+      <Clickable {...props} dataCy="badgeButton">
         <span className={className}>{children}</span>
       </Clickable>
     );

packages/badge/tests/__snapshots__/badge.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`Badge accept jsx as children 1`] = `
 <span
   className="css-17jd12v"
+  data-cy="badge"
 >
   <span>
     string
@@ -13,6 +14,7 @@ exports[`Badge accept jsx as children 1`] = `
 exports[`Badge danger 1`] = `
 <span
   className="css-1g44s7u"
+  data-cy="badge"
 >
   danger
 </span>
@@ -21,6 +23,7 @@ exports[`Badge danger 1`] = `
 exports[`Badge default 1`] = `
 <span
   className="css-17jd12v"
+  data-cy="badge"
 >
   default
 </span>
@@ -29,6 +32,7 @@ exports[`Badge default 1`] = `
 exports[`Badge outline 1`] = `
 <span
   className="css-bvpqwa"
+  data-cy="badge"
 >
   outline
 </span>
@@ -37,6 +41,7 @@ exports[`Badge outline 1`] = `
 exports[`Badge primary 1`] = `
 <span
   className="css-11hyrb9"
+  data-cy="badge"
 >
   primary
 </span>
@@ -45,6 +50,7 @@ exports[`Badge primary 1`] = `
 exports[`Badge success 1`] = `
 <span
   className="css-y6ql0v"
+  data-cy="badge"
 >
   success
 </span>
@@ -53,6 +59,7 @@ exports[`Badge success 1`] = `
 exports[`Badge warning 1`] = `
 <span
   className="css-1fasnxp"
+  data-cy="badge"
 >
   warning
 </span>

packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`BadgeButton accept jsx as children 1`] = `
 <span
   className="css-19iuzmr"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -17,6 +18,7 @@ exports[`BadgeButton accept jsx as children 1`] = `
 exports[`BadgeButton danger 1`] = `
 <span
   className="css-1jlwe7l"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -29,6 +31,7 @@ exports[`BadgeButton danger 1`] = `
 exports[`BadgeButton default 1`] = `
 <span
   className="css-19iuzmr"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -41,6 +44,7 @@ exports[`BadgeButton default 1`] = `
 exports[`BadgeButton outline 1`] = `
 <span
   className="css-nrwsml"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -53,6 +57,7 @@ exports[`BadgeButton outline 1`] = `
 exports[`BadgeButton primary 1`] = `
 <span
   className="css-5fnbh1"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -65,6 +70,7 @@ exports[`BadgeButton primary 1`] = `
 exports[`BadgeButton success 1`] = `
 <span
   className="css-l1zuud"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"
@@ -77,6 +83,7 @@ exports[`BadgeButton success 1`] = `
 exports[`BadgeButton warning 1`] = `
 <span
   className="css-wldna8"
+  data-cy="badgeButton"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="button"

packages/breadcrumb/components/Breadcrumb.tsx

@@ -37,6 +37,7 @@ class Breadcrumb extends React.PureComponent<BreadcrumbProps, {}> {
             className={cx(textWeight("medium"), textSize("l"), {
               [padding("left", "xs")]: i !== 0
             })}
+            data-cy="breadcrumb"
           >
             {crumb}
           </div>

packages/breadcrumb/tests/__snapshots__/Breadcrumb.test.tsx.snap

@@ -6,17 +6,20 @@ exports[`Breadcrumb default 1`] = `
 >
   <div
     class="css-1ixtlzk"
+    data-cy="breadcrumb"
   >
     <span>
       One
     </span>
   </div>
   <div
     class="css-19hcarb"
+    data-cy="breadcrumb"
   >
     <svg
       aria-label="system-caret-right icon"
       class="css-zgvqkl"
+      data-cy="icon"
       height="16"
       preserveAspectRatio="xMinYMin meet"
       role="img"
@@ -30,6 +33,7 @@ exports[`Breadcrumb default 1`] = `
   </div>
   <div
     class="css-19hcarb"
+    data-cy="breadcrumb"
   >
     <span>
       Two

packages/button/components/DangerButton.tsx

@@ -6,7 +6,11 @@ import {
 } from "./ButtonBase";
 
 const DangerButton = (props: ButtonProps) => (
-  <ButtonBase appearance={ButtonAppearances.Danger} {...props} />
+  <ButtonBase
+    appearance={ButtonAppearances.Danger}
+    data-cy="dangerButton"
+    {...props}
+  />
 );
 
 export default DangerButton;

packages/button/components/DangerDropdownButton.tsx

@@ -4,7 +4,11 @@ import { ButtonProps } from "./ButtonBase";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
 
 const DangerDropdownButton = (props: ButtonProps) => (
-  <DangerButton iconEnd={SystemIcons.TriangleDown} {...props} />
+  <DangerButton
+    iconEnd={SystemIcons.TriangleDown}
+    data-cy="dangerDropdownButton"
+    {...props}
+  />
 );
 
 export default DangerDropdownButton;

packages/button/components/PrimaryButton.tsx

@@ -6,7 +6,11 @@ import {
 } from "./ButtonBase";
 
 const PrimaryButton = (props: ButtonProps) => (
-  <ButtonBase appearance={ButtonAppearances.Primary} {...props} />
+  <ButtonBase
+    appearance={ButtonAppearances.Primary}
+    data-cy="primaryButton"
+    {...props}
+  />
 );
 
 export default PrimaryButton;