From 469890df687f05721bb51c9581286e11ad30f61f Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Wed, 9 Jan 2019 16:32:12 -0800
Subject: [PATCH] add pop id prop to fix integration tests

---
 components/BackgroundSelect.js               | 7 ++++++-
 components/Popout.js                         | 4 ++--
 cypress/integration/background-color-spec.js | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/BackgroundSelect.js b/components/BackgroundSelect.js
index fbbb700..cba44df 100644
--- a/components/BackgroundSelect.js
+++ b/components/BackgroundSelect.js
@@ -49,7 +49,12 @@ class BackgroundSelect extends React.PureComponent {
             <div className="bg-color" />
           </div>
         </div>
-        <Popout pointerLeft="15px" hidden={!isVisible} style={{ width: '222px' }}>
+        <Popout
+          id="bg-select-pickers"
+          pointerLeft="15px"
+          hidden={!isVisible}
+          style={{ width: '222px' }}
+        >
           <div className="picker-tabs">
             {['color', 'image'].map(tab => (
               <div
diff --git a/components/Popout.js b/components/Popout.js
index 120c6b5..dd1c63e 100644
--- a/components/Popout.js
+++ b/components/Popout.js
@@ -36,14 +36,14 @@ class Popout extends React.PureComponent {
   }
 
   render() {
-    const { children, borderColor, style, hidden, pointerLeft, pointerRight } = this.props
+    const { id, children, borderColor, style, hidden, pointerLeft, pointerRight } = this.props
 
     if (hidden) {
       return null
     }
 
     return (
-      <div className="popout" style={style}>
+      <div id={id} className="popout" style={style}>
         <WindowPointer fromLeft={pointerLeft} fromRight={pointerRight} color={borderColor} />
         {children}
         <style jsx>
diff --git a/cypress/integration/background-color-spec.js b/cypress/integration/background-color-spec.js
index 4a78664..b8d397d 100644
--- a/cypress/integration/background-color-spec.js
+++ b/cypress/integration/background-color-spec.js
@@ -8,7 +8,7 @@ import { editorVisible } from '../support'
 
 describe('background color', () => {
   const bgColor = '.bg-color-container .bg-color'
-  const picker = '.bg-select-pickers'
+  const picker = '#bg-select-pickers'
 
   const openPicker = () => {
     cy.get(bgColor).click()