53944beeb3
* Add HTML entity decoding for product names in Hand-Picked Products control In the Hand-Picked Products control within the product-collection inspector controls, a function for decoding HTML entities in product names has been added. - A new utility function `decodeHTMLEntities` has been implemented. This function decodes HTML entities in a string, ensuring that special characters are correctly displayed in their human-readable form. - The `transformTokenIntoProductName` function has been updated to utilize `decodeHTMLEntities`. Now, when a product name is fetched (either directly as a token or via a product ID), the HTML entities within the name are decoded. - This enhancement ensures that product names containing characters like ampersands or other HTML entities are accurately displayed in the UI. This change improves the readability and accuracy of product names within the Hand-Picked Products control, enhancing the user experience for store managers using WooCommerce Blocks. * Update label and hide description This commit updates the `HandPickedProductsControl` component. Specifically, the user-facing label for product selection has been changed from 'Pick some products' to 'Hand-picked Products'. Additionally, the `__experimentalShowHowTo` property has been added with a `false` value, to hide description. Corresponding changes have been made in the E2E test file `product-collection.block_theme.spec.ts`, where the filter name is updated to match the new label. * Refactor: Replace custom HTML entity decoder with `@wordpress/html-entities` Rationale: - The shift to `@wordpress/html-entities` aligns with standard WordPress practices, ensuring consistency across the platform. - Enhances maintainability by relying on a well-supported library rather than custom code. - Simplifies the codebase by removing a redundant utility function. This change enhances the robustness of our code and aligns with best practices in WordPress development. |
||
|---|---|---|
| .. | ||
| bin | ||
| mocks/custom-plugins | ||
| playwright-utils | ||
| test-data/data | ||
| tests | ||
| types | ||
| utils | ||
| wc-blocks-eslint-rules | ||
| .eslintrc.js | ||
| README.md | ||
| block-theme.setup.ts | ||
| classic-theme.setup.ts | ||
| global-setup.ts | ||
| global-teardown.ts | ||
| playwright.classic-theme.config.ts | ||
| playwright.config.ts | ||
| playwright.side-effects.config.ts | ||
| tsconfig.json | ||
README.md
WooCommerce Blocks Playwright End to End Tests
This is the documentation for the new E2E testing setup based on Playwright and wp-env. Over time, these playwright E2E tests should replace the current Puppeteer E2E tests.
Table of contents
Pre-requisites
- Node.js (Installation instructions)
- NVM (Installation instructions)
- Docker and Docker Compose (Installation instructions)
Note, that if you are on Mac and you install docker through other methods such as homebrew, for example, your steps to set it up might be different. The commands listed in steps below may also vary.
If you are using Windows, we recommend using Windows Subsystem for Linux (WSL) for running E2E tests. Follow the WSL Setup Instructions first before proceeding with the steps below.
Introduction
End-to-end tests are powered by Playwright. The test site is spun up using wp-env (recommended), but we will continue to support e2e-environment in the meantime.
Running tests for the first time
nvm use
npm install
npm run env:start
npm run test:e2e
To run the test again, re-create the environment to start with a fresh state
npm run env:restart
npm run test:e2e
Tests with side effects
We call tests that affect other tests (ones that modify the site settings, using custom plugins) are tests with side effects and we split those tests to a separate test suite:
npm run test:e2e:side-effects
Note: All commands parameters of test:e2e can be used for
test:e2e:side-effects.
Other ways of running tests
Headless mode:
npm run test:e2e
Interactive UI mode:
npm run test:e2e -- --ui
Headed mode:
npm run test:e2e -- --headed
Debug mode:
npm run test:e2e -- --debug
Running a single test:
npm run test:e2e ./tests/e2e/tests/example.spec.ts
To see all options, run the following command:
npx playwright test --help