Embed 3rd party media content in MDX - no import required 🧽
MDX Embed
MDX Embed allows you to easily embed popular 3rd party media content such as YouTube videos, Tweets, Instagram posts
and many more straight into your .mdx - no import required!
[x] Add cool badge to Repo with test status and coverage - @pauliescanlon
[x] Write all the testing issues and label them #Hacktoberfest - @pauliescanlon
[ ] Stream / Recording of "how to get invovled with MDX Embed" - @pauliescanlon
& @spences10
[#79]
🚀 Getting Started
If you're interested in helping out with tests and taking part in Hacktoberfest please comment below and let us know if it's the unit or integration test you'd like to tackle.
We'll then assign your username/name to the issue and add you next to the component in the list below to try and avoid duplication.
We know it's not much but if you would like to contribute and your PR is successfully merged we'll send you out a super cool limited edition MDX Embed sticker. If you're comfortable sharing your address you can email me pauliescanlon@gmail.com
🧪 The two tests
There's two different types of tests we'd like contributors to focus on, they are at the moment fairly simple tests. There is every chance contributors with more expertise in testing will advise on what should or shouldn't be tested.
I'm open to suggestions but at the very least each component will have the below which will get us to a stable 1.0.0 release
Unit test (Testing Library / React)
Integration test (Cypress)
❗ Issues
There's an issue for each component and named appropriately: e.g: Please check the issues in GitHub to see which tests are currently open or in progress
codepen-unit-test
codepen-integration-test
Each issue will be assigned the "Hacktoberfest" and perhaps the "good first issue" label?
Unit tests are co-located e.g: packages/mdx-embed/src/components/codepen.test.tsx
... and here's a brief explanation of how we're writing unit tests
It will have a data-testid that is the name of the component e.g: data-testid="codepen" - observe directory name for clues on what the data-testid should be
It will have a data-testid attribute on the top level DOM node or iframe
it will have at least one test for it renders the component
It will have the correct file extension for the test file: e.g .test.tsx
Integration Test
Integration tests are located at cypress/integration/codepen.spec.js
... and here's a brief explanation about how we're currently writing integration tests
it will have at least one test which asserts if embed providers specific DOM are not undefined
It will have the correct file extension for the test file: e.g .spec.js
Embed 3rd party media content in MDX - no import required 🧽
MDX Embed
MDX Embed allows you to easily embed popular 3rd party media content such as YouTube videos, Tweets, Instagram posts and many more straight into your
.mdx- no import required!mdx-embed.com/
There are a number of way to use
mdx-embed. Head over to the docs site for more information on the current packages:If you're using mdx-embed in your project we'd love to hear from you!
Paul Scanlon
@pauliescanlon
Scott Spence
@spences10
Rich Haines
@studio_hungry
Thanks to everyone who has contributed so far!
Gabi
Liran Tal
Rémi Roycourt
Matías Hernández
Jefferson Bledsoe
Alexander Malinov
Nicky Meuleman
Yenly
Eka
Alex Mercier
Christoph Benjamin Weberr
Brent Larson
Bogdan Lazar
Hey all, I have a little MDX related project called MDX Embed, repo here: mdx-embed
We're actively seeking contributors to help with React Unit tests and Cypress integration tests:
If you're interested in contributing we've created an Umbrella Issue on the repo which should contain everything you need to get started...
...and for everything else, feel free to find me on twitter @pauliescanlon
The time is right. We're now on to the last leg of the migration and something i never got round to in the old repo was adding a test suite.
Tasks for us to complete before others can get involved are:
GeneralObserver- @pauliescanlonIf you're interested in helping out with tests and taking part in Hacktoberfest please comment below and let us know if it's the unit or integration test you'd like to tackle.
We'll then assign your username/name to the issue and add you next to the component in the list below to try and avoid duplication.
Before you start have a read of: CONTRIBUTING.md
(TODO) video for how to get started.
We know it's not much but if you would like to contribute and your PR is successfully merged we'll send you out a super cool limited edition MDX Embed sticker. If you're comfortable sharing your address you can email me pauliescanlon@gmail.com
There's two different types of tests we'd like contributors to focus on, they are at the moment fairly simple tests. There is every chance contributors with more expertise in testing will advise on what should or shouldn't be tested.
I'm open to suggestions but at the very least each component will have the below which will get us to a stable
1.0.0releaseThere's an issue for each component and named appropriately: e.g: Please check the issues in GitHub to see which tests are currently open or in progress
codepen-unit-testcodepen-integration-testEach issue will be assigned the "Hacktoberfest" and perhaps the "good first issue" label?
#✅ Acceptance Criteria
Unit Test
Unit tests are co-located e.g:
packages/mdx-embed/src/components/codepen.test.tsx... and here's a brief explanation of how we're writing unit testsdata-testidthat is the name of the component e.g:data-testid="codepen"- observe directory name for clues on what thedata-testidshould bedata-testidattribute on the top level DOM node or iframeit renders the component.test.tsxIntegration Test
Integration tests are located at
cypress/integration/codepen.spec.js... and here's a brief explanation about how we're currently writing integration tests.spec.jsUnit Test Assignment List👩💻 👨💻
Integration Test Assignment List👩💻 👨💻