Merge 4136118 into dea7195

danreeves · Sep 6, 2019 · b09382a · b09382a
2 parents dea7195 + 4136118
commit b09382a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 7 deletions.
diff --git a/src/TetherComponent.jsx b/src/TetherComponent.jsx
@@ -96,6 +96,15 @@ class TetherComponent extends Component {
       this._createContainer();
     }
 
+    // Verify if className props have changed
+    if (this._elementParentNode && prevProps.className !== this.props.className) {
+      const prevClasses = (prevProps.className || '').split(' ');
+      const currClasses = (this.props.className || '').split(' ');
+
+      this._elementParentNode.classList.remove(...prevClasses);
+      this._elementParentNode.classList.add(...currClasses);
+    }
+
     this._update();
   }
 
@@ -204,10 +213,11 @@ class TetherComponent extends Component {
     // Create element node container if it hasn't been yet
     this._removeContainer();
 
-    const { renderElementTag } = this.props;
+    const { renderElementTag, className } = this.props;
 
     // Create a node that we can stick our content Component in
     this._elementParentNode = document.createElement(renderElementTag);
+    this._elementParentNode.className = className || '';
   }
 
   _addContainerToDOM() {
@@ -243,7 +253,7 @@ class TetherComponent extends Component {
       renderElementTag,
       renderElementTo,
       id,
-      className,
+      className, // This prop is specific to this._elementParentNode
       style,
       renderTarget,
       renderElement,
@@ -260,11 +270,6 @@ class TetherComponent extends Component {
       this._elementParentNode.id = idStr;
     }
 
-    const classStr = className || '';
-    if (this._elementParentNode.className !== classStr) {
-      this._elementParentNode.className = classStr;
-    }
-
     if (style) {
       const elementStyle = this._elementParentNode.style;
       Object.keys(style).forEach(key => {

diff --git a/tests/unit/component.test.js b/tests/unit/component.test.js
@@ -58,6 +58,44 @@ describe('TetherComponent', () => {
     expect(element).toBeTruthy();
   });
 
+  it('should add className to tether element', () => {
+    wrapper = mount(
+      <TetherComponent
+        attachment="top left"
+        className="custom-class-1 custom-class-2"
+        renderTarget={ref => <div ref={ref} id="target" />}
+        renderElement={ref => <div ref={ref} id="element" />}
+      />
+    );
+    const tetherElement = document.querySelector('.tether-element');
+    expect(tetherElement).toBeTruthy();
+    expect(tetherElement.classList.contains("custom-class-1")).toBe(true);
+    expect(tetherElement.classList.contains("custom-class-2")).toBe(true);
+  });
+
+  it('should swap out classes when className changes', () => {
+    wrapper = mount(
+      <TetherComponent
+        attachment="top left"
+        className="custom-class-1 custom-class-2"
+        renderTarget={ref => <div ref={ref} id="target" />}
+        renderElement={ref => <div ref={ref} id="element" />}
+      />
+    );
+    let tetherElement = document.querySelector('.tether-element');
+    expect(tetherElement.classList.contains("custom-class-1")).toBe(true);
+    expect(tetherElement.classList.contains("custom-class-2")).toBe(true);
+
+    wrapper.setProps({
+      className: "custom-class-1 custom-class-3"
+    });
+
+    tetherElement = document.querySelector('.tether-element');
+    expect(tetherElement.classList.contains("custom-class-1")).toBe(true);
+    expect(tetherElement.classList.contains("custom-class-2")).toBe(false);
+    expect(tetherElement.classList.contains("custom-class-3")).toBe(true);
+  });
+
   it('should render a just a target', () => {
     wrapper = mount(
       <TetherComponent