Lit를 사용한 프레임워크 간 웹 구성요소 라이브러리 📚(2부)

테스트

결론을 내린 후 카드 구성 요소를 테스트할 시간입니다. Open Web Components의 테스트 패키지를 사용했으며 jasmine 및 karma와 함께 설명서here를 찾을 수 있습니다.

테스트할 구성 요소를 설명하고 구성 요소 속성으로 조롱할 항목을 정의하기 시작합니다.

import { Card } from './card';

describe('Card Component', () => {
    let el: Card;

    const card = {
        altText: 'Je suis a image',
        ctaText: 'Click me',
        image: 'http://example.com/image/',
        link: 'http://example.com/link/',
        text: 'amazing text',
        textDesc: 'other amazing text for test',
        textDescLink: 'http://example.com/author/',
        title: 'amazing title',
    };

}

그런 다음 테스트가 실행되기 전에 사용자 지정 구성으로 Card 구성 요소를 통과하는 고정 장치를 부팅하고 요소가 정의되어 있는지 확인하고 instanceOf를 확인합니다.

...

import { assert, expect, fixture, html } from '@open-wc/testing';

describe('Card Component', () => {
    ...

    beforeEach(async () => {
        el = await fixture<Card>(html` <card-image .card=${card}></card-image> `);
    });

    it('is defined', () => {
        assert.instanceOf(el, Card);
    });

}

모든 것이 잘 구성되었으면 테스트를 실행하고 하나의 성공적인 테스트를 가져야 합니다.



해당 구성 요소에 대해 좀 더 자세히 살펴보겠습니다.

...

describe('Card Component', () => {
      ...

      it('renders the image', () => {
        const image = el.shadowRoot?.querySelector('img');
        expect(image).to.exist;
        expect(image?.alt).to.equal(card.altText);
        expect(image?.src).to.equal(card.image);
      });

      it('renders the title', () => {
        const title = el.shadowRoot?.querySelector('#card-link');
        expect(title).to.exist;
        expect(title?.getAttribute('href')).to.equal(card.link);
        expect(title?.textContent).to.equal(card.title);
      });

      it('renders the text', () => {
        const text = el.shadowRoot?.querySelector('p');
        expect(text).to.exist;
        expect(text?.textContent).to.equal(card.text);
      });

      it('renders the cta text', () => {
        const ctaText = el.shadowRoot?.querySelector('.cta a');
        expect(ctaText).to.exist;
        expect(ctaText?.textContent).to.equal(card.ctaText);
      });

      it('renders the description link', () => {
        const textDesc = el.shadowRoot?.querySelector('small a');
        expect(textDesc).to.exist;
        expect(textDesc?.getAttribute('href')).to.equal(card.textDescLink);
        expect(textDesc?.textContent).to.equal(card.textDesc);
      });

      it('dispatch the mousedown event', () => {
        el.mouseDown();
        expect(el.down).to.be.a('number');
      });

}

이것은 적용 범위를 80% 이상으로 활용해야 합니다.

카드 구성요소

여러 카드를 갖도록 구성을 전달할 수 있는 두 번째 구성 요소를 수행할 것입니다.
이렇게 하면 하나의 내부 구성 요소를 재사용하고 다른 구성을 가질 수 있는 다른 용도로 다른 작업을 수행할 수 있는 기능이 노출됩니다. 또한 lit directives 을 사용할 것입니다.
card.ts와 동일한 수준에서 새 구성 요소를 수행하는 것으로 시작합니다.

...

import { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('cards-images')
export class Cards extends LitElement {}

외부 @property 를 정의한 후 기본적으로 CardConfig 개체의 배열을 받습니다.

...

import { customElement, property } from 'lit/decorators.js';

@customElement('cards-images')
export class Cards extends LitElement {

    @property({ type: Array }) cards!: CardConfig[];

}

이제 카드 컨테이너를 렌더링하고 repeat 지시문을 사용하여 @property에서 전달한 구성을 기반으로 카드의 다양한 인스턴스를 생성할 수 있습니다.

...

import { html, LitElement } from 'lit';
import { repeat } from 'lit/directives/repeat.js';

@customElement('cards-images')
export class Cards extends LitElement {

    ...

    render() {
    return html` <div class="cards">
      <ul>
        ${repeat(this.cards, (current) => html` <card-image .card=${current}></card-image> `)}
      </ul>
    </div>`;
  }

}

마무리하려면 구성 요소 스타일과 공유 스타일만 추가하면 됩니다.

...

import { css, html, LitElement } from 'lit';
import { sharedStyles } from './shared/style';

const componentStyle = css`
  .cards > ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @supports (display: grid) {
    .cards > ul {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
      grid-column-gap: 1.5rem;
      grid-row-gap: 1.5rem;
    }
  }
`;


@customElement('cards-images')
export class Cards extends LitElement {

  static styles = [sharedStyles, componentStyle];

    ...

}

이제 다음과 같이 렌더링되는 구성 요소가 있어야 합니다.



다음 부분에서는 npm 레지스트리를 사용하여 노드 패키지를 통해 lib를 배포하고 다양한 프레임워크/libs 환경에서 구성 요소를 사용하는 방법을 다룰 것입니다.