From 7ceda857b2c678057e8cbc3cfb02a4bd309fcb7c Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Sun, 12 Apr 2026 12:21:58 -1000
Subject: [PATCH] Extract SERP chrome into separate React mounts

---
 app/helpers/react_helper.rb                   |  88 +++++++----
 .../components/SearchResultsFooter.tsx        |  39 +++++
 .../components/SearchResultsHeader.tsx        |  53 +++++++
 .../components/SearchResultsLayout.tsx        |  29 +---
 .../test/SearchResultsFooter.test.tsx         |  55 +++++++
 .../test/SearchResultsHeader.test.tsx         |  70 +++++++++
 .../test/SearchResultsLayout.test.tsx         |  31 ++--
 .../SearchResultsLayout.test.tsx.snap         | 145 ++++++------------
 spec/helpers/react_helper_spec.rb             |  19 ++-
 9 files changed, 354 insertions(+), 175 deletions(-)
 create mode 100644 app/javascript/components/SearchResultsFooter.tsx
 create mode 100644 app/javascript/components/SearchResultsHeader.tsx
 create mode 100644 app/javascript/test/SearchResultsFooter.test.tsx
 create mode 100644 app/javascript/test/SearchResultsHeader.test.tsx

diff --git a/app/helpers/react_helper.rb b/app/helpers/react_helper.rb
index 45be4b518..2f523a3f9 100644
--- a/app/helpers/react_helper.rb
+++ b/app/helpers/react_helper.rb
@@ -2,34 +2,23 @@
 
 module ReactHelper
   def search_results_layout(search, params, vertical, affiliate, search_options)
-    data = {
-      additionalResults: govbox_set_data(search),
-      affiliate: affiliate_data(affiliate),
-      agencyName: agency_name(affiliate.agency),
-      alert: search_page_alert(affiliate.alert),
-      extendedHeader: affiliate.use_extended_header,
-      facetsEnabled: ENV.fetch('FACETED_SEARCH_ENABLED', 'false') == 'true',
-      fontsAndColors: affiliate.visual_design_json,
-      footerLinks: links(affiliate, :footer_links),
-      jobsEnabled: (affiliate.jobs_enabled? and search.modules.include?('JOBS')),
-      language: affiliate.language.slice(:code, :rtl),
-      navigationLinks: navigation_links(search, params),
-      noResultsMessage: no_result_message(search),
-      page: page_data(affiliate),
-      params:,
-      primaryHeaderLinks: links(affiliate, :primary_header_links),
-      relatedSearches: related_searches(search),
-      relatedSites: related_sites(search),
-      relatedSitesDropdownLabel: affiliate.related_sites_dropdown_label,
-      resultsData: results_data(search),
-      secondaryHeaderLinks: links(affiliate, :secondary_header_links),
-      sitelimit: sitelimit_alert(search, params),
-      spellingSuggestion: spelling_text(search, search_options),
-      translations: translations(affiliate.locale),
-      vertical:
-    }
+    safe_join([
+      search_results_header(affiliate),
+      search_results_main(search, params, vertical, affiliate, search_options),
+      search_results_footer(affiliate)
+    ])
+  end
 
-    react_component('SearchResultsLayout', data.compact_blank)
+  def search_results_header(affiliate)
+    react_component('SearchResultsHeader', search_results_header_props(affiliate).compact_blank)
+  end
+
+  def search_results_main(search, params, vertical, affiliate, search_options)
+    react_component('SearchResultsLayout', search_results_layout_props(search, params, vertical, affiliate, search_options).compact_blank)
+  end
+
+  def search_results_footer(affiliate)
+    react_component('SearchResultsFooter', search_results_footer_props(affiliate).compact_blank)
   end
 
   def affiliate_data(affiliate)
@@ -64,6 +53,51 @@ def logo_text(blob)
 
   private
 
+  def search_results_header_props(affiliate)
+    search_results_context_props(affiliate).merge(
+      extendedHeader: affiliate.use_extended_header,
+      page: page_data(affiliate),
+      primaryHeaderLinks: links(affiliate, :primary_header_links),
+      secondaryHeaderLinks: links(affiliate, :secondary_header_links)
+    )
+  end
+
+  def search_results_layout_props(search, params, vertical, affiliate, search_options)
+    search_results_context_props(affiliate).merge(
+      additionalResults: govbox_set_data(search),
+      affiliate: affiliate_data(affiliate),
+      agencyName: agency_name(affiliate.agency),
+      alert: search_page_alert(affiliate.alert),
+      facetsEnabled: ENV.fetch('FACETED_SEARCH_ENABLED', 'false') == 'true',
+      jobsEnabled: (affiliate.jobs_enabled? and search.modules.include?('JOBS')),
+      navigationLinks: navigation_links(search, params),
+      noResultsMessage: no_result_message(search),
+      page: page_data(affiliate),
+      params:,
+      relatedSearches: related_searches(search),
+      relatedSites: related_sites(search),
+      relatedSitesDropdownLabel: affiliate.related_sites_dropdown_label,
+      resultsData: results_data(search),
+      sitelimit: sitelimit_alert(search, params),
+      spellingSuggestion: spelling_text(search, search_options),
+      vertical:
+    )
+  end
+
+  def search_results_footer_props(affiliate)
+    search_results_context_props(affiliate).merge(
+      footerLinks: links(affiliate, :footer_links)
+    )
+  end
+
+  def search_results_context_props(affiliate)
+    {
+      fontsAndColors: affiliate.visual_design_json,
+      language: affiliate.language.slice(:code, :rtl),
+      translations: translations(affiliate.locale)
+    }
+  end
+
   def related_searches(search)
     return [] if search.related_search.nil?
 
diff --git a/app/javascript/components/SearchResultsFooter.tsx b/app/javascript/components/SearchResultsFooter.tsx
new file mode 100644
index 000000000..d129ed298
--- /dev/null
+++ b/app/javascript/components/SearchResultsFooter.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { I18n } from 'i18n-js';
+
+import { Footer } from './Footer/Footer';
+import { LanguageContext } from '../contexts/LanguageContext';
+import { StyleContext, styles } from '../contexts/StyleContext';
+import { FontsAndColors, Language } from './SearchResultsLayout';
+
+interface SearchResultsFooterProps {
+  footerLinks?: {
+    title: string;
+    url: string;
+  }[];
+  translations: Record<string, unknown>;
+  language?: Language;
+  fontsAndColors?: FontsAndColors;
+}
+
+const SearchResultsFooter = ({
+  footerLinks,
+  translations,
+  language = { code: 'en', rtl: false },
+  fontsAndColors
+}: SearchResultsFooterProps) => {
+  const i18n = new I18n(translations);
+  i18n.defaultLocale = 'en';
+  i18n.enableFallback = true;
+  i18n.locale = language.code;
+
+  return (
+    <LanguageContext.Provider value={i18n}>
+      <StyleContext.Provider value={fontsAndColors || styles}>
+        <Footer footerLinks={footerLinks} />
+      </StyleContext.Provider>
+    </LanguageContext.Provider>
+  );
+};
+
+export default SearchResultsFooter;
diff --git a/app/javascript/components/SearchResultsHeader.tsx b/app/javascript/components/SearchResultsHeader.tsx
new file mode 100644
index 000000000..83d966037
--- /dev/null
+++ b/app/javascript/components/SearchResultsHeader.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { I18n } from 'i18n-js';
+
+import { Header } from './Header';
+import { LanguageContext } from '../contexts/LanguageContext';
+import { StyleContext, styles } from '../contexts/StyleContext';
+import { FontsAndColors, Language, PageData } from './SearchResultsLayout';
+
+interface SearchResultsHeaderProps {
+  page: PageData;
+  extendedHeader: boolean;
+  translations: Record<string, unknown>;
+  language?: Language;
+  fontsAndColors?: FontsAndColors;
+  primaryHeaderLinks?: {
+    title: string;
+    url: string;
+  }[];
+  secondaryHeaderLinks?: {
+    title: string;
+    url: string;
+  }[];
+}
+
+const SearchResultsHeader = ({
+  page,
+  extendedHeader,
+  translations,
+  language = { code: 'en', rtl: false },
+  fontsAndColors,
+  primaryHeaderLinks,
+  secondaryHeaderLinks
+}: SearchResultsHeaderProps) => {
+  const i18n = new I18n(translations);
+  i18n.defaultLocale = 'en';
+  i18n.enableFallback = true;
+  i18n.locale = language.code;
+
+  return (
+    <LanguageContext.Provider value={i18n}>
+      <StyleContext.Provider value={fontsAndColors || styles}>
+        <Header
+          page={page}
+          isBasic={!extendedHeader}
+          primaryHeaderLinks={primaryHeaderLinks}
+          secondaryHeaderLinks={secondaryHeaderLinks}
+        />
+      </StyleContext.Provider>
+    </LanguageContext.Provider>
+  );
+};
+
+export default SearchResultsHeader;
diff --git a/app/javascript/components/SearchResultsLayout.tsx b/app/javascript/components/SearchResultsLayout.tsx
index d93405cdf..bb3911d26 100644
--- a/app/javascript/components/SearchResultsLayout.tsx
+++ b/app/javascript/components/SearchResultsLayout.tsx
@@ -6,11 +6,9 @@ import { I18n } from 'i18n-js';
 
 import './SearchResultsLayout.css';
 
-import { Header } from './Header';
 import { Facets, AggregationData } from './Facets/Facets';
 import { SearchBar } from './SearchBar/SearchBar';
 import { Results } from './Results/Results';
-import { Footer } from './Footer/Footer';
 import { LanguageContext } from '../contexts/LanguageContext';
 import { StyleContext, styles } from '../contexts/StyleContext';
 export interface NavigationLink {
@@ -168,20 +166,7 @@ interface SearchResultsLayoutProps {
     url: string;
   };
   navigationLinks: NavigationLink[];
-  extendedHeader: boolean;
   fontsAndColors: FontsAndColors;
-  footerLinks?: {
-    title: string;
-    url: string;
-  }[];
-  primaryHeaderLinks?: {
-    title: string;
-    url: string;
-  }[];
-  secondaryHeaderLinks?: {
-    title: string;
-    url: string;
-  }[];
   relatedSearches?: { label: string; link: string }[];
   relatedSitesDropdownLabel?: string;
   agencyName?: string;
@@ -240,12 +225,8 @@ const GlobalStyle = createGlobalStyle<{ styles: { pageBackgroundColor: string; b
   }
 `;
 
-const isBasicHeader = (extendedHeader: boolean): boolean => {
-  return !extendedHeader;
-};
-
 // eslint-disable-next-line complexity
-const SearchResultsLayout = ({ page, resultsData, additionalResults, vertical, params = {}, translations, language = { code: 'en', rtl: false }, relatedSites = [], extendedHeader, footerLinks, primaryHeaderLinks, secondaryHeaderLinks, fontsAndColors, navigationLinks, relatedSitesDropdownLabel = '', alert, spellingSuggestion, relatedSearches, sitelimit, noResultsMessage, jobsEnabled, agencyName, facetsEnabled }: SearchResultsLayoutProps) => {
+const SearchResultsLayout = ({ page, resultsData, additionalResults, vertical, params = {}, translations, language = { code: 'en', rtl: false }, relatedSites = [], fontsAndColors, navigationLinks, relatedSitesDropdownLabel = '', alert, spellingSuggestion, relatedSearches, sitelimit, noResultsMessage, jobsEnabled, agencyName, facetsEnabled }: SearchResultsLayoutProps) => {
   const [isMobileView, setMobileView] = useState(false);
 
   const i18n = new I18n(translations);
@@ -266,12 +247,6 @@ const SearchResultsLayout = ({ page, resultsData, additionalResults, vertical, p
         <StyleContext.Consumer>
           {(value) => <GlobalStyle styles={{ ...value, facetsEnabled }} />}
         </StyleContext.Consumer>
-        <Header
-          page={page}
-          isBasic={isBasicHeader(extendedHeader)}
-          primaryHeaderLinks={primaryHeaderLinks}
-          secondaryHeaderLinks={secondaryHeaderLinks}
-        />
 
         <div className="usa-section serp-result-wrapper">
           <GridContainer>
@@ -333,8 +308,6 @@ const SearchResultsLayout = ({ page, resultsData, additionalResults, vertical, p
             </Grid>
           </GridContainer>
         </div>
-
-        <Footer footerLinks={footerLinks} />
       </StyleContext.Provider>
     </LanguageContext.Provider>
   );
diff --git a/app/javascript/test/SearchResultsFooter.test.tsx b/app/javascript/test/SearchResultsFooter.test.tsx
new file mode 100644
index 000000000..85a642c88
--- /dev/null
+++ b/app/javascript/test/SearchResultsFooter.test.tsx
@@ -0,0 +1,55 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import SearchResultsFooter from '../components/SearchResultsFooter';
+
+jest.mock('i18n-js', () => jest.requireActual('i18n-js/dist/require/index'));
+
+const fontsAndColors = {
+  activeSearchTabNavigationColor: '#1f1748',
+  bannerBackgroundColor: '#643617',
+  bannerTextColor: '#dacb1b',
+  bestBetBackgroundColor: '#6e09bf',
+  buttonBackgroundColor: '#cfcd03',
+  footerAndResultsFontFamily: '"Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif',
+  footerBackgroundColor: '#5fcfc5',
+  footerLinksTextColor: '#46f966',
+  headerBackgroundColor: '#4a402b',
+  headerLinksFontFamily: '"Georgia", "Cambria", "Times New Roman", "Times", serif',
+  headerNavigationBackgroundColor: '#83df0a',
+  headerPrimaryLinkColor: '#594973',
+  headerSecondaryLinkColor: '#c8155d',
+  headerTextColor: '#C000FE',
+  healthBenefitsHeaderBackgroundColor: '#abb178',
+  pageBackgroundColor: '#761816',
+  primaryNavigationFontFamily: '"Public Sans Web"',
+  primaryNavigationFontWeight: 'bold',
+  resultDescriptionColor: '#2bd4c7',
+  resultTitleColor: '#33f0aa',
+  resultTitleLinkVisitedColor: '#4a97ad',
+  resultUrlColor: '#475830',
+  searchTabNavigationLinkColor: '#aea9f7',
+  sectionTitleColor: '#8b4a35'
+};
+
+const translations = {
+  en: {
+    returnToTop: 'Return to top'
+  }
+};
+
+describe('SearchResultsFooter', () => {
+  it('renders the SERP footer chrome through its own mount', () => {
+    render(
+      <SearchResultsFooter
+        footerLinks={[{ title: 'first footer link', url: 'https://first.gov' }]}
+        translations={translations}
+        fontsAndColors={fontsAndColors}
+      />
+    );
+
+    expect(screen.getByText(/first footer link/i)).toHaveAttribute('href', 'https://first.gov');
+    expect(screen.getByText(/Return to top/i)).toBeInTheDocument();
+  });
+});
diff --git a/app/javascript/test/SearchResultsHeader.test.tsx b/app/javascript/test/SearchResultsHeader.test.tsx
new file mode 100644
index 000000000..fc3fe5cb8
--- /dev/null
+++ b/app/javascript/test/SearchResultsHeader.test.tsx
@@ -0,0 +1,70 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import SearchResultsHeader from '../components/SearchResultsHeader';
+
+jest.mock('i18n-js', () => jest.requireActual('i18n-js/dist/require/index'));
+
+const fontsAndColors = {
+  activeSearchTabNavigationColor: '#1f1748',
+  bannerBackgroundColor: '#643617',
+  bannerTextColor: '#dacb1b',
+  bestBetBackgroundColor: '#6e09bf',
+  buttonBackgroundColor: '#cfcd03',
+  footerAndResultsFontFamily: '"Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif',
+  footerBackgroundColor: '#5fcfc5',
+  footerLinksTextColor: '#46f966',
+  headerBackgroundColor: '#4a402b',
+  headerLinksFontFamily: '"Georgia", "Cambria", "Times New Roman", "Times", serif',
+  headerNavigationBackgroundColor: '#83df0a',
+  headerPrimaryLinkColor: '#594973',
+  headerSecondaryLinkColor: '#c8155d',
+  headerTextColor: '#C000FE',
+  healthBenefitsHeaderBackgroundColor: '#abb178',
+  pageBackgroundColor: '#761816',
+  primaryNavigationFontFamily: '"Public Sans Web"',
+  primaryNavigationFontWeight: 'bold',
+  resultDescriptionColor: '#2bd4c7',
+  resultTitleColor: '#33f0aa',
+  resultTitleLinkVisitedColor: '#4a97ad',
+  resultUrlColor: '#475830',
+  searchTabNavigationLinkColor: '#aea9f7',
+  sectionTitleColor: '#8b4a35'
+};
+
+const translations = {
+  en: {
+    searches: {
+      menu: 'Menu',
+      skipToMainContent: 'Skip to main content'
+    },
+    ariaLabelHeader: 'Primary navigation'
+  }
+};
+
+describe('SearchResultsHeader', () => {
+  it('renders the SERP header chrome through its own mount', () => {
+    render(
+      <SearchResultsHeader
+        page={{
+          affiliate: 'searchgov',
+          displayLogoOnly: false,
+          title: 'Search.gov',
+          logo: {
+            url: 'https://search.gov/logo.svg',
+            text: 'search.gov'
+          },
+          homepageUrl: 'https://search.gov',
+          showVoteOrgLink: false
+        }}
+        extendedHeader={false}
+        translations={translations}
+        fontsAndColors={fontsAndColors}
+      />
+    );
+
+    expect(screen.getByText(/Search.gov/i)).toBeInTheDocument();
+    expect(screen.getByText(/Skip to main content/i)).toBeInTheDocument();
+  });
+});
diff --git a/app/javascript/test/SearchResultsLayout.test.tsx b/app/javascript/test/SearchResultsLayout.test.tsx
index 41e8587b0..ae78ebc79 100644
--- a/app/javascript/test/SearchResultsLayout.test.tsx
+++ b/app/javascript/test/SearchResultsLayout.test.tsx
@@ -70,10 +70,9 @@ describe('SearchResultsLayout', () => {
     showVoteOrgLink: false
   };
 
-  it('renders the correct header type and content', () => {
-    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{}} resultsData={{ results: [], totalPages: 1, unboundedResults: false }} vertical='web' translations={translations} extendedHeader={false} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
-    const [header] = screen.getAllByTestId('header');
-    expect(header).toHaveClass('usa-header--basic');
+  it('renders the search bar and results shell content', () => {
+    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{}} resultsData={{ results: [], totalPages: 1, unboundedResults: false }} vertical='web' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
+    expect(screen.getByTestId('search-field')).toBeInTheDocument();
   });
 
   it('renders search results', () => {
@@ -82,7 +81,7 @@ describe('SearchResultsLayout', () => {
       results.push({ title: 'test result 1', url: 'https://www.search.gov', description: 'result body', fileType: 'PDF', publishedDate: 'May 9th, 2023', updatedDate: 'May 10th, 2023' });
     }
     const resultsData = { totalPages: 2, unboundedResults: true, results };
-    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} vertical='web' translations={translations} extendedHeader={true} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
+    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} vertical='web' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
     const resultTitle = screen.getAllByText(/test result 1/i);
     const resultUrl = screen.getAllByText(/www.search.gov/i);
     const resultBody = screen.getAllByText(/result body/i);
@@ -103,7 +102,7 @@ describe('SearchResultsLayout', () => {
       results.push({ title: 'test result 1', url: 'https://www.search.gov', publishedDate: 'May 9th, 2023', updatedDate: 'May 10th, 2023' });
     }
     const resultsData = { totalPages: 2, unboundedResults: true, results };
-    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} vertical='web' translations={translations} extendedHeader={true} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
+    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} vertical='web' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
     const resultTitle = screen.getAllByText(/test result 1/i);
     const resultUrl = screen.getAllByText(/www.search.gov/i);
     const publishedDate = screen.getAllByText(/May 9th, 2023/i);
@@ -121,7 +120,7 @@ describe('SearchResultsLayout', () => {
     }
     const additionalResults = { recommendedBy: 'USAgov', textBestBets: [{ title: 'A best bet', description: 'This is the best bet', url: 'http://www.example.com' }] };
     const resultsData = { totalPages: 2, unboundedResults: true, results };
-    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} additionalResults={additionalResults} vertical='web' translations={translations} extendedHeader={true} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
+    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} additionalResults={additionalResults} vertical='web' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
     const bestBetRecommendedBy = screen.getByText(/Recommended by USAgov/i);
     const bestBetTitle = screen.getByText(/A best bet/i);
     const bestBetDescription = screen.getByText(/This is the best bet/i);
@@ -139,7 +138,7 @@ describe('SearchResultsLayout', () => {
     }
     const additionalResults = { recommendedBy: 'USAgov', textBestBets: [], graphicsBestBet: { title: 'Search support', titleUrl: 'https://search.gov/support.html', imageUrl: 'https://search.gov/support.jpg', imageAltText: 'support alt text', links: [{ title: 'Learning', url: 'https://search.gov/learn' }] } };
     const resultsData = { totalPages: 2, unboundedResults: true, results };
-    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} additionalResults={additionalResults} vertical='web' translations={translations} extendedHeader={true} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
+    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} additionalResults={additionalResults} vertical='web' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
     const bestBetRecommendedBy = screen.getByText(/Recommended by USAgov/i);
     const bestBetTitle = screen.getByText(/Search support/i);
     const bestBetLink = screen.getByText(/Learning/i);
@@ -155,7 +154,7 @@ describe('SearchResultsLayout', () => {
     }
     const additionalResults = { recommendedBy: 'USAgov', textBestBets: [], graphicsBestBet: { title: 'Search support', titleUrl: 'https://search.gov/support.html', imageUrl: 'https://search.gov/support.jpg', imageAltText: 'support alt text', links: [{ title: 'Learning', url: 'https://search.gov/learn' }, { title: 'The homepage', url: 'https://search.gov' }, { title: 'Another link', url: 'https://www.google.com' }] } };
     const resultsData = { totalPages: 2, unboundedResults: true, results };
-    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} additionalResults={additionalResults} vertical='web' translations={translations} extendedHeader={true} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
+    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} additionalResults={additionalResults} vertical='web' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
     const bestBetRecommendedBy = screen.getByText(/Recommended by USAgov/i);
     const bestBetTitle = screen.getByText(/Search support/i);
     const bestBetLink1 = screen.getByText(/Learning/i);
@@ -170,14 +169,14 @@ describe('SearchResultsLayout', () => {
 
   it('renders image search results', () => {
     const resultsData = { totalPages: 2, unboundedResults: true, results: [{ title: 'test result 1', url: 'https://www.search.gov', description: 'result body', thumbnailUrl: 'https://www.search.gov/test_image.png', publishedDate: 'May 9th, 2023', updatedDate: 'May 10th, 2023' }] };
-    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} vertical='image' translations={translations} extendedHeader={true} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
+    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} vertical='image' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
     const resultTitle = screen.getByText(/test result 1/i);
     expect(resultTitle).toBeInTheDocument();
   });
 
   it('renders image page results', () => {
     const resultsData = { totalPages: 2, unboundedResults: true, results: [{ altText: 'Heritage Tourism | GSA', url: 'https://18f.gsa.gov/2015/06/22/avoiding-cloudfall/', thumbnailUrl: 'https://plus.unsplash.com/premium_photo-1664303499312-917c50e4047b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dG9ybmFkb3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60', image: true, title: 'test result 1', description: 'result body', publishedDate: 'May 9th, 2023', updatedDate: 'May 10th, 2023' }] };
-    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} vertical='image' translations={translations} extendedHeader={true} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
+    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} vertical='image' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
   });
 
   it('renders videos', () => {
@@ -192,18 +191,18 @@ describe('SearchResultsLayout', () => {
       youtubeDuration: '0:55'
     }];
     const resultsData = { totalPages: 2, unboundedResults: true, results: videos };
-    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} vertical='image' translations={translations} extendedHeader={true} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
+    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{ query: 'foo' }} resultsData={resultsData} vertical='image' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
     const resultTitle = screen.getByText(/test result 1/i);
     expect(resultTitle).toBeInTheDocument();
   });
 
   it('renders basic header styles properly', () => {
-    renderer.create(<SearchResultsLayout affiliate={affiliate} page={page} params={{}} resultsData={{ results: [], totalPages: 1, unboundedResults: false }} vertical='web' translations={translations} extendedHeader={false} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />).toJSON();
+    renderer.create(<SearchResultsLayout affiliate={affiliate} page={page} params={{}} resultsData={{ results: [], totalPages: 1, unboundedResults: false }} vertical='web' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />).toJSON();
     expect(document.head).toMatchSnapshot();
   });
 
   it('renders extended header styles properly', () => {
-    renderer.create(<SearchResultsLayout affiliate={affiliate} page={page} params={{}} resultsData={{ results: [], totalPages: 1, unboundedResults: false }} vertical='web' translations={translations} extendedHeader={true} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />).toJSON();
+    renderer.create(<SearchResultsLayout affiliate={affiliate} page={page} params={{}} resultsData={{ results: [], totalPages: 1, unboundedResults: false }} vertical='web' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />).toJSON();
     expect(document.head).toMatchSnapshot();
   });
 
@@ -214,7 +213,7 @@ describe('SearchResultsLayout', () => {
     }
     const resultsData = { totalPages: 2, unboundedResults: true, results };
 
-    renderer.create(<SearchResultsLayout affiliate={affiliate} page={page} params={{}} resultsData={resultsData} vertical='web' translations={translations} extendedHeader={true} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />).toJSON();
+    renderer.create(<SearchResultsLayout affiliate={affiliate} page={page} params={{}} resultsData={resultsData} vertical='web' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />).toJSON();
     expect(document.head).toMatchSnapshot();
   });
 });
@@ -237,7 +236,7 @@ describe('Tablet & Mobile view: SearchResultsLayout with facets', () => {
   };
 
   it('renders the facets', () => {
-    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{}} resultsData={{ results: [], totalPages: 1, unboundedResults: false }} vertical='web' translations={translations} extendedHeader={false} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
+    render(<SearchResultsLayout affiliate={affiliate} page={page} params={{}} resultsData={{ results: [], totalPages: 1, unboundedResults: false }} vertical='web' translations={translations} fontsAndColors={fontsAndColors} navigationLinks={navigationLinks} facetsEnabled={false} />);
     const filterLabel = screen.queryByText(/Filter search/i);
     // Below to be updated once facets backend is ready
     expect(filterLabel).not.toBeInTheDocument();
diff --git a/app/javascript/test/__snapshots__/SearchResultsLayout.test.tsx.snap b/app/javascript/test/__snapshots__/SearchResultsLayout.test.tsx.snap
index 446f7132c..ced1352c4 100644
--- a/app/javascript/test/__snapshots__/SearchResultsLayout.test.tsx.snap
+++ b/app/javascript/test/__snapshots__/SearchResultsLayout.test.tsx.snap
@@ -14,34 +14,21 @@ exports[`SearchResultsLayout renders basic header styles properly 1`] = `
     data-styled="active"
     data-styled-version="6.1.19"
   >
-    .RTYuM{color:#C000FE!important;}
-    .gIWNEz{background-color:#4a402b;}
-    .gIWNEz .usa-logo .usa-logo__text{font-family:"Public Sans Web"!important;}
-    .gIWNEz .usa-nav__primary,.gIWNEz .usa-nav__secondary-links{font-family:"Georgia","Cambria","Times New Roman","Times",serif;}
-    .gIWNEz a.usa-nav__link{color:#594973;}
-    .gIWNEz .usa-nav__secondary-item&gt;a{color:#c8155d;}
-    .gIWNEz button.usa-menu-btn{background-color:#cfcd03;}
-    .gIWNEz button.usa-menu-btn:hover{background-color:#9d9b02;}
-    .bucNov .usa-banner__header,.bucNov .usa-banner__button-text{background-color:#643617;color:#dacb1b;}
-    .bucNov .usa-banner__button::after,.bucNov .usa-banner__button[aria-expanded=true]:hover::after{background-color:#dacb1b;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a{color:#aea9f7;font-family:"Public Sans Web";}
-    .jhKtfk .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=false]{color:#aea9f7;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a::after{background-color:#aea9f7!important;}
-    .jhKtfk .usa-nav__primary&gt;.usa-nav__primary-item .usa-nav__link:hover::after{background-color:#aea9f7!important;}
-    .jhKtfk .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=true]{background-color:#aea9f7!important;}
-    .jhKtfk .vertical-wrapper .usa-nav__submenu{background-color:#aea9f7!important;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current{color:#1f1748!important;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current::after{background-color:#1f1748!important;}
-    .cAlnei{font-family:"Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;}
-    .cAlnei .result-title-label&gt;.result-title-link{color:#33f0aa;}
-    .cAlnei .result-title-label&gt;.result-title-link:visited{color:#4a97ad;}
-    .cAlnei .result-desc&gt;p{color:#2bd4c7;}
-    .cAlnei .result-desc .result-url-text{color:#475830;}
-    .cAlnei .result-desc .result-url-text{color:#475830;}
-    .cAlnei .filter-tags-wrapper .filter-tag{color:#33f0aa;}
-    .bxlWUC{font-family:"Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;background-color:#761816;}
-    .bxlWUC .usa-footer__return-to-top&gt;a,.bxlWUC a.usa-footer__primary-link{color:#46f966;}
-    .bxlWUC .usa-footer .usa-footer__primary-section{background-color:#5fcfc5;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a{color:#aea9f7;font-family:"Public Sans Web";}
+    .eXhRNU .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=false]{color:#aea9f7;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a::after{background-color:#aea9f7!important;}
+    .eXhRNU .usa-nav__primary&gt;.usa-nav__primary-item .usa-nav__link:hover::after{background-color:#aea9f7!important;}
+    .eXhRNU .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=true]{background-color:#aea9f7!important;}
+    .eXhRNU .vertical-wrapper .usa-nav__submenu{background-color:#aea9f7!important;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current{color:#1f1748!important;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current::after{background-color:#1f1748!important;}
+    .bpiZdq{font-family:"Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;}
+    .bpiZdq .result-title-label&gt;.result-title-link{color:#33f0aa;}
+    .bpiZdq .result-title-label&gt;.result-title-link:visited{color:#4a97ad;}
+    .bpiZdq .result-desc&gt;p{color:#2bd4c7;}
+    .bpiZdq .result-desc .result-url-text{color:#475830;}
+    .bpiZdq .result-desc .result-url-text{color:#475830;}
+    .bpiZdq .filter-tags-wrapper .filter-tag{color:#33f0aa;}
     @media (min-width: 64em){.usa-header--extended .usa-navbar,.usa-header--extended .usa-nav__inner,.usa-banner__inner{max-width:64rem;}}
     .serp-result-wrapper&gt;.grid-container{max-width:54rem;}
     .serp-result-wrapper{background-color:#761816;}
@@ -56,10 +43,6 @@ exports[`SearchResultsLayout renders basic header styles properly 1`] = `
 `;
 
 exports[`SearchResultsLayout renders extended header styles properly 1`] = `
-@media (max-width: 63.99em) {
-
-}
-
 @media (min-width: 64em) {
 
 }
@@ -73,38 +56,21 @@ exports[`SearchResultsLayout renders extended header styles properly 1`] = `
     data-styled="active"
     data-styled-version="6.1.19"
   >
-    .RTYuM{color:#C000FE!important;}
-    .iwzfgU{background-color:#4a402b;}
-    .iwzfgU .usa-logo .usa-logo__text{font-family:"Public Sans Web"!important;}
-    .iwzfgU .usa-nav__primary a{font-family:"Public Sans Web"!important;font-weight:bold!important;}
-    .iwzfgU .usa-nav__secondary{font-family:"Georgia","Cambria","Times New Roman","Times",serif;}
-    .iwzfgU .usa-nav{background-color:#83df0a;}
-    .iwzfgU a.usa-nav__link{color:#594973!important;}
-    .iwzfgU a.usa-nav__link:hover::after{background-color:#594973!important;}
-    .iwzfgU .usa-nav__secondary-item&gt;a{color:#c8155d;}
-    @media (max-width: 63.99em){.iwzfgU .usa-nav__secondary-item&gt;a{color:#594973;}}
-    .iwzfgU button.usa-menu-btn{background-color:#cfcd03;}
-    .iwzfgU button.usa-menu-btn:hover{background-color:#9d9b02;}
-    .bucNov .usa-banner__header,.bucNov .usa-banner__button-text{background-color:#643617;color:#dacb1b;}
-    .bucNov .usa-banner__button::after,.bucNov .usa-banner__button[aria-expanded=true]:hover::after{background-color:#dacb1b;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a{color:#aea9f7;font-family:"Public Sans Web";}
-    .jhKtfk .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=false]{color:#aea9f7;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a::after{background-color:#aea9f7!important;}
-    .jhKtfk .usa-nav__primary&gt;.usa-nav__primary-item .usa-nav__link:hover::after{background-color:#aea9f7!important;}
-    .jhKtfk .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=true]{background-color:#aea9f7!important;}
-    .jhKtfk .vertical-wrapper .usa-nav__submenu{background-color:#aea9f7!important;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current{color:#1f1748!important;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current::after{background-color:#1f1748!important;}
-    .cAlnei{font-family:"Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;}
-    .cAlnei .result-title-label&gt;.result-title-link{color:#33f0aa;}
-    .cAlnei .result-title-label&gt;.result-title-link:visited{color:#4a97ad;}
-    .cAlnei .result-desc&gt;p{color:#2bd4c7;}
-    .cAlnei .result-desc .result-url-text{color:#475830;}
-    .cAlnei .result-desc .result-url-text{color:#475830;}
-    .cAlnei .filter-tags-wrapper .filter-tag{color:#33f0aa;}
-    .bxlWUC{font-family:"Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;background-color:#761816;}
-    .bxlWUC .usa-footer__return-to-top&gt;a,.bxlWUC a.usa-footer__primary-link{color:#46f966;}
-    .bxlWUC .usa-footer .usa-footer__primary-section{background-color:#5fcfc5;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a{color:#aea9f7;font-family:"Public Sans Web";}
+    .eXhRNU .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=false]{color:#aea9f7;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a::after{background-color:#aea9f7!important;}
+    .eXhRNU .usa-nav__primary&gt;.usa-nav__primary-item .usa-nav__link:hover::after{background-color:#aea9f7!important;}
+    .eXhRNU .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=true]{background-color:#aea9f7!important;}
+    .eXhRNU .vertical-wrapper .usa-nav__submenu{background-color:#aea9f7!important;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current{color:#1f1748!important;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current::after{background-color:#1f1748!important;}
+    .bpiZdq{font-family:"Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;}
+    .bpiZdq .result-title-label&gt;.result-title-link{color:#33f0aa;}
+    .bpiZdq .result-title-label&gt;.result-title-link:visited{color:#4a97ad;}
+    .bpiZdq .result-desc&gt;p{color:#2bd4c7;}
+    .bpiZdq .result-desc .result-url-text{color:#475830;}
+    .bpiZdq .result-desc .result-url-text{color:#475830;}
+    .bpiZdq .filter-tags-wrapper .filter-tag{color:#33f0aa;}
     @media (min-width: 64em){.usa-header--extended .usa-navbar,.usa-header--extended .usa-nav__inner,.usa-banner__inner{max-width:64rem;}}
     .serp-result-wrapper&gt;.grid-container{max-width:54rem;}
     .serp-result-wrapper{background-color:#761816;}
@@ -119,10 +85,6 @@ exports[`SearchResultsLayout renders extended header styles properly 1`] = `
 `;
 
 exports[`SearchResultsLayout renders search with results styles properly 1`] = `
-@media (max-width: 63.99em) {
-
-}
-
 @media (min-width: 64em) {
 
 }
@@ -136,38 +98,21 @@ exports[`SearchResultsLayout renders search with results styles properly 1`] = `
     data-styled="active"
     data-styled-version="6.1.19"
   >
-    .RTYuM{color:#C000FE!important;}
-    .iwzfgU{background-color:#4a402b;}
-    .iwzfgU .usa-logo .usa-logo__text{font-family:"Public Sans Web"!important;}
-    .iwzfgU .usa-nav__primary a{font-family:"Public Sans Web"!important;font-weight:bold!important;}
-    .iwzfgU .usa-nav__secondary{font-family:"Georgia","Cambria","Times New Roman","Times",serif;}
-    .iwzfgU .usa-nav{background-color:#83df0a;}
-    .iwzfgU a.usa-nav__link{color:#594973!important;}
-    .iwzfgU a.usa-nav__link:hover::after{background-color:#594973!important;}
-    .iwzfgU .usa-nav__secondary-item&gt;a{color:#c8155d;}
-    @media (max-width: 63.99em){.iwzfgU .usa-nav__secondary-item&gt;a{color:#594973;}}
-    .iwzfgU button.usa-menu-btn{background-color:#cfcd03;}
-    .iwzfgU button.usa-menu-btn:hover{background-color:#9d9b02;}
-    .bucNov .usa-banner__header,.bucNov .usa-banner__button-text{background-color:#643617;color:#dacb1b;}
-    .bucNov .usa-banner__button::after,.bucNov .usa-banner__button[aria-expanded=true]:hover::after{background-color:#dacb1b;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a{color:#aea9f7;font-family:"Public Sans Web";}
-    .jhKtfk .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=false]{color:#aea9f7;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a::after{background-color:#aea9f7!important;}
-    .jhKtfk .usa-nav__primary&gt;.usa-nav__primary-item .usa-nav__link:hover::after{background-color:#aea9f7!important;}
-    .jhKtfk .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=true]{background-color:#aea9f7!important;}
-    .jhKtfk .vertical-wrapper .usa-nav__submenu{background-color:#aea9f7!important;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current{color:#1f1748!important;}
-    .jhKtfk li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current::after{background-color:#1f1748!important;}
-    .cAlnei{font-family:"Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;}
-    .cAlnei .result-title-label&gt;.result-title-link{color:#33f0aa;}
-    .cAlnei .result-title-label&gt;.result-title-link:visited{color:#4a97ad;}
-    .cAlnei .result-desc&gt;p{color:#2bd4c7;}
-    .cAlnei .result-desc .result-url-text{color:#475830;}
-    .cAlnei .result-desc .result-url-text{color:#475830;}
-    .cAlnei .filter-tags-wrapper .filter-tag{color:#33f0aa;}
-    .bxlWUC{font-family:"Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;background-color:#761816;}
-    .bxlWUC .usa-footer__return-to-top&gt;a,.bxlWUC a.usa-footer__primary-link{color:#46f966;}
-    .bxlWUC .usa-footer .usa-footer__primary-section{background-color:#5fcfc5;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a{color:#aea9f7;font-family:"Public Sans Web";}
+    .eXhRNU .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=false]{color:#aea9f7;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a::after{background-color:#aea9f7!important;}
+    .eXhRNU .usa-nav__primary&gt;.usa-nav__primary-item .usa-nav__link:hover::after{background-color:#aea9f7!important;}
+    .eXhRNU .usa-nav__primary&gt;.usa-nav__primary-item button[aria-expanded=true]{background-color:#aea9f7!important;}
+    .eXhRNU .vertical-wrapper .usa-nav__submenu{background-color:#aea9f7!important;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current{color:#1f1748!important;}
+    .eXhRNU li.usa-nav__primary-item:not(li.usa-nav__submenu-item)&gt;a.usa-current::after{background-color:#1f1748!important;}
+    .bpiZdq{font-family:"Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;}
+    .bpiZdq .result-title-label&gt;.result-title-link{color:#33f0aa;}
+    .bpiZdq .result-title-label&gt;.result-title-link:visited{color:#4a97ad;}
+    .bpiZdq .result-desc&gt;p{color:#2bd4c7;}
+    .bpiZdq .result-desc .result-url-text{color:#475830;}
+    .bpiZdq .result-desc .result-url-text{color:#475830;}
+    .bpiZdq .filter-tags-wrapper .filter-tag{color:#33f0aa;}
     @media (min-width: 64em){.usa-header--extended .usa-navbar,.usa-header--extended .usa-nav__inner,.usa-banner__inner{max-width:64rem;}}
     .serp-result-wrapper&gt;.grid-container{max-width:54rem;}
     .serp-result-wrapper{background-color:#761816;}
diff --git a/spec/helpers/react_helper_spec.rb b/spec/helpers/react_helper_spec.rb
index fb02a2d3e..6bfdf52fb 100644
--- a/spec/helpers/react_helper_spec.rb
+++ b/spec/helpers/react_helper_spec.rb
@@ -10,7 +10,18 @@
     let(:search_options) { {} }
 
     before do
-      allow(helper).to receive(:react_component)
+      allow(helper).to receive(:react_component).and_return('')
+    end
+
+    it 'renders search results header, body, and footer as separate components' do
+      helper.search_results_layout(search, {}, vertical, affiliate, search_options)
+
+      expect(helper).to have_received(:react_component).
+        with('SearchResultsHeader', hash_including(page: hash_including(title: affiliate.display_name)))
+      expect(helper).to have_received(:react_component).
+        with('SearchResultsLayout', hash_including(page: hash_including(title: affiliate.display_name)))
+      expect(helper).to have_received(:react_component).
+        with('SearchResultsFooter', hash_including(translations: anything))
     end
 
     context 'when an affiliate has primary header links' do
@@ -28,7 +39,7 @@
         helper.search_results_layout(search, {}, vertical, affiliate, search_options)
 
         expect(helper).to have_received(:react_component).
-          with('SearchResultsLayout', hash_including(primaryHeaderLinks: [
+          with('SearchResultsHeader', hash_including(primaryHeaderLinks: [
                                                        { title: 'Link 0', url: 'https://link_0.gov' },
                                                        { title: 'Link 1', url: 'https://link_1.gov' },
                                                        { title: 'Link 2', url: 'https://link_2.gov' }
@@ -51,7 +62,7 @@
         helper.search_results_layout(search, {}, vertical, affiliate, search_options)
 
         expect(helper).to have_received(:react_component).
-          with('SearchResultsLayout', hash_including(secondaryHeaderLinks: [
+          with('SearchResultsHeader', hash_including(secondaryHeaderLinks: [
                                                        { title: 'Link 0', url: 'https://link_0.gov' },
                                                        { title: 'Link 1', url: 'https://link_1.gov' },
                                                        { title: 'Link 2', url: 'https://link_2.gov' }
@@ -74,7 +85,7 @@
         helper.search_results_layout(search, {}, vertical, affiliate, search_options)
 
         expect(helper).to have_received(:react_component).
-          with('SearchResultsLayout', hash_including(footerLinks: [
+          with('SearchResultsFooter', hash_including(footerLinks: [
                                                        { title: 'Link 0', url: 'https://link_0.gov' },
                                                        { title: 'Link 1', url: 'https://link_1.gov' },
                                                        { title: 'Link 2', url: 'https://link_2.gov' }