From 75e3e4e0958c8f1ed62e075d26be1c35fe87852a Mon Sep 17 00:00:00 2001
From: Dan Reeves <hey@danreev.es>
Date: Sat, 21 Apr 2018 14:36:27 +0100
Subject: [PATCH] Demo & test changing attachments (#79)

---
 example/components/demo.js    | 47 +++++++++++++++++++++++++----------
 example/components/tooltip.js | 18 ++++++++++++++
 tests/e2e/demo.js             | 13 +++++++---
 3 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/example/components/demo.js b/example/components/demo.js
index 9fab481..c024de8 100644
--- a/example/components/demo.js
+++ b/example/components/demo.js
@@ -88,31 +88,52 @@ const ToggleButton = styled.button`
   }
 `;
 
+const AbsoluteDiv = styled.div`
+  position: absolute;
+`;
+
 export default class Demo extends React.Component {
   tether = null;
 
   container = null;
 
-  state = { on: true };
+  attachments = ['middle left', 'top center', 'middle right', 'bottom center'];
+
+  state = { on: true, attachment: this.attachments[0] };
 
   componentDidMount() {
     // Rerender with the container ref
     this.setState({});
   }
 
+  toggleTooltip = () => {
+    this.setState(({ on }) => {
+      return { on: !on };
+    });
+  };
+
+  cycleAttachment = () => {
+    const { attachment } = this.state;
+    let nextAttachment = this.attachments.indexOf(attachment) + 1;
+    if (nextAttachment === this.attachments.length) {
+      nextAttachment = 0;
+    }
+    this.setState(() => ({
+      attachment: this.attachments[nextAttachment],
+    }));
+  };
+
   render() {
     return (
       <DemoZone>
-        <ToggleButton
-          id="CLICK_ME"
-          onClick={() =>
-            this.setState(({ on }) => {
-              return { on: !on };
-            })
-          }
-        >
-          Toggle tooltip
-        </ToggleButton>
+        <AbsoluteDiv>
+          <ToggleButton id="TOGGLE_TOOLTIP" onClick={this.toggleTooltip}>
+            Toggle tooltip
+          </ToggleButton>
+          <ToggleButton id="CYCLE_ATTACHMENT" onClick={this.cycleAttachment}>
+            Change side
+          </ToggleButton>
+        </AbsoluteDiv>
         <div
           ref={container => {
             this.container = container;
@@ -124,7 +145,7 @@ export default class Demo extends React.Component {
               ref={tether => {
                 this.tether = tether;
               }}
-              attachment="middle left"
+              attachment={this.state.attachment}
               constraints={[
                 {
                   to: this.container,
@@ -141,7 +162,7 @@ export default class Demo extends React.Component {
                 onDrag={() =>
                   this.tether.getTetherInstance() && this.tether.position()
                 }
-                defaultPosition={{ x: 25, y: 25 }}
+                defaultPosition={{ x: 25, y: 125 }}
               />
               {this.state.on && (
                 <Tooltip id="WATCH_ME">
diff --git a/example/components/tooltip.js b/example/components/tooltip.js
index 8cc7663..5a0bf84 100644
--- a/example/components/tooltip.js
+++ b/example/components/tooltip.js
@@ -23,6 +23,15 @@ function triangleForSide(side) {
       border-bottom: 10px solid #333;
     `;
   }
+  if (side === 'bottom') {
+    return css`
+      bottom: -10px;
+      left: calc(50% - 10px);
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid #333;
+    `;
+  }
   if (side === 'right') {
     return css`
       top: calc(50% - 10px);
@@ -33,6 +42,7 @@ function triangleForSide(side) {
     `;
   }
 }
+
 const triangleCommon = css`
   position: absolute;
   content: ' ';
@@ -40,6 +50,7 @@ const triangleCommon = css`
   line-height: 0;
   width: 0;
 `;
+
 export default styled.div`
   display: inline-block;
   border-radius: 6px;
@@ -82,5 +93,12 @@ export default styled.div`
           .tether-target-attached-bottom & {
             margin-top: 10px;
           }
+          .tether-target-attached-top &:after {
+            ${() => triangleForSide('bottom')};
+            ${triangleCommon};
+          }
+          .tether-target-attached-top & {
+            margin-bottom: 10px;
+          }
         `};
 `;
diff --git a/tests/e2e/demo.js b/tests/e2e/demo.js
index 9489262..8b37f73 100644
--- a/tests/e2e/demo.js
+++ b/tests/e2e/demo.js
@@ -8,7 +8,8 @@ test(`It handles repositioning, constraints,
       and unmounting the tethered component`, async t => {
   const target = new Selector('#DRAG_ME');
   const tooltip = new Selector('#WATCH_ME');
-  const button = new Selector('#CLICK_ME');
+  const toggleTooltip = new Selector('#TOGGLE_TOOLTIP');
+  const cycleAttachment = new Selector('#CYCLE_ATTACHMENT');
 
   await t.hover(target);
   // Target is to the left of the tooltip
@@ -27,11 +28,17 @@ test(`It handles repositioning, constraints,
     .expect(targetAfterLeft > tooltipAfterLeft)
     .ok(`${targetAfterLeft} > ${tooltipAfterLeft}`);
 
+  // The attachement can be changed
+  await t.click(cycleAttachment);
+  await t.click(cycleAttachment);
+  await t.click(cycleAttachment);
+  await t.click(cycleAttachment);
+
   // Toggle the tooltip off
-  await t.click(button);
+  await t.click(toggleTooltip);
   await t.drag(target, -300, 0);
   // Toggle the tooltip on
-  await t.click(button);
+  await t.click(toggleTooltip);
   await t.drag(target, -300, 0);
 });