update opts

Author: AmarTrebinjac

packages/shared/src/features/onboarding/components/signupHero/HeroBackgroundLayer.spec.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { HeroBackgroundLayer } from './HeroBackgroundLayer';
+
+jest.mock('./CardsBackground', () => ({
+  CardsBackground: ({ splitMode }: { splitMode?: boolean }) => (
+    <div data-testid="cards-bg" data-split={String(!!splitMode)} />
+  ),
+}));
+
+jest.mock('./DeskBackground', () => ({
+  DeskBackground: () => <div data-testid="desk-bg" />,
+}));
+
+describe('HeroBackgroundLayer', () => {
+  it('renders the cards mosaic for the cards background regardless of image mode', () => {
+    render(<HeroBackgroundLayer background="cards" imageMode="colors" />);
+    expect(screen.getByTestId('cards-bg')).toHaveAttribute(
+      'data-split',
+      'false',
+    );
+    expect(screen.queryByTestId('desk-bg')).not.toBeInTheDocument();
+  });
+
+  it('renders the split cards mosaic for the split background', () => {
+    render(<HeroBackgroundLayer background="split" imageMode="image" />);
+    expect(screen.getByTestId('cards-bg')).toHaveAttribute(
+      'data-split',
+      'true',
+    );
+  });
+
+  it('renders the desk photo when image mode is image', () => {
+    render(<HeroBackgroundLayer background="desk" imageMode="image" />);
+    expect(screen.getByTestId('desk-bg')).toBeInTheDocument();
+    expect(screen.queryByTestId('cards-bg')).not.toBeInTheDocument();
+  });
+
+  it('omits the desk photo when image mode is colors', () => {
+    render(<HeroBackgroundLayer background="desk" imageMode="colors" />);
+    expect(screen.queryByTestId('desk-bg')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('cards-bg')).not.toBeInTheDocument();
+  });
+});

packages/shared/src/features/onboarding/components/signupHero/HeroBackgroundLayer.tsx

@@ -9,8 +9,11 @@ import { DeskBackground } from './DeskBackground';
 
 // =============================================================
 // Background layer — renders the selected background's artwork.
-// In 'colors' image mode the artwork is omitted, leaving just the
-// gradient backdrop.
+//
+// The cards and split backgrounds are always the live feed-cards
+// mosaic. `imageMode` only applies to the desk background (the only
+// one with an actual photo): 'colors' omits the photo, leaving just
+// the gradient backdrop.
 // =============================================================
 
 type HeroBackgroundLayerProps = {
@@ -22,13 +25,9 @@ export const HeroBackgroundLayer = ({
   background,
   imageMode,
 }: HeroBackgroundLayerProps): ReactElement | null => {
-  if (imageMode === 'colors') {
-    return null;
+  if (background === 'desk') {
+    return imageMode === 'colors' ? null : <DeskBackground />;
   }
 
-  return background === 'desk' ? (
-    <DeskBackground />
-  ) : (
-    <CardsBackground splitMode={background === 'split'} />
-  );
+  return <CardsBackground splitMode={background === 'split'} />;
 };