test(nuxt-ripple): fixed footer tests and social links

dpc-sdp · Sep 5, 2023 · e047c19 · e047c19
1 parent a656d68
commit e047c19
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/examples/nuxt-app/test/features/site/shared-elements.feature b/examples/nuxt-app/test/features/site/shared-elements.feature
@@ -73,6 +73,10 @@ Feature: Shared site elements
     Then the footer nav section with title "Level 1 - Item 2" should have the following links
       | text             | url             |
       | Level 1 - Item 2 | /level-1-item-2 |
+    Then the footer nav section with title "Connect with us" should have the following links
+      | text     | url                       |
+      | Facebook | https://www.facebook.com/ |
+      | LinkedIn | https://www.linkedin.com/ |
     Then the footer should have the following links
       | text          | url            |
       | Footer link 1 | /footer-link-1 |

diff --git a/examples/nuxt-app/test/fixtures/site/shared-elements.json b/examples/nuxt-app/test/fixtures/site/shared-elements.json
@@ -41,6 +41,22 @@
       }
     }
   },
+  "socialLinks": [
+    {
+      "id": "social_link-0",
+      "text": "Facebook",
+      "url": "https://www.facebook.com/",
+      "icon": "icon-facebook",
+      "iconColour": "currentColor"
+    },
+    {
+      "id": "social_link-1",
+      "text": "LinkedIn",
+      "url": "https://www.linkedin.com/",
+      "icon": "icon-linkedin",
+      "iconColour": "currentColor"
+    }
+  ],
   "menus": {
     "menuMain": [
       {

diff --git a/packages/nuxt-ripple/components/TideBaseLayout.vue b/packages/nuxt-ripple/components/TideBaseLayout.vue
@@ -147,15 +147,20 @@ const showBreadcrumbs = computed(() => route.path !== '/')
 const showDraftAlert = computed(() => props.page?.status === 'draft')
 
 const footerNav = computed(() => {
-  const footerNav = props.site?.menus.menuFooter || []
-  return [
-    ...footerNav,
-    {
-      text: 'Connect with us',
-      id: '__footer_connect_with_us',
-      items: props.site?.socialLinks
-    }
-  ]
+  const menuMain = props.site?.menus.menuMain || []
+
+  if (props.site?.socialLinks?.length) {
+    return [
+      ...menuMain,
+      {
+        text: 'Connect with us',
+        id: '__footer_connect_with_us',
+        items: props.site?.socialLinks
+      }
+    ]
+  }
+
+  return menuMain
 })
 
 const nuxtApp = useNuxtApp()

diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts
@@ -46,6 +46,7 @@ export interface TideSiteData {
     twitter: any
     og: any
   }
+  socialLinks: TideMenuItem[]
   menus: {
     menuMain: TideMenuItem[]
     menuFooter: TideMenuItem[]