chore(github-actions): use flexible options to update screenshots (#29044)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

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?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- 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

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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

.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

.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