From aecbc92e30e0ad70ea385303e7a9bdb80dcc4995 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 26 Jan 2024 11:26:22 -0800 Subject: [PATCH] refactor(ga-screenshots): option to test single component (#27841) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Issue number: N/A --------- ## What is the current behavior? All the E2E tests are run when performing the "Update Reference Screenshots" GitHub actions. ![Screenshot 2024-01-25 at 1 31 15 PM](https://github.com/ionic-team/ionic-framework/assets/13530427/bc27156b-bd91-446a-8878-0a3d8676b103) ## What is the new behavior? - All E2E tests still run as default. - The GH action has the option to run a specific component instead of all tests. - A specified component has the option to run all tests that include the component's name in the file path - A specified component has the option to run all tests that are in the component's folder - If a single component is selected, then the default is to only run tests inside it's folder. ![Screenshot 2024-01-25 at 1 30 34 PM](https://github.com/ionic-team/ionic-framework/assets/13530427/0143fc0b-c7e7-4312-b7ea-e42a79dc7e09) ## 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 with the ion prefix (`ion-button`) - a component without the prefix (`button`) - a component that doesn't exist (`random-component`) - no provided component, leave the first input blank - the checkbox --------- Co-authored-by: Liam DeBeasi --- .../actions/test-core-screenshot/action.yml | 26 +++++++++++++++++-- .github/workflows/update-screenshots.yml | 6 +++++ 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml index 52596467d3..d9cf4bf6f5 100644 --- a/.github/workflows/actions/test-core-screenshot/action.yml +++ b/.github/workflows/actions/test-core-screenshot/action.yml @@ -7,6 +7,8 @@ inputs: description: 'Playwright total number of test shards (ex: 4)' update: description: 'Whether or not to update the reference snapshots' + component: + description: 'The component to update the reference snapshots' runs: using: 'composite' @@ -23,9 +25,29 @@ runs: run: npm install && npx playwright install && npx playwright install-deps 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 -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} + run: npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} shell: bash working-directory: ./core - name: Test and Update @@ -47,7 +69,7 @@ runs: # which is why we not using the upload-archive # composite step here. run: | - npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots + npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --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 7ff2c49901..b78a13c42a 100644 --- a/.github/workflows/update-screenshots.yml +++ b/.github/workflows/update-screenshots.yml @@ -2,6 +2,11 @@ name: 'Update Reference Screenshots' on: workflow_dispatch: + inputs: + component: + description: 'What component(s) should be updated? (leave blank to update all or use a space-separated list for multiple components)' + required: false + default: '' jobs: build-core: @@ -34,6 +39,7 @@ jobs: shard: ${{ matrix.shard }} totalShards: ${{ matrix.totalShards }} update: true + component: ${{ inputs.component }} update-reference-screenshots: runs-on: ubuntu-latest