Typescript Migration: drawer (#4025)

migrated chromedash-drawer and its test file

client-src/elements/chromedash-activity-log.ts

@@ -72,11 +72,14 @@ export class ChromedashAmendment extends LitElement {
 customElements.define('chromedash-amendment', ChromedashAmendment);
 
 export interface User {
+  // TODO(markxiong0122): Move this interface near cs-client.js:getPermissions() after migration.
   can_create_feature: boolean;
   can_edit_all: boolean;
   can_comment: boolean;
   is_admin: boolean;
   email: string;
+  approvable_gate_types: number[];
+  editable_features: number[];
 }
 interface Activity {
   comment_id: number;

client-src/elements/chromedash-activity-page.ts

@@ -42,13 +42,7 @@ export class ChromedashActivityPage extends LitElement {
   }
 
   @property({type: Object})
-  user: User = {
-    can_create_feature: false,
-    can_edit_all: false,
-    can_comment: false,
-    is_admin: false,
-    email: '',
-  };
+  user!: User;
   @property({type: Number})
   featureId = 0;
   @property({type: Array})

client-src/elements/chromedash-all-features-page.ts

@@ -24,13 +24,7 @@ export class ChromedashAllFeaturesPage extends LitElement {
   @property({type: Boolean})
   showQuery = true;
   @property({type: Object})
-  user: User = {
-    can_create_feature: false,
-    can_edit_all: false,
-    is_admin: false,
-    email: '',
-    can_comment: false,
-  };
+  user!: User;
   @property({type: Number})
   selectedGateId = 0;
   @property({type: Object})

client-src/elements/chromedash-drawer.ts

@@ -1,9 +1,13 @@
-import {LitElement, css, html, nothing} from 'lit';
+import {LitElement, TemplateResult, css, html, nothing} from 'lit';
 import {SHARED_STYLES} from '../css/shared-css.js';
 import {IS_MOBILE, showToastMessage} from './utils';
+import {customElement, property, state} from 'lit/decorators.js';
+import {User} from './chromedash-activity-log.js';
+import {SlDrawer} from '@shoelace-style/shoelace';
 
 export const DRAWER_WIDTH_PX = 200;
 
+@customElement('chromedash-drawer')
 export class ChromedashDrawer extends LitElement {
   static get styles() {
     return [
@@ -91,25 +95,18 @@ export class ChromedashDrawer extends LitElement {
     ];
   }
 
-  static get properties() {
-    return {
-      currentPage: {type: String},
-      devMode: {type: String},
-      googleSignInClientId: {type: String},
-      user: {type: Object},
-      loading: {type: Boolean},
-      defaultOpen: {type: Boolean},
-    };
-  }
-
-  constructor() {
-    super();
-    this.currentPage = '';
-    this.devMode = 'False';
-    (this.googleSignInClientId = ''), (this.user = {});
-    this.loading = false;
-    this.defaultOpen = false;
-  }
+  @property({type: String})
+  currentPage = '';
+  @property({type: String})
+  devMode = 'False';
+  @property({type: String})
+  googleSignInClientId = '';
+  @property({type: Boolean})
+  defaultOpen = false;
+  @state()
+  user!: User;
+  @state()
+  loading = false;
 
   connectedCallback() {
     super.connectedCallback();
@@ -177,13 +174,13 @@ export class ChromedashDrawer extends LitElement {
       fetch('/dev/mock_login', {method: 'POST'})
         .then(response => {
           if (!response.ok) {
-            throw new Error('Sign in failed! Response:', response);
+            throw new Error(`Sign in failed! Response: ${response.status}`);
           }
         })
         .then(() => {
           setTimeout(() => {
             const url = window.location.href.split('?')[0];
-            window.location = url;
+            window.location.href = url;
           }, 1000);
         })
         .catch(error => {
@@ -206,12 +203,12 @@ export class ChromedashDrawer extends LitElement {
       .then(() => {
         setTimeout(() => {
           const url = window.location.href.split('?')[0];
-          window.location = url;
+          window.location.href = url;
         }, 1000);
       })
       .catch(() => {
         console.error('Sign in failed, so signing out to allow retry');
-        signOut();
+        this.signOut();
       });
   }
 
@@ -238,7 +235,9 @@ export class ChromedashDrawer extends LitElement {
   }
 
   toggleDrawerActions() {
-    const drawer = this.shadowRoot.querySelector('.drawer-placement-start');
+    const drawer = this.shadowRoot!.querySelector(
+      '.drawer-placement-start'
+    ) as SlDrawer;
     if (drawer.open) {
       drawer.hide();
     } else {
@@ -254,7 +253,7 @@ export class ChromedashDrawer extends LitElement {
   }
 
   renderDrawer() {
-    let accountMenu = nothing;
+    let accountMenu: typeof nothing | TemplateResult = nothing;
     if (IS_MOBILE && !this.loading) {
       accountMenu = this.renderAccountMenu();
     }
@@ -357,5 +356,3 @@ export class ChromedashDrawer extends LitElement {
     return html` <nav>${this.renderDrawer()}</nav> `;
   }
 }
-
-customElements.define('chromedash-drawer', ChromedashDrawer);

client-src/elements/chromedash-drawer_test.ts

@@ -3,30 +3,31 @@ import {assert, fixture} from '@open-wc/testing';
 import {ChromedashDrawer} from './chromedash-drawer';
 import './chromedash-toast';
 import {ChromeStatusClient} from '../js-src/cs-client';
-import sinon from 'sinon';
+import sinon, {SinonStub} from 'sinon';
 
 describe('chromedash-drawer', () => {
   /* window.csClient and <chromedash-toast> are initialized at _base.html
    * which are not available here, so we initialize them before each test.
    * We also stub out the API calls here so that they return test data. */
+  let getPermissionsStub: SinonStub;
   beforeEach(async () => {
     await fixture(html`<chromedash-toast></chromedash-toast>`);
     window.csClient = new ChromeStatusClient('fake_token', 1);
-    sinon.stub(window.csClient, 'getPermissions');
+    getPermissionsStub = sinon.stub(window.csClient, 'getPermissions');
   });
 
   afterEach(() => {
-    window.csClient.getPermissions.restore();
+    getPermissionsStub.restore();
   });
 
   it('user is not signed in', async () => {
-    window.csClient.getPermissions.returns(Promise.resolve(null));
+    getPermissionsStub.returns(Promise.resolve(null));
     const component = await fixture(
       html`<chromedash-drawer appTitle="Fake Title"></chromedash-drawer>`
     );
     assert.exists(component);
     assert.instanceOf(component, ChromedashDrawer);
-    const nav = component.shadowRoot.querySelector('nav');
+    const nav = component.shadowRoot!.querySelector('nav');
     assert.exists(nav);
 
     // nav bar has correct tabs
@@ -41,7 +42,7 @@ describe('chromedash-drawer', () => {
   });
 
   it('user is signed in', async () => {
-    window.csClient.getPermissions.returns(
+    getPermissionsStub.returns(
       Promise.resolve({
         can_create_feature: true,
         can_edit: true,
@@ -56,7 +57,7 @@ describe('chromedash-drawer', () => {
     assert.instanceOf(component, ChromedashDrawer);
 
     // nav bar exists
-    const nav = component.shadowRoot.querySelector('nav');
+    const nav = component.shadowRoot!.querySelector('nav');
     assert.exists(nav);
 
     const navInnerHTML = nav.innerHTML;

package-lock.json

@@ -14,6 +14,7 @@
         "@polymer/iron-collapse": "^3.0.1",
         "@polymer/iron-icon": "^3.0.1",
         "@polymer/iron-iconset-svg": "^3.0.1",
+        "@types/google.accounts": "^0.0.14",
         "@types/google.visualization": "^0.0.74",
         "lit": "^3",
         "node-fetch": ">=3.3.2",
@@ -3647,6 +3648,11 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/google.accounts": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@types/google.accounts/-/google.accounts-0.0.14.tgz",
+      "integrity": "sha512-HqIVkVzpiLWhlajhQQd4rIV7czanFvXblJI2J1fSrL+VKQuQwwZ63m35D/mI0flsqKE6p/hNrAG0Yn4FD6JvNA=="
+    },
     "node_modules/@types/google.visualization": {
       "version": "0.0.74",
       "resolved": "https://registry.npmjs.org/@types/google.visualization/-/google.visualization-0.0.74.tgz",

package.json

@@ -113,6 +113,7 @@
     "@polymer/iron-collapse": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-iconset-svg": "^3.0.1",
+    "@types/google.accounts": "^0.0.14",
     "@types/google.visualization": "^0.0.74",
     "lit": "^3",
     "node-fetch": ">=3.3.2",