Add support for HTMLMediaElement

[rudywaltz]

Dear @capricorn86 , I just start to be familiar with happy DOM, and I would like to use it for testing (jest) my hobby project which is a native web components base audio-player. My first experience was good, but now I'm struggling to test the audio element because it is not implemented here. I try to create my own mock, but I'm not sure how can I overwrite happy-dom on this level, or maybe contribute here somehow. Can you help me with this, with the implementation/how can I extend it locally or point to some good reference in your codebase how can I implement it directly here?

thank you for your help

[capricorn86]

Hi @rudywaltz! :slightly_smiling_face:

Any contribution is very welcome!

First off, please read the guidelines for contributions: https://github.com/capricorn86/happy-dom/blob/master/docs/contributing.md

In order to add a new Node/Element, you need to do the following:

1. Go to ./packages/happy-dom. This is where the code for Happy DOM lives.
2. Copy an existing element implementation. E.g. copy src/nodes/html-meta-element to src/nodes/html-media-element.
3. Rename files, classes and interfaces to follow the new element name (HTMLMediaElement and IHTMLMediaElement)
4. Update the IHTMLMediaElement interface according to the specs at https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement (it is possible to do a partial implementation if there is too much to implement in the first release).
5. Implement the functionality according to the specs in HTMLMediaElement.
6. Add the HTMLMediaElement class as a property to IWindow.ts and Window.ts.
7. Remove the element class from NonImplemenetedElementClasses.ts.
8. Create tests for the implementation under test/nodes/html-media-element
9. Export HTMLMediaElement and IHTMLMediaElement in index.ts.

You can run the tests to verify that your implementation works by running npm test.