WordPress / developer-blog-content

In this GitHub space, WordPress team coordinate content to be published on the Developer Blog. Discussion and montly meetings (first Thu) in WP Slack #core-dev-blog
36 stars 2 forks source link

How to create and run automated tests for WordPress blocks #269

Open bph opened 3 weeks ago

bph commented 3 weeks ago

Discussed in https://github.com/WordPress/developer-blog-content/discussions/24

Originally posted by **juanmaguitar** November 28, 2022 An article about how to create and run automated tests for our custom blocks in WordPress could be useful for both the product itself and the extenders using blocks. In fact, I see this content as a series of two posts: - **Unit Tests for Blocks**: The first one covers a more granular way of testing blocks: Unit Tests with Jest to test a block from its main components (`Edit` and `save`) - **E2E for Blocks**: A second one covering a more generic way of testing blocks: End-to-end tests with playwright to test the expected block behavior in the WordPress context (the block is properly registered, the frontend behavior works as expected, ...) The first post could be called "Unit Testing for Blocks" and could cover the following ideas: - Why having automated tests is a good way to ensure our block work as expected and to document it (among other benefits) - The difference between Unit Tests and E2E tests - What is Jest - Preparing the environment in our project to test our block with Jest - What to test in a Unit Test for a block - creating some tests for our block - Launching our test in local - Bonus: Creating a CI/CD pipeline with GitHub Actions to only allow merge if tests are passing These posts could even include a brief explanation of what [BDD](https://en.wikipedia.org/wiki/Behavior-driven_development) is, what [CI](https://en.wikipedia.org/wiki/Continuous_integration) is, and how these tests allow the Gutenberg project to grow in a more solid way. Inspired by [this answer](https://wordpress.org/support/topic/the-navigation-toggle-menu-button-does-not-work-on-localhost/#post-16239250) in the support forums
flexseth commented 3 weeks ago

+1 great content idea