diff --git a/.github/workflows/nuxt.yml b/.github/workflows/nuxt.yml index 69428ce77f..57a86165af 100644 --- a/.github/workflows/nuxt.yml +++ b/.github/workflows/nuxt.yml @@ -66,6 +66,7 @@ jobs: NUXT_PUBLIC_TIDE_SITE: 'TEST_SITE' NUXT_PUBLIC_API_URL: 'http://localhost:3001' NUXT_PUBLIC_TIDE_APP_SEARCH_ENGINE_NAME: 'TEST_ENGINE' + NUXT_PUBLIC_TIDE_ELASTICSEARCH_HOST: 'TEST_HOST' API_PORT: '3001' LOG_LEVEL: 'debug' # DEBUG: '@cypress/github-action' diff --git a/docs/content/framework/3.guides/3.brand-application.md b/docs/content/framework/3.guides/3.brand-application.md index 14ce8ec12e..4ce74d1f5f 100644 --- a/docs/content/framework/3.guides/3.brand-application.md +++ b/docs/content/framework/3.guides/3.brand-application.md @@ -86,9 +86,7 @@ Theme and feature flag properties may also be defined in the Nuxt `app.config.ts ``` export default defineAppConfig({ ripple: { - featureFlags: { - contentCollectionSearchConnector: 'elasticsearch' - }, + featureFlags: {}, theme: { 'rpl-clr-primary': '#6B19A3', 'rpl-clr-footer-alt': '#6B19A3', diff --git a/examples/nuxt-app/app.config.ts b/examples/nuxt-app/app.config.ts index 7dc3d99f60..73cbddcf74 100644 --- a/examples/nuxt-app/app.config.ts +++ b/examples/nuxt-app/app.config.ts @@ -9,9 +9,7 @@ export default defineAppConfig({ }, ripple: { packages: getDpcPkgs({ ...pkg.dependencies, ...pkg.devDependencies }), - featureFlags: { - contentCollectionSearchConnector: 'elasticsearch' - }, + featureFlags: {}, theme: { 'rpl-clr-primary': '#6B19A3', 'rpl-clr-footer-alt': '#6B19A3', diff --git a/examples/nuxt-app/package.json b/examples/nuxt-app/package.json index 0d364a6b25..3423eba2a9 100644 --- a/examples/nuxt-app/package.json +++ b/examples/nuxt-app/package.json @@ -17,8 +17,8 @@ "mockserver": "node ./../../packages/nuxt-ripple-cli/dist/commands/index.js mock ./test/fixtures -S ./test/fixtures/site/reference.json -R mock-routes.json", "cy:open": "cypress open --e2e --browser electron", "cy:run": "cypress run", - "test:ci": "NUXT_PUBLIC_TIDE_SITE=TEST_SITE NUXT_PUBLIC_TIDE_APP_SEARCH_ENGINE_NAME=TEST_ENGINE NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 start-test start tcp:3000 'cy:run'", - "test:integration": "NUXT_PUBLIC_TIDE_SITE=TEST_SITE NUXT_PUBLIC_TIDE_APP_SEARCH_ENGINE_NAME=TEST_ENGINE NUXT_PUBLIC_TIDE_BASE_URL=https://test.base.url/ NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 start-test dev tcp:3000 'cy:open'" + "test:ci": "NUXT_PUBLIC_TIDE_SITE=TEST_SITE NUXT_PUBLIC_TIDE_APP_SEARCH_ENGINE_NAME=TEST_ENGINE NUXT_PUBLIC_TIDE_ELASTICSEARCH_HOST=TEST_HOST NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 start-test start tcp:3000 'cy:run'", + "test:integration": "NUXT_PUBLIC_TIDE_SITE=TEST_SITE NUXT_PUBLIC_TIDE_APP_SEARCH_ENGINE_NAME=TEST_ENGINE NUXT_PUBLIC_TIDE_ELASTICSEARCH_HOST=TEST_HOST NUXT_PUBLIC_TIDE_BASE_URL=https://test.base.url/ NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 start-test dev tcp:3000 'cy:open'" }, "dependencies": { "@dpc-sdp/nuxt-ripple": "workspace:*", diff --git a/examples/nuxt-app/test/features/landingpage/content-collection.feature b/examples/nuxt-app/test/features/landingpage/content-collection.feature new file mode 100644 index 0000000000..ca4519aa2c --- /dev/null +++ b/examples/nuxt-app/test/features/landingpage/content-collection.feature @@ -0,0 +1,27 @@ +Feature: Content collection + + Background: + Given I load the site fixture with "/site/reference" + And the page endpoint for path "/" returns fixture "/landingpage/content-collection" with status 200 + + @mockserver + Scenario: Page component - Content collection (elasticsearch) + Given the "/**/_search" network request is stubbed with fixture "/landingpage/content-collection-response-elasticsearch" and status 200 as alias "ccReq" + And the feature flag "contentCollectionSearchConnector" is set to "elasticsearch" + And the site endpoint returns the loaded fixture + When I visit the page "/" + Then the content collection with ID "2192" exist with the following cards + | title | content | image | url | + | News for CC 01 | NP1 Etiam scelerisque lorem sit amet | /placeholders/medium.png | /news-cc-1 | + | News for CC 02 | NP2 Pellentesque a pharetra magna | | /news-cc-2 | + + @mockserver + Scenario: Page component - Content collection (appSearch) + Given the "/api/as/v1/engines/**/search.json" network request is stubbed with fixture "/landingpage/content-collection-response-appsearch" and status 200 as alias "ccReq" + And the feature flag "contentCollectionSearchConnector" is set to "appSearch" + And the site endpoint returns the loaded fixture + When I visit the page "/" + Then the content collection with ID "2192" exist with the following cards + | title | content | image | url | + | News for CC 1 AS | NP1 Etiam scelerisque lorem sit amet | /placeholders/medium.png | /news-cc-1 | + | News for CC 2 AS | NP2 Pellentesque a pharetra magna | | /news-cc-2 | diff --git a/examples/nuxt-app/test/fixtures/landingpage/content-collection-response-appsearch.json b/examples/nuxt-app/test/fixtures/landingpage/content-collection-response-appsearch.json new file mode 100644 index 0000000000..ada8543f2e --- /dev/null +++ b/examples/nuxt-app/test/fixtures/landingpage/content-collection-response-appsearch.json @@ -0,0 +1,91 @@ +{ + "meta": { + "alerts": [], + "warnings": [], + "precision": 2, + "engine": { + "name": "content-reference-sdp-vic-gov-au-default", + "type": "elasticsearch" + }, + "page": { + "current": 1, + "total_pages": 13, + "total_results": 37, + "size": 3 + }, + "request_id": "0b33285192fb0e2ac5899de6f7cada71" + }, + "results": [ + { + "field_media_image_absolute_path": { + "raw": [ + "/placeholders/medium.png" + ] + }, + "field_landing_page_summary": { + "snippet": "NP1 Etiam scelerisque lorem sit amet sapien iaculis, nec dignissim augue cursus. Mauris eu purus a neque tristique venenatis sit amet sed sem. Aenean" + }, + "title": { + "raw": [ + "News for CC 1 AS" + ] + }, + "type": { + "raw": [ + "news" + ] + }, + "url": { + "raw": [ + "/site-8888/news-cc-1" + ] + }, + "changed": { + "raw": [ + "2024-10-28T23:32:03+00:00" + ] + }, + "_meta": { + "engine": "content-reference-sdp-vic-gov-au-default", + "score": null, + "id": "entity:node/167:en" + }, + "id": { + "raw": "entity:node/167:en" + } + }, + { + "field_landing_page_summary": { + "snippet": "NP2 Pellentesque a pharetra magna. Pellentesque vitae est a sapien mi enim, eu sodales diam pretium in. Quisque vitae quam et lectus condimentum" + }, + "title": { + "raw": [ + "News for CC 2 AS" + ] + }, + "type": { + "raw": [ + "news" + ] + }, + "url": { + "raw": [ + "/site-8888/news-cc-2" + ] + }, + "changed": { + "raw": [ + "2024-10-28T23:32:03+00:00" + ] + }, + "_meta": { + "engine": "content-reference-sdp-vic-gov-au-default", + "score": null, + "id": "entity:node/168:en" + }, + "id": { + "raw": "entity:node/168:en" + } + } + ] +} diff --git a/examples/nuxt-app/test/fixtures/landingpage/content-collection-response-elasticsearch.json b/examples/nuxt-app/test/fixtures/landingpage/content-collection-response-elasticsearch.json new file mode 100644 index 0000000000..3fc3b7c59e --- /dev/null +++ b/examples/nuxt-app/test/fixtures/landingpage/content-collection-response-elasticsearch.json @@ -0,0 +1,73 @@ +{ + "took": 2, + "hits": { + "total": { + "value": 285, + "relation": "eq" + }, + "max_score": null, + "hits": [ + { + "_index": "b56de58036ae7d6456d5b246f85ffe88--elasticsearch_index_develop_node", + "_id": "entity:node/167:en", + "_score": null, + "_ignored": [ + "body.keyword" + ], + "_source": { + "field_media_image_absolute_path": [ + "/placeholders/medium.png" + ], + "field_landing_page_summary": [ + "NP1 Etiam scelerisque lorem sit amet sapien iaculis, nec dignissim augue cursus. Mauris eu purus a neque tristique venenatis sit amet sed sem. Aenean viverra lectus ut tempus sollicitudin." + ], + "title": [ + "News for CC 01" + ], + "type": [ + "news" + ], + "url": [ + "/site-8888/news-cc-1" + ], + "changed": [ + "2024-10-28T22:18:51+11:00" + ] + }, + "sort": [ + 2540329200000, + 1730114331000 + ] + }, + { + "_index": "b56de58036ae7d6456d5b246f85ffe88--elasticsearch_index_develop_node", + "_id": "entity:node/168:en", + "_score": null, + "_ignored": [ + "body.keyword" + ], + "_source": { + "field_landing_page_summary": [ + "NP2 Pellentesque a pharetra magna. Pellentesque vitae est a sapien mi enim, eu sodales diam pretium in. Quisque vitae quam et lectus condimentum ultricies." + ], + "title": [ + "News for CC 02" + ], + "type": [ + "news" + ], + "url": [ + "/site-8888/news-cc-2" + ], + "changed": [ + "2024-10-28T22:18:51+11:00" + ] + }, + "sort": [ + 2477257200000, + 1730114331000 + ] + } + ] + } +} diff --git a/examples/nuxt-app/test/fixtures/landingpage/content-collection.json b/examples/nuxt-app/test/fixtures/landingpage/content-collection.json new file mode 100644 index 0000000000..5bf4fdbf9d --- /dev/null +++ b/examples/nuxt-app/test/fixtures/landingpage/content-collection.json @@ -0,0 +1,81 @@ +{ + "title": "Content Collection Landing Page", + "changed": "2022-11-02T12:47:29+11:00", + "created": "2022-11-02T12:47:29+11:00", + "type": "landing_page", + "status": "published", + "nid": "11dede11-10c0-111e1-1100-000000000330", + "showTopicTags": false, + "topicTags": [], + "sidebar": {}, + "summary": "Summary", + "background": "default", + "header": { + "title": "Test Content Collection", + "backgroundImage": null + }, + "bodyComponents": [ + { + "uuid": "b10133a8-a599-4b60-8313-a6d143cb0bd3", + "component": "TideLandingPageContentCollection", + "id": "2192", + "title": "Content Collection", + "props": { + "description": "

My content collection

", + "link": { + "text": "My link", + "url": "/my-lnk" + }, + "filters": [ + { + "type": "any", + "field": "type", + "values": [ + "landing_page", + "publication", + "news", + "event" + ] + }, + { + "type": "any", + "field": "field_node_site", + "values": [ + 8888 + ] + } + ], + "sortBy": [ + { + "field": "field_news_date", + "direction": "desc" + }, + { + "field": "created", + "direction": "desc" + } + ], + "perPage": 3, + "display": { + "type": "card", + "style": "thumbnail" + } + } + } + ], + "meta": { + "url": "/demo-landing-page", + "langcode": "en", + "description": "Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae", + "additional": [], + "keywords": "", + "image": { + "src": "/placeholders/medium.png", + "alt": "Demo: Melbourne tram", + "title": "Demo: Melbourne tram", + "width": 1413, + "height": 785, + "drupal_internal__target_id": 46 + } + } +} diff --git a/packages/nuxt-ripple-cli/src/commands/init/_templates/layer/latest/playground/app.config.ts.t b/packages/nuxt-ripple-cli/src/commands/init/_templates/layer/latest/playground/app.config.ts.t index ac74e911f2..aab5f2610a 100644 --- a/packages/nuxt-ripple-cli/src/commands/init/_templates/layer/latest/playground/app.config.ts.t +++ b/packages/nuxt-ripple-cli/src/commands/init/_templates/layer/latest/playground/app.config.ts.t @@ -3,9 +3,7 @@ to: .playground/app.config.ts --- export default defineAppConfig({ ripple: { - featureFlags: { - contentCollectionSearchConnector: 'elasticsearch' - }, + featureFlags: {}, theme: { 'rpl-clr-primary': '#6B19A3', 'rpl-clr-footer-alt': '#6B19A3', diff --git a/packages/ripple-test-utils/step_definitions/components/content-collection.ts b/packages/ripple-test-utils/step_definitions/components/content-collection.ts new file mode 100644 index 0000000000..bd4ababed6 --- /dev/null +++ b/packages/ripple-test-utils/step_definitions/components/content-collection.ts @@ -0,0 +1,43 @@ +import { Then, DataTable } from '@badeball/cypress-cucumber-preprocessor' + +Then( + 'the content collection with ID {string} exist with the following cards', + (id: string, dataTable: DataTable) => { + const table = dataTable.hashes() + + cy.get(`[data-component-id="${id}"]`).as('component') + + cy.get('@component') + .should('exist') + .should( + 'have.attr', + 'data-component-type', + 'TideLandingPageContentCollection' + ) + + cy.get('@component').within(() => { + cy.get('.rpl-card').as('items') + }) + + table.forEach((row, i: number) => { + cy.get('@items') + .eq(i) + .then((item) => { + cy.wrap(item).as('item') + cy.get('@item').find('a').should('have.attr', 'href', row.url) + cy.get('@item').find('.rpl-card__cta').should('contain', row.title) + cy.get('@item') + .find('.rpl-card__content') + .should('contain', row.content) + + if (row.image) { + cy.get('@item') + .find('.rpl-image') + .should('have.attr', 'src', row.image) + } else { + cy.get('@item').find('.rpl-image').should('not.exist') + } + }) + }) + } +) diff --git a/packages/ripple-test-utils/step_definitions/components/index.ts b/packages/ripple-test-utils/step_definitions/components/index.ts index ce7c381f0e..db59dde95d 100644 --- a/packages/ripple-test-utils/step_definitions/components/index.ts +++ b/packages/ripple-test-utils/step_definitions/components/index.ts @@ -17,5 +17,6 @@ import './stats-grid' import './timeline' import './data-table' import './category-grid' +import './content-collection' import './custom-collection' import './social-share' diff --git a/packages/ripple-tide-landing-page/app.config.ts b/packages/ripple-tide-landing-page/app.config.ts new file mode 100644 index 0000000000..b1cbeba1c6 --- /dev/null +++ b/packages/ripple-tide-landing-page/app.config.ts @@ -0,0 +1,7 @@ +export default defineAppConfig({ + ripple: { + featureFlags: { + contentCollectionSearchConnector: 'elasticsearch' + } + } +}) diff --git a/packages/ripple-tide-landing-page/components/global/TideLandingPage/ContentCollection.vue b/packages/ripple-tide-landing-page/components/global/TideLandingPage/ContentCollection.vue index bdfe1653ee..7e25b1c26f 100644 --- a/packages/ripple-tide-landing-page/components/global/TideLandingPage/ContentCollection.vue +++ b/packages/ripple-tide-landing-page/components/global/TideLandingPage/ContentCollection.vue @@ -59,13 +59,14 @@ import { stripMediaBaseUrl } from '@dpc-sdp/ripple-tide-api/utils' const { public: config } = useRuntimeConfig() -const featureFlags: IRplFeatureFlags = inject('featureFlags', { - contentCollectionSearchConnector: 'appSearch' -}) +const featureFlags: IRplFeatureFlags = inject('featureFlags', {}) + +const connectorType = + featureFlags.contentCollectionSearchConnector || 'appSearch' const apiConnectorOptions = { - type: featureFlags.contentCollectionSearchConnector, - ...(config.tide?.[featureFlags.contentCollectionSearchConnector] || {}) + type: connectorType, + ...(config.tide?.[connectorType] || {}) } const props = defineProps<{