From 73d661a3a221f684dd82b140a7ad4caaab75e53d Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 19 Mar 2024 10:24:31 -0700 Subject: [PATCH] chore(github-actions): use flexible options to update screenshots (#29044) Issue number: N/A --------- ## What is the current behavior? GitHub actions allow screenshots to be updated either by updating all the components or providing a component name. If a component name is given, then the screenshots will only be updated on `src/components/{component-name}`. This isn't ideal when wanting to update a specific path. ## What is the new behavior? - The script no longer strips out `ion-`. The developer needs to submit a valid component name or valid path. - The script no longer appends the value to `src/components/` - The script will run all instances of a component if only the name is given - The script will run tests within a given path ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information How to test: 1. Create a new branch based off this one 2. Make a style change 3. Push it to the new branch 4. Update the reference images using the new branch 5. This will show you all the options Recommended to test: - a component name (`chip`) - a path (`src/components/chip/test/a11y`) - a component that doesn't exist (`random-component`) - no provided component, leave the first input blank --- .../actions/test-core-screenshot/action.yml | 24 ++----------------- .github/workflows/update-screenshots.yml | 14 +++++++++++ 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml index a8f8749fa4..3ff2250ecd 100644 --- a/.github/workflows/actions/test-core-screenshot/action.yml +++ b/.github/workflows/actions/test-core-screenshot/action.yml @@ -25,29 +25,9 @@ runs: run: npm install shell: bash working-directory: ./core - - id: clean-component-name - name: Clean Component Name - # Remove `ion-` prefix from the `component` variable if it exists. - run: | - echo "component=$(echo ${{ inputs.component }} | sed 's/ion-//g')" >> $GITHUB_OUTPUT - shell: bash - - id: set-test-file - name: Set Test File - # Screenshots can be updated for all components or specified component(s). - # If the `component` variable is set, then the test has the option to - # - run all the file paths that are in a component folder. - # -- For example: if the `component` value is "item", then the test will run all the file paths that are in the "src/components/item" folder. - # -- For example: if the `component` value is "item chip", then the test will run all the file paths that are in the "src/components/item" and "src/components/chip" folders. - run: | - if [ -n "${{ steps.clean-component-name.outputs.component }}" ]; then - echo "testFile=\$(echo '${{ steps.clean-component-name.outputs.component }}' | awk '{for(i=1;i<=NF;i++) \$i=\"src/components/\"\$i}1')" >> $GITHUB_OUTPUT - else - echo "testFile=$(echo '')" >> $GITHUB_OUTPUT - fi - shell: bash - name: Test if: inputs.update != 'true' - run: npm run test.e2e.docker.ci ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} + run: npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} shell: bash working-directory: ./core - name: Test and Update @@ -69,7 +49,7 @@ runs: # which is why we not using the upload-archive # composite step here. run: | - npm run test.e2e.docker.ci ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots + npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots git add src/\*.png --force mkdir updated-screenshots cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml index bce7f324f2..5bb35c5905 100644 --- a/.github/workflows/update-screenshots.yml +++ b/.github/workflows/update-screenshots.yml @@ -3,6 +3,20 @@ name: 'Update Reference Screenshots' on: workflow_dispatch: inputs: + # Screenshots can be updated for all components or specified component(s). + # If the `component` variable is set, then the test has the option to + # - run all the instances of the specified component(s) in the `src/components` folder + # -- For example: if the `component` value is "item", then the following command will be: `npm run test.e2e item` + # - run the specified file path + # -- For example: if the `component` value is "src/components/item/test/basic", then the following command will be: `npm run test.e2e src/components/item/test/basic` + # - run multiple specified components based on the space-separated value + # -- For example: if the `component` value is "item basic", then the following command will be: `npm run test.e2e item basic` + # -- For example: if the `component` value is "src/components/item/test/basic src/components/item/test/a11y", then the following command will be: `npm run test.e2e src/components/item/test/basic src/components/item/test/a11y` + # + # If the `component` variable is not set, then the test will run all the instances of the components in the `src/components` folder. + # - For example: `npm run test.e2e` + # + # More common options can be found at the Playwright Command line page: https://playwright.dev/docs/test-cli component: description: 'What component(s) should be updated? (leave blank to update all or use a space-separated list for multiple components)' required: false