Merge branch 'trunk' into remove/qs
This commit is contained in:
Tomek Wytrębowicz
commit
dafbfec094
|
|
@ -14,18 +14,27 @@
|
|||
|
||||
Closes # .
|
||||
|
||||
<!-- The next section is mandatory. If your PR doesn't require testing, please indicate that you are purposefully omitting instructions. -->
|
||||
|
||||
- [ ] This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).
|
||||
|
||||
<!-- Begin testing instructions -->
|
||||
|
||||
### How to test the changes in this Pull Request:
|
||||
|
||||
<!-- Otherwise, please include detailed instructions on how these changes can be tested (including pre-conditions, configuration, steps to take and expected results). It may help to write your instructions using pseudocode -- as if you're telling a computer how to execute the test. -->
|
||||
|
||||
1.
|
||||
2.
|
||||
3.
|
||||
|
||||
<!-- End testing instructions -->
|
||||
|
||||
### Other information:
|
||||
|
||||
- [ ] Have you added an explanation of what your changes do and why you'd like us to include them?
|
||||
- [ ] Have you written new tests for your changes, as applicable?
|
||||
- [ ] Have you successfully run tests with your changes locally?
|
||||
- [ ] Have you created a changelog file for each project being changed, ie `pnpm --filter=<project> run changelog add`?
|
||||
- [ ] Have you created a changelog file for each project being changed, ie `pnpm --filter=<project> changelog add`?
|
||||
|
||||
<!-- Mark completed items with an [x] -->
|
||||
|
||||
|
|
|
|||
|
|
@ -35,12 +35,14 @@ runs:
|
|||
with:
|
||||
node-version-file: .nvmrc
|
||||
cache: pnpm
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
|
||||
- name: Setup PHP
|
||||
uses: shivammathur/setup-php@e04e1d97f0c0481c6e1ba40f8a538454fe5d7709
|
||||
with:
|
||||
php-version: ${{ inputs.php-version }}
|
||||
coverage: none
|
||||
tools: cs2pr, phpcs
|
||||
|
||||
- name: Cache Composer Dependencies
|
||||
uses: actions/cache@fd5de65bc895cf536527842281bea11763fefd77
|
||||
|
|
|
|||
|
|
@ -1,3 +1,85 @@
|
|||
# See https://github.com/shufo/auto-assign-reviewer-by-files/blob/main/README.md for configuration format
|
||||
|
||||
".github/*":
|
||||
- team: atlas
|
||||
|
||||
"packages/js/api/**/*":
|
||||
- team: solaris
|
||||
|
||||
"packages/js/e2e-utils/**/*":
|
||||
- team: solaris
|
||||
|
||||
"packages/js/e2e-environment/**/*":
|
||||
- team: solaris
|
||||
|
||||
"packages/js/api-core-tests/**/*":
|
||||
- team: solaris
|
||||
|
||||
"packages/js/e2e-core-tests/**/*":
|
||||
- team: solaris
|
||||
|
||||
"packages/js/admin-e2e-tests/**/*":
|
||||
- team: solaris
|
||||
|
||||
"packages/js/components/**/*":
|
||||
- team: mothra
|
||||
- team: ghidorah
|
||||
|
||||
"packages/js/csv-export/**/*":
|
||||
- team: mothra
|
||||
|
||||
"packages/js/currency/**/*":
|
||||
- team: mothra
|
||||
|
||||
"packages/js/customer-effort-score/**/*":
|
||||
- team: mothra
|
||||
|
||||
"packages/js/data/**/*":
|
||||
- team: mothra
|
||||
- team: ghidorah
|
||||
|
||||
"packages/js/date/**/*":
|
||||
- team: mothra
|
||||
|
||||
"packages/js/dependency-extraction-webpack-plugin/**/*":
|
||||
- team: mothra
|
||||
|
||||
"packages/js/eslint-plugin/**/*":
|
||||
- team: mothra
|
||||
|
||||
"packages/js/experimental/**/*":
|
||||
- team: mothra
|
||||
|
||||
"packages/js/explat/**/*":
|
||||
- team: mothra
|
||||
- team: ghidorah
|
||||
|
||||
"packages/js/navigation/**/*":
|
||||
- team: mothra
|
||||
|
||||
"packages/js/number/**/*":
|
||||
- team: mothra
|
||||
|
||||
"packages/js/onboarding/**/*":
|
||||
- team: ghidorah
|
||||
|
||||
"packages/js/tracks/**/*":
|
||||
- team: mothra
|
||||
|
||||
"plugins/woocommerce/**/*":
|
||||
- team: proton
|
||||
|
||||
"plugins/woocommerce/src/Admin/**/*":
|
||||
- team: mothra
|
||||
- team: ghidorah
|
||||
|
||||
"plugins/woocommerce/src/Internal/Admin/**/*":
|
||||
- team: mothra
|
||||
- team: ghidorah
|
||||
|
||||
"plugins/woocommerce-admin/**/*":
|
||||
- team: mothra
|
||||
- team: ghidorah
|
||||
|
||||
"plugins/woocommerce-beta-tester/**/*":
|
||||
- team: atlas
|
||||
|
|
|
|||
|
|
@ -27,3 +27,19 @@ jobs:
|
|||
asset_path: plugins/woocommerce/woocommerce.zip
|
||||
asset_name: woocommerce.zip
|
||||
asset_content_type: application/zip
|
||||
|
||||
|
||||
update-code-reference:
|
||||
if: github.event.release.prerelease == false && github.event.release.draft == false && github.repository_owner == 'woocommerce'
|
||||
name: Update Code Reference
|
||||
needs: build
|
||||
runs-on: ubuntu-20.04
|
||||
steps:
|
||||
- name: Invoke Code Reference build and deploy workflow
|
||||
uses: aurelien-baudet/workflow-dispatch@v2
|
||||
with:
|
||||
workflow: GitHub Pages deploy
|
||||
repo: woocommerce/code-reference
|
||||
token: ${{ secrets.CUSTOM_GH_TOKEN }}
|
||||
ref: refs/heads/trunk
|
||||
inputs: '{ "version": "${{ github.event.release.tag_name }}" }'
|
||||
|
|
|
|||
|
|
@ -35,4 +35,4 @@ jobs:
|
|||
uses: shufo/auto-assign-reviewer-by-files@f5f3db9ef06bd72ab6978996988c6462cbdaabf6
|
||||
with:
|
||||
config: ".github/project-community-pr-assigner.yml"
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
token: ${{ secrets.PR_ASSIGN_TOKEN }}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,30 @@
|
|||
name: Run daily tests in an environment with COT enabled
|
||||
on:
|
||||
schedule:
|
||||
- cron: "30 2 * * *"
|
||||
workflow_dispatch:
|
||||
schedule:
|
||||
- cron: '30 2 * * *'
|
||||
workflow_dispatch:
|
||||
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.ref }}
|
||||
cancel-in-progress: true
|
||||
group: ${{ github.workflow }}-${{ github.ref }}
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
cot-e2e-tests-run:
|
||||
name: Runs E2E tests with COT enabled.
|
||||
runs-on: ubuntu-20.04
|
||||
env:
|
||||
ALLURE_RESULTS_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/e2e-pw/allure-results
|
||||
ALLURE_REPORT_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/e2e-pw/allure-report
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
|
||||
- name: Setup WooCommerce Monorepo
|
||||
uses: ./.github/actions/setup-woocommerce-monorepo
|
||||
|
||||
- name: Load docker images and start containers with COT enabled.
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
ENABLE_HPOS: 1
|
||||
run: pnpm env:test:cot --filter=woocommerce
|
||||
|
||||
- name: Download and install Chromium browser.
|
||||
|
|
@ -30,7 +35,7 @@ jobs:
|
|||
timeout-minutes: 60
|
||||
id: run_playwright_e2e_tests
|
||||
env:
|
||||
USE_WP_ENV: 1
|
||||
USE_WP_ENV: 1
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec playwright test --config=tests/e2e-pw/playwright.config.js
|
||||
|
||||
|
|
@ -43,7 +48,7 @@ jobs:
|
|||
steps.run_playwright_e2e_tests.conclusion != 'skipped'
|
||||
)
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec allure generate --clean e2e/allure-results --output e2e/allure-report
|
||||
run: pnpm exec allure generate --clean ${{ env.ALLURE_RESULTS_DIR }} --output ${{ env.ALLURE_REPORT_DIR }}
|
||||
|
||||
- name: Archive Playwright E2E test report
|
||||
if: |
|
||||
|
|
@ -53,8 +58,8 @@ jobs:
|
|||
with:
|
||||
name: e2e-test-report---pr-${{ github.event.number }}
|
||||
path: |
|
||||
plugins/woocommerce/e2e/allure-results
|
||||
plugins/woocommerce/e2e/allure-report
|
||||
${{ env.ALLURE_RESULTS_DIR }}
|
||||
${{ env.ALLURE_REPORT_DIR }}
|
||||
if-no-files-found: ignore
|
||||
retention-days: 5
|
||||
|
||||
|
|
@ -62,15 +67,18 @@ jobs:
|
|||
name: Runs API tests with COT enabled.
|
||||
runs-on: ubuntu-20.04
|
||||
env:
|
||||
API_TEST_REPORT_DIR: ${{ github.workspace }}/api-test-report
|
||||
ALLURE_RESULTS_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/api-core-tests/api-test-report/allure-results
|
||||
ALLURE_REPORT_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/api-core-tests/api-test-report/allure-report
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
|
||||
- name: Setup WooCommerce Monorepo
|
||||
uses: ./.github/actions/setup-woocommerce-monorepo
|
||||
|
||||
- name: Load docker images and start containers with COT enabled.
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
ENABLE_HPOS: 1
|
||||
run: pnpm env:test:cot --filter=woocommerce
|
||||
|
||||
- name: Run Playwright API tests.
|
||||
|
|
@ -81,6 +89,7 @@ jobs:
|
|||
USER_KEY: admin
|
||||
USER_SECRET: password
|
||||
run: pnpm exec playwright test --config=tests/api-core-tests/playwright.config.js
|
||||
|
||||
- name: Generate Playwright API Test report.
|
||||
id: generate_api_report
|
||||
if: |
|
||||
|
|
@ -90,7 +99,8 @@ jobs:
|
|||
steps.run_playwright_api_tests.conclusion != 'skipped'
|
||||
)
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec allure generate --clean api-test-report/allure-results --output api-test-report/allure-report
|
||||
run: pnpm exec allure generate --clean ${{ env.ALLURE_RESULTS_DIR }} --output ${{ env.ALLURE_REPORT_DIR }}
|
||||
|
||||
- name: Archive Playwright API test report
|
||||
if: |
|
||||
always() &&
|
||||
|
|
@ -99,8 +109,8 @@ jobs:
|
|||
with:
|
||||
name: api-test-report---pr-${{ github.event.number }}
|
||||
path: |
|
||||
plugins/woocommerce/api-test-report/allure-results
|
||||
plugins/woocommerce/api-test-report/allure-report
|
||||
${{ env.ALLURE_RESULTS_DIR }}
|
||||
${{ env.ALLURE_REPORT_DIR }}
|
||||
if-no-files-found: ignore
|
||||
retention-days: 5
|
||||
|
||||
|
|
|
|||
|
|
@ -13,14 +13,19 @@ jobs:
|
|||
name: Runs E2E tests with COT enabled.
|
||||
if: "${{ github.event_name == 'workflow_dispatch' || github.event.label.name == 'focus: custom order tables' }}"
|
||||
runs-on: ubuntu-20.04
|
||||
env:
|
||||
ALLURE_RESULTS_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/e2e-pw/allure-results
|
||||
ALLURE_REPORT_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/e2e-pw/allure-report
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
|
||||
- name: Setup WooCommerce Monorepo
|
||||
uses: ./.github/actions/setup-woocommerce-monorepo
|
||||
|
||||
- name: Load docker images and start containers with COT enabled.
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
ENABLE_HPOS: 1
|
||||
run: pnpm env:test:cot --filter=woocommerce
|
||||
|
||||
- name: Download and install Chromium browser.
|
||||
|
|
@ -31,7 +36,7 @@ jobs:
|
|||
timeout-minutes: 60
|
||||
id: run_playwright_e2e_tests
|
||||
env:
|
||||
USE_WP_ENV: 1
|
||||
USE_WP_ENV: 1
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec playwright test --config=tests/e2e-pw/playwright.config.js
|
||||
|
||||
|
|
@ -44,7 +49,7 @@ jobs:
|
|||
steps.run_playwright_e2e_tests.conclusion != 'skipped'
|
||||
)
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec allure generate --clean e2e/allure-results --output e2e/allure-report
|
||||
run: pnpm exec allure generate --clean ${{ env.ALLURE_RESULTS_DIR }} --output ${{ env.ALLURE_REPORT_DIR }}
|
||||
|
||||
- name: Archive Playwright E2E test report
|
||||
if: |
|
||||
|
|
@ -54,8 +59,8 @@ jobs:
|
|||
with:
|
||||
name: e2e-test-report---pr-${{ github.event.number }}
|
||||
path: |
|
||||
plugins/woocommerce/e2e/allure-results
|
||||
plugins/woocommerce/e2e/allure-report
|
||||
${{ env.ALLURE_RESULTS_DIR }}
|
||||
${{ env.ALLURE_REPORT_DIR }}
|
||||
if-no-files-found: ignore
|
||||
retention-days: 5
|
||||
|
||||
|
|
@ -64,15 +69,18 @@ jobs:
|
|||
if: "${{ github.event_name == 'workflow_dispatch' || github.event.label.name == 'focus: custom order tables' }}"
|
||||
runs-on: ubuntu-20.04
|
||||
env:
|
||||
API_TEST_REPORT_DIR: ${{ github.workspace }}/api-test-report
|
||||
ALLURE_RESULTS_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/api-core-tests/api-test-report/allure-results
|
||||
ALLURE_REPORT_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/api-core-tests/api-test-report/allure-report
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
|
||||
- name: Setup WooCommerce Monorepo
|
||||
uses: ./.github/actions/setup-woocommerce-monorepo
|
||||
|
||||
- name: Load docker images and start containers with COT enabled.
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
ENABLE_HPOS: 1
|
||||
run: pnpm env:test:cot --filter=woocommerce
|
||||
|
||||
- name: Run Playwright API tests.
|
||||
|
|
@ -93,8 +101,8 @@ jobs:
|
|||
steps.run_playwright_api_tests.conclusion != 'skipped'
|
||||
)
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec allure generate --clean api-test-report/allure-results --output api-test-report/allure-report
|
||||
|
||||
run: pnpm exec allure generate --clean ${{ env.ALLURE_RESULTS_DIR }} --output ${{ env.ALLURE_REPORT_DIR }}
|
||||
|
||||
- name: Archive Playwright API test report
|
||||
if: |
|
||||
always() &&
|
||||
|
|
@ -103,8 +111,8 @@ jobs:
|
|||
with:
|
||||
name: api-test-report---pr-${{ github.event.number }}
|
||||
path: |
|
||||
plugins/woocommerce/api-test-report/allure-results
|
||||
plugins/woocommerce/api-test-report/allure-report
|
||||
${{ env.ALLURE_RESULTS_DIR }}
|
||||
${{ env.ALLURE_REPORT_DIR }}
|
||||
if-no-files-found: ignore
|
||||
retention-days: 5
|
||||
|
||||
|
|
|
|||
|
|
@ -10,52 +10,112 @@ env:
|
|||
GIT_AUTHOR_EMAIL: 'no-reply@woocommerce.com'
|
||||
|
||||
jobs:
|
||||
update-changelog-in-trunk:
|
||||
name: Update changelog in trunk
|
||||
changelog-version-update:
|
||||
name: Update changelog and version
|
||||
runs-on: ubuntu-20.04
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Get tag name
|
||||
id: tag
|
||||
uses: actions/github-script@v6
|
||||
with:
|
||||
script: |
|
||||
const tag = ${{ toJSON( github.event.release.tag_name ) }}
|
||||
|
||||
console.log( `::set-output name=tag::release/${ tag.substring( 0, 3 ) }` )
|
||||
|
||||
- name: Git fetch trunk branch
|
||||
run: git fetch origin trunk
|
||||
|
||||
- name: Copy changelog.txt to vm root
|
||||
run: cp changelog.txt ../../changelog.txt
|
||||
- name: Copy readme.txt to vm root
|
||||
run: cp ./plugins/woocommerce/readme.txt ../../readme.txt
|
||||
|
||||
- name: Switch to trunk branch
|
||||
run: git checkout trunk
|
||||
|
||||
- name: Create a new branch based on trunk
|
||||
run: git checkout -b update/changelog-from-release-${{ github.event.release.tag_name }}
|
||||
|
||||
- name: Copy saved changelog.txt to monorepo
|
||||
run: cp ../../changelog.txt ./changelog.txt
|
||||
- name: Create a new branch based on trunk
|
||||
run: git checkout -b prep/post-release-tasks-${{ github.event.release.tag_name }}
|
||||
|
||||
- name: Check if we need to continue processing
|
||||
uses: actions/github-script@v6
|
||||
id: check
|
||||
with:
|
||||
script: |
|
||||
const fs = require( 'node:fs' );
|
||||
const version = ${{ toJSON( github.event.release.tag_name ) }}
|
||||
|
||||
fs.readFile( './plugins/woocommerce/readme.txt', 'utf-8', function( err, data ) {
|
||||
if ( err ) {
|
||||
console.error( err );
|
||||
}
|
||||
|
||||
const regex = /Stable\stag:\s(\d+\.\d+\.\d+)/;
|
||||
|
||||
const stableVersion = data.match( regex )[1];
|
||||
|
||||
// If the release version is less than stable version we can bail.
|
||||
if ( version.localeCompare( stableVersion, undefined, { numeric: true, sensitivity: 'base' } ) == -1 ) {
|
||||
console.log( 'Release version is less than stable version. No automated action taken. A manual process is required.' );
|
||||
console.log( `::set-output name=continue::false` )
|
||||
return;
|
||||
} else {
|
||||
console.log( `::set-output name=continue::true` )
|
||||
}
|
||||
} )
|
||||
|
||||
- name: Update changelog.txt entries
|
||||
uses: actions/github-script@v6
|
||||
id: update-entries
|
||||
if: steps.check.outputs.continue == 'true'
|
||||
with:
|
||||
script: |
|
||||
const fs = require( 'node:fs' );
|
||||
const version = ${{ toJSON( github.event.release.tag_name ) }}
|
||||
|
||||
// Read the saved readme.txt file from earlier.
|
||||
fs.readFile( '../../readme.txt', 'utf-8', function( err, readme ) {
|
||||
if ( err ) {
|
||||
console.log( `::set-output name=continue::false` )
|
||||
console.error( err );
|
||||
}
|
||||
|
||||
const regex = /(== Changelog ==[\s\S]+)\s{2}\[See changelog for all versions\]\(https:\/\/raw\.githubusercontent\.com\/woocommerce\/woocommerce\/trunk\/changelog\.txt\)\./;
|
||||
|
||||
const entries = readme.match( regex )[1];
|
||||
|
||||
fs.readFile( './changelog.txt', 'utf-8', function( err, changelog ) {
|
||||
if ( err ) {
|
||||
console.log( `::set-output name=continue::false` )
|
||||
console.error( err );
|
||||
}
|
||||
|
||||
const regex = /== Changelog ==/;
|
||||
|
||||
const updatedChangelog = changelog.replace( regex, entries );
|
||||
|
||||
fs.writeFile( './changelog.txt', updatedChangelog, err => {
|
||||
if ( err ) {
|
||||
console.log( `::set-output name=continue::false` )
|
||||
console.error( 'Unable to update changelog entries in changelog.txt' );
|
||||
}
|
||||
|
||||
console.log( `::set-output name=continue::true` )
|
||||
} )
|
||||
} )
|
||||
} )
|
||||
|
||||
- name: Commit changes
|
||||
run: git commit -am "Update changelog.txt from release ${{ github.event.release.tag_name }}"
|
||||
if: steps.update-entries.outputs.continue == 'true'
|
||||
run: git commit -am "Prep trunk post release ${{ github.event.release.tag_name }}"
|
||||
|
||||
- name: Push branch up
|
||||
run: git push origin update/changelog-from-release-${{ github.event.release.tag_name }}
|
||||
if: steps.update-entries.outputs.continue == 'true'
|
||||
run: git push origin prep/post-release-tasks-${{ github.event.release.tag_name }}
|
||||
|
||||
- name: Create the PR
|
||||
if: steps.update-entries.outputs.continue == 'true'
|
||||
uses: actions/github-script@v6
|
||||
with:
|
||||
script: |
|
||||
const body = "This PR updates the changelog.txt based on the latest release: ${{ github.event.release.tag_name }}"
|
||||
const body = "This PR updates the changelog.txt entries based on the latest release: ${{ github.event.release.tag_name }}"
|
||||
|
||||
const pr = await github.rest.pulls.create({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
title: "Update changelog.txt from release ${{ github.event.release.tag_name }}",
|
||||
head: "update/changelog-from-release-${{ github.event.release.tag_name }}",
|
||||
head: "prep/post-release-tasks-${{ github.event.release.tag_name }}",
|
||||
base: "trunk",
|
||||
body: body
|
||||
})
|
||||
|
|
|
|||
|
|
@ -11,6 +11,9 @@ jobs:
|
|||
e2e-tests-run:
|
||||
name: Runs E2E tests.
|
||||
runs-on: ubuntu-20.04
|
||||
env:
|
||||
ALLURE_RESULTS_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/e2e-pw/allure-results
|
||||
ALLURE_REPORT_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/e2e-pw/allure-report
|
||||
outputs:
|
||||
E2E_GRAND_TOTAL: ${{ steps.count_e2e_total.outputs.E2E_GRAND_TOTAL }}
|
||||
steps:
|
||||
|
|
@ -21,6 +24,8 @@ jobs:
|
|||
|
||||
- name: Load docker images and start containers.
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
ENABLE_HPOS: 0
|
||||
run: pnpm env:test --filter=woocommerce
|
||||
|
||||
- name: Download and install Chromium browser.
|
||||
|
|
@ -40,9 +45,9 @@ jobs:
|
|||
timeout-minutes: 60
|
||||
id: run_playwright_e2e_tests
|
||||
env:
|
||||
USE_WP_ENV: 1
|
||||
E2E_MAX_FAILURES: 15
|
||||
FORCE_COLOR: 1
|
||||
USE_WP_ENV: 1
|
||||
E2E_MAX_FAILURES: 15
|
||||
FORCE_COLOR: 1
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec playwright test --config=tests/e2e-pw/playwright.config.js
|
||||
|
||||
|
|
@ -55,7 +60,7 @@ jobs:
|
|||
steps.run_playwright_e2e_tests.conclusion != 'skipped'
|
||||
)
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec allure generate --clean e2e/allure-results --output e2e/allure-report
|
||||
run: pnpm exec allure generate --clean ${{ env.ALLURE_RESULTS_DIR }} --output ${{ env.ALLURE_REPORT_DIR }}
|
||||
|
||||
- name: Archive Playwright E2E test report
|
||||
if: |
|
||||
|
|
@ -65,8 +70,8 @@ jobs:
|
|||
with:
|
||||
name: e2e-test-report---pr-${{ github.event.number }}
|
||||
path: |
|
||||
plugins/woocommerce/e2e/allure-results
|
||||
plugins/woocommerce/e2e/allure-report
|
||||
${{ env.ALLURE_RESULTS_DIR }}
|
||||
${{ env.ALLURE_REPORT_DIR }}
|
||||
if-no-files-found: ignore
|
||||
retention-days: 5
|
||||
|
||||
|
|
@ -74,7 +79,8 @@ jobs:
|
|||
name: Runs API tests.
|
||||
runs-on: ubuntu-20.04
|
||||
env:
|
||||
API_TEST_REPORT_DIR: ${{ github.workspace }}/api-test-report
|
||||
ALLURE_RESULTS_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/api-core-tests/api-test-report/allure-results
|
||||
ALLURE_REPORT_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/api-core-tests/api-test-report/allure-report
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
|
|
@ -83,6 +89,8 @@ jobs:
|
|||
|
||||
- name: Load docker images and start containers.
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
ENABLE_HPOS: 0
|
||||
run: pnpm env:test --filter=woocommerce
|
||||
|
||||
- name: Run Playwright API tests.
|
||||
|
|
@ -103,7 +111,7 @@ jobs:
|
|||
steps.run_playwright_api_tests.conclusion != 'skipped'
|
||||
)
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec allure generate --clean api-test-report/allure-results --output api-test-report/allure-report
|
||||
run: pnpm exec allure generate --clean ${{ env.ALLURE_RESULTS_DIR }} --output ${{ env.ALLURE_REPORT_DIR }}
|
||||
- name: Archive Playwright API test report
|
||||
if: |
|
||||
always() &&
|
||||
|
|
@ -112,8 +120,8 @@ jobs:
|
|||
with:
|
||||
name: api-test-report---pr-${{ github.event.number }}
|
||||
path: |
|
||||
plugins/woocommerce/api-test-report/allure-results
|
||||
plugins/woocommerce/api-test-report/allure-report
|
||||
${{ env.ALLURE_RESULTS_DIR }}
|
||||
${{ env.ALLURE_REPORT_DIR }}
|
||||
if-no-files-found: ignore
|
||||
retention-days: 5
|
||||
|
||||
|
|
@ -128,6 +136,8 @@ jobs:
|
|||
|
||||
- name: Load docker images and start containers.
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
ENABLE_HPOS: 0
|
||||
run: |
|
||||
pnpm env:dev --filter=woocommerce
|
||||
pnpm env:performance-init --filter=woocommerce
|
||||
|
|
|
|||
|
|
@ -16,20 +16,26 @@ jobs:
|
|||
- uses: actions/checkout@v3
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Get Changed Files
|
||||
id: changed-files
|
||||
uses: tj-actions/changed-files@v32
|
||||
with:
|
||||
files: |
|
||||
**/*.php
|
||||
|
||||
- name: Setup WooCommerce Monorepo
|
||||
if: steps.changed-files.outputs.any_changed == 'true'
|
||||
uses: ./.github/actions/setup-woocommerce-monorepo
|
||||
with:
|
||||
build: false
|
||||
|
||||
- name: Tool versions
|
||||
if: steps.changed-files.outputs.any_changed == 'true'
|
||||
run: |
|
||||
php --version
|
||||
composer --version
|
||||
|
||||
- name: Run code sniffer
|
||||
uses: thenabeel/action-phpcs@v8
|
||||
with:
|
||||
files: "**.php"
|
||||
phpcs_path: plugins/woocommerce/vendor/bin/phpcs
|
||||
standard: phpcs.xml
|
||||
- name: Run PHPCS
|
||||
if: steps.changed-files.outputs.any_changed == 'true'
|
||||
run: ./plugins/woocommerce/vendor/bin/phpcs -n -q --report=checkstyle ${{ steps.changed-files.outputs.all_changed_files }} | cs2pr
|
||||
|
|
|
|||
|
|
@ -18,8 +18,9 @@ jobs:
|
|||
id: run
|
||||
working-directory: tools/code-analyzer
|
||||
run: |
|
||||
version=$(pnpm run analyzer major-minor "${{ github.head_ref || github.ref_name }}" "plugins/woocommerce/woocommerce.php" | tail -n 1)
|
||||
pnpm run analyzer "$GITHUB_HEAD_REF" $version -o "github"
|
||||
HEAD_REF=$(git rev-parse HEAD)
|
||||
version=$(pnpm run analyzer major-minor "$HEAD_REF" "plugins/woocommerce/woocommerce.php" | tail -n 1)
|
||||
pnpm run analyzer "$HEAD_REF" $version -o "github"
|
||||
- name: Print results
|
||||
id: results
|
||||
run: echo "::set-output name=results::${{ steps.run.outputs.templates }}${{ steps.run.outputs.wphooks }}${{ steps.run.outputs.schema }}${{ steps.run.outputs.database }}"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,154 @@
|
|||
/**
|
||||
* Script to generate the test results summary.
|
||||
*/
|
||||
const { API_SUMMARY_PATH, E2E_PW_SUMMARY_PATH } = process.env;
|
||||
|
||||
/**
|
||||
* Convert the given `duration` from milliseconds to a more user-friendly string.
|
||||
* For example, if `duration = 323000`, this function would return `5m 23s`.
|
||||
*
|
||||
* @param {Number} duration Duration in millisecods, as read from either the `summary.json` file in the Allure report, or from the `test-results.json` file from the Jest-Puppeteer report.
|
||||
* @returns String in "5m 23s" format.
|
||||
*/
|
||||
const getFormattedDuration = ( duration ) => {
|
||||
const durationMinutes = Math.floor( duration / 1000 / 60 );
|
||||
const durationSeconds = Math.floor( ( duration / 1000 ) % 60 );
|
||||
return `${ durationMinutes }m ${ durationSeconds }s`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Extract the test report statistics (the number of tests that passed, failed, skipped, etc.) from Allure report's `summary.json` file.
|
||||
*
|
||||
* @param {string} summaryJSONPath Path to the Allure report's `summary.json` file.
|
||||
* @returns An object containing relevant statistics from the Allure report.
|
||||
*/
|
||||
const getAllureSummaryStats = ( summaryJSONPath ) => {
|
||||
const summary = require( summaryJSONPath );
|
||||
const { statistic, time } = summary;
|
||||
const { passed, failed, skipped, broken, unknown, total } = statistic;
|
||||
const { duration } = time;
|
||||
|
||||
return {
|
||||
passed,
|
||||
failed,
|
||||
skipped,
|
||||
broken,
|
||||
unknown,
|
||||
total,
|
||||
duration,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Construct the array to be used for the API table row.
|
||||
*
|
||||
* @returns Array of API test result stats.
|
||||
*/
|
||||
const createAPITableRow = () => {
|
||||
const { passed, failed, skipped, broken, unknown, total, duration } =
|
||||
getAllureSummaryStats( API_SUMMARY_PATH );
|
||||
const durationFormatted = getFormattedDuration( duration );
|
||||
|
||||
return [
|
||||
'API Tests',
|
||||
passed.toString(),
|
||||
failed.toString(),
|
||||
broken.toString(),
|
||||
skipped.toString(),
|
||||
unknown.toString(),
|
||||
total.toString(),
|
||||
durationFormatted,
|
||||
];
|
||||
};
|
||||
|
||||
/**
|
||||
* Construct the array to be used for the E2E table row.
|
||||
*
|
||||
* @returns Array of E2E test result stats.
|
||||
*/
|
||||
const createE2ETableRow = () => {
|
||||
const { passed, failed, skipped, broken, unknown, total, duration } =
|
||||
getAllureSummaryStats( E2E_PW_SUMMARY_PATH );
|
||||
const durationFormatted = getFormattedDuration( duration );
|
||||
|
||||
return [
|
||||
'E2E Tests',
|
||||
passed.toString(),
|
||||
failed.toString(),
|
||||
broken.toString(),
|
||||
skipped.toString(),
|
||||
unknown.toString(),
|
||||
total.toString(),
|
||||
durationFormatted,
|
||||
];
|
||||
};
|
||||
|
||||
/**
|
||||
* Create the heading and test results table.
|
||||
*
|
||||
* @param core The GitHub Actions toolkit core object
|
||||
*/
|
||||
const addSummaryHeadingAndTable = ( core ) => {
|
||||
const apiTableRow = createAPITableRow();
|
||||
const e2eTableRow = createE2ETableRow();
|
||||
|
||||
core.summary.addHeading( 'Smoke tests on trunk' ).addTable( [
|
||||
[
|
||||
{ data: 'Test :test_tube:', header: true },
|
||||
{ data: 'Passed :white_check_mark:', header: true },
|
||||
{ data: 'Failed :rotating_light:', header: true },
|
||||
{ data: 'Broken :construction:', header: true },
|
||||
{ data: 'Skipped :next_track_button:', header: true },
|
||||
{ data: 'Unknown :grey_question:', header: true },
|
||||
{ data: 'Total :bar_chart:', header: true },
|
||||
{ data: 'Duration :stopwatch:', header: true },
|
||||
],
|
||||
apiTableRow,
|
||||
e2eTableRow,
|
||||
] );
|
||||
};
|
||||
|
||||
/**
|
||||
* Add the summary footer.
|
||||
*
|
||||
* @param core The GitHub Actions toolkit core object
|
||||
*/
|
||||
const addSummaryFooter = ( core ) => {
|
||||
core.summary
|
||||
.addSeparator()
|
||||
.addRaw( 'To view the full API test report, click ' )
|
||||
.addLink(
|
||||
'here.',
|
||||
'https://woocommerce.github.io/woocommerce-test-reports/daily/api'
|
||||
)
|
||||
.addBreak()
|
||||
.addRaw( 'To view the full E2E test report, click ' )
|
||||
.addLink(
|
||||
'here.',
|
||||
'https://woocommerce.github.io/woocommerce-test-reports/daily/e2e'
|
||||
)
|
||||
.addBreak()
|
||||
.addRaw( 'To view all test reports, visit the ' )
|
||||
.addLink(
|
||||
'WooCommerce Test Reports Dashboard.',
|
||||
'https://woocommerce.github.io/woocommerce-test-reports/'
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate the contents of the test results summary and post it on the workflow run.
|
||||
*
|
||||
* @param {*} params Objects passed from the calling GitHub Action workflow.
|
||||
* @returns Stringified content of the test results summary.
|
||||
*/
|
||||
module.exports = async ( { core } ) => {
|
||||
addSummaryHeadingAndTable( core );
|
||||
|
||||
addSummaryFooter( core );
|
||||
|
||||
const summary = core.summary.stringify();
|
||||
|
||||
await core.summary.write();
|
||||
|
||||
return summary;
|
||||
};
|
||||
|
|
@ -1,99 +1,175 @@
|
|||
name: Smoke test daily
|
||||
on:
|
||||
schedule:
|
||||
- cron: '25 3 * * *'
|
||||
# schedule:
|
||||
# - cron: '25 3 * * *'
|
||||
workflow_dispatch:
|
||||
|
||||
env:
|
||||
API_ARTIFACT: api-daily--run-${{ github.run_number }}
|
||||
E2E_ARTIFACT: e2e-daily--run-${{ github.run_number }}
|
||||
FORCE_COLOR: 1
|
||||
BRANCH_NAME: ${{ github.ref_name }}
|
||||
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.ref }}
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
login-run:
|
||||
name: Daily smoke test on trunk.
|
||||
e2e-tests:
|
||||
name: E2E tests on trunk
|
||||
runs-on: ubuntu-20.04
|
||||
if: always()
|
||||
env:
|
||||
API_TEST_REPORT_DIR: ${{ github.workspace }}/api-test-report
|
||||
outputs:
|
||||
commit_message: ${{ steps.get_commit_message.outputs.commit_message }}
|
||||
BASE_URL: ${{ secrets.SMOKE_TEST_URL }}
|
||||
ADMIN_USER: ${{ secrets.SMOKE_TEST_ADMIN_USER }}
|
||||
ADMIN_PASSWORD: ${{ secrets.SMOKE_TEST_ADMIN_PASSWORD }}
|
||||
ADMIN_USER_EMAIL: ${{ secrets.SMOKE_TEST_ADMIN_USER_EMAIL }}
|
||||
CUSTOMER_USER: ${{ secrets.SMOKE_TEST_CUSTOMER_USER }}
|
||||
CUSTOMER_PASSWORD: ${{ secrets.SMOKE_TEST_CUSTOMER_PASSWORD }}
|
||||
DEFAULT_TIMEOUT_OVERRIDE: 120000
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
ref: trunk
|
||||
ref: ${{ env.BRANCH_NAME }}
|
||||
|
||||
- name: Setup WooCommerce Monorepo
|
||||
uses: ./.github/actions/setup-woocommerce-monorepo
|
||||
with:
|
||||
install-filters: woocommerce
|
||||
build: false
|
||||
|
||||
- name: Install Jest
|
||||
run: npm install -g jest
|
||||
|
||||
- name: Get latest commit message
|
||||
id: get_commit_message
|
||||
run: |
|
||||
COMMIT_MESSAGE=$(git log --pretty=format:%s -1)
|
||||
echo "::set-output name=commit_message::$COMMIT_MESSAGE"
|
||||
|
||||
- name: Run E2E smoke test.
|
||||
- name: Download and install Chromium browser.
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
SMOKE_TEST_URL: ${{ secrets.SMOKE_TEST_URL }}
|
||||
SMOKE_TEST_ADMIN_USER: ${{ secrets.SMOKE_TEST_ADMIN_USER }}
|
||||
SMOKE_TEST_ADMIN_PASSWORD: ${{ secrets.SMOKE_TEST_ADMIN_PASSWORD }}
|
||||
SMOKE_TEST_ADMIN_USER_EMAIL: ${{ secrets.SMOKE_TEST_ADMIN_USER_EMAIL }}
|
||||
SMOKE_TEST_CUSTOMER_USER: ${{ secrets.SMOKE_TEST_CUSTOMER_USER }}
|
||||
SMOKE_TEST_CUSTOMER_PASSWORD: ${{ secrets.SMOKE_TEST_CUSTOMER_PASSWORD }}
|
||||
WC_E2E_SCREENSHOTS: 1
|
||||
E2E_RETEST: 1
|
||||
E2E_SLACK_TOKEN: ${{ secrets.SMOKE_TEST_SLACK_TOKEN }}
|
||||
E2E_SLACK_CHANNEL: ${{ secrets.SMOKE_TEST_SLACK_CHANNEL }}
|
||||
UPDATE_WC: 1
|
||||
DEFAULT_TIMEOUT_OVERRIDE: 120000
|
||||
run: |
|
||||
pnpm exec wc-e2e docker:up
|
||||
pnpm exec wc-e2e test:e2e tests/e2e/specs/smoke-tests/update-woocommerce.js
|
||||
pnpm exec wc-e2e test:e2e
|
||||
run: pnpm exec playwright install chromium
|
||||
|
||||
- name: Run API smoke tests
|
||||
- name: Run 'Update WooCommerce' test.
|
||||
working-directory: plugins/woocommerce
|
||||
id: e2e-update
|
||||
env:
|
||||
UPDATE_WC: true
|
||||
run: pnpm exec playwright test --config=tests/e2e-pw/playwright.config.js update-woocommerce.spec.js
|
||||
|
||||
- name: Run the rest of E2E tests.
|
||||
timeout-minutes: 60
|
||||
working-directory: plugins/woocommerce
|
||||
id: e2e
|
||||
env:
|
||||
E2E_MAX_FAILURES: 15
|
||||
run: pnpm exec playwright test --config=tests/e2e-pw/playwright.config.js basic.spec.js
|
||||
|
||||
- name: Generate Playwright E2E Test report.
|
||||
id: generate_e2e_report
|
||||
if: |
|
||||
always() &&
|
||||
(
|
||||
steps.e2e-update.conclusion != 'cancelled' ||
|
||||
steps.e2e-update.conclusion != 'skipped' ||
|
||||
steps.e2e.conclusion != 'cancelled' ||
|
||||
steps.e2e.conclusion != 'skipped'
|
||||
)
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec allure generate --clean ${{ env.ALLURE_RESULTS_DIR }} --output ${{ env.ALLURE_REPORT_DIR }}
|
||||
|
||||
- name: Archive E2E test report
|
||||
if: |
|
||||
always() &&
|
||||
steps.generate_e2e_report.conclusion == 'success'
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: ${{ env.E2E_ARTIFACT }}
|
||||
path: |
|
||||
${{ env.ALLURE_RESULTS_DIR }}
|
||||
${{ env.ALLURE_REPORT_DIR }}
|
||||
if-no-files-found: ignore
|
||||
retention-days: 5
|
||||
|
||||
api-tests:
|
||||
name: API tests on trunk
|
||||
runs-on: ubuntu-20.04
|
||||
needs: [e2e-tests]
|
||||
if: always()
|
||||
env:
|
||||
ALLURE_RESULTS_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/api-core-tests/api-test-report/allure-results
|
||||
ALLURE_REPORT_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/api-core-tests/api-test-report/allure-report
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
ref: ${{ env.BRANCH_NAME }}
|
||||
|
||||
- name: Setup WooCommerce Monorepo
|
||||
uses: ./.github/actions/setup-woocommerce-monorepo
|
||||
with:
|
||||
install-filters: woocommerce
|
||||
build: false
|
||||
|
||||
- name: Run API tests.
|
||||
if: always()
|
||||
id: run_api_tests
|
||||
id: run_playwright_api_tests
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
BASE_URL: ${{ secrets.SMOKE_TEST_URL }}
|
||||
USER_KEY: ${{ secrets.SMOKE_TEST_ADMIN_USER }}
|
||||
USER_SECRET: ${{ secrets.SMOKE_TEST_ADMIN_PASSWORD }}
|
||||
DEFAULT_TIMEOUT_OVERRIDE: 120000
|
||||
run: pnpm exec wc-api-tests test api
|
||||
run: pnpm exec playwright test --config=tests/api-core-tests/playwright.config.js hello.test.js
|
||||
|
||||
- name: Generate API Test report.
|
||||
id: generate_api_report
|
||||
if: |
|
||||
always() &&
|
||||
(
|
||||
steps.run_playwright_api_tests.conclusion != 'cancelled' ||
|
||||
steps.run_playwright_api_tests.conclusion != 'skipped'
|
||||
)
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec allure generate --clean ${{ env.ALLURE_RESULTS_DIR }} --output ${{ env.ALLURE_REPORT_DIR }}
|
||||
|
||||
- name: Archive API test report
|
||||
if: |
|
||||
always() &&
|
||||
(
|
||||
steps.run_api_tests.conclusion != 'cancelled' ||
|
||||
steps.run_api_tests.conclusion != 'skipped'
|
||||
)
|
||||
steps.generate_api_report.conclusion == 'success'
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: api-test-report---daily
|
||||
name: ${{ env.API_ARTIFACT }}
|
||||
path: |
|
||||
${{ env.API_TEST_REPORT_DIR }}/allure-results
|
||||
${{ env.API_TEST_REPORT_DIR }}/allure-report
|
||||
${{ env.ALLURE_RESULTS_DIR }}
|
||||
${{ env.ALLURE_REPORT_DIR }}
|
||||
if-no-files-found: ignore
|
||||
retention-days: 5
|
||||
|
||||
k6-tests:
|
||||
name: k6 tests on trunk
|
||||
runs-on: ubuntu-20.04
|
||||
needs: [api-tests]
|
||||
if: always()
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
ref: ${{ env.BRANCH_NAME }}
|
||||
|
||||
- name: Setup WooCommerce Monorepo
|
||||
uses: ./.github/actions/setup-woocommerce-monorepo
|
||||
with:
|
||||
install-filters: woocommerce
|
||||
build: false
|
||||
|
||||
- name: Download and install Chromium browser.
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec playwright install chromium
|
||||
|
||||
- name: Update performance test site with E2E test
|
||||
if: always()
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
SMOKE_TEST_URL: ${{ secrets.SMOKE_TEST_PERF_URL }}/
|
||||
SMOKE_TEST_ADMIN_USER: ${{ secrets.SMOKE_TEST_PERF_ADMIN_USER }}
|
||||
SMOKE_TEST_ADMIN_PASSWORD: ${{ secrets.SMOKE_TEST_PERF_ADMIN_PASSWORD }}
|
||||
SMOKE_TEST_ADMIN_USER_EMAIL: ${{ secrets.SMOKE_TEST_ADMIN_USER_EMAIL }}
|
||||
SMOKE_TEST_CUSTOMER_USER: ${{ secrets.SMOKE_TEST_CUSTOMER_USER }}
|
||||
SMOKE_TEST_CUSTOMER_PASSWORD: ${{ secrets.SMOKE_TEST_CUSTOMER_PASSWORD }}
|
||||
WC_E2E_SCREENSHOTS: 1
|
||||
E2E_RETEST: 1
|
||||
E2E_RETRY_TIMES: 0
|
||||
E2E_SLACK_TOKEN: ${{ secrets.SMOKE_TEST_SLACK_TOKEN }}
|
||||
E2E_SLACK_CHANNEL: ${{ secrets.SMOKE_TEST_SLACK_CHANNEL }}
|
||||
UPDATE_WC: 1
|
||||
DEFAULT_TIMEOUT_OVERRIDE: 120000
|
||||
BASE_URL: ${{ secrets.SMOKE_TEST_PERF_URL }}/
|
||||
ADMIN_USER: ${{ secrets.SMOKE_TEST_PERF_ADMIN_USER }}
|
||||
ADMIN_PASSWORD: ${{ secrets.SMOKE_TEST_PERF_ADMIN_PASSWORD }}
|
||||
CUSTOMER_USER: ${{ secrets.SMOKE_TEST_PERF_ADMIN_USER }}
|
||||
CUSTOMER_PASSWORD: ${{ secrets.SMOKE_TEST_PERF_ADMIN_PASSWORD }}
|
||||
UPDATE_WC: true
|
||||
DEFAULT_TIMEOUT_OVERRIDE: 120000
|
||||
run: |
|
||||
pnpm exec wc-e2e test:e2e tests/e2e/specs/smoke-tests/update-woocommerce.js
|
||||
pnpm exec playwright test --config=tests/e2e-pw/playwright.config.js update-woocommerce.spec.js
|
||||
continue-on-error: true
|
||||
|
||||
- name: Install k6
|
||||
|
|
@ -114,34 +190,15 @@ jobs:
|
|||
run: |
|
||||
./k6 run plugins/woocommerce/tests/performance/tests/gh-action-daily-ext-requests.js
|
||||
|
||||
build:
|
||||
name: Build zip for PR
|
||||
runs-on: ubuntu-20.04
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Setup WooCommerce Monorepo
|
||||
uses: ./.github/actions/setup-woocommerce-monorepo
|
||||
with:
|
||||
build: false
|
||||
|
||||
- name: Build zip
|
||||
working-directory: plugins/woocommerce
|
||||
run: bash bin/build-zip.sh
|
||||
|
||||
- name: Upload the zip file as an artifact
|
||||
uses: actions/upload-artifact@v3
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
name: woocommerce
|
||||
path: plugins/woocommerce/woocommerce.zip
|
||||
retention-days: 7
|
||||
|
||||
test-plugins:
|
||||
name: Smoke tests with ${{ matrix.plugin }} plugin installed
|
||||
runs-on: ubuntu-20.04
|
||||
needs: [build]
|
||||
needs: [k6-tests]
|
||||
if: always()
|
||||
env:
|
||||
USE_WP_ENV: 1
|
||||
ALLURE_RESULTS_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/e2e-pw/allure-results
|
||||
ALLURE_REPORT_DIR: ${{ github.workspace }}/plugins/woocommerce/tests/e2e-pw/allure-report
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
|
|
@ -160,59 +217,164 @@ jobs:
|
|||
- plugin: 'Contact Form 7'
|
||||
repo: 'takayukister/contact-form-7'
|
||||
steps:
|
||||
- name: Create dirs.
|
||||
run: |
|
||||
mkdir -p package/woocommerce
|
||||
mkdir -p tmp/woocommerce
|
||||
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
path: package/woocommerce
|
||||
ref: ${{ env.BRANCH_NAME }}
|
||||
|
||||
- name: Download WooCommerce ZIP.
|
||||
uses: actions/download-artifact@v3
|
||||
with:
|
||||
name: woocommerce
|
||||
path: tmp
|
||||
- name: Setup WooCommerce Monorepo
|
||||
uses: ./.github/actions/setup-woocommerce-monorepo
|
||||
|
||||
- name: Extract and replace WooCommerce zip.
|
||||
working-directory: tmp
|
||||
run: |
|
||||
unzip woocommerce.zip -d .
|
||||
rsync -a woocommerce/* ../package/woocommerce/plugins/woocommerce/
|
||||
- name: Launch wp-env e2e environment
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm env:test --filter=woocommerce
|
||||
|
||||
- name: Load docker images and start containers.
|
||||
working-directory: package/woocommerce
|
||||
run: pnpm docker:up --filter=woocommerce
|
||||
- name: Download and install Chromium browser.
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec playwright install chromium
|
||||
|
||||
- name: Run tests command.
|
||||
working-directory: package/woocommerce/plugins/woocommerce
|
||||
- name: Run 'Upload plugin' test
|
||||
id: e2e-upload
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
WC_E2E_SCREENSHOTS: 1
|
||||
E2E_SLACK_TOKEN: ${{ secrets.SMOKE_TEST_SLACK_TOKEN }}
|
||||
E2E_SLACK_CHANNEL: ${{ secrets.SMOKE_TEST_SLACK_CHANNEL }}
|
||||
PLUGIN_REPOSITORY: ${{ matrix.private && secrets[matrix.repo] || matrix.repo }}
|
||||
PLUGIN_NAME: ${{ matrix.plugin }}
|
||||
GITHUB_TOKEN: ${{ secrets.E2E_GH_TOKEN }}
|
||||
run: |
|
||||
pnpm exec wc-e2e test:e2e tests/e2e/specs/smoke-tests/upload-plugin.js
|
||||
pnpm exec wc-e2e test:e2e
|
||||
run: pnpm exec playwright test --config=tests/e2e-pw/playwright.config.js upload-plugin.spec.js
|
||||
|
||||
publish-test-reports:
|
||||
name: Publish test reports
|
||||
if: always()
|
||||
- name: Run the rest of E2E tests
|
||||
id: e2e
|
||||
working-directory: plugins/woocommerce
|
||||
env:
|
||||
E2E_MAX_FAILURES: 15
|
||||
run: pnpm exec playwright test --config=tests/e2e-pw/playwright.config.js basic.spec.js
|
||||
|
||||
- name: Generate E2E Test report.
|
||||
id: report
|
||||
if: |
|
||||
always() &&
|
||||
(
|
||||
steps.e2e-upload.conclusion != 'cancelled' ||
|
||||
steps.e2e-upload.conclusion != 'skipped' ||
|
||||
steps.e2e.conclusion != 'cancelled' ||
|
||||
steps.e2e.conclusion != 'skipped'
|
||||
)
|
||||
working-directory: plugins/woocommerce
|
||||
run: pnpm exec allure generate --clean ${{ env.ALLURE_RESULTS_DIR }} --output ${{ env.ALLURE_REPORT_DIR }}
|
||||
|
||||
- name: Archive E2E test report
|
||||
if: |
|
||||
always() &&
|
||||
steps.report.conclusion == 'success'
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: Smoke tests with ${{ matrix.plugin }} plugin installed (run ${{ github.run_number }})
|
||||
path: |
|
||||
${{ env.ALLURE_RESULTS_DIR }}
|
||||
${{ env.ALLURE_REPORT_DIR }}
|
||||
if-no-files-found: ignore
|
||||
retention-days: 5
|
||||
|
||||
trunk-results:
|
||||
name: Publish report on smoke tests on trunk
|
||||
if: always() &&
|
||||
! github.event.pull_request.head.repo.fork
|
||||
runs-on: ubuntu-20.04
|
||||
needs: [login-run, build, test-plugins]
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.REPORTS_TOKEN }}
|
||||
RUN_ID: ${{ github.run_id }}
|
||||
API_ARTIFACT: api-test-report---daily
|
||||
COMMIT_MESSAGE: ${{ needs.login-run.outputs.commit_message }}
|
||||
needs: [test-plugins]
|
||||
steps:
|
||||
- name: Publish API test report
|
||||
- name: Create dirs
|
||||
run: |
|
||||
mkdir -p repo
|
||||
mkdir -p artifacts/api
|
||||
mkdir -p artifacts/e2e
|
||||
mkdir -p output
|
||||
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
path: repo
|
||||
ref: ${{ env.BRANCH_NAME }}
|
||||
|
||||
- name: Download API test report artifact
|
||||
uses: actions/download-artifact@v3
|
||||
with:
|
||||
name: ${{ env.API_ARTIFACT }}
|
||||
path: artifacts/api
|
||||
|
||||
- name: Download E2E test report artifact
|
||||
uses: actions/download-artifact@v3
|
||||
with:
|
||||
name: ${{ env.E2E_ARTIFACT }}
|
||||
path: artifacts/e2e
|
||||
|
||||
- name: Post test summary
|
||||
uses: actions/github-script@v6
|
||||
env:
|
||||
API_SUMMARY_PATH: ${{ github.workspace }}/artifacts/api/allure-report/widgets/summary.json
|
||||
E2E_PW_SUMMARY_PATH: ${{ github.workspace }}/artifacts/e2e/allure-report/widgets/summary.json
|
||||
with:
|
||||
result-encoding: string
|
||||
script: |
|
||||
const script = require( './repo/.github/workflows/scripts/prepare-test-summary-daily.js' )
|
||||
return await script( { core } )
|
||||
|
||||
- name: Publish report
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.REPORTS_TOKEN }}
|
||||
RUN_ID: ${{ github.run_id }}
|
||||
run: |
|
||||
gh workflow run publish-test-reports-daily.yml \
|
||||
-f run_id=$RUN_ID \
|
||||
-f api_artifact=$API_ARTIFACT \
|
||||
-f commit_message="$COMMIT_MESSAGE" \
|
||||
-f api_artifact="$API_ARTIFACT" \
|
||||
-f e2e_artifact="$E2E_ARTIFACT" \
|
||||
-f s3_root=public \
|
||||
--repo woocommerce/woocommerce-test-reports
|
||||
|
||||
plugins-results:
|
||||
name: Publish report on smoke tests with plugins
|
||||
if: |
|
||||
always() &&
|
||||
! github.event.pull_request.head.repo.fork
|
||||
runs-on: ubuntu-20.04
|
||||
needs: [test-plugins]
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.REPORTS_TOKEN }}
|
||||
RUN_ID: ${{ github.run_id }}
|
||||
ARTIFACT: Smoke tests with ${{ matrix.plugin }} plugin installed (run ${{ github.run_number }})
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
include:
|
||||
- plugin: 'WooCommerce Payments'
|
||||
repo: 'automattic/woocommerce-payments'
|
||||
- plugin: 'WooCommerce PayPal Payments'
|
||||
repo: 'woocommerce/woocommerce-paypal-payments'
|
||||
- plugin: 'WooCommerce Shipping & Tax'
|
||||
repo: 'automattic/woocommerce-services'
|
||||
- plugin: 'WordPress SEO' # Yoast SEO in the UI, but the slug is wordpress-seo
|
||||
repo: 'Yoast/wordpress-seo'
|
||||
- plugin: 'Contact Form 7'
|
||||
repo: 'takayukister/contact-form-7'
|
||||
steps:
|
||||
- name: Download test report artifact
|
||||
uses: actions/download-artifact@v3
|
||||
with:
|
||||
name: ${{ env.ARTIFACT }}
|
||||
|
||||
# TODO: Add step to post job summary
|
||||
|
||||
- name: Get slug
|
||||
id: get-slug
|
||||
uses: actions/github-script@v6
|
||||
with:
|
||||
result-encoding: string
|
||||
script: return "${{ matrix.repo }}".split( '/' ).pop()
|
||||
|
||||
- name: Publish reports
|
||||
run: |
|
||||
gh workflow run publish-test-reports-daily-plugins.yml \
|
||||
-f run_id=$RUN_ID \
|
||||
-f artifact="${{ env.ARTIFACT }}" \
|
||||
-f plugin="${{ matrix.plugin }}" \
|
||||
-f slug="${{ steps.get-slug.outputs.result }}" \
|
||||
-f s3_root=public \
|
||||
--repo woocommerce/woocommerce-test-reports
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
# Unreleased
|
||||
|
||||
# 1.0.0
|
||||
|
||||
## Changed
|
||||
- Bumped jest version to v27
|
||||
- Used the jest packaged bundled in this module to run tests
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@woocommerce/api-core-tests",
|
||||
"version": "0.1.0",
|
||||
"version": "1.0.0",
|
||||
"description": "API tests for WooCommerce",
|
||||
"main": "index.js",
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,59 @@
|
|||
|
||||
This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [11.1.0](https://www.npmjs.com/package/@woocommerce/components/v/11.1.0) - 2022-10-24
|
||||
|
||||
- Minor - Allow passing of additional props to form inputs [#35160]
|
||||
|
||||
## [11.0.0](https://www.npmjs.com/package/@woocommerce/components/v/11.0.0) - 2022-10-20
|
||||
|
||||
- Patch - Export StepperProps for external usage [#35140]
|
||||
- Patch - Fixed the initial setting of DateTimePickerControl's input field. [#35140]
|
||||
- Patch - Fix EnrichedLabel Storybook story styles so they don't affect other stories. [#35140]
|
||||
- Patch - Fixes DateTimePickerControl's debounce handling to work even if onChange prop changes. [#35140]
|
||||
- Patch - Fix issue with form onChange handler, passing outdated values. [#35140]
|
||||
- Patch - Update tag component styling [#35140]
|
||||
- Patch - Add missing type definitions and add babel config for tests [#35140]
|
||||
- Patch - Merging trunk with local [#35140]
|
||||
- Patch - Removed unfinished and unused SplitDropdown component. [#35140]
|
||||
- Patch - Assume ambiguous dates passed into DateTimePickerControl are UTC. [#35140]
|
||||
- Patch - Remove default selected sortable item. [#35140]
|
||||
- Minor - Fix Enriched-label styles
|
||||
- Minor - Fix initially selected items in SelectControl component [#35140]
|
||||
- Minor - Add date-only mode to DateTimePickerControl. [#35140]
|
||||
- Minor - Add disabled option to the Select Control input component and alter the onInputChange callback [#35140]
|
||||
- Minor - Add form input name dot notation name="product.dimensions.width" [#35140]
|
||||
- Minor - Add FormSection component [#35140]
|
||||
- Minor - Add ImageGallery component [#35140]
|
||||
- Minor - Adding datetimepicker component. [#35140]
|
||||
- Minor - Adding on-click toolbar to image gallery component items. [#35140]
|
||||
- Minor - Add label prop to rich text editor [#35140]
|
||||
- Minor - Add MediaUploader component [#35140]
|
||||
- Minor - Add rich text editor component [#35140]
|
||||
- Minor - Add SortableList component [#35140]
|
||||
- Minor - Allow external tags in SelectControl component [#35140]
|
||||
- Minor - Export ImportProps type. Add DateTimePickerControl to Form stories and tests. [#35140]
|
||||
- Minor - Images Product management [#35140]
|
||||
- Minor - Remove EnrichedLabel component in favor of Tooltip component [#35140]
|
||||
- Minor - Update resetForm arguments, adding changed fields, touched fields and errors. [#35140]
|
||||
- Minor - [PM Components] Create SplitDropdown component. #34180 [#35140]
|
||||
- Minor - Add label, placeholder, and help props to DateTimePickerControl. [#35140]
|
||||
- Minor - Adds setValues support to FormContext [#35140]
|
||||
- Minor - Add support in SelectControl for using the popover slot for the popover. [#35140]
|
||||
- Minor - Update experimental SelectControl compoment to expose a couple extra combobox functions from Downshift. [#35140]
|
||||
- Minor - Update experimental SelectControl compoment to expose combobox functions from Downshift and provide additional options. [#35140]
|
||||
- Minor - Update text input placement in SelectControl [#35140]
|
||||
- Minor - Add component EnrichedLabel #34214 [#35140]
|
||||
- Minor - Add new shippping class modal to a shipping class section in product page [#35140]
|
||||
- Minor - Adjust build/test scripts to remove -- -- that was required for pnpm 6. [#35140]
|
||||
- Minor - Fix node and pnpm versions via engines [#35140]
|
||||
- Minor - Update Plugin installer component to TS [#35140]
|
||||
- Minor - Update pnpm version constraint to 7.13.3 to avoid auto-install-peers issues [#35140]
|
||||
- Minor - Fix DateTimePickerControl's onChange date arg to only be a string (TypeScript). [#35140]
|
||||
- Minor - Improve experimental SelectControl accessibility [#35140]
|
||||
- Minor - Improve Sortable component acessibility [#35140]
|
||||
- - Create new experimental SelectControl component [#35140]
|
||||
|
||||
## [10.3.0](https://www.npmjs.com/package/@woocommerce/components/v/10.3.0) - 2022-08-12
|
||||
|
||||
- Patch - Added in missing TS definitions in package.json [#34279]
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Add component EnrichedLabel #34214
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Update resetForm arguments, adding changed fields, touched fields and errors.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: fix
|
||||
|
||||
Fix Enriched-label styles - #34382
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: patch
|
||||
Type: tweak
|
||||
|
||||
Remove default selected sortable item.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Adding on-click toolbar to image gallery component items.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Add new shippping class modal to a shipping class section in product page
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Update experimental SelectControl compoment to expose a couple extra combobox functions from Downshift.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add experimental ConditionalWrapper component
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Images Product management
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Adding datetimepicker component.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add date-only mode to DateTimePickerControl.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add SortableList component
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add form input name dot notation name="product.dimensions.width"
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add rich text editor component
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add ImageGallery component
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add MediaUploader component
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Adds setValues support to FormContext
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add FormSection component
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: enhancement
|
||||
|
||||
Improve Sortable component acessibility
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
[PM Components] Create SplitDropdown component. #34180
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Update pnpm version constraint to 7.13.3 to avoid auto-install-peers issues
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: patch
|
||||
Type: dev
|
||||
|
||||
Add missing type definitions and add babel config for tests
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Fix node and pnpm versions via engines
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: enhancement
|
||||
|
||||
Update font size and spacing in the tooltip component
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
Significance: patch
|
||||
Type: tweak
|
||||
Comment: Minor update of react and react-dom to 17.0.2.
|
||||
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Fix issue with form onChange handler, passing outdated values.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: patch
|
||||
Type: tweak
|
||||
|
||||
Assume ambiguous dates passed into DateTimePickerControl are UTC.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Fixes DateTimePickerControl's debounce handling to work even if onChange prop changes.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Fixed the initial setting of DateTimePickerControl's input field.
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
Comment: Just a minor tweak to the CSS for the DateTimePickerControl suffix.
|
||||
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Fix EnrichedLabel Storybook story styles so they don't affect other stories.
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Export StepperProps for external usage
|
||||
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Update Plugin installer component to TS
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
Significance: patch
|
||||
Type: tweak
|
||||
Comment: Reverted change of last PR as part of #34614
|
||||
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: enhancement
|
||||
|
||||
Improve experimental SelectControl accessibility
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Add name to exported popover slot used to display SelectControl Menu, so it is only used for SelectControl menus.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: fix
|
||||
|
||||
Fix initially selected items in SelectControl component
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: patch
|
||||
Type: dev
|
||||
|
||||
Removed unfinished and unused SplitDropdown component.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: major
|
||||
Type: add
|
||||
|
||||
Create new experimental SelectControl component
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: patch
|
||||
Type: update
|
||||
|
||||
Update tag component styling
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Add label, placeholder, and help props to DateTimePickerControl.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Added ability to force time when DateTimePickerControl is date-only (timeForDateOnly prop).
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: major
|
||||
Type: update
|
||||
|
||||
Switch DateTimePickerControl formatting to PHP style, for WP compatibility.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: tweak
|
||||
|
||||
Fix DateTimePickerControl's onChange date arg to only be a string (TypeScript).
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Update experimental SelectControl compoment to expose combobox functions from Downshift and provide additional options.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Update text input placement in SelectControl
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Allow external tags in SelectControl component
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Adjust build/test scripts to remove -- -- that was required for pnpm 6.
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@woocommerce/components",
|
||||
"version": "10.3.0",
|
||||
"version": "11.1.0",
|
||||
"description": "UI components for WooCommerce.",
|
||||
"author": "Automattic",
|
||||
"license": "GPL-3.0-or-later",
|
||||
|
|
@ -161,4 +161,4 @@
|
|||
"pnpm test-staged"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.woocommerce-date-time-picker-control {
|
||||
display: block;
|
||||
|
||||
.woocommerce-date-time-picker-control__input-control__suffix {
|
||||
padding-right: 8px;
|
||||
.components-input-control__suffix {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.components-datetime__date {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { format as formatDate } from '@wordpress/date';
|
||||
import {
|
||||
createElement,
|
||||
useState,
|
||||
|
|
@ -22,9 +23,11 @@ import {
|
|||
__experimentalInputControl as InputControl,
|
||||
} from '@wordpress/components';
|
||||
|
||||
export const defaultDateFormat = 'MM/DD/YYYY';
|
||||
export const default12HourDateTimeFormat = 'MM/DD/YYYY h:mm a';
|
||||
export const default24HourDateTimeFormat = 'MM/DD/YYYY H:mm';
|
||||
// PHP style formatting:
|
||||
// https://wordpress.org/support/article/formatting-date-and-time/
|
||||
export const defaultDateFormat = 'm/d/Y';
|
||||
export const default12HourDateTimeFormat = 'm/d/Y h:i a';
|
||||
export const default24HourDateTimeFormat = 'm/d/Y H:i';
|
||||
|
||||
export type DateTimePickerControlOnChangeHandler = (
|
||||
date: string,
|
||||
|
|
@ -37,6 +40,7 @@ export type DateTimePickerControlProps = {
|
|||
disabled?: boolean;
|
||||
isDateOnlyPicker?: boolean;
|
||||
is12HourPicker?: boolean;
|
||||
timeForDateOnly?: 'start-of-day' | 'end-of-day';
|
||||
onChange?: DateTimePickerControlOnChangeHandler;
|
||||
onBlur?: () => void;
|
||||
label?: string;
|
||||
|
|
@ -49,6 +53,7 @@ export const DateTimePickerControl: React.FC< DateTimePickerControlProps > = ( {
|
|||
currentDate,
|
||||
isDateOnlyPicker = false,
|
||||
is12HourPicker = true,
|
||||
timeForDateOnly = 'start-of-day',
|
||||
dateTimeFormat,
|
||||
disabled = false,
|
||||
onChange,
|
||||
|
|
@ -103,9 +108,10 @@ export const DateTimePickerControl: React.FC< DateTimePickerControlProps > = ( {
|
|||
return moment.utc( dateString, moment.ISO_8601, true );
|
||||
}
|
||||
|
||||
function parseMoment( dateString?: string | null ): Moment {
|
||||
// parse input date string as local time
|
||||
return moment( dateString, displayFormat );
|
||||
function parseMoment( dateString: string | null ): Moment {
|
||||
// parse input date string as local time;
|
||||
// be lenient of user input and try to match any format Moment can
|
||||
return moment( dateString );
|
||||
}
|
||||
|
||||
function formatMomentIso( momentDate: Moment ): string {
|
||||
|
|
@ -113,7 +119,21 @@ export const DateTimePickerControl: React.FC< DateTimePickerControlProps > = ( {
|
|||
}
|
||||
|
||||
function formatMoment( momentDate: Moment ): string {
|
||||
return momentDate.local().format( displayFormat );
|
||||
return formatDate( displayFormat, momentDate.local() );
|
||||
}
|
||||
|
||||
function maybeForceTime( momentDate: Moment ): Moment {
|
||||
if ( ! isDateOnlyPicker ) return momentDate;
|
||||
|
||||
const updatedMomentDate = momentDate.clone();
|
||||
|
||||
if ( timeForDateOnly === 'start-of-day' ) {
|
||||
updatedMomentDate.startOf( 'day' );
|
||||
} else if ( timeForDateOnly === 'end-of-day' ) {
|
||||
updatedMomentDate.endOf( 'day' );
|
||||
}
|
||||
|
||||
return updatedMomentDate;
|
||||
}
|
||||
|
||||
function hasFocusLeftInputAndDropdownContent(
|
||||
|
|
@ -161,15 +181,17 @@ export const DateTimePickerControl: React.FC< DateTimePickerControlProps > = ( {
|
|||
onChangePropFunctionRef.current = onChange;
|
||||
}, [ onChange ] );
|
||||
|
||||
const inputStringChangeHandlerFunctionRef = useRef<
|
||||
( newInputString: string, fireOnChange: boolean ) => void
|
||||
>( ( newInputString: string, fireOnChange: boolean ) => {
|
||||
function inputStringChangeHandlerFunction(
|
||||
newInputString: string,
|
||||
fireOnChange: boolean
|
||||
) {
|
||||
if ( ! isMounted.current ) return;
|
||||
|
||||
const newDateTime = parseMoment( newInputString );
|
||||
let newDateTime = parseMoment( newInputString );
|
||||
const isValid = newDateTime.isValid();
|
||||
|
||||
if ( isValid ) {
|
||||
newDateTime = maybeForceTime( newDateTime );
|
||||
setLastValidDate( newDateTime );
|
||||
}
|
||||
|
||||
|
|
@ -182,7 +204,17 @@ export const DateTimePickerControl: React.FC< DateTimePickerControlProps > = ( {
|
|||
isValid
|
||||
);
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
const inputStringChangeHandlerFunctionRef = useRef<
|
||||
( newInputString: string, fireOnChange: boolean ) => void
|
||||
>( inputStringChangeHandlerFunction );
|
||||
// whenever forceTimeTo changes, we need to reset the ref to inputStringChangeHandlerFunction
|
||||
// so that we are using the most current forceTimeTo value inside of it
|
||||
useEffect( () => {
|
||||
inputStringChangeHandlerFunctionRef.current =
|
||||
inputStringChangeHandlerFunction;
|
||||
}, [ timeForDateOnly ] );
|
||||
|
||||
const debouncedInputStringChangeHandler = useDebounce(
|
||||
inputStringChangeHandlerFunctionRef.current,
|
||||
|
|
@ -228,7 +260,7 @@ export const DateTimePickerControl: React.FC< DateTimePickerControlProps > = ( {
|
|||
} else {
|
||||
changeImmediate( currentDate || '', fireOnChange );
|
||||
}
|
||||
}, [ currentDate, displayFormat ] );
|
||||
}, [ currentDate, displayFormat, timeForDateOnly ] );
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
|
|
|
|||
|
|
@ -28,11 +28,13 @@ Basic.args = {
|
|||
help: 'Type a date and time or use the picker',
|
||||
};
|
||||
|
||||
const customFormat = 'Y-m-d H:i';
|
||||
|
||||
export const CustomDateTimeFormat = Template.bind( {} );
|
||||
CustomDateTimeFormat.args = {
|
||||
...Basic.args,
|
||||
help: 'Format: YYYY-MM-DD HH:mm',
|
||||
dateTimeFormat: 'YYYY-MM-DD HH:mm',
|
||||
help: 'Format: ' + customFormat,
|
||||
dateTimeFormat: customFormat,
|
||||
};
|
||||
|
||||
function ControlledContainer( { children, ...props } ) {
|
||||
|
|
@ -97,3 +99,10 @@ ControlledDateOnly.args = {
|
|||
isDateOnlyPicker: true,
|
||||
};
|
||||
ControlledDateOnly.decorators = Controlled.decorators;
|
||||
|
||||
export const ControlledDateOnlyEndOfDay = Template.bind( {} );
|
||||
ControlledDateOnlyEndOfDay.args = {
|
||||
...ControlledDateOnly.args,
|
||||
timeForDateOnly: 'end-of-day',
|
||||
};
|
||||
ControlledDateOnlyEndOfDay.decorators = Controlled.decorators;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
*/
|
||||
import { render, waitFor, fireEvent } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { format as formatDate } from '@wordpress/date';
|
||||
import { createElement, Fragment } from '@wordpress/element';
|
||||
import moment from 'moment';
|
||||
|
||||
|
|
@ -102,7 +103,7 @@ describe( 'DateTimePickerControl', () => {
|
|||
|
||||
const input = container.querySelector( 'input' );
|
||||
expect( input?.value ).toBe(
|
||||
dateTime.format( default24HourDateTimeFormat )
|
||||
formatDate( default24HourDateTimeFormat, dateTime )
|
||||
);
|
||||
} );
|
||||
|
||||
|
|
@ -119,10 +120,10 @@ describe( 'DateTimePickerControl', () => {
|
|||
const input = container.querySelector( 'input' );
|
||||
|
||||
expect( input?.value ).toBe(
|
||||
moment
|
||||
.utc( ambiguousISODateTimeString )
|
||||
.local()
|
||||
.format( default24HourDateTimeFormat )
|
||||
formatDate(
|
||||
default24HourDateTimeFormat,
|
||||
moment.utc( ambiguousISODateTimeString ).local()
|
||||
)
|
||||
);
|
||||
} );
|
||||
|
||||
|
|
@ -139,10 +140,10 @@ describe( 'DateTimePickerControl', () => {
|
|||
const input = container.querySelector( 'input' );
|
||||
|
||||
expect( input?.value ).toBe(
|
||||
moment
|
||||
.utc( unambiguousISODateTimeString )
|
||||
.local()
|
||||
.format( default24HourDateTimeFormat )
|
||||
formatDate(
|
||||
default24HourDateTimeFormat,
|
||||
moment.utc( unambiguousISODateTimeString ).local()
|
||||
)
|
||||
);
|
||||
} );
|
||||
|
||||
|
|
@ -158,7 +159,7 @@ describe( 'DateTimePickerControl', () => {
|
|||
|
||||
const input = container.querySelector( 'input' );
|
||||
expect( input?.value ).toBe(
|
||||
dateTime.format( default12HourDateTimeFormat )
|
||||
formatDate( default12HourDateTimeFormat, dateTime )
|
||||
);
|
||||
} );
|
||||
|
||||
|
|
@ -174,7 +175,7 @@ describe( 'DateTimePickerControl', () => {
|
|||
);
|
||||
|
||||
const input = container.querySelector( 'input' );
|
||||
expect( input?.value ).toBe( dateTime.format( dateTimeFormat ) );
|
||||
expect( input?.value ).toBe( formatDate( dateTimeFormat, dateTime ) );
|
||||
} );
|
||||
|
||||
it( 'should update the input when currentDate is changed', () => {
|
||||
|
|
@ -197,7 +198,7 @@ describe( 'DateTimePickerControl', () => {
|
|||
|
||||
const input = container.querySelector( 'input' );
|
||||
expect( input?.value ).toBe(
|
||||
updatedDateTime.format( default24HourDateTimeFormat )
|
||||
formatDate( default24HourDateTimeFormat, updatedDateTime )
|
||||
);
|
||||
} );
|
||||
|
||||
|
|
@ -305,9 +306,9 @@ describe( 'DateTimePickerControl', () => {
|
|||
// TypeError: Cannot read properties of null (reading 'createEvent')
|
||||
it( 'should call onChange when the input is changed', async () => {
|
||||
const originalDateTime = moment( '2022-09-15 02:30:40' );
|
||||
const dateTimeFormat = 'HH:mm, MM-DD-YYYY';
|
||||
const newDateTimeInputString = '02:04, 06-08-2010';
|
||||
const newDateTime = moment( newDateTimeInputString, dateTimeFormat );
|
||||
const dateTimeFormat = 'm-d-Y, H:i';
|
||||
const newDateTimeInputString = '06-08-2010, 02:04';
|
||||
const newDateTime = moment( newDateTimeInputString );
|
||||
const onChangeHandler = jest.fn();
|
||||
|
||||
const { container } = render(
|
||||
|
|
@ -335,6 +336,122 @@ describe( 'DateTimePickerControl', () => {
|
|||
);
|
||||
}, 10000 );
|
||||
|
||||
// We need to bump up the timeout for this test because:
|
||||
// 1. userEvent.type() is slow (see https://github.com/testing-library/user-event/issues/577)
|
||||
// 2. moment.js is slow
|
||||
// Otherwise, the following error can occur on slow machines (such as our CI), because Jest times out and starts
|
||||
// tearing down the component while test microtasks are still being executed
|
||||
// (see https://github.com/facebook/jest/issues/12670)
|
||||
// TypeError: Cannot read properties of null (reading 'createEvent')
|
||||
it( 'should force time to the start of the day if date only', async () => {
|
||||
const originalDateTime = moment( '09-15-2022' );
|
||||
const newDateTimeInputString = '06-08-2010';
|
||||
const newDateTime = moment( newDateTimeInputString ).startOf( 'day' );
|
||||
const onChangeHandler = jest.fn();
|
||||
|
||||
const { container } = render(
|
||||
<DateTimePickerControl
|
||||
isDateOnlyPicker
|
||||
timeForDateOnly={ 'start-of-day' }
|
||||
currentDate={ originalDateTime.toISOString() }
|
||||
onChange={ onChangeHandler }
|
||||
onChangeDebounceWait={ 10 }
|
||||
/>
|
||||
);
|
||||
|
||||
const input = container.querySelector( 'input' );
|
||||
userEvent.type(
|
||||
input!,
|
||||
'{selectall}{backspace}' + newDateTimeInputString
|
||||
);
|
||||
|
||||
await waitFor(
|
||||
() =>
|
||||
expect( onChangeHandler ).toHaveBeenLastCalledWith(
|
||||
newDateTime.toISOString(),
|
||||
true
|
||||
),
|
||||
{ timeout: 100 }
|
||||
);
|
||||
}, 10000 );
|
||||
|
||||
// We need to bump up the timeout for this test because:
|
||||
// 1. userEvent.type() is slow (see https://github.com/testing-library/user-event/issues/577)
|
||||
// 2. moment.js is slow
|
||||
// Otherwise, the following error can occur on slow machines (such as our CI), because Jest times out and starts
|
||||
// tearing down the component while test microtasks are still being executed
|
||||
// (see https://github.com/facebook/jest/issues/12670)
|
||||
// TypeError: Cannot read properties of null (reading 'createEvent')
|
||||
it( 'should force time to the end of the day if date only', async () => {
|
||||
const originalDateTime = moment( '09-15-2022' );
|
||||
const newDateTimeInputString = '06-08-2010';
|
||||
const newDateTime = moment( newDateTimeInputString ).endOf( 'day' );
|
||||
const onChangeHandler = jest.fn();
|
||||
|
||||
const { container } = render(
|
||||
<DateTimePickerControl
|
||||
isDateOnlyPicker
|
||||
timeForDateOnly={ 'end-of-day' }
|
||||
currentDate={ originalDateTime.toISOString() }
|
||||
onChange={ onChangeHandler }
|
||||
onChangeDebounceWait={ 10 }
|
||||
/>
|
||||
);
|
||||
|
||||
const input = container.querySelector( 'input' );
|
||||
userEvent.type(
|
||||
input!,
|
||||
'{selectall}{backspace}' + newDateTimeInputString
|
||||
);
|
||||
|
||||
await waitFor(
|
||||
() =>
|
||||
expect( onChangeHandler ).toHaveBeenLastCalledWith(
|
||||
newDateTime.toISOString(),
|
||||
true
|
||||
),
|
||||
{ timeout: 100 }
|
||||
);
|
||||
}, 10000 );
|
||||
|
||||
// We need to bump up the timeout for this test because:
|
||||
// 1. userEvent.type() is slow (see https://github.com/testing-library/user-event/issues/577)
|
||||
// 2. moment.js is slow
|
||||
// Otherwise, the following error can occur on slow machines (such as our CI), because Jest times out and starts
|
||||
// tearing down the component while test microtasks are still being executed
|
||||
// (see https://github.com/facebook/jest/issues/12670)
|
||||
// TypeError: Cannot read properties of null (reading 'createEvent')
|
||||
it( 'should not force time to the start of the day if not date only', async () => {
|
||||
const originalDateTime = moment( '09-15-2022' );
|
||||
const newDateTimeInputString = '06-08-2010 7:00';
|
||||
const newDateTime = moment( newDateTimeInputString );
|
||||
const onChangeHandler = jest.fn();
|
||||
|
||||
const { container } = render(
|
||||
<DateTimePickerControl
|
||||
timeForDateOnly={ 'start-of-day' }
|
||||
currentDate={ originalDateTime.toISOString() }
|
||||
onChange={ onChangeHandler }
|
||||
onChangeDebounceWait={ 10 }
|
||||
/>
|
||||
);
|
||||
|
||||
const input = container.querySelector( 'input' );
|
||||
userEvent.type(
|
||||
input!,
|
||||
'{selectall}{backspace}' + newDateTimeInputString
|
||||
);
|
||||
|
||||
await waitFor(
|
||||
() =>
|
||||
expect( onChangeHandler ).toHaveBeenLastCalledWith(
|
||||
newDateTime.toISOString(),
|
||||
true
|
||||
),
|
||||
{ timeout: 100 }
|
||||
);
|
||||
}, 10000 );
|
||||
|
||||
// We need to bump up the timeout for this test because:
|
||||
// 1. userEvent.type() is slow (see https://github.com/testing-library/user-event/issues/577)
|
||||
// 2. moment.js is slow
|
||||
|
|
@ -377,9 +494,9 @@ describe( 'DateTimePickerControl', () => {
|
|||
// TypeError: Cannot read properties of null (reading 'createEvent')
|
||||
it( 'should call the current onChange when the input is changed', async () => {
|
||||
const originalDateTime = moment( '2022-09-15 02:30:40' );
|
||||
const dateTimeFormat = 'HH:mm, MM-DD-YYYY';
|
||||
const newDateTimeInputString = '02:04, 06-08-2010';
|
||||
const newDateTime = moment( newDateTimeInputString, dateTimeFormat );
|
||||
const dateTimeFormat = 'm-d-Y, H:i';
|
||||
const newDateTimeInputString = '06-08-2010, 02:04';
|
||||
const newDateTime = moment( newDateTimeInputString );
|
||||
const originalOnChangeHandler = jest.fn();
|
||||
const newOnChangeHandler = jest.fn();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
# EnrichedLabel
|
||||
|
||||
Use `EnrichedLabel` to create a label with a tooltip.
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
<EnrichedLabel
|
||||
label="My label"
|
||||
helpDescription="My description."
|
||||
moreUrl="https://woocommerce.com"
|
||||
tooltipLinkCallback={ () => alert( 'Learn More clicked' ) }
|
||||
/>
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --------------------- | -------- | ------- | ----------------------------------------------------------------------- |
|
||||
| `helpDescription` | String | `null` | Text that will be shown in the tooltip. |
|
||||
| `label` | String | `null` | Text that will be shown in the label. |
|
||||
| `moreUrl` | String | `null` | URL that will be added to the link `Learn More`, shown after the label. |
|
||||
| `tooltipLinkCallback` | Function | `noop` | Callback that will be triggered after clicking the `Learn More` link. |
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button, Popover } from '@wordpress/components';
|
||||
import { createElement, Fragment, useState } from '@wordpress/element';
|
||||
import interpolateComponents from '@automattic/interpolate-components';
|
||||
import { Icon, help } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Link from '../link';
|
||||
|
||||
type EnrichedLabelProps = {
|
||||
helpDescription: string;
|
||||
label: string;
|
||||
moreUrl: string;
|
||||
tooltipLinkCallback: () => void;
|
||||
};
|
||||
|
||||
export const EnrichedLabel: React.FC< EnrichedLabelProps > = ( {
|
||||
helpDescription,
|
||||
label,
|
||||
moreUrl,
|
||||
tooltipLinkCallback,
|
||||
} ) => {
|
||||
const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
|
||||
|
||||
return (
|
||||
<>
|
||||
<span className="woocommerce-enriched-label__text">{ label }</span>
|
||||
{ helpDescription && (
|
||||
<div
|
||||
className="woocommerce-enriched-label__help-wrapper"
|
||||
onMouseLeave={ () => setIsPopoverVisible( false ) }
|
||||
>
|
||||
<Button
|
||||
label={ __( 'Help button', 'woocommerce' ) }
|
||||
onMouseEnter={ () => setIsPopoverVisible( true ) }
|
||||
>
|
||||
<Icon icon={ help } />
|
||||
</Button>
|
||||
|
||||
{ isPopoverVisible && (
|
||||
<Popover focusOnMount="container" position="top center">
|
||||
{ interpolateComponents( {
|
||||
mixedString:
|
||||
helpDescription +
|
||||
( moreUrl ? ' {{moreLink/}}' : '' ),
|
||||
components: {
|
||||
moreLink: moreUrl ? (
|
||||
<Link
|
||||
href={ moreUrl }
|
||||
target="_blank"
|
||||
type="external"
|
||||
onClick={ tooltipLinkCallback }
|
||||
>
|
||||
{ __(
|
||||
'Learn more',
|
||||
'woocommerce'
|
||||
) }
|
||||
</Link>
|
||||
) : (
|
||||
<div />
|
||||
),
|
||||
},
|
||||
} ) }
|
||||
</Popover>
|
||||
) }
|
||||
</div>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './enriched-label';
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { CheckboxControl } from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { EnrichedLabel } from '../';
|
||||
import './style.scss';
|
||||
|
||||
export default {
|
||||
title: 'WooCommerce Admin/components/EnrichedLabel',
|
||||
component: EnrichedLabel,
|
||||
argTypes: {
|
||||
tooltipLinkCallback: { action: 'tooltipLinkCallback' },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = ( args ) => (
|
||||
<EnrichedLabel
|
||||
label="My label"
|
||||
helpDescription="My description."
|
||||
moreUrl="https://woocommerce.com"
|
||||
tooltipLinkCallback={ () => {
|
||||
// eslint-disable-next-line no-alert
|
||||
window.alert( 'Learn More clicked' );
|
||||
} }
|
||||
{ ...args }
|
||||
/>
|
||||
);
|
||||
|
||||
export const Basic = Template.bind( {} );
|
||||
Basic.decorators = [
|
||||
( story, props ) => {
|
||||
return (
|
||||
<CheckboxControl
|
||||
className="woocommerce-enriched-label-story__checkbox-control"
|
||||
label={ story( { args: { ...props.args } } ) }
|
||||
onChange={ () => {} }
|
||||
/>
|
||||
);
|
||||
},
|
||||
];
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.woocommerce-enriched-label-story__checkbox-control {
|
||||
.woocommerce-enriched-label__help-wrapper {
|
||||
.components-popover {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.components-base-control__field {
|
||||
display: flex;
|
||||
.components-checkbox-control {
|
||||
&__label {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__input-container {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.woocommerce-enriched-label__text {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
.woocommerce-enriched-label__text {
|
||||
align-self: center;
|
||||
}
|
||||
.woocommerce-enriched-label__help-wrapper {
|
||||
.components-button {
|
||||
padding: 0;
|
||||
height: 28px;
|
||||
}
|
||||
.components-popover {
|
||||
.components-popover__content {
|
||||
min-width: 360px;
|
||||
> div {
|
||||
padding: $gap $gap-large;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,13 +5,25 @@
|
|||
left: 0;
|
||||
margin-top: $gap-smaller;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.components-popover.woocommerce-experimental-select-control__popover-menu {
|
||||
background: $studio-white;
|
||||
border: 1px solid $studio-gray-5;
|
||||
border-radius: 3px;
|
||||
z-index: 10;
|
||||
|
||||
display: none;
|
||||
&.is-open.has-results {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.woocommerce-experimental-select-control__popover-menu-container {
|
||||
margin: 0;
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
|
||||
> .category-field-dropdown__item:not( :first-child ) {
|
||||
.category-field-dropdown__item-content {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Popover } from '@wordpress/components';
|
||||
import classnames from 'classnames';
|
||||
import { createElement } from '@wordpress/element';
|
||||
import {
|
||||
createElement,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
createPortal,
|
||||
Children,
|
||||
} from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -22,21 +30,65 @@ export const Menu = ( {
|
|||
isOpen,
|
||||
className,
|
||||
}: MenuProps ) => {
|
||||
const [ boundingRect, setBoundingRect ] = useState< DOMRect >();
|
||||
const selectControlMenuRef = useRef< HTMLDivElement >( null );
|
||||
|
||||
useEffect( () => {
|
||||
if ( selectControlMenuRef.current?.parentElement ) {
|
||||
setBoundingRect(
|
||||
selectControlMenuRef.current.parentElement.getBoundingClientRect()
|
||||
);
|
||||
}
|
||||
}, [ selectControlMenuRef.current ] );
|
||||
|
||||
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
|
||||
/* Disabled because of the onmouseup on the ul element below. */
|
||||
return (
|
||||
<ul
|
||||
{ ...getMenuProps() }
|
||||
<div
|
||||
ref={ selectControlMenuRef }
|
||||
className={ classnames(
|
||||
'woocommerce-experimental-select-control__menu',
|
||||
className,
|
||||
{
|
||||
'is-open': isOpen,
|
||||
'has-results': Array.isArray( children )
|
||||
? children.length
|
||||
: Boolean( children ),
|
||||
}
|
||||
className
|
||||
) }
|
||||
>
|
||||
{ isOpen && children }
|
||||
</ul>
|
||||
<Popover
|
||||
// @ts-expect-error this prop does exist, see: https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/popover/index.tsx#L180.
|
||||
__unstableSlotName="woocommerce-select-control-menu"
|
||||
focusOnMount={ false }
|
||||
className={ classnames(
|
||||
'woocommerce-experimental-select-control__popover-menu',
|
||||
{
|
||||
'is-open': isOpen,
|
||||
'has-results': Children.count( children ) > 0,
|
||||
}
|
||||
) }
|
||||
position="bottom center"
|
||||
animate={ false }
|
||||
>
|
||||
<ul
|
||||
{ ...getMenuProps() }
|
||||
className="woocommerce-experimental-select-control__popover-menu-container"
|
||||
style={ {
|
||||
width: boundingRect?.width,
|
||||
} }
|
||||
onMouseUp={ ( e ) =>
|
||||
// Fix to prevent select control dropdown from closing when selecting within the Popover.
|
||||
e.stopPropagation()
|
||||
}
|
||||
>
|
||||
{ isOpen && children }
|
||||
</ul>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
|
||||
};
|
||||
|
||||
export const MenuSlot: React.FC = () =>
|
||||
createPortal(
|
||||
<div aria-live="off">
|
||||
{ /* @ts-expect-error name does exist on PopoverSlot see: https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/popover/index.tsx#L555 */ }
|
||||
<Popover.Slot name="woocommerce-select-control-menu" />
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
|
|
|
|||
|
|
@ -48,7 +48,10 @@ type SelectControlProps< ItemType > = {
|
|||
) => ItemType[];
|
||||
hasExternalTags?: boolean;
|
||||
multiple?: boolean;
|
||||
onInputChange?: ( value: string | undefined ) => void;
|
||||
onInputChange?: (
|
||||
value: string | undefined,
|
||||
changes: Partial< Omit< UseComboboxState< ItemType >, 'inputValue' > >
|
||||
) => void;
|
||||
onRemove?: ( item: ItemType ) => void;
|
||||
onSelect?: ( selected: ItemType ) => void;
|
||||
onFocus?: ( data: { inputValue: string } ) => void;
|
||||
|
|
@ -59,6 +62,7 @@ type SelectControlProps< ItemType > = {
|
|||
placeholder?: string;
|
||||
selected: ItemType | ItemType[] | null;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const selectControlStateChangeTypes = useCombobox.stateChangeTypes;
|
||||
|
|
@ -102,6 +106,7 @@ function SelectControl< ItemType = DefaultItemType >( {
|
|||
placeholder,
|
||||
selected,
|
||||
className,
|
||||
disabled,
|
||||
}: SelectControlProps< ItemType > ) {
|
||||
const [ isFocused, setIsFocused ] = useState( false );
|
||||
const [ inputValue, setInputValue ] = useState( '' );
|
||||
|
|
@ -150,16 +155,14 @@ function SelectControl< ItemType = DefaultItemType >( {
|
|||
initialSelectedItem: singleSelectedItem,
|
||||
inputValue,
|
||||
items: filteredItems,
|
||||
selectedItem: multiple ? null : undefined,
|
||||
selectedItem: multiple ? null : singleSelectedItem,
|
||||
itemToString: getItemLabel,
|
||||
onSelectedItemChange: ( { selectedItem } ) =>
|
||||
selectedItem && onSelect( selectedItem ),
|
||||
onInputValueChange: ( changes ) => {
|
||||
if ( changes.inputValue !== undefined ) {
|
||||
setInputValue( changes.inputValue );
|
||||
if ( changes.isOpen ) {
|
||||
onInputChange( changes.inputValue );
|
||||
}
|
||||
onInputValueChange: ( { inputValue: value, ...changes } ) => {
|
||||
if ( value !== undefined ) {
|
||||
setInputValue( value );
|
||||
onInputChange( value, changes );
|
||||
}
|
||||
},
|
||||
stateReducer: ( state, actionAndChanges ) => {
|
||||
|
|
@ -225,12 +228,14 @@ function SelectControl< ItemType = DefaultItemType >( {
|
|||
>
|
||||
{ /* Downshift's getLabelProps handles the necessary label attributes. */ }
|
||||
{ /* eslint-disable jsx-a11y/label-has-for */ }
|
||||
<label
|
||||
{ ...getLabelProps() }
|
||||
className="woocommerce-experimental-select-control__label"
|
||||
>
|
||||
{ label }
|
||||
</label>
|
||||
{ label && (
|
||||
<label
|
||||
{ ...getLabelProps() }
|
||||
className="woocommerce-experimental-select-control__label"
|
||||
>
|
||||
{ label }
|
||||
</label>
|
||||
) }
|
||||
{ /* eslint-enable jsx-a11y/label-has-for */ }
|
||||
<ComboBox
|
||||
comboBoxProps={ getComboboxProps() }
|
||||
|
|
@ -245,6 +250,7 @@ function SelectControl< ItemType = DefaultItemType >( {
|
|||
},
|
||||
onBlur: () => setIsFocused( false ),
|
||||
placeholder,
|
||||
disabled,
|
||||
} ) }
|
||||
>
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { CheckboxControl, Spinner } from '@wordpress/components';
|
||||
import {
|
||||
Button,
|
||||
CheckboxControl,
|
||||
Modal,
|
||||
SlotFillProvider,
|
||||
Spinner,
|
||||
} from '@wordpress/components';
|
||||
import React from 'react';
|
||||
import { createElement, useState } from '@wordpress/element';
|
||||
|
||||
|
|
@ -11,7 +17,7 @@ import { createElement, useState } from '@wordpress/element';
|
|||
import { SelectedType, DefaultItemType, getItemLabelType } from '../types';
|
||||
import { MenuItem } from '../menu-item';
|
||||
import { SelectControl, selectControlStateChangeTypes } from '../';
|
||||
import { Menu } from '../menu';
|
||||
import { Menu, MenuSlot } from '../menu';
|
||||
|
||||
const sampleItems = [
|
||||
{ value: 'apple', label: 'Apple' },
|
||||
|
|
@ -365,6 +371,45 @@ export const CustomItemType: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export const SingleWithinModalUsingBodyDropdownPlacement: React.FC = () => {
|
||||
const [ isOpen, setOpen ] = useState( true );
|
||||
const [ selected, setSelected ] =
|
||||
useState< SelectedType< DefaultItemType > >();
|
||||
const [ selectedTwo, setSelectedTwo ] =
|
||||
useState< SelectedType< DefaultItemType > >();
|
||||
|
||||
return (
|
||||
<SlotFillProvider>
|
||||
Selected: { JSON.stringify( selected ) }
|
||||
<Button onClick={ () => setOpen( true ) }>
|
||||
Show Dropdown in Modal
|
||||
</Button>
|
||||
{ isOpen && (
|
||||
<Modal
|
||||
title="Dropdown Modal"
|
||||
onRequestClose={ () => setOpen( false ) }
|
||||
>
|
||||
<SelectControl
|
||||
items={ sampleItems }
|
||||
label="Single value"
|
||||
selected={ selected }
|
||||
onSelect={ ( item ) => item && setSelected( item ) }
|
||||
onRemove={ () => setSelected( null ) }
|
||||
/>
|
||||
<SelectControl
|
||||
items={ sampleItems }
|
||||
label="Single value"
|
||||
selected={ selectedTwo }
|
||||
onSelect={ ( item ) => item && setSelectedTwo( item ) }
|
||||
onRemove={ () => setSelectedTwo( null ) }
|
||||
/>
|
||||
</Modal>
|
||||
) }
|
||||
<MenuSlot />
|
||||
</SlotFillProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'WooCommerce Admin/experimental/SelectControl',
|
||||
component: SelectControl,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,18 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { ChangeEvent } from 'react';
|
||||
import { createContext, useContext } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import {
|
||||
CheckboxProps,
|
||||
ConsumerInputProps,
|
||||
InputProps,
|
||||
SelectControlProps,
|
||||
} from './form';
|
||||
|
||||
export type FormErrors< Values > = {
|
||||
[ P in keyof Values ]?: FormErrors< Values[ P ] > | string;
|
||||
};
|
||||
|
|
@ -21,17 +30,18 @@ export type FormContext< Values extends Record< string, any > > = {
|
|||
setValue: ( name: string, value: any ) => void;
|
||||
setValues: ( valuesToSet: Values ) => void;
|
||||
handleSubmit: () => Promise< Values >;
|
||||
getCheckboxControlProps< Value extends Values[ keyof Values ] >(
|
||||
name: string,
|
||||
inputProps?: ConsumerInputProps< Values >
|
||||
): CheckboxProps< Values, Value >;
|
||||
getSelectControlProps< Value extends Values[ keyof Values ] >(
|
||||
name: string,
|
||||
inputProps?: ConsumerInputProps< Values >
|
||||
): SelectControlProps< Values, Value >;
|
||||
getInputProps< Value extends Values[ keyof Values ] >(
|
||||
name: string
|
||||
): {
|
||||
value: Value;
|
||||
checked: boolean;
|
||||
selected?: boolean;
|
||||
onChange: ( value: ChangeEvent< HTMLInputElement > | Value ) => void;
|
||||
onBlur: () => void;
|
||||
className: string | undefined;
|
||||
help: string | null | undefined;
|
||||
};
|
||||
name: string,
|
||||
inputProps?: ConsumerInputProps< Values >
|
||||
): InputProps< Values, Value >;
|
||||
isValidForm: boolean;
|
||||
resetForm: (
|
||||
initialValues: Values,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
import {
|
||||
cloneElement,
|
||||
useState,
|
||||
|
|
@ -17,6 +18,7 @@ import _setWith from 'lodash/setWith';
|
|||
import _get from 'lodash/get';
|
||||
import _clone from 'lodash/clone';
|
||||
import _isEqual from 'lodash/isEqual';
|
||||
import _omit from 'lodash/omit';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -87,6 +89,40 @@ export type FormRef< Values > = {
|
|||
resetForm: ( initialValues: Values ) => void;
|
||||
};
|
||||
|
||||
export type InputProps< Values, Value > = {
|
||||
value: Value;
|
||||
checked: boolean;
|
||||
selected?: boolean;
|
||||
onChange: (
|
||||
value: ChangeEvent< HTMLInputElement > | Values[ keyof Values ]
|
||||
) => void;
|
||||
onBlur: () => void;
|
||||
className: string | undefined;
|
||||
help: string | null | undefined;
|
||||
};
|
||||
|
||||
export type CheckboxProps< Values, Value > = Omit<
|
||||
InputProps< Values, Value >,
|
||||
'value' | 'selected'
|
||||
>;
|
||||
|
||||
export type SelectControlProps< Values, Value > = Omit<
|
||||
InputProps< Values, Value >,
|
||||
'value'
|
||||
> & {
|
||||
value: string | undefined;
|
||||
};
|
||||
|
||||
export type ConsumerInputProps< Values > = {
|
||||
className?: string;
|
||||
onChange?: (
|
||||
value: ChangeEvent< HTMLInputElement > | Values[ keyof Values ]
|
||||
) => void;
|
||||
onBlur?: () => void;
|
||||
[ key: string ]: unknown;
|
||||
sanitize?: ( value: Values[ keyof Values ] ) => Values[ keyof Values ];
|
||||
};
|
||||
|
||||
/**
|
||||
* A form component to handle form state and provide input helper props.
|
||||
*/
|
||||
|
|
@ -268,21 +304,19 @@ function FormComponent< Values extends Record< string, any > >(
|
|||
};
|
||||
|
||||
function getInputProps< Value = Values[ keyof Values ] >(
|
||||
name: string
|
||||
): {
|
||||
value: Value;
|
||||
checked: boolean;
|
||||
selected?: boolean;
|
||||
onChange: (
|
||||
value: ChangeEvent< HTMLInputElement > | Values[ keyof Values ]
|
||||
) => void;
|
||||
onBlur: () => void;
|
||||
className: string | undefined;
|
||||
help: string | null | undefined;
|
||||
} {
|
||||
name: string,
|
||||
inputProps: ConsumerInputProps< Values > = {}
|
||||
): InputProps< Values, Value > {
|
||||
const inputValue = _get( values, name );
|
||||
const isTouched = touched[ name ];
|
||||
const inputError = _get( errors, name );
|
||||
const {
|
||||
className: classNameProp,
|
||||
onBlur: onBlurProp,
|
||||
onChange: onChangeProp,
|
||||
sanitize,
|
||||
...additionalProps
|
||||
} = inputProps;
|
||||
|
||||
return {
|
||||
value: inputValue,
|
||||
|
|
@ -290,10 +324,50 @@ function FormComponent< Values extends Record< string, any > >(
|
|||
selected: inputValue,
|
||||
onChange: (
|
||||
value: ChangeEvent< HTMLInputElement > | Values[ keyof Values ]
|
||||
) => handleChange( name, value ),
|
||||
onBlur: () => handleBlur( name ),
|
||||
className: isTouched && inputError ? 'has-error' : undefined,
|
||||
) => {
|
||||
handleChange( name, value );
|
||||
if ( onChangeProp ) {
|
||||
onChangeProp( value );
|
||||
}
|
||||
},
|
||||
onBlur: () => {
|
||||
if ( sanitize ) {
|
||||
handleChange( name, sanitize( inputValue ) );
|
||||
}
|
||||
handleBlur( name );
|
||||
if ( onBlurProp ) {
|
||||
onBlurProp();
|
||||
}
|
||||
},
|
||||
className: classnames( classNameProp, {
|
||||
'has-error': isTouched && inputError,
|
||||
} ),
|
||||
help: isTouched ? ( inputError as string ) : null,
|
||||
...additionalProps,
|
||||
};
|
||||
}
|
||||
|
||||
function getCheckboxControlProps< Value = Values[ keyof Values ] >(
|
||||
name: string,
|
||||
inputProps: ConsumerInputProps< Values > = {}
|
||||
): CheckboxProps< Values, Value > {
|
||||
return _omit( getInputProps( name, inputProps ), [
|
||||
'selected',
|
||||
'value',
|
||||
] );
|
||||
}
|
||||
|
||||
function getSelectControlProps< Value = Values[ keyof Values ] >(
|
||||
name: string,
|
||||
inputProps: ConsumerInputProps< Values > = {}
|
||||
): SelectControlProps< Values, Value > {
|
||||
const selectControlProps = getInputProps( name, inputProps );
|
||||
return {
|
||||
...selectControlProps,
|
||||
value:
|
||||
selectControlProps.value === undefined
|
||||
? undefined
|
||||
: String( selectControlProps.value ),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -312,7 +386,9 @@ function FormComponent< Values extends Record< string, any > >(
|
|||
setValue,
|
||||
setValues,
|
||||
handleSubmit,
|
||||
getCheckboxControlProps,
|
||||
getInputProps,
|
||||
getSelectControlProps,
|
||||
isValidForm: ! Object.keys( errors ).length,
|
||||
resetForm,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ import {
|
|||
TextControl,
|
||||
} from '@wordpress/components';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { Form } from '@woocommerce/components';
|
||||
import { Form, DateTimePickerControl } from '@woocommerce/components';
|
||||
import moment from 'moment';
|
||||
|
||||
const validate = ( values ) => {
|
||||
const errors = {};
|
||||
|
|
@ -19,6 +20,9 @@ const validate = ( values ) => {
|
|||
if ( values.lastName.length < 3 ) {
|
||||
errors.lastName = 'Last name must be at least 3 characters';
|
||||
}
|
||||
if ( ! moment( values.date, moment.ISO_8601, true ).isValid() ) {
|
||||
errors.date = 'Invalid date';
|
||||
}
|
||||
return errors;
|
||||
};
|
||||
|
||||
|
|
@ -28,6 +32,7 @@ const initialValues = {
|
|||
firstName: '',
|
||||
lastName: '',
|
||||
select: '3',
|
||||
date: '2014-10-24T13:02',
|
||||
checkbox: true,
|
||||
radio: 'one',
|
||||
};
|
||||
|
|
@ -68,6 +73,13 @@ export const Basic = () => {
|
|||
] }
|
||||
{ ...getInputProps( 'select' ) }
|
||||
/>
|
||||
<DateTimePickerControl
|
||||
label="Date"
|
||||
dateTimeFormat="YYYY-MM-DD HH:mm"
|
||||
placeholder="Enter a date"
|
||||
currentDate={ values.date }
|
||||
{ ...getInputProps( 'date' ) }
|
||||
/>
|
||||
<CheckboxControl
|
||||
label="Checkbox"
|
||||
{ ...getInputProps( 'checkbox' ) }
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { TextControl } from '@wordpress/components';
|
|||
*/
|
||||
import { Form, useFormContext } from '../';
|
||||
import type { FormContext } from '../';
|
||||
import { DateTimePickerControl } from '../../date-time-picker-control';
|
||||
|
||||
const TestInputWithContext = () => {
|
||||
const formProps = useFormContext< { foo: string } >();
|
||||
|
|
@ -407,6 +408,68 @@ describe( 'Form', () => {
|
|||
);
|
||||
} );
|
||||
|
||||
// We need to bump up the timeout for this test because:
|
||||
// 1. userEvent.type() is slow (see https://github.com/testing-library/user-event/issues/577)
|
||||
// 2. moment.js is slow
|
||||
// Otherwise, the following error can occur on slow machines (such as our CI), because Jest times out and starts
|
||||
// tearing down the component while test microtasks are still being executed
|
||||
// (see https://github.com/facebook/jest/issues/12670)
|
||||
// TypeError: Cannot read properties of null (reading 'createEvent')
|
||||
it( 'should provide props that automatically handle DateTimePickerControl changes', async () => {
|
||||
const newDateTimeInputString = 'invalid input';
|
||||
|
||||
type TestData = { date: string };
|
||||
|
||||
const mockOnChange = jest.fn();
|
||||
|
||||
function validate(): Record< string, string > {
|
||||
return { date: 'This is a bad date' };
|
||||
}
|
||||
|
||||
const { container, queryByText } = render(
|
||||
<Form< TestData > onChange={ mockOnChange } validate={ validate }>
|
||||
{ ( { getInputProps, values }: FormContext< TestData > ) => {
|
||||
return (
|
||||
<DateTimePickerControl
|
||||
label={ 'Date' }
|
||||
onChangeDebounceWait={ 10 }
|
||||
currentDate={ values.date }
|
||||
{ ...getInputProps( 'date' ) }
|
||||
/>
|
||||
);
|
||||
} }
|
||||
</Form>
|
||||
);
|
||||
|
||||
const controlRoot = container.querySelector(
|
||||
'.woocommerce-date-time-picker-control'
|
||||
);
|
||||
|
||||
const input = controlRoot?.querySelector( 'input' );
|
||||
userEvent.type(
|
||||
input!,
|
||||
'{selectall}{backspace}' + newDateTimeInputString
|
||||
);
|
||||
fireEvent.blur( input! );
|
||||
|
||||
await waitFor(
|
||||
() => {
|
||||
expect( mockOnChange ).toHaveBeenLastCalledWith(
|
||||
{ name: 'date', value: newDateTimeInputString },
|
||||
{ date: newDateTimeInputString },
|
||||
false
|
||||
);
|
||||
expect( controlRoot?.classList.contains( 'has-error' ) ).toBe(
|
||||
true
|
||||
);
|
||||
expect(
|
||||
queryByText( 'This is a bad date' )
|
||||
).toBeInTheDocument();
|
||||
},
|
||||
{ timeout: 100 }
|
||||
);
|
||||
}, 10000 );
|
||||
|
||||
describe( 'FormContext', () => {
|
||||
it( 'should allow nested field to use useFormContext to set field value', async () => {
|
||||
const mockOnChange = jest.fn();
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { createElement, Fragment } from '@wordpress/element';
|
|||
*/
|
||||
import Pill from '../pill';
|
||||
import { SortableHandle, NonSortableItem } from '../sortable';
|
||||
import { ConditionalWrapper } from '../util/conditional-wrapper';
|
||||
import { ConditionalWrapper } from '../conditional-wrapper';
|
||||
|
||||
export type ImageGalleryItemProps = {
|
||||
id?: string;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ export { default as AnimationSlider } from './animation-slider';
|
|||
export { default as Chart } from './chart';
|
||||
export { default as ChartPlaceholder } from './chart/placeholder';
|
||||
export { CompareButton, CompareFilter } from './compare-filter';
|
||||
export { ConditionalWrapper as __experimentalConditionalWrapper } from './conditional-wrapper';
|
||||
export { default as Date } from './date';
|
||||
export { default as DateRangeFilterPicker } from './date-range-filter-picker';
|
||||
export { default as DateRange } from './calendar/date-range';
|
||||
|
|
@ -49,7 +50,10 @@ export {
|
|||
MenuItem as __experimentalSelectControlMenuItem,
|
||||
MenuItemProps as __experimentalSelectControlMenuItemProps,
|
||||
} from './experimental-select-control/menu-item';
|
||||
export { Menu as __experimentalSelectControlMenu } from './experimental-select-control/menu';
|
||||
export {
|
||||
Menu as __experimentalSelectControlMenu,
|
||||
MenuSlot as __experimentalSelectControlMenuSlot,
|
||||
} from './experimental-select-control/menu';
|
||||
export { default as ScrollTo } from './scroll-to';
|
||||
export { Sortable } from './sortable';
|
||||
export { ListItem } from './list-item';
|
||||
|
|
@ -71,11 +75,11 @@ export { default as Tag } from './tag';
|
|||
export { default as TextControl } from './text-control';
|
||||
export { default as TextControlWithAffixes } from './text-control-with-affixes';
|
||||
export { default as Timeline } from './timeline';
|
||||
export { Tooltip as __experimentalTooltip } from './tooltip';
|
||||
export { default as ViewMoreList } from './view-more-list';
|
||||
export { default as WebPreview } from './web-preview';
|
||||
export { Badge } from './badge';
|
||||
export { DynamicForm } from './dynamic-form';
|
||||
export { EnrichedLabel } from './enriched-label';
|
||||
export { default as TourKit } from './tour-kit';
|
||||
export * as TourKitTypes from './tour-kit/types';
|
||||
export { CollapsibleContent } from './collapsible-content';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { BaseControl, SlotFillProvider } from '@wordpress/components';
|
||||
import { BlockEditorProvider } from '@wordpress/block-editor';
|
||||
import { BlockInstance } from '@wordpress/blocks';
|
||||
import { SlotFillProvider } from '@wordpress/components';
|
||||
import { debounce } from 'lodash';
|
||||
import {
|
||||
createElement,
|
||||
|
|
@ -28,12 +28,14 @@ registerBlocks();
|
|||
|
||||
type RichTextEditorProps = {
|
||||
blocks: BlockInstance[];
|
||||
label?: string;
|
||||
onChange: ( changes: BlockInstance[] ) => void;
|
||||
entryId?: string;
|
||||
};
|
||||
|
||||
export const RichTextEditor: React.VFC< RichTextEditorProps > = ( {
|
||||
blocks,
|
||||
label,
|
||||
onChange,
|
||||
} ) => {
|
||||
const blocksRef = useRef( blocks );
|
||||
|
|
@ -61,6 +63,9 @@ export const RichTextEditor: React.VFC< RichTextEditorProps > = ( {
|
|||
|
||||
return (
|
||||
<div className="woocommerce-rich-text-editor">
|
||||
{ label && (
|
||||
<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>
|
||||
) }
|
||||
<SlotFillProvider>
|
||||
<BlockEditorProvider
|
||||
value={ blocksRef.current }
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
.woocommerce-rich-text-editor {
|
||||
border: 1px solid $gray-600;
|
||||
border-radius: 2px;
|
||||
background: $white;
|
||||
.woocommerce-rich-text-editor__writing-flow {
|
||||
border: 1px solid $gray-600;
|
||||
border-radius: 2px;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -46,11 +46,11 @@
|
|||
@import 'tag/style.scss';
|
||||
@import 'text-control/style.scss';
|
||||
@import 'text-control-with-affixes/style.scss';
|
||||
@import 'tooltip/style.scss';
|
||||
@import 'timeline/style.scss';
|
||||
@import 'view-more-list/style.scss';
|
||||
@import 'web-preview/style.scss';
|
||||
@import 'badge/style.scss';
|
||||
@import 'dynamic-form/style.scss';
|
||||
@import 'enriched-label/style.scss';
|
||||
@import 'tour-kit/style.scss';
|
||||
@import 'collapsible-content/style.scss';
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './tooltip';
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
import { Icon, warning } from '@wordpress/icons';
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Tooltip } from '../';
|
||||
|
||||
export const Basic = () => {
|
||||
return (
|
||||
<Tooltip
|
||||
text={
|
||||
<>
|
||||
This is a <strong>tooltip</strong>!
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const CustomIcon = () => {
|
||||
return (
|
||||
<Tooltip text="I'm a tooltip with a custom button icon">
|
||||
<Icon icon={ warning } />
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'WooCommerce Admin/experimental/Tooltip',
|
||||
component: Tooltip,
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.woocommerce-tooltip {
|
||||
display: inline-flex;
|
||||
|
||||
.woocommerce-tooltip__button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__text .components-popover__content {
|
||||
font-size: $default-font-size;
|
||||
padding: $gap;
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button, Popover } from '@wordpress/components';
|
||||
import { createElement, Fragment, useState } from '@wordpress/element';
|
||||
import { FocusEvent, KeyboardEvent } from 'react';
|
||||
import { Icon, help } from '@wordpress/icons';
|
||||
|
||||
type Position =
|
||||
| 'top left'
|
||||
| 'top right'
|
||||
| 'top center'
|
||||
| 'middle left'
|
||||
| 'middle right'
|
||||
| 'middle center'
|
||||
| 'bottom left'
|
||||
| 'bottom right'
|
||||
| 'bottom center';
|
||||
|
||||
type TooltipProps = {
|
||||
children?: JSX.Element | string;
|
||||
position?: Position;
|
||||
text: JSX.Element | string;
|
||||
};
|
||||
|
||||
export const Tooltip: React.FC< TooltipProps > = ( {
|
||||
children = <Icon icon={ help } />,
|
||||
position = 'top center',
|
||||
text,
|
||||
} ) => {
|
||||
const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="woocommerce-tooltip">
|
||||
<Button
|
||||
className="woocommerce-tooltip__button"
|
||||
onKeyDown={ (
|
||||
event: KeyboardEvent< HTMLButtonElement >
|
||||
) => {
|
||||
if ( event.key !== 'Enter' ) {
|
||||
return;
|
||||
}
|
||||
setIsPopoverVisible( true );
|
||||
} }
|
||||
onClick={ () => setIsPopoverVisible( ! isPopoverVisible ) }
|
||||
label={ __( 'Help', 'woocommerce' ) }
|
||||
>
|
||||
{ children }
|
||||
</Button>
|
||||
|
||||
{ isPopoverVisible && (
|
||||
<Popover
|
||||
focusOnMount="container"
|
||||
position={ position }
|
||||
className="woocommerce-tooltip__text"
|
||||
onFocusOutside={ ( event: FocusEvent ) => {
|
||||
if (
|
||||
event.relatedTarget?.classList.contains(
|
||||
'woocommerce-tooltip__button'
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setIsPopoverVisible( false );
|
||||
} }
|
||||
onKeyDown={ (
|
||||
event: KeyboardEvent< HTMLDivElement >
|
||||
) => {
|
||||
if ( event.key !== 'Escape' ) {
|
||||
return;
|
||||
}
|
||||
setIsPopoverVisible( false );
|
||||
} }
|
||||
>
|
||||
{ text }
|
||||
</Popover>
|
||||
) }
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './conditional-wrapper';
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Update product attribute type name and export the product attribute types.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: tweak
|
||||
|
||||
Retrieve product information using edit context
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
Significance: patch
|
||||
Type: dev
|
||||
|
||||
Merging trunk with local
|
||||
Migrate reports to TS
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: dev
|
||||
|
||||
Add missing shipping class property
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: major
|
||||
Type: update
|
||||
|
||||
Remove `Product` `date_on_sale_from` and `date_on_sale_to` properties. Use `date_on_sale_from_gmt` and `date_on_sale_to_gmt` instead.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue