fix: active indicator no longer animating (microsoft#4126)

* fix: active indicator no longer animating * fixed tests * removed unused import
AvishekNath · Nov 18, 2020 · 49e2608 · 49e2608
1 parent 16f677c
commit 49e2608
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 20 deletions.
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
@@ -1,11 +1,16 @@
 import { expect } from "chai";
 import { TabsOrientation, Tabs, TabsTemplate as template } from "./index";
 import { fixture } from "../fixture";
-import { DOM, customElement, html } from "@microsoft/fast-element";
+import { css, DOM, customElement, html } from "@microsoft/fast-element";
 
 @customElement({
     name: "fast-tabs",
     template,
+    styles: css`
+        .activeIndicatorTransition {
+            transition: transform 0.2s ease-in-out;
+        }
+    `,
 })
 class FASTTabs extends Tabs {}
 
@@ -322,18 +327,37 @@ describe("Tabs", () => {
 
             await connect();
 
+            const activeIndicator = element.shadowRoot?.querySelector(
+                '[part="activeIndicator"]'
+            );
             const secondTab = element.querySelectorAll("fast-tab")[1] as HTMLElement;
             expect(secondTab).not.to.be.undefined;
-            [0, 1].forEach(() => {
-                secondTab.click();
-                expect(element.shadowRoot).not.to.be.undefined;
-                expect(
-                    element.shadowRoot
-                        ?.querySelector('[part="activeIndicator"]')
-                        ?.classList.contains("activeIndicatorTransition")
-                ).to.be.false;
+            await new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    secondTab.click();
+                    resolve();
+                }, 1000);
             });
 
+            expect(
+                element.shadowRoot
+                    ?.querySelector('[part="activeIndicator"]')
+                    ?.classList.contains("activeIndicatorTransition")
+            ).to.be.true;
+
+            await new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    secondTab.click();
+                    resolve();
+                }, 1000);
+            });
+            expect(element.shadowRoot).not.to.be.undefined;
+            expect(
+                element.shadowRoot
+                    ?.querySelector('[part="activeIndicator"]')
+                    ?.classList.contains("activeIndicatorTransition")
+            ).to.be.false;
+
             await disconnect();
         });
     });

diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
@@ -274,25 +274,15 @@ export class Tabs extends FASTElement {
         // Ignore if we click twice on the same tab
         if (this.activeindicator && this.activeTabIndex !== this.prevActiveTabIndex) {
             if (this.ticking) {
-                this.activeIndicatorRef.style.transform = "translateX(0px)";
-                this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
-                if (this.isHorizontal()) {
-                    this.activeIndicatorRef.style.gridColumn = `${
-                        this.activeTabIndex + 1
-                    }`;
-                } else {
-                    this.activeIndicatorRef.style.gridRow = `${this.activeTabIndex + 1}`;
-                }
                 this.ticking = false;
             } else {
-                this.ticking = true;
-
                 this.animateActiveIndicator();
             }
         }
     }
 
     private animateActiveIndicator(): void {
+        this.ticking = true;
         const gridProperty: string = this.isHorizontal() ? "gridColumn" : "gridRow";
         const translateProperty: string = this.isHorizontal()
             ? "translateX"