How to Build a Web Component

medium-feed_network_call_test.ts

import { MediumFeedElement } from '../src/feed/medium-feed.js';
import { assert, fixture, html, waitUntil } from '@open-wc/testing';
import { article } from './article';
import sinon from 'sinon';

suite('medium-feed', () => {
  const url = '🔗';
  const cards = 3;
  let stubbedFetch: sinon.SinonStub;

  setup(() => {
    const response = createFakeResponse(cards);
    stubbedFetch = sinon.stub(globalThis, 'fetch');
    stubbedFetch.returns(Promise.resolve(response));
  });

  teardown(() => {
    stubbedFetch.restore();
  });

  test('gets articles from rss feed', async () => {
    const el = await fixture(html`<medium-feed .url="${url}"></medium-feed>`) as MediumFeedElement;
    await el.updateComplete;
    assert.isTrue(stubbedFetch.calledWith(`https://api.rss2json.com/v1/api.json?rss_url=${url}`));
  });
  
  function createFakeResponse(cards: number) {
    const items = Array.from(Array(cards)).map(() => article);
    return new Response(
      JSON.stringify({
        items
      })
    );
  }
});