add more e2e test for the multi example

module-federation · Sep 29, 2024 · 3c13d51 · 3c13d51
1 parent ea71a9c
commit 3c13d51
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/e2e/vite-webpack-rspack/tests/example.spec.ts b/e2e/vite-webpack-rspack/tests/example.spec.ts
@@ -1,9 +1,11 @@
 import { expect, test } from '@playwright/test';
 
 test.describe('Vite Host Tests', () => {
-  test('test header - vite host', async ({ page, baseURL }) => {
+  test.beforeEach(async ({ page, baseURL }) => {
     await page.goto(baseURL!);
+  });
 
+  test('test header - vite host', async ({ page }) => {
     const womenButton = page.getByRole('button', { name: 'Women', exact: true });
     const manButton = page.getByRole('button', { name: 'Man', exact: true });
     const companyButton = page.getByRole('button', { name: 'Company', exact: true });
@@ -17,10 +19,7 @@ test.describe('Vite Host Tests', () => {
     ]);
   });
 
-  test('test footer - vite host', async ({ page, baseURL }) => {
-    // Go to example.com
-    await page.goto(baseURL!);
-
+  test('test footer - vite host', async ({ page }) => {
     const productsHeading = page.getByRole('heading', { level: 3, name: 'Products', exact: true });
     const companyHeading = page.getByRole('heading', { level: 3, name: 'Company', exact: true });
     const customerServiceHeading = page.getByRole('heading', {
@@ -37,14 +36,32 @@ test.describe('Vite Host Tests', () => {
   });
 });
 
-test.fixme('test vite remote', async ({ page, baseURL }) => {
-  await page.goto(baseURL!);
-});
+test.describe('Vite remote', () => {});
 
-test.fixme('test rspack remote', async ({ page, baseURL }) => {
-  await page.goto(baseURL!);
+test.describe('Rspack remote', () => {
+  test('has title', async ({ page, baseURL }) => {
+    await page.goto(baseURL!);
+    const recentReviews = page.getByRole('heading', {
+      level: 2,
+      name: 'Customers also purchased',
+      exact: true,
+    });
+    await expect(recentReviews).toBeVisible();
+  });
 });
 
-test.fixme('test webpack remote', async ({ page, baseURL }) => {
-  await page.goto(baseURL!);
+test.describe('Webpack remote', () => {
+  test('has title', async ({ page, baseURL }) => {
+    await page.goto(baseURL!);
+    const furtherRecommendations = page.getByRole('heading', {
+      level: 2,
+      name: 'Customers also purchased',
+      exact: true,
+    });
+    await expect(furtherRecommendations).toBeVisible();
+  });
+
+  test('navigates to product page onclick', async () => {
+    // !TODO: to test proper navigation in the host!
+  });
 });
diff --git a/examples/vite-webpack-rspack/remote/src/Product.jsx b/examples/vite-webpack-rspack/remote/src/Product.jsx
@@ -5,6 +5,7 @@ import ProductImage from './ProductImage';
 export default () => {
   const [size, setSize] = useState('M');
   const [color, setColor] = useState('black');
+
   return (
     <div className="lg:grid lg:auto-rows-min lg:grid-cols-12 lg:gap-x-8">
       <ProductHeader />
@@ -76,7 +77,7 @@ export default () => {
             </div>
           </div>
           <button
-            type="submit"
+            type="button"
             className="mt-8 flex w-full items-center justify-center rounded-md border border-transparent bg-slate-600 px-8 py-3 text-base font-medium text-white hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
             onClick={() => {
               window.dispatchEvent(new CustomEvent('ADD_CART'));