feat: update unit test and snopshot of web component

BuilderIO · Jan 4, 2024 · abce2ee · abce2ee
1 parent e05a9eb
commit abce2ee
Show file tree

Hide file tree

Showing 23 changed files with 1,631 additions and 58 deletions.
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2681,6 +2681,27 @@ exports[`Alpine.js > jsx > Javascript Test > useTarget 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > webComponent 1`] = `
+"<swiper-container
+  slides-per-view=\\"3\\"
+  navigation=\\"true\\"
+  pagination=\\"true\\"
+  x-data=\\"myBasicWebComponent()\\"
+>
+  <swiper-slide>Slide 1</swiper-slide>
+
+  <swiper-slide>Slide 2</swiper-slide>
+
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myBasicWebComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Remove Internal mitosis package 1`] = `
 "<div x-data=\\"myBasicComponent()\\">
   Hello
@@ -5370,6 +5391,27 @@ exports[`Alpine.js > jsx > Typescript Test > useTarget 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > webComponent 1`] = `
+"<swiper-container
+  slides-per-view=\\"3\\"
+  navigation=\\"true\\"
+  pagination=\\"true\\"
+  x-data=\\"myBasicWebComponent()\\"
+>
+  <swiper-slide>Slide 1</swiper-slide>
+
+  <swiper-slide>Slide 2</swiper-slide>
+
+  <swiper-slide>Slide 3</swiper-slide>
+</swiper-container>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myBasicWebComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > svelte > Javascript Test > basic 1`] = `
 "<div x-data=\\"myComponent()\\">
   <input x-on:change=\\"name = $event.target.value\\" x-bind:value=\\"name\\" />

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -4240,6 +4240,41 @@ export class UseTargetComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > webComponent 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import { register } from \\"swiper/element/bundle\\";
+
+@Component({
+  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  template: \`
+    <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
+      <swiper-slide>Slide 1</swiper-slide>
+
+      <swiper-slide>Slide 2</swiper-slide>
+
+      <swiper-slide>Slide 3</swiper-slide>
+    </swiper-container>
+  \`,
+})
+export class MyBasicWebComponent {
+  constructor() {
+    register();
+  }
+}
+
+@NgModule({
+  declarations: [MyBasicWebComponent],
+  imports: [CommonModule],
+  exports: [MyBasicWebComponent],
+})
+export class MyBasicWebComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Remove Internal mitosis package 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8907,6 +8942,41 @@ export class UseTargetComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > webComponent 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import { register } from \\"swiper/element/bundle\\";
+
+@Component({
+  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  template: \`
+    <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
+      <swiper-slide>Slide 1</swiper-slide>
+
+      <swiper-slide>Slide 2</swiper-slide>
+
+      <swiper-slide>Slide 3</swiper-slide>
+    </swiper-container>
+  \`,
+})
+export class MyBasicWebComponent {
+  constructor() {
+    register();
+  }
+}
+
+@NgModule({
+  declarations: [MyBasicWebComponent],
+  imports: [CommonModule],
+  exports: [MyBasicWebComponent],
+})
+export class MyBasicWebComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > svelte > Javascript Test > basic 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -4337,6 +4337,42 @@ export class UseTargetComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > webComponent 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import { register } from \\"swiper/element/bundle\\";
+
+@Component({
+  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  template: \`
+    <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
+      <swiper-slide>Slide 1</swiper-slide>
+
+      <swiper-slide>Slide 2</swiper-slide>
+
+      <swiper-slide>Slide 3</swiper-slide>
+    </swiper-container>
+  \`,
+})
+export class MyBasicWebComponent {
+  constructor() {
+    register();
+  }
+}
+
+@NgModule({
+  declarations: [MyBasicWebComponent],
+  imports: [CommonModule],
+  exports: [MyBasicWebComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyBasicWebComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Remove Internal mitosis package 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -9104,6 +9140,42 @@ export class UseTargetComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > webComponent 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import { register } from \\"swiper/element/bundle\\";
+
+@Component({
+  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  template: \`
+    <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
+      <swiper-slide>Slide 1</swiper-slide>
+
+      <swiper-slide>Slide 2</swiper-slide>
+
+      <swiper-slide>Slide 3</swiper-slide>
+    </swiper-container>
+  \`,
+})
+export class MyBasicWebComponent {
+  constructor() {
+    register();
+  }
+}
+
+@NgModule({
+  declarations: [MyBasicWebComponent],
+  imports: [CommonModule],
+  exports: [MyBasicWebComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyBasicWebComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > svelte > Javascript Test > basic 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";

diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -7782,6 +7782,69 @@ export class UseTargetComponent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > webComponent 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import { register } from \\"swiper/element/bundle\\";
+
+@Component({
+  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  template: \`
+    <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
+      <swiper-slide>Slide 1</swiper-slide>
+
+      <swiper-slide>Slide 2</swiper-slide>
+
+      <swiper-slide>Slide 3</swiper-slide>
+    </swiper-container>
+  \`,
+})
+export class MyBasicWebComponent {
+  constructor() {
+    register();
+  }
+}
+
+@NgModule({
+  declarations: [MyBasicWebComponent],
+  imports: [CommonModule],
+  exports: [MyBasicWebComponent],
+})
+export class MyBasicWebComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > webComponent 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { register } from \\"swiper/element/bundle\\";
+
+@Component({
+  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  template: \`
+    <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
+      <swiper-slide>Slide 1</swiper-slide>
+
+      <swiper-slide>Slide 2</swiper-slide>
+
+      <swiper-slide>Slide 3</swiper-slide>
+    </swiper-container>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class MyBasicWebComponent {
+  constructor() {
+    register();
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Remove Internal mitosis package 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -16409,6 +16472,69 @@ export class UseTargetComponent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > webComponent 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import { register } from \\"swiper/element/bundle\\";
+
+@Component({
+  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  template: \`
+    <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
+      <swiper-slide>Slide 1</swiper-slide>
+
+      <swiper-slide>Slide 2</swiper-slide>
+
+      <swiper-slide>Slide 3</swiper-slide>
+    </swiper-container>
+  \`,
+})
+export class MyBasicWebComponent {
+  constructor() {
+    register();
+  }
+}
+
+@NgModule({
+  declarations: [MyBasicWebComponent],
+  imports: [CommonModule],
+  exports: [MyBasicWebComponent],
+})
+export class MyBasicWebComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > webComponent 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { register } from \\"swiper/element/bundle\\";
+
+@Component({
+  selector: \\"my-basic-web-component, MyBasicWebComponent\\",
+  template: \`
+    <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
+      <swiper-slide>Slide 1</swiper-slide>
+
+      <swiper-slide>Slide 2</swiper-slide>
+
+      <swiper-slide>Slide 3</swiper-slide>
+    </swiper-container>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class MyBasicWebComponent {
+  constructor() {
+    register();
+  }
+}
+"
+`;
+
 exports[`Angular > svelte > Javascript Test > basic 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";