test(nuxt-app): add basic language tests

examples/nuxt-app/mock-routes.json

@@ -35,6 +35,14 @@
     "path": "/image-banner",
     "fixture": "landingpage/image-banner.json"
   },
+  {
+    "path": "/arabic-page",
+    "fixture": "landingpage/languages-ar.json"
+  },
+  {
+    "path": "/korean-page",
+    "fixture": "landingpage/languages-ko.json"
+  },
   {
     "path": "/grants",
     "fixture": "search-listing/grants/page.json"

examples/nuxt-app/test/features/landingpage/languages.feature

@@ -0,0 +1,18 @@
+Feature: Languages
+
+  Background:
+    Given the endpoint "/api/tide/site" with query "?id=8888" returns fixture "/site/reference" with status 200
+
+  @mockserver
+  Scenario: RTL languages load with the correct font and direction
+    Given the endpoint "/api/tide/page" with query "?path=/arabic-page&site=8888" returns fixture "/landingpage/languages-ar" with status 200
+    When I visit the page "/arabic-page"
+    Then The section ".rpl-header" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
+    And The section "#rpl-main" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
+
+  @mockserver
+  Scenario: LTR languages load with the correct font and direction
+    Given the endpoint "/api/tide/page" with query "?path=/korean-page&site=8888" returns fixture "/landingpage/languages-ko" with status 200
+    When I visit the page "/korean-page"
+    Then The section ".rpl-header" should be display "ltr" in "ko" with the font "Noto Sans KR"
+    And The section "#rpl-main" should be display "ltr" in "ko" with the font "Noto Sans KR"

examples/nuxt-app/test/fixtures/landingpage/languages-ar.json

@@ -0,0 +1,57 @@
+{
+  "title": "Demo Landing Page",
+  "changed": "2022-11-02T12:47:29+11:00",
+  "created": "2022-11-02T12:47:29+11:00",
+  "type": "landing_page",
+  "department": "Department of Premier and Cabinet",
+  "nid": "91dede11-10c0-111e1-1100-000000000339",
+  "summary": "مزايا رياض الأطفال",
+  "background": "default",
+  "header": {
+    "title": "مزايا رياض الأطفال",
+    "summary": "كيف تساعد خدمة رياض الأطفال المجانية كل طفل في ولاية فيكتوريا على الحصول على أفضل بداية في الحياة"
+  },
+  "bodyComponents": [
+    {
+      "uuid": "a99aa287-7fac-430b-864e-3a1b044460b1",
+      "component": "TideLandingPageContent",
+      "id": "969",
+      "internalAnchors": [
+        {
+          "text": "مزايا رياض الأطفال",
+          "id": "content-anchor-1",
+          "type": "h2"
+        },
+        {
+          "text": "في الحياة",
+          "id": "content-anchor-2",
+          "type": "h3"
+        }
+      ],
+      "props": {
+        "html": "<p>المجانية كل طفل في ولاية فيكتوريا على الحصول على أفضل بداية في الحياة</p>"
+      }
+    }
+  ],
+  "meta": {
+    "url": "/department-landing-page",
+    "langcode": "ar",
+    "description": "مزايا رياض الأطفال",
+    "additional": [
+      {
+        "tag": "link",
+        "attributes": {
+          "rel": "canonical",
+          "href": "https://develop.content.vic.gov.au/department-landing-page"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "name": "title",
+          "content": "مزايا رياض الأطفال | Single Digital Presence Content Management System"
+        }
+      }
+    ]
+  }
+}

examples/nuxt-app/test/fixtures/landingpage/languages-ko.json

@@ -0,0 +1,64 @@
+{
+  "title": "Demo Landing Page",
+  "changed": "2022-11-02T12:47:29+11:00",
+  "created": "2022-11-02T12:47:29+11:00",
+  "type": "landing_page",
+  "department": "Department of Premier and Cabinet",
+  "nid": "91dede11-10c0-111e1-1100-000000000339",
+  "summary": "지역 사회 서비스, 계약업체 청소 및 경비 산업의 빅토리아주",
+  "background": "default",
+  "header": {
+    "title": "지역 사회 서비스, 계약업체 청소 및 경비 산업의 빅토리아주",
+    "summary": "같은 고용주를 위해 장기간 근무한 근로자는 추가적인 휴가를 받을 수 있습니다."
+  },
+  "bodyComponents": [
+    {
+      "uuid": "a99aa287-7fac-430b-864e-3a1b044460b1",
+      "component": "TideLandingPageContent",
+      "id": "969",
+      "internalAnchors": [
+        {
+          "text": "지역 사회 서비스, 계약업체 청소 및 경비 산업의 빅토리아주",
+          "id": "content-anchor-1",
+          "type": "h2"
+        },
+        {
+          "text": "지역 사회 서비스",
+          "id": "content-anchor-2",
+          "type": "h3"
+        }
+      ],
+      "props": {
+        "html": "<p>같은 고용주를 위해 장기간 근무한 근로자는 추가적인 휴가를 받을 수 있습니다.</p>"
+      }
+    }
+  ],
+  "meta": {
+    "url": "/department-landing-page",
+    "langcode": "en",
+    "description": "지역 사회 서비스, 계약업체 청소 및 경비 산업의 빅토리아주",
+    "additional": [
+      {
+        "tag": "link",
+        "attributes": {
+          "rel": "canonical",
+          "href": "https://develop.content.vic.gov.au/department-landing-page"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "name": "title",
+          "content": "지역 사회 서비스, 계약업체 청소 및 경비 산업의 빅토리아주 | Single Digital Presence Content Management System"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "property": "og:locale",
+          "content": "ko"
+        }
+      }
+    ]
+  }
+}

packages/nuxt-ripple/composables/use-tide-language.ts

@@ -46,7 +46,7 @@ export default (page: any) => {
         meta.tag === 'meta' && meta.attributes?.property === 'og:locale'
     )
 
-    return lang?.attributes?.content?.toLowerCase() || 'en'
+    return lang?.attributes?.content?.toLowerCase() || page.meta?.langcode
   })
 
   const direction = computed(() =>

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

@@ -4,3 +4,4 @@ import './site/alerts'
 import './site/theme'
 import './shared-elements'
 import './sitemap'
+import './languages'

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

@@ -0,0 +1,15 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then(
+  `The section {string} should be display {string} in {string} with the font {string}`,
+  (selector: string, direction: string, language: string, font: string) => {
+    cy.get(selector).as('section')
+
+    cy.get('@section').should('have.class', `rpl-u-font-lang--${language}`)
+    cy.get('@section').should('have.attr', 'dir', direction)
+
+    cy.document().then((doc) => {
+      cy.wrap(doc.fonts).invoke('check', `16px ${font}`).should('be.true')
+    })
+  }
+)

packages/ripple-ui-core/src/components/header/RplHeaderGraphic.css

@@ -97,3 +97,13 @@
 .rpl-header-graphic__bottom {
   min-width: 150%;
 }
+
+.rpl-header--graphic-bottom[dir='rtl'] {
+  @media (--rpl-bp-m) {
+    --local-padding-bottom: var(--rpl-sp-12);
+  }
+
+  @media (--rpl-bp-l) {
+    --local-padding-bottom: var(--rpl-sp-14);
+  }
+}