fix(tab): activate() works before first render

PiperOrigin-RevId: 345494326

Author: Elliott Marquez

CHANGELOG.md

@@ -36,6 +36,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - List items removal from DOM initiates an async layout in the managing list
   - Added `itemsReady` promise to the list's updateComplete
 
+- `tab`
+  - Calling `activate()` before first render does not throw an error.
+
 ## [v0.19.1] - 2020-10-08
 
 ### Fixed

packages/tab/mwc-tab-base.ts

@@ -208,8 +208,18 @@ export class TabBase extends BaseElement {
     if (!clientRect) {
       this.initFocus = true;
     }
-    this.mdcFoundation.activate(clientRect);
-    this.setActive(this.mdcFoundation.isActive());
+
+    if (this.mdcFoundation) {
+      this.mdcFoundation.activate(clientRect);
+      this.setActive(this.mdcFoundation.isActive());
+    } else {
+      // happens if this is called by tab-bar on initialization, but tab has not
+      // finished rendering.
+      this.updateComplete.then(() => {
+        this.mdcFoundation.activate(clientRect);
+        this.setActive(this.mdcFoundation.isActive());
+      });
+    }
   }
 
   deactivate() {

packages/tab/test/mwc-tab.test.ts

@@ -17,7 +17,7 @@
 
 import {Tab} from '@material/mwc-tab';
 import * as hanbi from 'hanbi';
-import {html} from 'lit-html';
+import {html, render} from 'lit-html';
 
 import {fixture, rafPromise, TestFixture} from '../../../test/src/util/helpers';
 
@@ -129,4 +129,39 @@ suite('mwc-tab', () => {
       assert.equal(content.textContent!.trim(), 'add');
     });
   });
+
+  suite('activate', () => {
+    teardown(() => {
+      const tabs = document.body.querySelectorAll('mwc-tab');
+
+      for (const tab of tabs) {
+        document.body.removeChild(tab);
+      }
+    });
+
+    test('don\'t throw if active is called before firstRender', async () => {
+      const dummyClientRect = document.body.getBoundingClientRect();
+      render(html`<mwc-tab></mwc-tab>`, document.body);
+      const tab = document.body.querySelector('mwc-tab')!;
+      assert.isFalse(
+          !!(tab as unknown as {mdcFoundation: boolean}).mdcFoundation);
+
+      let didThrow = false;
+
+      try {
+        tab.activate(dummyClientRect);
+      } catch (e) {
+        didThrow = true;
+      }
+
+      assert.isFalse(didThrow);
+
+      await tab.updateComplete;
+      await tab.updateComplete;
+
+      assert.isTrue(
+          !!(tab as unknown as {mdcFoundation: boolean}).mdcFoundation);
+      assert.isTrue(tab.active);
+    });
+  });
 });