Merge pull request #1135 from dpc-sdp/feature/R20-1953-search-page-prop

[R20-1953] add searchUrl prop for primary nav

examples/nuxt-app/test/features/site/feature-flags.feature

@@ -36,7 +36,7 @@ Feature: Site feature flags
 
   @mockserver
   Scenario: Feature flags can set the footer to show only a single level
-    Given the site endpoint returns fixture "/site/flags-footer-single.json" with status 200
+    Given the site endpoint returns fixture "/site/flags-footer-single" with status 200
     And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200
     Given I visit the page "/"
     Then the footer nav should have the following single level items
@@ -47,3 +47,24 @@ Feature: Site feature flags
       | text     | url                           |
       | Facebook | https://facebook.com/VicGovAu |
       | Twitter  | https://twitter.com/VicGovAu  |
+
+  @mockserver
+  Scenario: The default primary nav form navigates to /search
+    Given the site endpoint returns fixture "/site/reference" with status 200
+    And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200
+    Given I visit the page "/"
+    When I click the primary nav button labelled "Search"
+    And I submit the primary nav search form
+    Then the current path should be "/search"
+
+  @mockserver
+  Scenario: Feature flags can set the primary nav search URL
+    Given I load the site fixture with "/site/reference"
+    And the feature flag "primaryNavSearchUrl" is set to "/custom-search-results"
+    And the site endpoint returns the loaded fixture
+    And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200
+    And the page endpoint for path "/custom-search-results" returns fixture "/landingpage/image-banner" with status 200
+    Given I visit the page "/"
+    When I click the primary nav button labelled "Search"
+    And I submit the primary nav search form
+    Then the current path should be "/custom-search-results"

examples/nuxt-app/test/fixtures/site/reference.json

@@ -6,6 +6,7 @@
     "twitter": {},
     "og": {}
   },
+  "featureFlags": {},
   "menus": {
     "menuMain": [
       {

packages/nuxt-ripple/components/TideBaseLayout.vue

@@ -20,6 +20,7 @@
           :items="site?.menus.menuMain || []"
           :showQuickExit="site?.showQuickExit"
           :showSearch="!featureFlags?.disablePrimaryNavSearch"
+          :searchUrl="featureFlags?.primaryNavSearchUrl"
         >
         </RplPrimaryNav>
       </slot>

packages/ripple-test-utils/step_definitions/common/mocks.ts

@@ -67,7 +67,7 @@ Given(
   }
 )
 
-Given('I load the page fixture with {string}', function (fixture) {
+Given('I load the page fixture with {string}', (fixture: string) => {
   cy.fixture(fixture).as('pageFixture')
 })
 
@@ -85,6 +85,21 @@ Given(
   }
 )
 
+Given('I load the site fixture with {string}', (fixture: string) => {
+  cy.fixture(fixture).as('siteFixture')
+})
+
+Given(`the site endpoint returns the loaded fixture`, () => {
+  cy.get('@siteFixture').then((response) => {
+    cy.task('setMockRouteWithQuery', {
+      route: '/api/tide/site',
+      status: 200,
+      response,
+      query: `?id=${Cypress.env('NUXT_PUBLIC_TIDE_SITE')}`
+    })
+  })
+})
+
 Given(
   `the endpoint {string} returns fixture {string} with status {int}`,
   (route: string, fixture: string, status: number) => {

packages/ripple-test-utils/step_definitions/common/navigation.ts

@@ -1,4 +1,4 @@
-import { When, Given } from '@badeball/cypress-cucumber-preprocessor'
+import { When, Given, Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Given(`I am using a {string} device`, (deviceString: any) => {
   cy.viewport(deviceString)
@@ -20,3 +20,19 @@ Given('I wait {int} seconds', (seconds: number) => {
 Given('I pause the test', () => {
   cy.pause()
 })
+
+When('I click the primary nav button labelled {string}', (label: string) => {
+  cy.get('.rpl-primary-nav__nav-bar-action')
+    .contains(label)
+    .click({ force: true })
+})
+
+Then('I submit the primary nav search form', () => {
+  cy.get('.rpl-primary-nav .rpl-search-bar').submit()
+})
+
+Then('the current path should be {string}', (path: string) => {
+  cy.location().should((loc) => {
+    expect(path).to.eq(loc.pathname)
+  })
+})

packages/ripple-test-utils/step_definitions/common/shared-elements.ts

@@ -1,4 +1,10 @@
-import { Then, DataTable, When } from '@badeball/cypress-cucumber-preprocessor'
+import {
+  Then,
+  DataTable,
+  When,
+  Given
+} from '@badeball/cypress-cucumber-preprocessor'
+import { set } from 'lodash-es'
 
 Then('the page title should be {string}', (title: string) => {
   cy.title().should('equal', title)
@@ -205,3 +211,12 @@ Then('the footer should have the following logos', (dataTable: DataTable) => {
       })
   })
 })
+
+Given(
+  'the feature flag {string} is set to {string}',
+  (flag: string, value: string) => {
+    cy.get('@siteFixture').then((response) => {
+      set(response, `featureFlags.${flag}`, value)
+    })
+  }
+)

packages/ripple-tide-api/types.d.ts

@@ -248,6 +248,10 @@ export interface IRplFeatureFlags {
    * @description Option to disable the display of the search form within the primary navigation
    */
   disablePrimaryNavSearch?: boolean
+  /**
+   * @description Option to override the default URL the search for redirects to
+   */
+  primaryNavSearchUrl?: string
   /**
    * @description Option to disable the display of coloured/rainbow stripes on top of promo cards
    */

packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue

@@ -33,12 +33,14 @@ interface Props {
   secondaryLogo?: IRplPrimaryNavLogo
   items: IRplPrimaryNavItem[]
   showSearch?: boolean
+  searchUrl?: string
   showQuickExit?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   secondaryLogo: undefined,
   showSearch: true,
+  searchUrl: '/search',
   showQuickExit: true
 })
 
@@ -300,6 +302,7 @@ provide('navFocus', navFocus)
       <RplPrimaryNavSearchForm
         v-if="isSearchActive"
         :show-quick-exit="showQuickExit"
+        :search-url="searchUrl"
       />
     </div>
     <RplPrimaryNavQuickExit v-if="showQuickExit" variant="fixed" />

packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.vue

@@ -195,11 +195,7 @@ const handleToggleItem = (level: number, item) => {
 
       <!-- Search toggle -->
       <li v-if="showSearch">
-        <RplPrimaryNavBarAction
-          type="toggle"
-          href="/search"
-          @click="toggleSearch()"
-        >
+        <RplPrimaryNavBarAction type="toggle" @click="toggleSearch()">
           <div v-if="!isSearchActive">
             <span class="rpl-primary-nav__nav-bar-search-label">Search</span
             >&NoBreak;<span

packages/ripple-ui-core/src/components/primary-nav/components/search-form/RplPrimaryNavSearchForm.vue

@@ -5,14 +5,15 @@ import { ref, onMounted } from 'vue'
 
 interface Props {
   showQuickExit: boolean
+  searchUrl: boolean
 }
 
 const searchBar = ref(null)
 
-withDefaults(defineProps<Props>(), {})
+const props = withDefaults(defineProps<Props>(), {})
 
 const handleSubmit = (event) => {
-  window.location.href = `/search?q=${event.value}`
+  window.location.href = `${props.searchUrl}?q=${event.value}`
 }
 
 onMounted(() => {

packages/ripple-ui-core/src/components/tabs/RplTabs.cy.ts

@@ -24,7 +24,7 @@ describe('RplTabs', () => {
     cy.mount(RplTabs, {
       props: { ...baseProps, activeTab: 'one', [`onToggleTab`]: onChangeSpy }
     })
-    cy.get('.rpl-tab button').contains('Two').click()
+    cy.get('.rpl-tab').contains('Two').click()
     cy.get('@onChangeSpy').should('have.been.calledWith', {
       action: 'select',
       id: 'two',