Skip to content

Commit

Permalink
feat: add e2e tests for stencil (#1549)
Browse files Browse the repository at this point in the history
* feat: add e2e tests for stencil

* chore: update yarn.lock

* chore: add changeset
  • Loading branch information
nmerget authored Nov 1, 2024
1 parent 17f4289 commit 3ab462a
Show file tree
Hide file tree
Showing 21 changed files with 258 additions and 4 deletions.
5 changes: 5 additions & 0 deletions .changeset/lemon-students-tan.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@builder.io/mitosis': patch
---

[Stencil] feat: add e2e test for stencil
1 change: 0 additions & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<Show when={state.pathToUse.startsWith('/your-component-path')}>`
- 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

Expand Down
3 changes: 2 additions & 1 deletion e2e/e2e-app/.gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
playwright-results.json
e2e-test-status.*

output/**/src
output/**/src
output/stencil/components.d.ts
4 changes: 4 additions & 0 deletions e2e/e2e-app/mitosis.config.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ module.exports = {
'react',
'reactNative',
'solid',
'stencil',
'svelte',
'vue',
'webcomponent',
Expand All @@ -38,6 +39,9 @@ module.exports = {
},
},
react: { transpiler: { format: 'esm', languages: ['ts'] } },
stencil: {
prefix: 'e2e',
},
solid: { transpiler: { languages: ['ts'] } },
vue: {
transpiler: { format: 'esm' },
Expand Down
17 changes: 17 additions & 0 deletions e2e/e2e-app/output/stencil/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>

<script type="module" src="/build/e2e-stencil.esm.js"></script>
<script nomodule src="/build/e2e-stencil.js"></script>
</head>
<body>
<e2e-homepage></e2e-homepage>
</body>
</html>
11 changes: 11 additions & 0 deletions e2e/e2e-app/output/stencil/index.ts
Original file line number Diff line number Diff line change
@@ -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';
1 change: 1 addition & 0 deletions e2e/e2e-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions e2e/e2e-app/playwright.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions e2e/e2e-app/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion e2e/e2e-app/src/components/component-with-types.lite.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
type Props = {
export type Props = {
name: string;
};

Expand Down
1 change: 1 addition & 0 deletions e2e/e2e-app/src/testConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export type PackageName =
| 'e2e-angular'
| 'e2e-qwik'
| 'e2e-react'
| 'e2e-stencil'
| 'e2e-solid'
| 'e2e-svelte'
| 'e2e-vue3';
4 changes: 3 additions & 1 deletion e2e/e2e-app/tests/main.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
15 changes: 15 additions & 0 deletions e2e/e2e-stencil/.editorconfig
Original file line number Diff line number Diff line change
@@ -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
26 changes: 26 additions & 0 deletions e2e/e2e-stencil/.gitignore
Original file line number Diff line number Diff line change
@@ -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
13 changes: 13 additions & 0 deletions e2e/e2e-stencil/.prettierrc.json
Original file line number Diff line number Diff line change
@@ -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
}
21 changes: 21 additions & 0 deletions e2e/e2e-stencil/LICENSE
Original file line number Diff line number Diff line change
@@ -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.
19 changes: 19 additions & 0 deletions e2e/e2e-stencil/components.d.ts
Original file line number Diff line number Diff line change
@@ -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 {}
}
}
44 changes: 44 additions & 0 deletions e2e/e2e-stencil/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
28 changes: 28 additions & 0 deletions e2e/e2e-stencil/stencil.config.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
18 changes: 18 additions & 0 deletions e2e/e2e-stencil/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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"]
}
27 changes: 27 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 3ab462a

Please sign in to comment.