fix(storybook): Fix broken stories for Settings page

vpomerleau · vpomerleau · commit bcc90f43b39a · 2026-03-11T18:01:23.000-07:00
Because:

* Settings page, Connnected Services stories were broken

This commit:

* Fix the stories
* Add story for hasLinkedAccount, noPassword state for settings page
* Add stories for LinkedAccount modals (with password, no password)
* Add BentoMenu open menu storybook state

Closes #
diff --git a/packages/fxa-settings/src/components/Settings/BentoMenu/index.stories.tsx b/packages/fxa-settings/src/components/Settings/BentoMenu/index.stories.tsx
@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import BentoMenu from '.';
 import { Meta } from '@storybook/react';
 import { withLocalization } from 'fxa-react/lib/storybooks';
@@ -20,3 +20,21 @@ export const Basic = () => (
     </div>
   </div>
 );
+
+export const MenuOpen = () => {
+  useEffect(() => {
+    (
+      document.querySelector(
+        '[data-testid="drop-down-bento-menu-toggle"]'
+      ) as HTMLButtonElement
+    )?.click();
+  }, []);
+
+  return (
+    <div className="w-full flex justify-end">
+      <div className="flex tablet:pr-10 pt-4">
+        <BentoMenu />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/fxa-settings/src/components/Settings/ConnectedServices/index.tsx b/packages/fxa-settings/src/components/Settings/ConnectedServices/index.tsx
@@ -6,7 +6,7 @@ import { Localized, useLocalization } from '@fluent/react';
 import { LinkExternal } from 'fxa-react/components/LinkExternal';
 import { useBooleanState } from 'fxa-react/lib/hooks';
 import groupBy from 'lodash.groupby';
-import { forwardRef, useCallback, useState } from 'react';
+import React, { forwardRef, useCallback, useState } from 'react';
 import { clearSignedInAccountUid, setSigningOut } from '../../../lib/cache';
 import { logViewEvent } from '../../../lib/metrics';
 import { isMobileDevice } from '../../../lib/utilities';
diff --git a/packages/fxa-settings/src/components/Settings/ConnectedServices/mocks.ts b/packages/fxa-settings/src/components/Settings/ConnectedServices/mocks.ts
@@ -84,7 +84,7 @@ export const DESKTOP_SYNC_MOCKS = [
   },
 ];
 
-const OAUTH_SERVICE_MOCKS = [
+export const OAUTH_SERVICE_MOCKS = [
   {
     clientId: 'a8c528140153d1c6',
     deviceId: null,
diff --git a/packages/fxa-settings/src/components/Settings/DataCollection/index.stories.tsx b/packages/fxa-settings/src/components/Settings/DataCollection/index.stories.tsx
@@ -5,14 +5,14 @@
 import React from 'react';
 import { DataCollection } from '.';
 import { Meta } from '@storybook/react';
-import { withLocalization } from 'fxa-react/lib/storybooks';
+import { withLocalization, withLocation } from 'fxa-react/lib/storybooks';
 import { mockAppContext } from '../../../models/mocks';
 import { Account, AppContext } from '../../../models';
 
 export default {
   title: 'Components/Settings/DataCollection',
   component: DataCollection,
-  decorators: [withLocalization],
+  decorators: [withLocalization, withLocation()],
 } as Meta;
 
 const accountWithMetrics = {
diff --git a/packages/fxa-settings/src/components/Settings/DropDownAvatarMenu/index.stories.tsx b/packages/fxa-settings/src/components/Settings/DropDownAvatarMenu/index.stories.tsx
@@ -48,4 +48,4 @@ const storyWithContext = (account: Partial<Account>) => {
 export const DefaultNoAvatarOrDisplayName =
   storyWithContext(accountWithoutAvatar);
 
-export const WithAvatarAndDisplayName = () => <DropDownAvatarMenu />;
+export const WithAvatarAndDisplayName = storyWithContext(MOCK_ACCOUNT);
diff --git a/packages/fxa-settings/src/components/Settings/LinkedAccounts/index.stories.tsx b/packages/fxa-settings/src/components/Settings/LinkedAccounts/index.stories.tsx
@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Meta } from '@storybook/react';
 import { withLocalization } from 'fxa-react/lib/storybooks';
 import { LinkedAccounts } from '.';
@@ -18,28 +18,67 @@ export default {
 } as Meta;
 
 export const Default = () => (
-  <LocationProvider>
-    <AppContext.Provider
-      value={mockAppContext({
-        account: { linkedAccounts: MOCK_LINKED_ACCOUNTS } as any,
-      })}
-    >
-      <LinkedAccounts />
-    </AppContext.Provider>
-  </LocationProvider>
-);
-
-export const NoPassword = () => {
   <LocationProvider>
     <AppContext.Provider
       value={mockAppContext({
         account: {
-          hasPassword: false,
+          hasPassword: true,
           linkedAccounts: MOCK_LINKED_ACCOUNTS,
         } as any,
       })}
     >
       <LinkedAccounts />
     </AppContext.Provider>
-  </LocationProvider>;
+  </LocationProvider>
+);
+
+export const WithPasswordUnlinkModal = () => {
+  useEffect(() => {
+    (
+      document.querySelector(
+        `[data-testid="linked-account-unlink-${MOCK_LINKED_ACCOUNTS[0].providerId}"]`
+      ) as HTMLButtonElement
+    )?.click();
+  }, []);
+
+  return (
+    <LocationProvider>
+      <AppContext.Provider
+        value={mockAppContext({
+          account: {
+            hasPassword: true,
+            linkedAccounts: MOCK_LINKED_ACCOUNTS,
+            unlinkThirdParty: async () => {},
+          } as any,
+        })}
+      >
+        <LinkedAccounts />
+      </AppContext.Provider>
+    </LocationProvider>
+  );
+};
+
+export const NoPasswordUnlinkModal = () => {
+  useEffect(() => {
+    (
+      document.querySelector(
+        `[data-testid="linked-account-unlink-${MOCK_LINKED_ACCOUNTS[0].providerId}"]`
+      ) as HTMLButtonElement
+    )?.click();
+  }, []);
+
+  return (
+    <LocationProvider>
+      <AppContext.Provider
+        value={mockAppContext({
+          account: {
+            hasPassword: false,
+            linkedAccounts: MOCK_LINKED_ACCOUNTS,
+          } as any,
+        })}
+      >
+        <LinkedAccounts />
+      </AppContext.Provider>
+    </LocationProvider>
+  );
 };
diff --git a/packages/fxa-settings/src/components/Settings/Nav/index.stories.tsx b/packages/fxa-settings/src/components/Settings/Nav/index.stories.tsx
@@ -57,7 +57,7 @@ const storyWithContext = (
   return story;
 };
 
-export const Basic = () => <Nav />;
+export const Basic = storyWithContext(account);
 
 export const WithLinkToSubscriptions = storyWithContext(
   account,
diff --git a/packages/fxa-settings/src/components/Settings/PageSettings/index.stories.tsx b/packages/fxa-settings/src/components/Settings/PageSettings/index.stories.tsx
@@ -20,6 +20,7 @@ import {
   coldStartAccount,
   completelyFilledOutAccount,
   partiallyFilledOutAccount,
+  linkedAccountNoPassword,
 } from './mocks';
 
 export default {
@@ -88,3 +89,8 @@ export const PartiallyFilledOutWithPhonePromo = storyWithContext(
   accountEligibleForRecoveryPhoneOnly,
   'with recovery phone promo'
 );
+
+export const LinkedAccountNoPassword = storyWithContext(
+  linkedAccountNoPassword,
+  'linked account, no password'
+);
diff --git a/packages/fxa-settings/src/components/Settings/PageSettings/index.test.tsx b/packages/fxa-settings/src/components/Settings/PageSettings/index.test.tsx
@@ -18,7 +18,7 @@ import { mockWebIntegration } from '../../../pages/Signin/SigninRecoveryCode/moc
 import { SettingsContext } from '../../../models/contexts/SettingsContext';
 import { Constants } from '../../../lib/constants';
 import {
-  accountAlmostEligibleForRecoveryKeyButHasNoPassword,
+  linkedAccountNoPassword,
   accountEligibleForRecoveryKey,
   accountEligibleForRecoveryPhoneAndKey,
   accountEligibleForRecoveryPhoneOnly,
@@ -270,7 +270,7 @@ describe('PageSettings', () => {
       renderWithRouter(
         <AppContext.Provider
           value={mockAppContext({
-            account: accountAlmostEligibleForRecoveryKeyButHasNoPassword,
+            account: linkedAccountNoPassword,
           })}
         >
           <PageSettings integration={mockWebIntegration} />
diff --git a/packages/fxa-settings/src/components/Settings/PageSettings/mocks.tsx b/packages/fxa-settings/src/components/Settings/PageSettings/mocks.tsx
@@ -5,7 +5,7 @@
 import { isMobileDevice } from '../../../lib/utilities';
 import { Account } from '../../../models';
 import { MOCK_ACCOUNT, mockEmail } from '../../../models/mocks';
-import { MOCK_SERVICES } from '../ConnectedServices/mocks';
+import { MOCK_SERVICES, OAUTH_SERVICE_MOCKS } from '../ConnectedServices/mocks';
 import { MOCK_LINKED_ACCOUNTS } from '../LinkedAccounts/mocks';
 
 const SERVICES_NON_MOBILE = MOCK_SERVICES.filter((d) => !isMobileDevice(d));
@@ -37,12 +37,12 @@ export const accountEligibleForRecoveryKey = {
   hasPassword: true,
 } as unknown as Account;
 
-export const accountAlmostEligibleForRecoveryKeyButHasNoPassword = {
+export const linkedAccountNoPassword = {
   ...MOCK_ACCOUNT,
   displayName: null,
-  recoveryKey: { exists: false, estimatedSyncDeviceCount: 2 },
+  recoveryKey: { exists: false, estimatedSyncDeviceCount: 0 },
   totp: { exists: false, verified: false },
-  attachedClients: MOCK_SERVICES,
+  attachedClients: OAUTH_SERVICE_MOCKS,
   linkedAccounts: MOCK_LINKED_ACCOUNTS,
   hasPassword: false,
 } as unknown as Account;

Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@ export const DESKTOP_SYNC_MOCKS = [`
`84`	`84`	`},`
`85`	`85`	`];`
`86`	`86`
`87`		`-const OAUTH_SERVICE_MOCKS = [`
	`87`	`+export const OAUTH_SERVICE_MOCKS = [`
`88`	`88`	`{`
`89`	`89`	`clientId: 'a8c528140153d1c6',`
`90`	`90`	`deviceId: null,`