test(vue): cover tab bar used without tabs

packages/vue/test/base/src/router/index.ts

@@ -200,6 +200,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/tabs-basic',
     component: () => import('@/views/TabsBasic.vue')
   },
+  {
+    path: '/tabs-standalone',
+    component: () => import('@/views/TabsStandalone.vue')
+  },
   {
     path: '/tabs-search-params/',
     component: () => import('@/views/tabs-search-params/TabsSearchParams.vue'),

packages/vue/test/base/src/views/Home.vue

@@ -53,6 +53,9 @@
         <ion-item router-link="/tabs-basic" id="tab-basic">
           <ion-label>Tabs with Basic Navigation</ion-label>
         </ion-item>
+        <ion-item router-link="/tabs-standalone" id="tabs-standalone">
+          <ion-label>Tab Bar without Tabs</ion-label>
+        </ion-item>
         <ion-item router-link="/tabs-similar-prefixes" id="tabs-similar-prefixes">
           <ion-label>Tabs with Similar Route Prefixes</ion-label>
         </ion-item>

packages/vue/test/base/src/views/TabsStandalone.vue

@@ -0,0 +1,44 @@
+<template>
+  <ion-page data-pageid="tabs-standalone">
+    <ion-content>
+      <div id="active-tab">{{ activeTab }}</div>
+    </ion-content>
+    <ion-footer>
+      <ion-tab-bar>
+        <ion-tab-button tab="tab1" @click="activeTab = 'tab1'">
+          <ion-icon :icon="triangle" />
+          <ion-label>Tab 1</ion-label>
+        </ion-tab-button>
+        <ion-tab-button tab="tab2" @click="activeTab = 'tab2'">
+          <ion-icon :icon="ellipse" />
+          <ion-label>Tab 2</ion-label>
+        </ion-tab-button>
+        <ion-tab-button tab="routing" @click="router.push('/routing')">
+          <ion-icon :icon="square" />
+          <ion-label>Routing</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-footer>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { IonContent, IonFooter, IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton } from '@ionic/vue';
+import { ellipse, square, triangle } from 'ionicons/icons';
+import { defineComponent, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+/**
+ * An ion-tab-bar with no ion-tabs or ion-router-outlet around it. The app
+ * owns the active tab and navigates by method from the tab buttons.
+ */
+export default defineComponent({
+  components: { IonContent, IonFooter, IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton },
+  setup() {
+    const router = useRouter();
+    const activeTab = ref('tab1');
+
+    return { router, activeTab, ellipse, square, triangle };
+  }
+});
+</script>

packages/vue/test/base/tests/e2e/playwright/tab-bar-standalone.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from './utils/test-base';
+import { ionPageVisible, tabClick } from './utils/test-utils';
+
+/**
+ * https://github.com/ionic-team/ionic-framework/issues/30361
+ * ion-tab-bar used without ion-tabs or ion-router-outlet, with the app
+ * navigating by method from the tab buttons.
+ */
+test.describe('Tab Bar: standalone', () => {
+  test('should switch tabs on click without errors', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('pageerror', (err) => errors.push(err.message));
+    page.on('console', (msg) => {
+      if (msg.type() === 'error' || msg.type() === 'warning') {
+        errors.push(msg.text());
+      }
+    });
+
+    await page.goto('/tabs-standalone');
+    await ionPageVisible(page, 'tabs-standalone');
+
+    const tab1 = page.locator('ion-tab-button#tab-button-tab1');
+    const tab2 = page.locator('ion-tab-button#tab-button-tab2');
+
+    await expect(tab1).toHaveClass(/tab-selected/);
+    await expect(page.locator('#active-tab')).toHaveText('tab1');
+
+    await tabClick(page, 'tab2');
+
+    await expect(tab2).toHaveClass(/tab-selected/);
+    await expect(tab1).not.toHaveClass(/tab-selected/);
+    await expect(page.locator('#active-tab')).toHaveText('tab2');
+    // With no router outlet, a tab button must not change the URL itself.
+    await expect(page).toHaveURL(/\/tabs-standalone(\?|$)/);
+
+    await tabClick(page, 'tab1');
+
+    await expect(tab1).toHaveClass(/tab-selected/);
+    await expect(tab2).not.toHaveClass(/tab-selected/);
+    await expect(page.locator('#active-tab')).toHaveText('tab1');
+
+    expect(errors).toEqual([]);
+  });
+
+  test('should navigate by method from a tab button', async ({ page }) => {
+    await page.goto('/tabs-standalone');
+    await ionPageVisible(page, 'tabs-standalone');
+
+    await tabClick(page, 'routing');
+
+    await ionPageVisible(page, 'routing');
+    await expect(page).toHaveURL(/\/routing(\?|$)/);
+  });
+});