diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 8c1041d7456..4ae1ea0a213 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -16,25 +16,25 @@ jobs: os: ['ubuntu-22.04', 'windows-latest'] runs-on: ${{ matrix.os }} steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Core Build + - name: πŸ—οΈ Core Build run: npm run build -- --ci shell: bash - - name: Validate Build + - name: πŸ”¬ Validate Build run: npm run test.dist shell: bash - - name: Validate Testing + - name: πŸ”¬ Validate Testing run: npm run test.testing shell: bash - - name: Upload Build Artifacts + - name: πŸ“€ Upload Build Artifacts if: ${{ matrix.os == 'ubuntu-22.04' }} uses: ./.github/workflows/actions/upload-archive with: diff --git a/.github/workflows/create-production-pr.yml b/.github/workflows/create-production-pr.yml index 0f9f728f57f..8bc49ac27f8 100644 --- a/.github/workflows/create-production-pr.yml +++ b/.github/workflows/create-production-pr.yml @@ -32,13 +32,13 @@ jobs: pull-requests: write steps: # Log the input from GitHub Actions for easy traceability - - name: Log GitHub Input + - name: πŸ”Log GitHub Input run: | echo "Version: ${{ inputs.version }}" shell: bash - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 with: # A depth of 0 gets the entire git history, which we'll want for things like checking all git history/tags. # We need git history to generate the changelog; however, we don't know how deep to go. @@ -46,19 +46,19 @@ jobs: fetch-depth: 0 ref: ${{ inputs.base }} - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies # TODO(STENCIL-927): Backport changes to the v3 branch - - name: Run Publish Preparation Script + - name: πŸ“¦Run Publish Preparation Script run: npm run release.ci.prepare -- --version ${{ inputs.version }} shell: bash - - name: Log Generated Changes + - name: πŸ“ Log Generated Changes run: git --no-pager diff shell: bash - - name: Generate Version String and Branch Name + - name: 🏷️ Generate Version String and Branch Name id: name_gen run: | VERSION_STR=$(jq '.version' package.json | sed s/\"//g) @@ -66,14 +66,14 @@ jobs: echo "BRANCH_NAME=release/$VERSION_STR-run-${{ github.run_number }}-${{ github.run_attempt }}" >> "$GITHUB_OUTPUT" shell: bash - - name: Print Version String and Branch Name + - name: πŸ–¨οΈ Print Version String and Branch Name run: | echo Version: ${{ steps.name_gen.outputs.VERSION_STR }} echo Branch Name: ${{ steps.name_gen.outputs.BRANCH_NAME }} shell: bash - - name: Create the Pull Request - uses: peter-evans/create-pull-request@6d6857d36972b65feb161a90e484f2984215f83e # v6.0.5 + - name: πŸ“€ Create the Pull Request + uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8 with: # create a new pull request using the specified base branch base: ${{ inputs.base }} diff --git a/.github/workflows/lint-and-format.yml b/.github/workflows/lint-and-format.yml index 299f384e976..37abe43e384 100644 --- a/.github/workflows/lint-and-format.yml +++ b/.github/workflows/lint-and-format.yml @@ -14,18 +14,18 @@ jobs: name: Check runs-on: 'ubuntu-22.04' steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: ESLint + - name: πŸ–ŒοΈ ESLint run: npm run lint - - name: Prettier Check + - name: πŸ–ŒοΈ Prettier Check run: npm run prettier.dry-run shell: bash - - name: Spellcheck + - name: πŸ“š Spellcheck run: npm run spellcheck diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 939712874a6..8e58ccec5ab 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -19,54 +19,54 @@ permissions: jobs: build_core: - name: Build + name: πŸ—οΈ Build uses: ./.github/workflows/build.yml lint_and_format: - name: Lint and Format + name: πŸ–ŒοΈ Lint and Format uses: ./.github/workflows/lint-and-format.yml type_tests: - name: Type Tests + name: πŸ§ͺ Type Tests needs: [build_core] uses: ./.github/workflows/test-types.yml analysis_tests: - name: Analysis Tests + name: πŸ”¬ Analysis Tests needs: [build_core] uses: ./.github/workflows/test-analysis.yml docs_build_tests: - name: Docs Build Tests + name: πŸ—οΈ Docs Build Tests needs: [build_core] uses: ./.github/workflows/test-docs-build.yml bundler_tests: - name: Bundler Tests + name: πŸ§ͺ Bundler Tests needs: [build_core] uses: ./.github/workflows/test-bundlers.yml copytask_tests: - name: Copy Task Tests + name: πŸ§ͺ Copy Task Tests needs: [build_core] uses: ./.github/workflows/test-copytask.yml component_starter_tests: - name: Component Starter Smoke Test + name: πŸ§ͺ Component Starter Smoke Test needs: [build_core] uses: ./.github/workflows/test-component-starter.yml e2e_tests: - name: E2E Tests + name: πŸ§ͺ E2E Tests needs: [build_core] uses: ./.github/workflows/test-e2e.yml unit_tests: - name: Unit Tests + name: πŸ§ͺ Unit Tests needs: [build_core] uses: ./.github/workflows/test-unit.yml wdio_tests: - name: WebdriverIO Tests + name: πŸ§ͺ WebdriverIO Tests needs: [build_core] uses: ./.github/workflows/test-wdio.yml diff --git a/.github/workflows/release-dev.yml b/.github/workflows/release-dev.yml index d3d466932cf..3ed2d2f9f0b 100644 --- a/.github/workflows/release-dev.yml +++ b/.github/workflows/release-dev.yml @@ -25,20 +25,20 @@ jobs: outputs: dev-version: ${{ steps.get-dev-version.outputs.DEV_VERSION }} steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: . filename: stencil-core-build.zip - - name: Get Version + - name: 🏷️ Get Version id: get-dev-version run: | # A unique string to publish Stencil under @@ -56,15 +56,15 @@ jobs: shell: bash release-stencil-dev-build: - name: Publish Dev Build + name: πŸ“¦ Publish Dev Build needs: [get-dev-version, build_core] runs-on: ubuntu-22.04 permissions: contents: read id-token: write steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - uses: ./.github/workflows/actions/publish-npm with: tag: dev diff --git a/.github/workflows/release-nightly.yml b/.github/workflows/release-nightly.yml index 900eeee4ea6..e6319b0ae4e 100644 --- a/.github/workflows/release-nightly.yml +++ b/.github/workflows/release-nightly.yml @@ -18,26 +18,26 @@ jobs: uses: ./.github/workflows/build.yml get-nightly-version: - name: Get Nightly Build Version + name: πŸŒ™Get Nightly Build Version needs: [build_core] runs-on: ubuntu-22.04 outputs: nightly-version: ${{ steps.get-nightly-version.outputs.NIGHTLY_VERSION }} steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: . filename: stencil-core-build.zip - - name: Get Version + - name: 🏷️ Get Version id: get-nightly-version run: | # A unique string to publish Stencil under @@ -65,8 +65,8 @@ jobs: contents: read id-token: write steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - uses: ./.github/workflows/actions/publish-npm with: tag: nightly diff --git a/.github/workflows/release-production.yml b/.github/workflows/release-production.yml index b6488963971..3bc15f50e13 100644 --- a/.github/workflows/release-production.yml +++ b/.github/workflows/release-production.yml @@ -29,21 +29,21 @@ jobs: id-token: write steps: # Log the input from GitHub Actions for easy traceability - - name: Log GitHub Workflow UI Input + - name: πŸ”Log GitHub Workflow UI Input run: | echo "Tag: ${{ inputs.tag }}" echo "Base Branch: ${{ inputs.base }}" shell: bash - - name: Verify that the 'latest' tag is applied only to the 'main' branch + - name: 🏷️ Verify that the 'latest' tag is applied only to the 'main' branch run: | echo "The 'latest' tag can only be published from the 'main' branch. Exiting." exit 1 shell: bash if: ${{ inputs.base != 'main' && inputs.tag == 'latest' }} - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 with: # A depth of 0 gets the entire git history, which we'll want for things like checking all git history/tags. # We need git history to generate the changelog; however, we don't know how deep to go. @@ -51,16 +51,16 @@ jobs: fetch-depth: 0 ref: ${{ inputs.base }} - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Prepare NPM Token + - name: πŸ“¦ Prepare NPM Token run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc shell: bash env: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - - name: Run Publish Scripts + - name: πŸ“¦ Run Publish Scripts # pass the generated version number instead of the input, since we've already incremented it in the prerelease # step run: npm run release.ci -- --tag ${{ inputs.tag }} diff --git a/.github/workflows/test-analysis.yml b/.github/workflows/test-analysis.yml index 49b903365ef..916e085b7b4 100644 --- a/.github/workflows/test-analysis.yml +++ b/.github/workflows/test-analysis.yml @@ -18,28 +18,28 @@ jobs: os: ['ubuntu-latest', 'windows-latest'] runs-on: ${{ matrix.os }} steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Use Node ${{ matrix.node }} - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 + - name: 🟒 Use Node ${{ matrix.node }} + uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version: ${{ matrix.node }} cache: 'npm' - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: . filename: stencil-core-build.zip - - name: Analysis Tests + - name: πŸ”¬ Analysis Tests run: npm run test.analysis shell: bash - - name: Check Git Context + - name: πŸ” Check Git Context uses: ./.github/workflows/actions/check-git-context diff --git a/.github/workflows/test-bundlers.yml b/.github/workflows/test-bundlers.yml index 3a80a6cbd30..00a0a9bed32 100644 --- a/.github/workflows/test-bundlers.yml +++ b/.github/workflows/test-bundlers.yml @@ -13,22 +13,70 @@ jobs: name: Verify Bundlers runs-on: 'ubuntu-22.04' steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: . filename: stencil-core-build.zip - - name: Bundler Tests - run: npm run test.bundlers + - name: 🧲 Install Puppeteer and Download Chrome shell: bash + run: | + # Reinstall puppeteer to ensure puppeteer-core is properly installed + # (sometimes npm ci doesn't install peer deps correctly in CI) + npm install --no-save puppeteer + # Download the Chrome binary + npx puppeteer browsers install chrome - - name: Check Git Context + - name: 🧱 Build bundler fixtures (component-lib + Vite app) + shell: bash + run: | + cd test/bundler + npm run build.component-lib + npm run build.vite + + # Compile the TS bundler spec to JS to avoid installing ts-jest in CI + - name: πŸ› οΈ Compile bundler spec to JS + shell: bash + run: | + cd test/bundler + cat > tsconfig.test.json << 'EOF' + { + "compilerOptions": { + "module": "commonjs", + "target": "ES2020", + "lib": ["ES2020", "DOM"], + "esModuleInterop": true, + "skipLibCheck": true, + "outDir": "./dist-spec" + }, + "include": [ + "vite-bundle-test/vite-bundle.spec.ts" + ] + } + EOF + npx tsc -p tsconfig.test.json + + - name: πŸ§ͺ Bundler Tests + shell: bash + run: | + cd test/bundler + # Create a minimal Jest config that does not use ts-jest + cat > jest.config.ci.js << 'EOF' + module.exports = { + testEnvironment: 'node', + testMatch: ['/dist-spec/vite-bundle.spec.js'], + }; + EOF + # Run Jest from repo root against compiled JS using CI config + node ../../node_modules/jest/bin/jest.js --config=jest.config.ci.js --testTimeout=30000 + + - name: πŸ” Check Git Context uses: ./.github/workflows/actions/check-git-context diff --git a/.github/workflows/test-component-starter.yml b/.github/workflows/test-component-starter.yml index 2747d952474..fe5ba43f604 100644 --- a/.github/workflows/test-component-starter.yml +++ b/.github/workflows/test-component-starter.yml @@ -19,19 +19,19 @@ jobs: os: ['ubuntu-latest', 'windows-latest'] runs-on: ${{ matrix.os }} steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Use Node ${{ matrix.node }} - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 + - name: 🟒 Use Node ${{ matrix.node }} + uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version: ${{ matrix.node }} cache: 'npm' - - name: Create Pack Directory + - name: πŸ“¦ Create Pack Directory # `mkdir` will fail if this directory already exists. # in the next steps, we'll immediately put the packed build archive in this directory. # between that and excluding `*.tgz` files in `.gitignore`, that _should_ make it safe enough for us to later @@ -39,30 +39,30 @@ jobs: run: mkdir stencil-pack-destination shell: bash - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: ./stencil-pack-destination filename: stencil-core-build.zip - - name: Copy package.json + - name: πŸ“„ Copy package.json # need `package.json` in order to run `npm pack` run: cp package.json ./stencil-pack-destination shell: bash - - name: Copy bin + - name: πŸ“„ Copy bin # `bin/` isn't a part of the compiled output (therefore not in the build archive). # we need this entrypoint for stencil to run. run: cp -R bin ./stencil-pack-destination shell: bash - - name: Remove node_modules + - name: πŸ“¦ Remove node_modules # clear out our local `node_modules/` so that they're not linked to in any way when `npm pack` is run run: rm -rf node_modules/ shell: bash - - name: Pack the Build Archive + - name: πŸ“¦ Pack the Build Archive run: npm pack working-directory: ./stencil-pack-destination shell: bash @@ -75,41 +75,41 @@ jobs: run: mv $(ls -t stencil-pack-destination/*.tgz | head -1) stencil-eval.tgz shell: bash - - name: Initialize Component Starter + - name: πŸ“¦ Initialize Component Starter run: npm init stencil component tmp-component-starter shell: bash - - name: Install Component Starter Dependencies + - name: πŸ•ΈοΈ Install Component Starter Dependencies run: npm install working-directory: ./tmp-component-starter shell: bash - - name: Install Stencil Eval + - name: πŸ•ΈοΈ Install Stencil Eval run: npm i ../stencil-eval.tgz working-directory: ./tmp-component-starter shell: bash - - name: Install Jest + - name: πŸ•ΈοΈ Install Jest run: npm install --dev-dependencies jest@29 jest-cli@29 @types/jest@29 - - name: Build Starter Project + - name: πŸ—οΈ Build Starter Project run: npm run build working-directory: ./tmp-component-starter shell: bash - - name: Test Starter Project + - name: πŸ§ͺ Test Starter Project run: npm run test -- --no-build # the project was just built, don't build it again working-directory: ./tmp-component-starter shell: bash - - name: Test npx stencil generate + - name: πŸ§ͺ Test npx stencil generate # `stencil generate` doesn't have a way to skip file generation, so we provide it with a component name and run # `echo` with a newline to select "all files" to generate (and use -e to interpret that backslash for a newline) run: echo -e '\n' | npm run generate -- hello-world working-directory: ./tmp-component-starter shell: bash - - name: Verify Files Exist + - name: πŸ” Verify Files Exist run: | file_list=( src/components/hello-world/hello-world.tsx @@ -128,7 +128,7 @@ jobs: working-directory: ./tmp-component-starter shell: bash - - name: Test Generated Files + - name: πŸ§ͺ Test Generated Files run: npm run test working-directory: ./tmp-component-starter shell: bash diff --git a/.github/workflows/test-copytask.yml b/.github/workflows/test-copytask.yml index 9ee47f28eb8..759abcc4564 100644 --- a/.github/workflows/test-copytask.yml +++ b/.github/workflows/test-copytask.yml @@ -13,22 +13,22 @@ jobs: name: Verify Copy Task runs-on: 'ubuntu-22.04' steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: . filename: stencil-core-build.zip - - name: Bundler Tests + - name: πŸ§ͺ Bundler Tests run: npm run test.copytask shell: bash - - name: Check Git Context + - name: πŸ” Check Git Context uses: ./.github/workflows/actions/check-git-context diff --git a/.github/workflows/test-docs-build.yml b/.github/workflows/test-docs-build.yml index 07c329d4e93..cb2b70ffda8 100644 --- a/.github/workflows/test-docs-build.yml +++ b/.github/workflows/test-docs-build.yml @@ -18,28 +18,28 @@ jobs: os: ['ubuntu-latest', 'windows-latest'] runs-on: ${{ matrix.os }} steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Use Node ${{ matrix.node }} + - name: 🟒 Use Node ${{ matrix.node }} uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 with: node-version: ${{ matrix.node }} cache: 'npm' - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: . filename: stencil-core-build.zip - - name: Docs Build Tests + - name: πŸ—οΈ Docs Build Tests run: npm run test.docs-build shell: bash - - name: Check Git Context + - name: πŸ” Check Git Context uses: ./.github/workflows/actions/check-git-context diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml index de697324138..30d899511a6 100644 --- a/.github/workflows/test-e2e.yml +++ b/.github/workflows/test-e2e.yml @@ -18,31 +18,31 @@ jobs: os: ['ubuntu-latest', 'windows-latest'] runs-on: ${{ matrix.os }} steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Use Node ${{ matrix.node }} - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 + - name: 🟒 Use Node ${{ matrix.node }} + uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version: ${{ matrix.node }} cache: 'npm' - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: . filename: stencil-core-build.zip - - name: End-to-End Tests - uses: nick-fields/retry@7152eba30c6575329ac0576536151aca5a72780e # v3.0.0 + - name: πŸ§ͺ End-to-End Tests + uses: nick-fields/retry@ce71cc2ab81d554ebbe88c79ab5975992d79ba08 # v3.0.2 with: timeout_minutes: 10 max_attempts: 3 command: npm run test.end-to-end -- --ci - - name: Check Git Context + - name: πŸ” Check Git Context uses: ./.github/workflows/actions/check-git-context diff --git a/.github/workflows/test-types.yml b/.github/workflows/test-types.yml index a8a6cfd1989..5f1fc4d3c31 100644 --- a/.github/workflows/test-types.yml +++ b/.github/workflows/test-types.yml @@ -17,25 +17,25 @@ jobs: node: ['18', '20', '22'] runs-on: ubuntu-latest steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Use Node ${{ matrix.node }} - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 + - name: 🟒 Use Node ${{ matrix.node }} + uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version: ${{ matrix.node }} cache: 'npm' - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: . filename: stencil-core-build.zip - - name: Type Tests + - name: πŸ§ͺ Type Tests run: npm run test.type-tests shell: bash diff --git a/.github/workflows/test-unit.yml b/.github/workflows/test-unit.yml index 7c4090329b4..f027c0eaafc 100644 --- a/.github/workflows/test-unit.yml +++ b/.github/workflows/test-unit.yml @@ -18,28 +18,28 @@ jobs: os: ['ubuntu-latest', 'windows-latest'] runs-on: ${{ matrix.os }} steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Use Node ${{ matrix.node }} - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 + - name: 🟒 Use Node ${{ matrix.node }} + uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version: ${{ matrix.node }} cache: 'npm' - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: . filename: stencil-core-build.zip - - name: Unit Tests + - name: πŸ§ͺ Unit Tests run: npm run test.jest shell: bash - - name: Check Git Context + - name: πŸ” Check Git Context uses: ./.github/workflows/actions/check-git-context diff --git a/.github/workflows/test-wdio.yml b/.github/workflows/test-wdio.yml index 80f25aef4da..9fb6083dda5 100644 --- a/.github/workflows/test-wdio.yml +++ b/.github/workflows/test-wdio.yml @@ -18,31 +18,31 @@ jobs: browser: [CHROME] steps: - - name: Checkout Code - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: πŸ“₯ Checkout Code + uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - - name: Get Core Dependencies + - name: πŸ•ΈοΈ Get Core Dependencies uses: ./.github/workflows/actions/get-core-dependencies - - name: Use Node Version from Volta - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 + - name: 🟒 Use Node Version from Volta + uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: # pull the version to use from the volta key in package.json node-version-file: './test/wdio/package.json' cache: 'npm' - - name: Download Build Archive + - name: πŸ“₯ Download Build Archive uses: ./.github/workflows/actions/download-archive with: name: stencil-core path: . filename: stencil-core-build.zip - - name: Run WebdriverIO Component Tests + - name: πŸ§ͺ Run WebdriverIO Component Tests run: npm run test.wdio shell: bash env: BROWSER: ${{ matrix.browser }} - - name: Check Git Context + - name: πŸ” Check Git Context uses: ./.github/workflows/actions/check-git-context diff --git a/package.json b/package.json index ce1659331a9..6d266cdbd50 100644 --- a/package.json +++ b/package.json @@ -121,6 +121,7 @@ "test.dist": "npm run ts scripts/index.ts -- --validate-build", "test.end-to-end": "cd test/end-to-end && npm ci && npm test && npm run test.dist", "test.jest": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js", + "test.jest.lowmem": "node --max-old-space-size=8192 --experimental-vm-modules ./node_modules/jest/bin/jest.js --maxWorkers=50%", "test.type-tests": "cd ./test/wdio && npm install && npm run build.test-sibling && npm run build.main && cd ../../ && tsc -p test/type-tests/tsconfig.json", "test.wdio": "cd test/wdio && npm ci && npm run test", "test.wdio.testOnly": "cd test/wdio && npm ci && npm run wdio", diff --git a/test/bundler/.gitignore b/test/bundler/.gitignore new file mode 100644 index 00000000000..09e1c2032cd --- /dev/null +++ b/test/bundler/.gitignore @@ -0,0 +1,5 @@ +# CI-generated artifacts +dist-spec/ +jest.config.ci.js +tsconfig.test.json + diff --git a/test/bundler/component-library/package.json b/test/bundler/component-library/package.json index 2f1fb0d2833..2a1693d54f4 100644 --- a/test/bundler/component-library/package.json +++ b/test/bundler/component-library/package.json @@ -16,7 +16,7 @@ ], "scripts": { "build": "node ../../../bin/stencil build --docs", - "clean": "rm -rf dist loader www", + "clean": "node -e \"const fs=require('fs'); ['dist','loader','www'].forEach(d=>{try{fs.rmSync(d,{recursive:true,force:true})}catch(e){}})\"", "start": "node ../../../bin/stencil build --dev --watch --serve" }, "license": "MIT" diff --git a/test/bundler/jest.config.js b/test/bundler/jest.config.js new file mode 100644 index 00000000000..07f0794cada --- /dev/null +++ b/test/bundler/jest.config.js @@ -0,0 +1,16 @@ +module.exports = { + preset: 'ts-jest', + testEnvironment: 'node', + testMatch: ['**/*.spec.ts'], + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], + testTimeout: 30000, + globals: { + 'ts-jest': { + tsconfig: { + module: 'commonjs', + esModuleInterop: true, + allowSyntheticDefaultImports: true, + }, + }, + }, +}; diff --git a/test/bundler/karma-stencil-utils.ts b/test/bundler/karma-stencil-utils.ts deleted file mode 100644 index bca9c3cab0c..00000000000 --- a/test/bundler/karma-stencil-utils.ts +++ /dev/null @@ -1,218 +0,0 @@ -const path = require('path'); - -// we must use a relative path here instead of tsconfig#paths -// see https://github.com/monounity/karma-typescript/issues/315 -import * as d from '../../internal'; - -/** - * Utilities for creating a test bed to execute HTML rendering tests against - */ -type DomTestUtilities = { - /** - * Create and render the HTML at the provided url - * @param url a location on disk of a file containing the HTML to load - * @returns the fully rendered HTML to test against - */ - setupDom: (url: string) => Promise; - /** - * Clears the test bed of any existing HTML - */ - tearDownDom: () => void; -}; - -/** - * Create setup and teardown methods for DOM based tests. All DOM based tests are created within an application - * 'test bed' that is managed by this function. - * @param document a `Document` compliant entity where tests may be rendered - * @returns utilities to set up the DOM and tear it down within the test bed - */ -export function setupDomTests(document: Document): DomTestUtilities { - /** - * All HTML will be rendered as a child of the test bed - get it from the current document (and create it, if it - * doesn't exist) so that it is available for all future tests. - */ - let testBed = document.getElementById('test-app'); - if (!testBed) { - testBed = document.createElement('div'); - testBed.id = 'test-app'; - document.body.appendChild(testBed); - } - - /** - * @see {@link DomTestUtilities#setupDom} - */ - function setupDom(url: string): Promise { - const testElement = document.createElement('div'); - testElement.className = 'test-spec'; - - if (!testBed) { - console.error('The Stencil/Karma test bed could not be found.'); - process.exit(1); - } - - testBed.appendChild(testElement); - - return renderTest(url, testElement); - } - - /** - * Render HTML for executing tests against. - * @param url the location on disk containing the HTML to load - * @param testElement a parent HTML element to place test code in - * @returns the fully rendered HTML to test against - */ - function renderTest(url: string, testElement: HTMLElement): Promise { - // 'base' is the directory that karma will serve all assets from - url = path.join('base', url); - - return new Promise((resolve, reject) => { - /** - * Callback to be invoked following the retrieval of the file containing the HTML to load - * @param this the `XMLHttpRequest` instance that requested the HTML - */ - const indexHtmlLoaded = function (this: XMLHttpRequest): void { - if (this.status !== 200) { - reject(`404: ${url}`); - return; - } - - testElement.innerHTML = this.responseText; - - /** - * Re-generate script tags that are embedded in the loaded HTML file. - * - * Doing so allows JS files to be loaded (via script tags), when the HTML is served, without having to configure - * Karma to load the JS explicitly. This is done by adding the host/port combination to existing `src` - * attributes. - * - * Before: - * ```html - * - * ``` - * - * After: - * ```html - * - * ``` - */ - const parseAndRebuildScriptTags = () => { - const tempScripts: NodeListOf = testElement.querySelectorAll('script'); - for (let i = 0; i < tempScripts.length; i++) { - const script: HTMLScriptElement = document.createElement('script'); - if (tempScripts[i].src) { - script.src = tempScripts[i].src; - } - if (tempScripts[i].hasAttribute('nomodule')) { - script.setAttribute('nomodule', ''); - } - if (tempScripts[i].hasAttribute('type')) { - const typeAttribute = tempScripts[i].getAttribute('type'); - if (typeof typeAttribute === 'string') { - // older DOM implementations would return an empty string to designate `null` - // here, we interpret the empty string to be a valid value - script.setAttribute('type', typeAttribute); - } - } - script.innerHTML = tempScripts[i].innerHTML; - - if (tempScripts[i].parentNode) { - // the scripts were found by querying a common parent node, which _should_ still exist - tempScripts[i].parentNode!.insertBefore(script, tempScripts[i]); - tempScripts[i].parentNode!.removeChild(tempScripts[i]); - } else { - // if for some reason the parent node no longer exists, something's manipulated it while we were parsing - // the script tags. this can lead to undesirable & hard to debug behavior, fail. - reject('the parent node for script tags no longer exists. exiting.'); - } - } - }; - - parseAndRebuildScriptTags(); - - /** - * Create a listener for Stencil's "appload" event to signal to the test framework the application and its - * children have finished loading - */ - const onAppLoad = () => { - window.removeEventListener('appload', onAppLoad); - allReady().then(() => { - resolve(testElement); - }); - }; - window.addEventListener('appload', onAppLoad); - }; - - /** - * Ensure that all `onComponentReady` functions on Stencil elements in the DOM have been called before rendering - * @returns an array of promises, one for each `onComponentReady` found on a Stencil component - */ - const allReady = (): Promise => { - const promises: Promise[] = []; - - /** - * Function that recursively traverses the DOM, looking for Stencil components. Any `componentOnReady` - * functions found on Stencil components are pushed to a buffer to be run after traversing the entire DOM. - * @param elm the current element being inspected - */ - const waitForDidLoad = (elm: Element): void => { - if (elm != null && elm.nodeType === 1) { - // the element exists and is an `ELEMENT_NODE` - for (let i = 0; i < elm.children.length; i++) { - const childElm = elm.children[i]; - if (childElm.tagName.includes('-') && isHtmlStencilElement(childElm)) { - promises.push(childElm.componentOnReady()); - } - waitForDidLoad(childElm); - } - } - }; - - // recursively walk the DOM to find all `onComponentReady` functions - waitForDidLoad(window.document.documentElement); - - return Promise.all(promises).catch((e) => console.error(e)); - }; - - try { - const testHtmlRequest = new XMLHttpRequest(); - testHtmlRequest.addEventListener('load', indexHtmlLoaded); - testHtmlRequest.addEventListener('error', (err) => { - console.error('error testHtmlRequest.addEventListener', err); - reject(err); - }); - testHtmlRequest.open('GET', url); - testHtmlRequest.send(); - } catch (e: unknown) { - console.error('catch error', e); - reject(e); - } - }); - } - - /** - * @see {@link DomTestUtilities#tearDownDom} - */ - function tearDownDom(): void { - if (testBed) { - testBed.innerHTML = ''; - } - } - - return { setupDom, tearDownDom }; -} - -/** - * Type guard to verify some entity is an instance of Stencil HTML Element - * @param elm the entity to test - * @returns `true` if the entity is a Stencil HTML Element, `false` otherwise - */ -function isHtmlStencilElement(elm: unknown): elm is d.HTMLStencilElement { - // `hasOwnProperty` does not act as a type guard/narrow `elm` in any way, so we use an assertion to verify that - // `onComponentReady` is a function - return ( - elm != null && - typeof elm === 'object' && - elm.hasOwnProperty('onComponentReady') && - typeof (elm as any).onComponentReady === 'function' - ); -} diff --git a/test/bundler/karma.config.ts b/test/bundler/karma.config.ts deleted file mode 100644 index 1053a7cdacc..00000000000 --- a/test/bundler/karma.config.ts +++ /dev/null @@ -1,79 +0,0 @@ -import type { Config } from 'karma'; - -// use the instance of chromium that is downloaded as a part of stencil's puppeteer dependency -process.env.CHROME_BIN = require('puppeteer').executablePath(); - -const CHROME_HEADLESS = 'ChromeHeadless'; - -// local browsers to run the tests against -const localLaunchers = { - [CHROME_HEADLESS]: { - base: CHROME_HEADLESS, - flags: [ - // run in headless mode (https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md) - '--headless=new', - // use --disable-gpu to avoid an error from a missing Mesa library (https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md) - '--disable-gpu', - // without a remote debugging port, Chrome exits immediately. - '--remote-debugging-port=9333', - ], - }, -}; - -/** - * Export a function to configure Karma to run. - * - * For details on how to configure Karma, see http://karma-runner.github.io/6.3/config/configuration-file.html - * - * @param config the configuration object. this object will be updated/mutated with the settings necessary to run our - * tests - */ -module.exports = function (config: Config): void { - config.set({ - browsers: Object.keys(localLaunchers), - colors: true, - files: [ - // general utilities for running Stencil + Karma - 'karma-stencil-utils.ts', - - // use the application built by vite - { pattern: 'vite-bundle-test/dist/index.html', nocache: true }, - { - pattern: 'vite-bundle-test/dist/**/*.js', - // don't include these files via