Merge pull request #877 from abraham/about-block

Convert AboutBlock to LitElement

Author: abraham

__tests__/helpers/fixtures.ts

@@ -2,12 +2,24 @@ import { render } from 'lit-html';
 
 export const fixture = async <T extends import('lit-element').LitElement>(
   html: import('lit-html').TemplateResult
-): Promise<{ element: T; shadowRoot: ShadowRoot }> => {
+): Promise<{ element: T; shadowRoot: ShadowRoot; container: HTMLDivElement }> => {
   render(html, document.body);
   const element = document.body.firstElementChild as T;
-  if (!element || !element.shadowRoot) {
+
+  if (!element) {
     throw new Error('Component not rendered');
   }
   await element.updateComplete;
-  return { element, shadowRoot: element.shadowRoot };
+  if (!element.shadowRoot) {
+    throw new Error('ShadowDOM not rendered');
+  }
+  if (!element.shadowRoot.firstElementChild?.classList.contains('container')) {
+    throw new Error('Container not rendered');
+  }
+
+  return {
+    element,
+    shadowRoot: element.shadowRoot,
+    container: element.shadowRoot.firstElementChild as HTMLDivElement,
+  };
 };

src/components/about-block.test.ts

@@ -0,0 +1,42 @@
+import './about-block';
+import { html } from 'lit-html';
+import { fixture } from '../../__tests__/helpers/fixtures';
+import { getByText, fireEvent } from '@testing-library/dom';
+import { uiActions } from '../redux/actions';
+import { mocked } from 'ts-jest/utils';
+
+jest.mock('../redux/actions');
+
+const toggleVideoDialogs = mocked(uiActions.toggleVideoDialog);
+
+describe('about-block', () => {
+  beforeEach(() => {
+    toggleVideoDialogs.mockClear();
+  });
+
+  it('defines a component', () => {
+    expect(customElements.get('about-block')).toBeDefined();
+  });
+
+  it('renders details', async () => {
+    const { container } = await fixture(html`<about-block></about-block>`);
+    expect(getByText(container, '{$ aboutBlock.title $}')).toBeDefined();
+    expect(
+      getByText(container, '{$ aboutBlock.callToAction.featuredSessions.description $}')
+    ).toBeDefined();
+    expect(getByText(container, '{$ aboutBlock.statisticsBlock.attendees.number $}')).toBeDefined();
+    expect(getByText(container, '{$ aboutBlock.statisticsBlock.attendees.label $}')).toBeDefined();
+  });
+
+  it('plays the video', async () => {
+    const { container } = await fixture(html`<about-block></about-block>`);
+    fireEvent.click(getByText(container, '{$ aboutBlock.callToAction.howItWas.label $}'));
+    expect(toggleVideoDialogs).toHaveBeenCalledTimes(1);
+    expect(toggleVideoDialogs).toHaveBeenCalledWith({
+      title: '{$  aboutBlock.callToAction.howItWas.title $}',
+      youtubeId: '{$  aboutBlock.callToAction.howItWas.youtubeId $}',
+      disableControls: true,
+      opened: true,
+    });
+  });
+});

src/elements/about-block.ts renamed to src/components/about-block.ts

@@ -1,19 +1,13 @@
-import '@polymer/iron-icon';
-import '@polymer/paper-button';
-import { html, PolymerElement } from '@polymer/polymer';
-import { ReduxMixin } from '../mixins/redux-mixin';
+import { customElement, html, css } from 'lit-element';
 import { uiActions } from '../redux/actions';
-import './hoverboard-icons';
-import './shared-animations';
-
-class AboutBlock extends ReduxMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="shared-styles flex flex-alignment flex-reverse">
-        :host {
-          display: block;
-        }
-
+import { ThemedElement } from './themed-element';
+
+@customElement('about-block')
+export class AboutBlock extends ThemedElement {
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
         .container {
           padding-top: 64px;
         }
@@ -61,8 +55,12 @@ class AboutBlock extends ReduxMixin(PolymerElement) {
             font-size: 56px;
           }
         }
-      </style>
+      `,
+    ];
+  }
 
+  render() {
+    return html`
       <div class="container">
         <div class="content">
           <div>
@@ -86,7 +84,7 @@ class AboutBlock extends ReduxMixin(PolymerElement) {
             <p>{$ aboutBlock.callToAction.howItWas.description $}</p>
             <paper-button
               class="animated icon-right"
-              on-click="_playVideo"
+              @click="${this.playVideo}"
               ga-on="click"
               ga-event-category="video"
               ga-event-action="watch"
@@ -139,11 +137,7 @@ class AboutBlock extends ReduxMixin(PolymerElement) {
     `;
   }
 
-  static get is() {
-    return 'about-block';
-  }
-
-  _playVideo() {
+  private playVideo() {
     uiActions.toggleVideoDialog({
       title: '{$  aboutBlock.callToAction.howItWas.title $}',
       youtubeId: '{$  aboutBlock.callToAction.howItWas.youtubeId $}',
@@ -152,5 +146,3 @@ class AboutBlock extends ReduxMixin(PolymerElement) {
     });
   }
 }
-
-window.customElements.define(AboutBlock.is, AboutBlock);

src/pages/home-page.ts

@@ -1,6 +1,6 @@
 import '@polymer/iron-icon';
 import { html, PolymerElement } from '@polymer/polymer';
-import '../elements/about-block';
+import '../components/about-block';
 import '../elements/about-organizer-block';
 import '../elements/featured-videos';
 import '../elements/fork-me-block';

src/redux/actions.ts

@@ -74,14 +74,21 @@ declare global {
   }
 }
 
+export interface VideoDialog {
+  title: string;
+  youtubeId: string;
+  disableControls: boolean;
+  opened: boolean;
+}
+
 export const uiActions = {
   setViewportSize: (value) => {
     store.dispatch({
       type: SET_VIEWPORT_SIZE,
       value,
     });
   },
-  toggleVideoDialog: (value = null) => {
+  toggleVideoDialog: (value: VideoDialog) => {
     store.dispatch({
       type: TOGGLE_VIDEO_DIALOG,
       value,