Merge pull request #1222 from dpc-sdp/feature/skeleton-loading

[R20-1969] skeleton loading

examples/nuxt-app/components/global/TideSearchResultExampleSkeleton.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="tide-search-results-example-skeleton">
+    <RplSkeleton width="m" class="rpl-u-aspect-panorama" />
+    <RplSkeleton width="full" class="rpl-u-margin-t-2 rpl-type-p" />
+    <RplSkeleton width="s" class="rpl-u-margin-t-1 rpl-type-p" />
+  </div>
+</template>

examples/nuxt-app/test/features/search-listing/events.feature

@@ -6,7 +6,7 @@ Feature: Events collection
   @mockserver
   Example: Results formatting
     Given the page endpoint for path "/events" returns fixture "/search-listing/events/page" with status 200
-    And the search network request is stubbed with fixture "/search-listing/events/response" and status 200
+    And the search network request is stubbed with fixture "/search-listing/events/response", status 200 and delayed by 400 milliseconds
     When I visit the page "/events"
     Then the search listing page should have 2 results
     And the search listing layout should be "grid"

examples/nuxt-app/test/features/search-listing/filters.feature

@@ -375,3 +375,26 @@ Feature: Search listing - Filter
     When I visit the page "/no-search-input"
     Then the search listing page should have 2 results
     And only the search filters should be visible
+
+  @mockserver
+  Example: Submitting the filter form scrolls to results
+    Given the page endpoint for path "/" returns fixture "/search-listing/filters/page" with status 200
+    And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
+
+    When I visit the page "/"
+    And I type "The" into the search input
+    And I click the search button
+    Then I should be scrolled to the search results
+
+  @mockserver
+  Example: Submitting the filter form does not scroll to results when disabled
+    Given I load the page fixture with "/search-listing/filters/page"
+    And the search listing config has "scrollToResultsOnSubmit" set to "false"
+    And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
+    Then the page endpoint for path "/" returns the loaded fixture
+
+    When I visit the page "/"
+    And I type "The" into the search input
+    And I click the search button
+
+    Then I should not be scrolled to the search results

examples/nuxt-app/test/features/search-listing/grants.feature

@@ -10,7 +10,7 @@ Feature: Grants collection
   @mockserver
   Example: Results formatting
     Given the page endpoint for path "/grants" returns fixture "/search-listing/grants/page" with status 200
-    And the search network request is stubbed with fixture "/search-listing/grants/response" and status 200
+    And the search network request is stubbed with fixture "/search-listing/grants/response", status 200 and delayed by 400 milliseconds
     And the current date is "Fri, 02 Feb 2050 03:04:05 GMT"
     When I visit the page "/grants"
     Then the search listing page should have 3 results

examples/nuxt-app/test/features/search-listing/grid.feature

@@ -0,0 +1,36 @@
+Feature: Grid layout
+
+  As a site I can see a collection of links to other pages in a grid and interact with it to find the one I want.
+
+  Background:
+    Given the site endpoint returns fixture "/site/reference" with status 200
+    And the search autocomplete request is stubbed with "/search-listing/suggestions/none" fixture
+    And I am using a "macbook-16" device
+
+  @mockserver
+  Example: Results are display in a grid format with default skeleton loader
+    Given the page endpoint for path "/search-grid" returns fixture "/search-listing/grid/page" with status 200
+    And the search network request is stubbed with fixture "/search-listing/grid/response", status 200 and delayed by 400 milliseconds
+    When I visit the page "/search-grid"
+    Then the search listing skeleton should display 9 items with the class "tide-search-result-card-skeleton"
+
+    When I wait 500 milliseconds
+    Then the search listing page should have 9 results
+    Then the search listing layout should be "grid"
+    And the search network request should be called with the "/search-listing/grid/request" fixture
+    And the search listing results count should read "Displaying 1-9 of 55 results"
+    And the search listing results should have following items:
+      | title                                            | content                                                                             | component               |
+      | Strategy for Aboriginal Community-led Recovery   | The Strategy for Aboriginal Community-led Recovery                                  | tide-search-result-card |
+      | Emergency Recovery Victoria - Recovery Framework | This recovery framework provides a consistent and community-led approach            | tide-search-result-card |
+      | Community Recovery Toolkit                       | This toolkit provides practical advice on recovery processes, approaches, and tools | tide-search-result-card |
+
+  @mockserver
+  Example: A custom skeleton loader can be use for grid result items
+    Given I load the page fixture with "/search-listing/grid/page"
+    And the search listing result skeleton is set to the "TideSearchResultExampleSkeleton" component
+    And the search network request is stubbed with fixture "/search-listing/grid/response", status 200 and delayed by 400 milliseconds
+    Then the page endpoint for path "/search-grid" returns the loaded fixture
+
+    When I visit the page "/search-grid"
+    Then the search listing skeleton should display 9 items with the class "tide-search-results-example-skeleton"

examples/nuxt-app/test/features/search-listing/list.feature

@@ -0,0 +1,36 @@
+Feature: List layout
+
+  As a site I can see a collection of links to other pages in a list format
+
+  Background:
+    Given the site endpoint returns fixture "/site/reference" with status 200
+    And the search autocomplete request is stubbed with "/search-listing/suggestions/none" fixture
+    And I am using a "macbook-16" device
+
+  @mockserver
+  Example: Results are displayed in a list with default skeleton loader
+    Given the page endpoint for path "/search-list" returns fixture "/search-listing/list/page" with status 200
+    And the search network request is stubbed with fixture "/search-listing/list/response", status 200 and delayed by 400 milliseconds
+    When I visit the page "/search-list"
+    Then the search listing skeleton should display 9 items with the class "tide-search-result-skeleton"
+
+    When I wait 500 milliseconds
+    Then the search listing page should have 3 results
+    Then the search listing layout should be "list"
+    And the search network request should be called with the "/search-listing/list/request" fixture
+    And the search listing results count should read "Displaying 1-9 of 124 results"
+    And the search listing results should have following items:
+      | title                    | content                                       | component          |
+      | 2-BE-event-1             | The ingenious hero who travelled far and wide | tide-search-result |
+      | 5-BE-land-3 Landing Page | Outside thundered the approaching surf of war | tide-search-result |
+      | Accessibility - demo     | Accessibility information about this website. | tide-search-result |
+
+  @mockserver
+  Example: A custom skeleton loader can be use for list result items
+    Given I load the page fixture with "/search-listing/list/page"
+    And the search listing result skeleton is set to the "TideSearchResultExampleSkeleton" component
+    And the search network request is stubbed with fixture "/search-listing/list/response", status 200 and delayed by 400 milliseconds
+    Then the page endpoint for path "/search-list" returns the loaded fixture
+
+    When I visit the page "/search-list"
+    Then the search listing skeleton should display 9 items with the class "tide-search-results-example-skeleton"

examples/nuxt-app/test/features/search-listing/result-items.feature

@@ -7,7 +7,7 @@ Feature: Result items
   @mockserver
   Example: Result item type can be set per result
     Given the page endpoint for path "/search-results" returns fixture "/search-listing/result-items/page" with status 200
-    And the search network request is stubbed with fixture "/search-listing/result-items/response" and status 200
+    And the search network request is stubbed with fixture "/search-listing/result-items/response", status 200 and delayed by 400 milliseconds
 
     When I visit the page "/search-results"
     Then the search listing page should have 4 results

examples/nuxt-app/test/features/search-listing/search-query.feature

@@ -11,7 +11,7 @@ Feature: Search Queries
 
     When I visit the page "/"
     And the search network request should be called with the "/search-listing/search-query/request-initial" fixture
-    Then the search listing page should have 2 results
+    Then the search listing page should have 4 results
 
     When I type "Demo" into the search input
     And I click the search button
@@ -37,3 +37,25 @@ Feature: Search Queries
     When I toggle the search listing filters section
     And I clear the search filters
     And the search network request should be called with the "/search-listing/search-query/request-initial" fixture
+
+  @mockserver
+  Example: Submitting the search bar scrolls to results
+    Given the page endpoint for path "/" returns fixture "/search-listing/search-query/page" with status 200
+    And the search network request is stubbed with fixture "/search-listing/search-query/response" and status 200
+
+    When I visit the page "/"
+    And I type "The" into the search input
+    And I click the search button
+    Then I should be scrolled to the search results
+
+  @mockserver
+  Example: Submitting the search bar does not scroll to results when disabled
+    Given I load the page fixture with "/search-listing/search-query/page"
+    And the search listing config has "scrollToResultsOnSubmit" set to "false"
+    And the search network request is stubbed with fixture "/search-listing/search-query/response" and status 200
+    Then the page endpoint for path "/" returns the loaded fixture
+
+    When I visit the page "/"
+    And I type "The" into the search input
+    And I click the search button
+    Then I should not be scrolled to the search results

examples/nuxt-app/test/features/search-listing/table.feature

@@ -1,4 +1,4 @@
-Feature: Search listing table layout
+Feature: Table layout
 
   I can see a collection of results displayed in a tabular form
 
@@ -8,20 +8,33 @@ Feature: Search listing table layout
     And the search autocomplete request is stubbed with "/search-listing/suggestions/none" fixture
 
   @mockserver
-  Example: Grants
+  Example: Results are displayed in a table with default skeleton loader
     Given the page endpoint for path "/search-listing-table" returns fixture "/search-listing/table/page" with status 200
-    And the search network request is stubbed with fixture "/search-listing/table/response" and status 200
+    And the search network request is stubbed with fixture "/search-listing/table/response", status 200 and delayed by 400 milliseconds
     When I visit the page "/search-listing-table"
-    And the search network request should be called with the "/search-listing/table/request" fixture
+    Then the search listing skeleton should display 160 items with the class "tide-search-results-table-skeleton__cell"
+
+    When I wait 500 milliseconds
+    Then the search network request should be called with the "/search-listing/table/request" fixture
     And the search listing layout should be "table"
 
     Given a data table with type "search-listing-layout-table"
     Then the table should not display extra content
 
+  @mockserver
+  Example: A custom skeleton loader can be use for table cells items
+    Given I load the page fixture with "/search-listing/table/page"
+    And the search listing table result skeleton is set to the "TideSearchResultExampleSkeleton" component
+    And the search network request is stubbed with fixture "/search-listing/table/response", status 200 and delayed by 400 milliseconds
+    Then the page endpoint for path "/search-table" returns the loaded fixture
+
+    When I visit the page "/search-table"
+    Then the search listing skeleton should display 40 items with the class "tide-search-results-example-skeleton"
+
   @mockserver
   Example: Table shows extra content using a custom component
     Given the page endpoint for path "/search-listing-table-extra-components" returns fixture "/search-listing/table/page-extra-component" with status 200
-    And the search network request is stubbed with fixture "/search-listing/table/response" and status 200
+    And the search network request is stubbed with fixture "/search-listing/table/response", status 200 and delayed by 400 milliseconds
     When I visit the page "/search-listing-table-extra-components"
     And the search network request should be called with the "/search-listing/table/request" fixture
     And the search listing layout should be "table"
@@ -35,7 +48,7 @@ Feature: Search listing table layout
   @mockserver
   Example: Table shows extra structured content using object keys and components
     Given the page endpoint for path "/search-listing-table-structured" returns fixture "/search-listing/table/page-extra-structured" with status 200
-    And the search network request is stubbed with fixture "/search-listing/table/response-elastic" and status 200
+    And the search network request is stubbed with fixture "/search-listing/table/response-elastic", status 200 and delayed by 400 milliseconds
     When I visit the page "/search-listing-table-structured"
     And the search network request should be called with the "/search-listing/table/request" fixture
     And the search listing layout should be "table"
@@ -54,7 +67,7 @@ Feature: Search listing table layout
   @mockserver
   Example: Table renders cells using core components
     Given the page endpoint for path "/search-listing-table-structured" returns fixture "/search-listing/table/page-extra-structured" with status 200
-    And the search network request is stubbed with fixture "/search-listing/table/response-elastic" and status 200
+    And the search network request is stubbed with fixture "/search-listing/table/response-elastic", status 200 and delayed by 400 milliseconds
     When I visit the page "/search-listing-table-structured"
     And the search network request should be called with the "/search-listing/table/request" fixture
 

examples/nuxt-app/test/fixtures/search-listing/grid/page.json

@@ -22,7 +22,7 @@
         ]
       }
     },
-    "results": {
+    "resultsConfig": {
       "layout": {
         "component": "TideSearchResultsGrid"
       },

examples/nuxt-app/test/fixtures/search-listing/list/page.json

@@ -0,0 +1,69 @@
+{
+  "title": "Search listing list",
+  "changed": "2022-11-02T12:47:29+11:00",
+  "created": "2022-11-02T12:47:29+11:00",
+  "type": "tide_search_listing",
+  "nid": "11dede11-10c0-111e1-1100-000000000330",
+  "showTopicTags": true,
+  "summary": "Minim cillum dolore dolore laborum minim.",
+  "config": {
+    "searchListingConfig": {
+      "resultsPerPage": 9
+    },
+    "queryConfig": {
+      "multi_match": {
+        "query": "{{query}}",
+        "fields": [
+          "title^3",
+          "field_landing_page_summary^2",
+          "body",
+          "field_paragraph_body",
+          "summary_processed"
+        ]
+      }
+    },
+    "resultsConfig": {
+      "layout": {
+        "component": "TideSearchResultsList"
+      },
+      "item": {
+        "*": {
+          "component": "TideSearchResult"
+        }
+      }
+    },
+    "globalFilters": [
+      { "terms": { "type": ["landing_page", "event"] } },
+      { "terms": { "field_node_site": [8888] } }
+    ],
+    "userFilters": [
+      {
+        "id": "type",
+        "component": "TideSearchFilterDropdown",
+        "filter": {
+          "type": "type",
+          "value": "type.keyword"
+        },
+        "props": {
+          "id": "type",
+          "label": "Type",
+          "placeholder": "Select a type",
+          "type": "RplFormDropdown",
+          "multiple": true,
+          "options": [
+            {
+              "id": "landing_page",
+              "label": "Page",
+              "value": "Page"
+            },
+            {
+              "id": "event",
+              "label": "Event",
+              "value": "Event"
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

examples/nuxt-app/test/fixtures/search-listing/list/request.json

@@ -0,0 +1,14 @@
+{
+  "query": {
+    "bool": {
+      "must": [{ "match_all": {} }],
+      "filter": [
+        { "terms": { "type": ["landing_page", "event"] } },
+        { "terms": { "field_node_site": [8888] } }
+      ]
+    }
+  },
+  "size": 9,
+  "from": 0,
+  "sort": [{ "_score": "desc" }, { "_doc": "desc" }]
+}