From 3ab462a2961fe2c792af5151cf4640771f52bfdd Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Fri, 1 Nov 2024 13:43:34 +0100 Subject: [PATCH] feat: add e2e tests for stencil (#1549) * feat: add e2e tests for stencil * chore: update yarn.lock * chore: add changeset --- .changeset/lemon-students-tan.md | 5 +++ CONTRIBUTING.md | 1 - e2e/e2e-app/.gitignore | 3 +- e2e/e2e-app/mitosis.config.cjs | 4 ++ e2e/e2e-app/output/stencil/index.html | 17 +++++++ e2e/e2e-app/output/stencil/index.ts | 11 +++++ e2e/e2e-app/package.json | 1 + e2e/e2e-app/playwright.config.ts | 1 + e2e/e2e-app/project.json | 1 + .../components/component-with-types.lite.tsx | 2 +- e2e/e2e-app/src/testConfig.ts | 1 + e2e/e2e-app/tests/main.spec.ts | 4 +- e2e/e2e-stencil/.editorconfig | 15 +++++++ e2e/e2e-stencil/.gitignore | 26 +++++++++++ e2e/e2e-stencil/.prettierrc.json | 13 ++++++ e2e/e2e-stencil/LICENSE | 21 +++++++++ e2e/e2e-stencil/components.d.ts | 19 ++++++++ e2e/e2e-stencil/package.json | 44 +++++++++++++++++++ e2e/e2e-stencil/stencil.config.ts | 28 ++++++++++++ e2e/e2e-stencil/tsconfig.json | 18 ++++++++ yarn.lock | 27 ++++++++++++ 21 files changed, 258 insertions(+), 4 deletions(-) create mode 100644 .changeset/lemon-students-tan.md create mode 100644 e2e/e2e-app/output/stencil/index.html create mode 100644 e2e/e2e-app/output/stencil/index.ts create mode 100644 e2e/e2e-stencil/.editorconfig create mode 100644 e2e/e2e-stencil/.gitignore create mode 100644 e2e/e2e-stencil/.prettierrc.json create mode 100644 e2e/e2e-stencil/LICENSE create mode 100644 e2e/e2e-stencil/components.d.ts create mode 100644 e2e/e2e-stencil/package.json create mode 100644 e2e/e2e-stencil/stencil.config.ts create mode 100644 e2e/e2e-stencil/tsconfig.json diff --git a/.changeset/lemon-students-tan.md b/.changeset/lemon-students-tan.md new file mode 100644 index 0000000000..e064485720 --- /dev/null +++ b/.changeset/lemon-students-tan.md @@ -0,0 +1,5 @@ +--- +'@builder.io/mitosis': patch +--- + +[Stencil] feat: add e2e test for stencil diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 65da08a707..b0cc2aca46 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -50,7 +50,6 @@ PS: don't worry about failing imports in the raw test TSX files. These are not a - add your component to the [homepage](/e2e/e2e-app/src/homepage.lite.tsx) with a `` - add an integration test in [e2e/e2e-app/tests](/e2e/e2e-app/tests) that makes sure your component works as expected - this integration test will run against every server that exists in [e2e/](/e2e/). -- run `yarn ci:e2e-prep` to install playwright browsers - run `yarn ci:build` to build all packages - run `yarn ci:e2e` to run the integration tests against all servers diff --git a/e2e/e2e-app/.gitignore b/e2e/e2e-app/.gitignore index a120cc74c2..336249ccdc 100644 --- a/e2e/e2e-app/.gitignore +++ b/e2e/e2e-app/.gitignore @@ -1,4 +1,5 @@ playwright-results.json e2e-test-status.* -output/**/src \ No newline at end of file +output/**/src +output/stencil/components.d.ts \ No newline at end of file diff --git a/e2e/e2e-app/mitosis.config.cjs b/e2e/e2e-app/mitosis.config.cjs index e3b623510d..1c7be02564 100644 --- a/e2e/e2e-app/mitosis.config.cjs +++ b/e2e/e2e-app/mitosis.config.cjs @@ -12,6 +12,7 @@ module.exports = { 'react', 'reactNative', 'solid', + 'stencil', 'svelte', 'vue', 'webcomponent', @@ -38,6 +39,9 @@ module.exports = { }, }, react: { transpiler: { format: 'esm', languages: ['ts'] } }, + stencil: { + prefix: 'e2e', + }, solid: { transpiler: { languages: ['ts'] } }, vue: { transpiler: { format: 'esm' }, diff --git a/e2e/e2e-app/output/stencil/index.html b/e2e/e2e-app/output/stencil/index.html new file mode 100644 index 0000000000..5d961fa0a4 --- /dev/null +++ b/e2e/e2e-app/output/stencil/index.html @@ -0,0 +1,17 @@ + + + + + + Stencil Component Starter + + + + + + + + diff --git a/e2e/e2e-app/output/stencil/index.ts b/e2e/e2e-app/output/stencil/index.ts new file mode 100644 index 0000000000..367aaec1d4 --- /dev/null +++ b/e2e/e2e-app/output/stencil/index.ts @@ -0,0 +1,11 @@ +/** + * @fileoverview entry point for your component library + * + * This is the entry point for your component library. Use this file to export utilities, + * constants or data structure that accompany your components. + * + * DO NOT use this file to export your components. Instead, use the recommended approaches + * to consume components of this package as outlined in the `README.md`. + */ + +export type * from './components.d.ts'; diff --git a/e2e/e2e-app/package.json b/e2e/e2e-app/package.json index 7e34824116..e23b6eb5a9 100644 --- a/e2e/e2e-app/package.json +++ b/e2e/e2e-app/package.json @@ -18,6 +18,7 @@ "watch": "^1.0.2" }, "devDependencies": { + "@stencil/core": "^4.7.0", "@types/node": "^20.12.13", "concurrently": "^7.3.0", "react": "^18.2.0", diff --git a/e2e/e2e-app/playwright.config.ts b/e2e/e2e-app/playwright.config.ts index c3e1154f92..64357da3bd 100644 --- a/e2e/e2e-app/playwright.config.ts +++ b/e2e/e2e-app/playwright.config.ts @@ -11,6 +11,7 @@ export const targets: { packageName: PackageName; port: number }[] = ( { packageName: 'e2e-qwik' }, { packageName: 'e2e-react' }, { packageName: 'e2e-solid' }, + { packageName: 'e2e-stencil' }, { packageName: 'e2e-svelte' }, { packageName: 'e2e-vue3' }, ] as const diff --git a/e2e/e2e-app/project.json b/e2e/e2e-app/project.json index 605d1904d9..15f5fb51e1 100644 --- a/e2e/e2e-app/project.json +++ b/e2e/e2e-app/project.json @@ -11,6 +11,7 @@ "outputs": [ "{projectRoot}/output/react/src", "{projectRoot}/output/qwik/src", + "{projectRoot}/output/stencil/src", "{projectRoot}/output/solid/src", "{projectRoot}/output/svelte/src", "{projectRoot}/output/vue/packages/_vue2/src", diff --git a/e2e/e2e-app/src/components/component-with-types.lite.tsx b/e2e/e2e-app/src/components/component-with-types.lite.tsx index b91fab095c..6acdc65fb6 100644 --- a/e2e/e2e-app/src/components/component-with-types.lite.tsx +++ b/e2e/e2e-app/src/components/component-with-types.lite.tsx @@ -1,4 +1,4 @@ -type Props = { +export type Props = { name: string; }; diff --git a/e2e/e2e-app/src/testConfig.ts b/e2e/e2e-app/src/testConfig.ts index 5dde015e7f..7e556b8e90 100644 --- a/e2e/e2e-app/src/testConfig.ts +++ b/e2e/e2e-app/src/testConfig.ts @@ -3,6 +3,7 @@ export type PackageName = | 'e2e-angular' | 'e2e-qwik' | 'e2e-react' + | 'e2e-stencil' | 'e2e-solid' | 'e2e-svelte' | 'e2e-vue3'; diff --git a/e2e/e2e-app/tests/main.spec.ts b/e2e/e2e-app/tests/main.spec.ts index 4413323240..2e11318a14 100644 --- a/e2e/e2e-app/tests/main.spec.ts +++ b/e2e/e2e-app/tests/main.spec.ts @@ -56,7 +56,9 @@ test.describe('e2e', () => { test('script tag', async ({ page, packageName }) => { if ( - ['e2e-solid', 'e2e-react', 'e2e-angular', 'e2e-qwik', 'e2e-svelte'].includes(packageName) + ['e2e-solid', 'e2e-react', 'e2e-angular', 'e2e-qwik', 'e2e-stencil', 'e2e-svelte'].includes( + packageName, + ) ) { test.skip(); } diff --git a/e2e/e2e-stencil/.editorconfig b/e2e/e2e-stencil/.editorconfig new file mode 100644 index 0000000000..f1cc3ad329 --- /dev/null +++ b/e2e/e2e-stencil/.editorconfig @@ -0,0 +1,15 @@ +# http://editorconfig.org + +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +insert_final_newline = false +trim_trailing_whitespace = false diff --git a/e2e/e2e-stencil/.gitignore b/e2e/e2e-stencil/.gitignore new file mode 100644 index 0000000000..c3ea58a61b --- /dev/null +++ b/e2e/e2e-stencil/.gitignore @@ -0,0 +1,26 @@ +dist/ +www/ +loader/ + +*~ +*.sw[mnpcod] +*.log +*.lock +*.tmp +*.tmp.* +log.txt +*.sublime-project +*.sublime-workspace + +.stencil/ +.idea/ +.vscode/ +.sass-cache/ +.versions/ +node_modules/ +$RECYCLE.BIN/ + +.DS_Store +Thumbs.db +UserInterfaceState.xcuserstate +.env diff --git a/e2e/e2e-stencil/.prettierrc.json b/e2e/e2e-stencil/.prettierrc.json new file mode 100644 index 0000000000..7ca3a28a9c --- /dev/null +++ b/e2e/e2e-stencil/.prettierrc.json @@ -0,0 +1,13 @@ +{ + "arrowParens": "avoid", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "jsxSingleQuote": false, + "quoteProps": "consistent", + "printWidth": 180, + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "all", + "useTabs": false +} diff --git a/e2e/e2e-stencil/LICENSE b/e2e/e2e-stencil/LICENSE new file mode 100644 index 0000000000..b442934b7d --- /dev/null +++ b/e2e/e2e-stencil/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/e2e/e2e-stencil/components.d.ts b/e2e/e2e-stencil/components.d.ts new file mode 100644 index 0000000000..aec4d85563 --- /dev/null +++ b/e2e/e2e-stencil/components.d.ts @@ -0,0 +1,19 @@ +/* eslint-disable */ +/* tslint:disable */ +/** + * This is an autogenerated file created by the Stencil compiler. + * It contains typing information for all components that exist in this project. + */ +export namespace Components {} +declare global { + interface HTMLElementTagNameMap {} +} +declare namespace LocalJSX { + interface IntrinsicElements {} +} +export { LocalJSX as JSX }; +declare module '@stencil/core' { + export namespace JSX { + interface IntrinsicElements {} + } +} diff --git a/e2e/e2e-stencil/package.json b/e2e/e2e-stencil/package.json new file mode 100644 index 0000000000..2e06109ff1 --- /dev/null +++ b/e2e/e2e-stencil/package.json @@ -0,0 +1,44 @@ +{ + "name": "@builder.io/e2e-stencil", + "description": "Stencil Component Starter", + "main": "dist/index.cjs.js", + "module": "dist/index.js", + "types": "dist/types/index.d.ts", + "collection": "dist/collection/collection-manifest.json", + "collection:main": "dist/collection/index.js", + "unpkg": "dist/e2e-stencil/e2e-stencil.esm.js", + "exports": { + ".": { + "import": "./dist/e2e-stencil/e2e-stencil.esm.js", + "require": "./dist/e2e-stencil/e2e-stencil.cjs.js" + }, + "./my-component": { + "import": "./dist/components/my-component.js", + "types": "./dist/components/my-component.d.ts" + }, + "./loader": { + "import": "./loader/index.js", + "require": "./loader/index.cjs", + "types": "./loader/index.d.ts" + } + }, + "repository": { + "type": "git", + "url": "https://github.com/ionic-team/stencil-component-starter.git" + }, + "files": [ + "dist/", + "loader/" + ], + "scripts": { + "clean": "rimraf dist", + "build": "stencil build", + "serve": "stencil build --watch --serve --no-open" + }, + "devDependencies": { + "@stencil/core": "^4.7.0", + "@types/node": "^16.18.11", + "rimraf": "^3.0.2" + }, + "license": "MIT" +} diff --git a/e2e/e2e-stencil/stencil.config.ts b/e2e/e2e-stencil/stencil.config.ts new file mode 100644 index 0000000000..733c31f682 --- /dev/null +++ b/e2e/e2e-stencil/stencil.config.ts @@ -0,0 +1,28 @@ +import { Config } from '@stencil/core'; + +export const config: Config = { + namespace: 'e2e-stencil', + srcDir: '../e2e-app/output/stencil', + excludeUnusedDependencies: true, + outputTargets: [ + { + type: 'dist', + esmLoaderPath: '../loader', + }, + { + type: 'dist-custom-elements', + customElementsExportBehavior: 'auto-define-custom-elements', + externalRuntime: false, + }, + { + type: 'docs-readme', + }, + { + type: 'www', + serviceWorker: null, // disable service workers + }, + ], + testing: { + browserHeadless: 'new', + }, +}; diff --git a/e2e/e2e-stencil/tsconfig.json b/e2e/e2e-stencil/tsconfig.json new file mode 100644 index 0000000000..baa532d049 --- /dev/null +++ b/e2e/e2e-stencil/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "allowUnreachableCode": false, + "declaration": false, + "experimentalDecorators": true, + "lib": ["dom", "es2017"], + "moduleResolution": "node", + "module": "esnext", + "target": "es2017", + "noUnusedLocals": false, + "noUnusedParameters": false, + "jsx": "react", + "jsxFactory": "h" + }, + "include": ["../e2e-app/output/stencil"], + "exclude": ["node_modules", "../e2e-app/output/stencil/src/index.ts"] +} diff --git a/yarn.lock b/yarn.lock index d4e5dbf83f..baa9b9bb5f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3046,6 +3046,7 @@ __metadata: "@builder.io/mitosis": "workspace:*" "@builder.io/mitosis-cli": "workspace:*" "@playwright/test": "npm:^1.48.0" + "@stencil/core": "npm:^4.7.0" "@types/node": "npm:^20.12.13" concurrently: "npm:^7.3.0" react: "npm:^18.2.0" @@ -3113,6 +3114,16 @@ __metadata: languageName: unknown linkType: soft +"@builder.io/e2e-stencil@workspace:e2e/e2e-stencil": + version: 0.0.0-use.local + resolution: "@builder.io/e2e-stencil@workspace:e2e/e2e-stencil" + dependencies: + "@stencil/core": "npm:^4.7.0" + "@types/node": "npm:^16.18.11" + rimraf: "npm:^3.0.2" + languageName: unknown + linkType: soft + "@builder.io/e2e-svelte@workspace:e2e/e2e-svelte": version: 0.0.0-use.local resolution: "@builder.io/e2e-svelte@workspace:e2e/e2e-svelte" @@ -5990,6 +6001,15 @@ __metadata: languageName: node linkType: hard +"@stencil/core@npm:^4.7.0": + version: 4.22.2 + resolution: "@stencil/core@npm:4.22.2" + bin: + stencil: bin/stencil + checksum: 10/0d519f028cf9b8c70d05dff9aca8bcf7baf10706b061ddd047b9f24d04a65f3a88e8ac45cb3a3a00153f72d226fba98c65965104060539661416d6034ed0fb72 + languageName: node + linkType: hard + "@sveltejs/vite-plugin-svelte@npm:^1.0.0-next.49": version: 1.0.0-next.49 resolution: "@sveltejs/vite-plugin-svelte@npm:1.0.0-next.49" @@ -6673,6 +6693,13 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:^16.18.11": + version: 16.18.118 + resolution: "@types/node@npm:16.18.118" + checksum: 10/5695fe5a1639fc5ccb4cc59a2a777925313c99a72c9cd386fa176ae1e7a7ea579c449754898ae8f8db23dbc9efa64d5a39f5b6ea3aff98d6bfde361e4f6c09a9 + languageName: node + linkType: hard + "@types/node@npm:^18.14.0, @types/node@npm:^18.14.6": version: 18.14.6 resolution: "@types/node@npm:18.14.6"