Refactor footer-rel to Lit

Author: abraham

src/components/footer-rel.test.ts

@@ -0,0 +1,39 @@
+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 '../components/footer-rel';
+import { notifications, subscribeNote } from '../utils/data';
+
+describe('footer-rel', () => {
+  it('defines a component', () => {
+    expect(customElements.get('footer-rel')).toBeDefined();
+  });
+
+  it('renders subscription section', async () => {
+    const { shadowRootForWithin } = await fixture(
+      html`<footer-rel data-testid="footer-rel"></footer-rel>`,
+    );
+    const withinShadowRoot = within(shadowRootForWithin);
+
+    expect(screen.getByTestId('footer-rel')).toBeInTheDocument();
+
+    // Check subscription heading
+    const subscriptionHeading = withinShadowRoot.getByText(notifications.subscribe);
+
+    expect(subscriptionHeading).toBeInTheDocument();
+    expect(subscriptionHeading).toHaveClass('col-heading');
+
+    // Check subscription note
+    const subscriptionNote = withinShadowRoot.getByText(subscribeNote);
+
+    expect(subscriptionNote).toBeInTheDocument();
+  });
+
+  it('renders without errors', async () => {
+    const { element } = await fixture(html`<footer-rel></footer-rel>`);
+
+    expect(element).toBeInTheDocument();
+    expect(element.shadowRoot).toBeDefined();
+  });
+});

src/elements/footer-rel.ts renamed to src/components/footer-rel.ts

@@ -1,13 +1,16 @@
-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 { repeat } from 'lit/directives/repeat.js';
 import { footerRelBlock, notifications, subscribeNote } from '../utils/data';
-import './subscribe-form-footer';
+import { ThemedElement } from '../components/themed-element';
+import '../elements/subscribe-form-footer';
 
 @customElement('footer-rel')
-export class FooterRel extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="shared-styles flex flex-alignment">
+export class FooterRel extends ThemedElement {
+  static override get styles() {
+    return [
+      ...super.styles,
+      css`
         :host {
           border-top: 1px solid var(--border-light-color);
           border-bottom: 1px solid var(--border-light-color);
@@ -63,38 +66,51 @@ export class FooterRel extends PolymerElement {
             margin-top: 0;
           }
         }
-      </style>
+      `,
+    ];
+  }
 
-      <template is="dom-repeat" items="[[footerRelBlock]]" as="footerRel">
-        <div class="col" layout vertical wrap flex-auto>
-          <div class="col-heading">[[footerRel.title]]</div>
-          <ul class="nav">
-            <template is="dom-repeat" items="[[footerRel.links]]" as="link">
-              <li>
-                <template is="dom-if" if="[[!link.newTab]]">
-                  <a href="[[link.url]]">[[link.name]]</a>
-                </template>
-                <template is="dom-if" if="[[link.newTab]]">
-                  <a href="[[link.url]]" target="_blank" rel="noopener noreferrer">[[link.name]]</a>
-                </template>
-              </li>
-            </template>
-          </ul>
-        </div>
-      </template>
+  override render() {
+    return html`
+      ${repeat(
+        this.footerRelBlock,
+        (footerRel) => footerRel.title,
+        (footerRel) => html`
+          <div class="col" layout vertical wrap flex-auto>
+            <div class="col-heading">${footerRel.title}</div>
+            <ul class="nav">
+              ${repeat(
+                footerRel.links,
+                (link) => link.url,
+                (link) => html`
+                  <li>
+                    ${link.newTab
+                      ? html`<a href="${link.url}" target="_blank" rel="noopener noreferrer"
+                          >${link.name}</a
+                        >`
+                      : html`<a href="${link.url}">${link.name}</a>`}
+                  </li>
+                `,
+              )}
+            </ul>
+          </div>
+        `,
+      )}
 
       <div class="col" layout vertical flex-auto wrap>
-        <div class="col-heading">[[notifications.subscribe]]</div>
-        <span>[[subscribeNote]]</span>
+        <div class="col-heading">${this.notifications.subscribe}</div>
+        <span>${this.subscribeNote}</span>
         <subscribe-form-footer></subscribe-form-footer>
       </div>
     `;
   }
 
   @property({ type: Array })
   private footerRelBlock = footerRelBlock;
+
   @property()
   private subscribeNote = subscribeNote;
+
   @property({ type: Object })
   private notifications = notifications;
 }

src/elements/footer-block.ts

@@ -4,7 +4,7 @@ import { html, PolymerElement } from '@polymer/polymer';
 import '../utils/icons';
 import { scrollToTop } from '../utils/scrolling';
 import '../components/footer-nav';
-import './footer-rel';
+import '../components/footer-rel';
 import './footer-social';
 
 @customElement('footer-block')