Chuck Norris Random Joke

This is standalone Web Component that shows a random Chuck Norris joke.

It's also on NPM: https://www.npmjs.com/package/@timvdeijnden/chuck-norris-random-joke

Usage

Just add:

<chuck-norris-joke />

Also supports firstName and lastName attributes.

<chuck-norris-joke first-name="Tim" last-name="van den Eijnden"/>

React Usage

When using create-react-app you can follow these instructions. Add the following to your index.js after last import:

import { applyPolyfills, defineCustomElements } from '@timvdeijnden/chuck-norris-random-joke/loader';

And the following at the end:

applyPolyfills().then(() => {
  defineCustomElements(window);
});

Add the following to your App.js:

<chuck-norris-joke />

Issues

I wanted to test the contents of the component in the e2e test, by mocking the fetch request so it always returns the same joke. That way I could test the functionality by comparing the text in the element. But intercepting and getting the text content from a shadow dom element need more investigation.