[JR] Bugfix/restore original container style on destroy

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adjs",
-  "version": "2.0.0-beta.24",
+  "version": "2.0.0-beta.25",
   "description": "Ad Library to simplify and optimize integration with ad networks such as DFP",
   "main": "./core.js",
   "types": "./types.d.ts",

src/plugins/Sticky.ts

@@ -23,6 +23,7 @@ class Sticky extends GenericPlugin {
   public listener?: any;
   public boundary?: IBoundary;
   public originalStyle?: any;
+  public originalStyleCssText?: any;
 
   public onCreate() {
     if (!this.isEnabled('sticky')) {
@@ -31,7 +32,16 @@ class Sticky extends GenericPlugin {
 
     const { container, configuration } = this.ad;
     const { stickyOffset = 0 } = configuration;
-    this.originalStyle = container.style;
+
+    this.originalStyle = {};
+
+    // Clone to avoid container.style value assigment overriding original style values
+    Object.entries(container.style).forEach(([_, cssProperty]) => {
+      this.originalStyle[cssProperty] = container.style.getPropertyValue(cssProperty);
+    });
+
+    // Simplify style restoration on destroy
+    this.originalStyleCssText = container.style.cssText;
 
     container.style.position = 'sticky';
     container.style.top = `${stickyOffset}px`;
@@ -58,9 +68,7 @@ class Sticky extends GenericPlugin {
   public cleanup() {
     const { container } = this.ad;
 
-    container.style.position = this.originalStyle.position;
-    container.style.top = this.originalStyle.top;
-    container.style.transform = this.originalStyle.transform;
+    container.style.cssText = this.originalStyleCssText;
 
     if (this.listener) {
       window.removeEventListener('scroll', this.listener);

tests/plugins/Sticky.test.ts

@@ -55,5 +55,45 @@ describe('Sticky', () => {
     const sticky: any = new Sticky(ad);
     sticky.onCreate();
     expect(ad.container.style.top).toBe('3px');
-  })
+  });
+
+  it('reverts sticky container to original styles when destroyed', () => {
+    const dummyParent: any = document.createElement('div');
+    const dummyAdContainer: any = document.createElement('div');
+    const originalDummyAdContainerPosition = 'relative'
+    dummyAdContainer.style.position = originalDummyAdContainerPosition;
+
+    dummyParent.appendChild(dummyAdContainer);
+
+    const ad = {
+      configuration: {
+        breakpoints: {},
+        stickyOffset: 3,
+        sticky: true
+      },
+      container: dummyAdContainer,
+      el: {},
+      network: 'DFP',
+      render: () => {},
+      refresh: jest.fn(() => {}),
+      clear: () => {},
+      destroy: () => {},
+      freeze: () => {},
+      unfreeze: () => {}
+    }
+
+    // @ts-ignore
+    const sticky: any = new Sticky(ad);
+
+    // Container set to sticky
+    sticky.onCreate();
+
+    // Ad container styles like position should be overridden
+    expect(ad.container.style.position).not.toEqual(originalDummyAdContainerPosition);
+
+    // Clean up should revert styles to original
+    sticky.onDestroy();
+
+    expect(ad.container.style.position).toEqual(originalDummyAdContainerPosition);
+  });
 });