Refactor footer-nav to lit

src/components/footer-nav.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from '@jest/globals';
+import { screen, within } from '@testing-library/dom';
+import { html } from 'lit';
+import { fixture } from '../../__tests__/helpers/fixtures';
+import { codeOfConduct, organizer } from '../utils/data';
+import './footer-nav';
+
+describe('footer-nav', () => {
+  it('defines a component', () => {
+    expect(customElements.get('footer-nav')).toBeDefined();
+  });
+
+  it('renders organizer logo and links', async () => {
+    const { shadowRootForWithin } = await fixture(
+      html`<footer-nav data-testid="footer"></footer-nav>`,
+    );
+    const withinShadowRoot = within(shadowRootForWithin);
+    const logo = withinShadowRoot.getByAltText(organizer.name);
+    const hoverboardLink = withinShadowRoot.getByText('Project Hoverboard');
+
+    expect(screen.getByTestId('footer')).toBeInTheDocument();
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute('src', '../../images/organizer-logo.svg');
+    expect(hoverboardLink).toBeInTheDocument();
+    expect(hoverboardLink).toHaveAttribute('href', 'https://github.com/gdg-x/hoverboard');
+    expect(hoverboardLink).toHaveAttribute('target', '_blank');
+    expect(hoverboardLink).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('renders code of conduct link', async () => {
+    const { shadowRootForWithin } = await fixture(html`<footer-nav></footer-nav>`);
+    const withinShadowRoot = within(shadowRootForWithin);
+    const cocLink = withinShadowRoot.getByText(codeOfConduct);
+
+    expect(cocLink).toBeInTheDocument();
+    expect(cocLink).toHaveAttribute('href', '/coc');
+  });
+});

src/elements/footer-nav.ts → src/components/footer-nav.ts

@@ -1,13 +1,15 @@
-import { customElement, property } from '@polymer/decorators';
-import { html, PolymerElement } from '@polymer/polymer';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import '@power-elements/lazy-image';
 import { codeOfConduct, organizer } from '../utils/data';
+import { ThemedElement } from '../components/themed-element';
 
 @customElement('footer-nav')
-export class FooterNav extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="shared-styles flex flex-alignment">
+export class FooterNav extends ThemedElement {
+  static override get styles() {
+    return [
+      ...super.styles,
+      css`
         :host {
           margin: 0 20px;
         }
@@ -65,14 +67,18 @@ export class FooterNav extends PolymerElement {
             display: inline-flex;
           }
         }
-      </style>
+      `,
+    ];
+  }
 
+  override render() {
+    return html`
       <div class="nav-inline" layout flex>
-        <a href="[[organizer.url]]" target="_blank" rel="noopener noreferrer">
+        <a href="${this.organizer.url}" target="_blank" rel="noopener noreferrer">
           <lazy-image
             class="footer-logo"
             src="../../images/organizer-logo.svg"
-            alt="[[organizer.name]]"
+            alt="${this.organizer.name}"
           ></lazy-image>
         </a>
 
@@ -81,14 +87,15 @@ export class FooterNav extends PolymerElement {
           <a href="https://github.com/gdg-x/hoverboard" target="_blank" rel="noopener noreferrer"
             >Project Hoverboard</a
           >
-          · <a class="coc" href="/coc">[[codeOfConduct]]</a>
+          · <a class="coc" href="/coc">${this.codeOfConduct}</a>
         </div>
       </div>
     `;
   }
 
   @property({ type: Object })
   private organizer = organizer;
+
   @property()
   private codeOfConduct = codeOfConduct;
 }

src/elements/footer-block.ts

@@ -3,7 +3,7 @@ import '@polymer/paper-fab';
 import { html, PolymerElement } from '@polymer/polymer';
 import '../utils/icons';
 import { scrollToTop } from '../utils/scrolling';
-import './footer-nav';
+import '../components/footer-nav';
 import './footer-rel';
 import './footer-social';