fix(atomic): race condition in atomic-tab-manager attribute reading during initialization

packages/atomic/src/components/search/atomic-tab-manager/atomic-tab-manager.spec.ts

@@ -1,10 +1,15 @@
 import {buildTab, buildTabManager, type TabManagerState} from '@coveo/headless';
 import {html} from 'lit';
 import {describe, expect, it, vi} from 'vitest';
-import {renderInAtomicSearchInterface} from '@/vitest-utils/testing-helpers/fixtures/atomic/search/atomic-search-interface-fixture';
+import {
+  defaultBindings,
+  type FixtureAtomicSearchInterface,
+  renderInAtomicSearchInterface,
+} from '@/vitest-utils/testing-helpers/fixtures/atomic/search/atomic-search-interface-fixture';
 import {buildFakeTabManager} from '@/vitest-utils/testing-helpers/fixtures/headless/search/tab-manager-controller';
 import type {AtomicTabManager} from './atomic-tab-manager';
 import './atomic-tab-manager';
+import {fixture} from '@/vitest-utils/testing-helpers/fixture';
 import {mockConsole} from '@/vitest-utils/testing-helpers/testing-utils/mock-console';
 
 vi.mock('@coveo/headless', {spy: true});
@@ -172,4 +177,53 @@ describe('atomic-tab-manager', () => {
       });
     });
   });
+
+  it('should use empty string as fallback for undefined expression when tab expression property is undefined (race condition)', async () => {
+    const fakeTabManager = buildFakeTabManager({
+      activeTab: 'test',
+    });
+
+    vi.mocked(buildTabManager).mockReturnValue(fakeTabManager);
+
+    let expressionValue: string | undefined;
+
+    vi.mocked(buildTab).mockImplementation((_engine, options) => {
+      expressionValue = options?.options?.expression;
+      return {
+        state: {
+          isActive: options?.options?.id === fakeTabManager.state.activeTab,
+        },
+        select: vi.fn(),
+        subscribe: vi.fn(),
+      } as never;
+    });
+
+    const atomicInterface = await fixture<FixtureAtomicSearchInterface>(
+      html`<atomic-search-interface>
+        <atomic-tab-manager>
+          <atomic-tab label="Test" name="test"></atomic-tab>
+        </atomic-tab-manager>
+      </atomic-search-interface>`
+    );
+
+    const manager = atomicInterface.querySelector('atomic-tab-manager')!;
+    const tabElement = manager.querySelector('atomic-tab')!;
+
+    await tabElement.updateComplete;
+
+    tabElement.name = tabElement.getAttribute('name')!;
+    tabElement.label = tabElement.getAttribute('label')!;
+
+    Object.defineProperty(tabElement, 'expression', {
+      get: () => undefined,
+      configurable: true,
+    });
+
+    atomicInterface.setBindings(defaultBindings);
+    await atomicInterface.updateComplete;
+    await manager.updateComplete;
+
+    expect(expressionValue).toBe('');
+    expect(expressionValue).not.toBeUndefined();
+  });
 });

packages/atomic/src/components/search/atomic-tab-manager/atomic-tab-manager.ts

@@ -93,7 +93,7 @@ export class AtomicTabManager
       }
       const tabController = buildTab(this.bindings.engine, {
         options: {
-          expression: tabElement.expression,
+          expression: tabElement.expression ?? '',
           id: tabElement.name,
           clearFiltersOnTabChange: this.clearFiltersOnTabChange,
         },