fix(tab): update active tab when value is changed externally (#402)

Endava · Aug 18, 2023 · 327fd50 · 327fd50
1 parent 5184be1
commit 327fd50
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 15 deletions.
diff --git a/packages/bee-q/src/components/tab-group/__tests__/bq-tab-group.e2e.ts b/packages/bee-q/src/components/tab-group/__tests__/bq-tab-group.e2e.ts
@@ -2,55 +2,59 @@ import { newE2EPage } from '@stencil/core/testing';
 
 describe('bq-tab-group', () => {
   it('should render', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    const page = await newE2EPage({
+      html: `
     <bq-tab-group value="1">
       <bq-tab tab-id="1">Tab 1</bq-tab>
       <bq-tab tab-id="2">Tab 2</bq-tab>
     </bq-tab-group>
-    `);
+    `,
+    });
 
     const element = await page.find('bq-tab-group');
 
     expect(element).toHaveClass('hydrated');
   });
 
   it('should have shadow root', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    const page = await newE2EPage({
+      html: `
     <bq-tab-group value="1">
       <bq-tab tab-id="1">Tab 1</bq-tab>
       <bq-tab tab-id="2">Tab 2</bq-tab>
     </bq-tab-group>
-    `);
+    `,
+    });
 
     const element = await page.find('bq-tab-group');
 
     expect(element.shadowRoot).not.toBeNull();
   });
 
   it('should change size of all tabs', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    const page = await newE2EPage({
+      html: `
     <bq-tab-group value="1" size="medium">
       <bq-tab tab-id="1">Tab 1</bq-tab>
       <bq-tab tab-id="2">Tab 2</bq-tab>
     </bq-tab-group>
-    `);
+    `,
+    });
 
     const element = await page.find('bq-tab');
 
     expect(await element.getProperty('size')).toBe('medium');
   });
 
   it('should emit bqChange on tab click', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    const page = await newE2EPage({
+      html: `
     <bq-tab-group value="1">
       <bq-tab tab-id="1">Tab 1</bq-tab>
       <bq-tab tab-id="2">Tab 2</bq-tab>
     </bq-tab-group>
-    `);
+    `,
+    });
 
     const bqFocus = await page.spyOnEvent('bqFocus');
     const bqChange = await page.spyOnEvent('bqChange');
@@ -65,15 +69,16 @@ describe('bq-tab-group', () => {
   });
 
   it('should emit bqChange on keyboard navigation', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    const page = await newE2EPage({
+      html: `
     <bq-tab-group value="1">
       <bq-tab tab-id="1">Tab 1</bq-tab>
       <bq-tab tab-id="2">Tab 2</bq-tab>
       <bq-tab tab-id="3">Tab 3</bq-tab>
       <bq-tab tab-id="4">Tab 4</bq-tab>
     </bq-tab-group>
-    `);
+    `,
+    });
 
     const bqFocus = await page.spyOnEvent('bqFocus');
     const bqChange = await page.spyOnEvent('bqChange');
@@ -89,4 +94,26 @@ describe('bq-tab-group', () => {
     expect(bqChange).toHaveReceivedEventTimes(3);
     expect(bqBlur).toHaveReceivedEventTimes(4);
   });
+
+  it('should change active tab if value is change externally', async () => {
+    const page = await newE2EPage({
+      html: `
+    <bq-tab-group value="1">
+      <bq-tab tab-id="1">Tab 1</bq-tab>
+      <bq-tab tab-id="2">Tab 2</bq-tab>
+      <bq-tab tab-id="3">Tab 3</bq-tab>
+      <bq-tab tab-id="4">Tab 4</bq-tab>
+    </bq-tab-group>
+      `,
+    });
+
+    const element = await page.find('bq-tab-group');
+    element.setAttribute('value', '2');
+
+    await page.waitForChanges();
+
+    const activeElement = await page.find('bq-tab[active]');
+
+    expect(activeElement).toEqualText('Tab 2');
+  });
 });
diff --git a/packages/bee-q/src/components/tab-group/bq-tab-group.tsx b/packages/bee-q/src/components/tab-group/bq-tab-group.tsx
@@ -61,6 +61,7 @@ export class BqTabGroup {
   }
 
   @Watch('size')
+  @Watch('value')
   checkPropValues() {
     validatePropValue(TAB_SIZE, 'medium', this.el, 'size');