Restore SvelteKit tests

javascript-modules/integration-tests/features/sveltekit/component_browser/sveltekit_bookshop_browser_granules.feature

@@ -0,0 +1,98 @@
+@sveltekit
+Feature: SvelteKit Bookshop Component Browser Granular Steps
+
+  Background:
+    Given the file tree:
+      """
+      package.json from starters/generate/package.json # <-- this .json line hurts my syntax highlighting
+      component-lib/
+        bookshop/
+          bookshop.config.js from starters/sveltekit/bookshop.config.js_
+      site/
+        cloudcannon.config.cjs from starters/sveltekit/cloudcannon.config.cjs_
+        svelte.config.js from starters/sveltekit/svelte.config.js_
+        vite.config.js from starters/sveltekit/vite.config.js_
+        package.json from starters/sveltekit/package.json # <-- this .json line hurts my syntax highlighting
+        content/
+          pages/
+            index.md from starters/sveltekit/content/pages/index.md
+        src/
+          app.html from starters/sveltekit/src/app.html
+          routes/
+            +layout.server.js from starters/sveltekit/src/routes/+layout.server.js_
+            +layout.svelte from starters/sveltekit/src/routes/+layout.svelte
+            +page.server.js from starters/sveltekit/src/routes/+page.server.js_
+            +page.svelte from starters/sveltekit/src/routes/+page.svelte
+      """
+    * a component-lib/components/single/single.bookshop.toml file containing:
+      """
+      [spec]
+      structures = [ "content_blocks" ]
+      label = "Single"
+      description = "Single component"
+      icon = "nature_people"
+      tags = ["Basic"]
+
+      [blueprint]
+      title = "Hello There, World"
+      """
+    * a component-lib/components/single/single.svelte file containing:
+      """
+      <script>
+      export let title;
+      </script>
+
+      <h1>{ title }</h1>
+      """
+    Given a site/src/routes/index.svelte file containing:
+      """
+      <script>
+        import { BookshopBrowser } from "@bookshop/sveltekit-bookshop";
+      </script>
+
+      <BookshopBrowser />
+      """
+
+  @skip # NYI
+  Scenario: Bookshop adds component browser markup
+    When I run "npm start" in the site directory
+    # Then stderr should be empty
+    *    stdout should not be empty
+    *    site/build/index.html should contain each row:
+      | text                                                       |
+      | <div data-bookshop-browser=""></div>                       |
+      | <script src="http://localhost:30775/bookshop.js"></script> |
+
+  @skip # NYI
+  Scenario: Bookshop Generate hydrates component browser
+    Given I run "npm start" in the site directory
+    *     I run "cloudcannon-reader --output build" in the site directory
+    When I run "npm start" in the . directory
+    # Then stderr should be empty
+    *    stdout should contain "Modifying output site at ./site/build"
+    *    stdout should contain "Built component browser into 1 page"
+    *    site/build/index.html should contain each row:
+      | text                                                |
+      | <script src="/_bookshop/bookshop-browser.min.js?cb= |
+
+  @web @skip # NYI
+  Scenario: Bookshop component browser initialises
+    When 🌐 I load my site
+    And 🌐 "window.bookshopBrowser?.hasRendered === true" evaluates
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    *    🌐 The selector .tutorial should contain "Select a component using the"
+
+  @web @skip # NYI
+  Scenario: Bookshop component browser renders a component
+    When 🌐 I load my site
+    And 🌐 "typeof window.BookshopBrowser !== 'undefined'" evaluates
+    And 🌐 "window.bookshopBrowser?.hasRendered === true" evaluates
+    And 🌐 I trigger a mousedown on li:nth-of-type(2)>button
+    And 🌐 "window.bookshopComponentHasRendered === true" evaluates
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    *    🌐 The selector h1 should contain "Hello There, World"
+
+  @web @skip # NYI
+  Scenario: Bookshop component browser renders a flat component

javascript-modules/integration-tests/features/sveltekit/live_editing/sveltekit_bookshop_live_bindings.feature

@@ -0,0 +1,143 @@
+@sveltekit @web
+Feature: SvelteKit Bookshop CloudCannon Live Editing Automatic Data Bindings
+
+  Background:
+    Given the file tree:
+      """
+      package.json from starters/generate/package.json # <-- this .json line hurts my syntax highlighting
+      component-lib/
+        bookshop/
+          bookshop.config.js from starters/sveltekit/bookshop.config.js_
+      site/
+        cloudcannon.config.cjs from starters/sveltekit/cloudcannon.config.cjs_
+        svelte.config.js from starters/sveltekit/svelte.config.js_
+        vite.config.js from starters/sveltekit/vite.config.js_
+        package.json from starters/sveltekit/package.json # <-- this .json line hurts my syntax highlighting
+        content/
+          pages/
+            index.md from starters/sveltekit/content/pages/index.md
+        src/
+          app.html from starters/sveltekit/src/app.html
+          routes/
+            +layout.server.js from starters/sveltekit/src/routes/+layout.server.js_
+            +layout.svelte from starters/sveltekit/src/routes/+layout.svelte
+            +page.server.js from starters/sveltekit/src/routes/+page.server.js_
+            +page.svelte from starters/sveltekit/src/routes/+page.svelte
+      """
+    Given a component-lib/components/title/title.svelte file containing:
+      """
+      <script>
+      export let innards;
+      </script>
+
+      <h1>{ innards }</h1>
+      """
+    Given [boilerplate]:
+      """
+      <script>
+        import { onDestroy, onMount } from "svelte";
+        import {
+            onCloudCannonChanges,
+            stopCloudCannonChanges,
+        } from "@cloudcannon/svelte-connector";
+        import {
+            Bookshop,
+            trackBookshopLiveData,
+        } from "@bookshop/sveltekit-bookshop";
+
+        export let data;
+        let pageDetails = data.data;
+
+        onMount(async () => {
+            onCloudCannonChanges(
+                (newProps) => {
+                  pageDetails = trackBookshopLiveData(newProps);
+                  // Set some flags that our tests look for — not needed in real usage.
+                  window.bookshopLive = window.bookshopLive || { renderCount: 0 };
+                  setTimeout(() => { window.bookshopLive.renderCount++; }, 100);
+                }
+            );
+        });
+
+        onDestroy(async () => {
+            stopCloudCannonChanges();
+        });
+      </script>
+      """
+
+  Scenario: Bookshop live renders a simple data binding
+    Given [front_matter]:
+      """
+      hero:
+        _bookshop_name: "TODO: Can only track primitives via _bookshop_name"
+        innards: "Hello World"
+      """
+    And a site/content/pages/index.md file containing:
+      """
+      ---
+      [front_matter]
+      ---
+      """
+    And a site/src/routes/+page.svelte file containing:
+      """
+      [boilerplate]
+
+      <Bookshop component="title" {...pageDetails.hero} />
+      """
+    And 🌐 I have loaded my site in CloudCannon
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    Then 🌐 The selector h1 should match "<h1 data-cms-bind=\"#hero\">Hello World</h1>"
+
+  @skip # TODO: Needs matching test
+  Scenario: Bookshop live renders a nested data binding
+
+  @skip # TODO: Needs matching test
+  Scenario: Bookshop live renders a nested loop data binding
+
+  @skip # TODO: Needs matching test
+  Scenario: Bookshop live renders a data binding through an assign
+
+  @skip # TODO: Needs matching test
+  Scenario: Bookshop live renders a parent data binding over a child
+
+  Scenario: Bookshop live respects the per-component dataBinding flag
+    Given [front_matter]:
+      """
+      hero:
+        _bookshop_name: "TODO: Can only track primitives via _bookshop_name"
+        innards: "Hello World"
+      """
+    And a site/content/pages/index.md file containing:
+      """
+      ---
+      [front_matter]
+      ---
+      """
+    And a site/src/routes/+page.svelte file containing:
+      """
+      [boilerplate]
+
+      <Bookshop component="title" {...pageDetails.hero} dataBinding=false />
+      <Bookshop component="title" {...pageDetails.hero} _dataBinding=false />
+      <Bookshop component="title" {...pageDetails.hero} data_binding=false />
+      <Bookshop component="title" {...pageDetails.hero} _data_binding=false />
+      <Bookshop component="title" {...pageDetails.hero} editorLink=false />
+      <Bookshop component="title" {...pageDetails.hero} _editorLink=false />
+      <Bookshop component="title" {...pageDetails.hero} editor_link=false />
+      <Bookshop component="title" {...pageDetails.hero} _editor_link=false />
+      """
+    And 🌐 I have loaded my site in CloudCannon
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    Then 🌐 The selector h1:nth-of-type(1) should match "<h1>Hello World</h1>"
+    Then 🌐 The selector h1:nth-of-type(2) should match "<h1>Hello World</h1>"
+    Then 🌐 The selector h1:nth-of-type(3) should match "<h1>Hello World</h1>"
+    Then 🌐 The selector h1:nth-of-type(4) should match "<h1>Hello World</h1>"
+    Then 🌐 The selector h1:nth-of-type(5) should match "<h1>Hello World</h1>"
+    Then 🌐 The selector h1:nth-of-type(6) should match "<h1>Hello World</h1>"
+    Then 🌐 The selector h1:nth-of-type(7) should match "<h1>Hello World</h1>"
+    Then 🌐 The selector h1:nth-of-type(8) should match "<h1>Hello World</h1>"
+
+  @skip # N/A — omit the trackBookshopData function to achieve this
+  Scenario: Bookshop live respects the global dataBindings flag

javascript-modules/integration-tests/features/sveltekit/live_editing/sveltekit_bookshop_live_complex.feature

@@ -0,0 +1,29 @@
+@sveltekit @web
+Feature: SvelteKit Bookshop CloudCannon Live Editing Selective Re-rendering
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders a subcomponent
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders a subinclude
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders through an assign
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders a top level loop
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders a range loop
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders a dynamic loop
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders a multiline component tag
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders a component without props
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders a nested component path

javascript-modules/integration-tests/features/sveltekit/live_editing/sveltekit_bookshop_live_data.feature

@@ -0,0 +1,14 @@
+@sveltekit @web
+Feature: SvelteKit Bookshop CloudCannon Live Editing Site Data
+
+  @skip # NYI
+  Scenario: Bookshop live renders website data
+
+  @skip # NYI
+  Scenario: Bookshop live renders special website config
+
+  @skip # NYI
+  Scenario: Bookshop live renders collections
+
+  @skip # NYI
+  Scenario: Bookshop live renders a warning when using content

javascript-modules/integration-tests/features/sveltekit/live_editing/sveltekit_bookshop_live_edge_cases.feature

@@ -0,0 +1,2 @@
+@sveltekit @web @bespoke
+Feature: SvelteKit Bookshop CloudCannon Live Editing Edge Cases

javascript-modules/integration-tests/features/sveltekit/live_editing/sveltekit_bookshop_live_errors.feature

@@ -0,0 +1,8 @@
+@sveltekit @web
+Feature: SvelteKit Bookshop CloudCannon Live Editing Error Boundaries
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop wraps component errors in an error boundary
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop replaces non-existent components in an error boundary

javascript-modules/integration-tests/features/sveltekit/live_editing/sveltekit_bookshop_live_filters.feature

@@ -0,0 +1,5 @@
+@sveltekit @web
+Feature: SvelteKit Bookshop CloudCannon Live Editing Filters and Functions
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders markdown

javascript-modules/integration-tests/features/sveltekit/live_editing/sveltekit_bookshop_live_granules.feature

@@ -0,0 +1,23 @@
+@sveltekit
+Feature: SvelteKit Bookshop CloudCannon Live Editing Granular Steps
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop adds live editing markup
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop Generate hydrates live editing
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders when CloudCannon initialises
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders when CloudCannon pushes new data
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders flat components when CloudCannon pushes new data
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop doesn't live render flagged components
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop sets a flag when live editing

javascript-modules/integration-tests/features/sveltekit/live_editing/sveltekit_bookshop_live_selective.feature

@@ -0,0 +1,8 @@
+@sveltekit @web
+Feature: SvelteKit Bookshop CloudCannon Live Editing Selective Re-rendering
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop selectively live renders a loop
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders components depth first

javascript-modules/integration-tests/features/sveltekit/live_editing/sveltekit_bookshop_live_starter.feature

@@ -0,0 +1,8 @@
+@sveltekit @web
+Feature: SvelteKit Bookshop CloudCannon Starter Template Live Editing
+
+  @skip # Handled outside of Bookshop
+  Scenario: Bookshop live renders updates to the starter template
+
+  @skip # TODO
+  Scenario: Bookshop live renders starter template data bindings

javascript-modules/integration-tests/features/sveltekit/sveltekit_bookshop_browser.feature

@@ -0,0 +1,47 @@
+@sveltekit
+Feature: SvelteKit Bookshop Component Browser
+  As a user of SvelteKit with Bookshop
+  I want my component browser to be preconfigured to my bookshop
+  So that I can view components while developing
+
+  Background:
+    Given the file tree:
+      """
+      component-lib/
+        bookshop/
+          bookshop.config.js from starters/sveltekit/bookshop.config.js_
+      site/
+        svelte.config.js from starters/sveltekit/svelte.config.js_
+        vite.config.js from starters/sveltekit/vite.config.js_
+        package.json from starters/sveltekit/package.json # <-- this .json line hurts my syntax highlighting
+        content/
+          pages/
+            index.md from starters/sveltekit/content/pages/index.md
+        src/
+          app.html from starters/sveltekit/src/app.html
+          routes/
+            +layout.server.js from starters/sveltekit/src/routes/+layout.server.js_
+            +layout.svelte from starters/sveltekit/src/routes/+layout.svelte
+            +page.server.js from starters/sveltekit/src/routes/+page.server.js_
+            +page.svelte from starters/sveltekit/src/routes/+page.svelte
+      """
+
+  Scenario: Bookshop Browser tags
+    Given a site/src/routes/+page.svelte file containing:
+      """
+      <script>
+        import { BookshopBrowser } from "@bookshop/sveltekit-bookshop";
+      </script>
+
+      <BookshopBrowser />
+      <BookshopBrowser port={99} />
+      """
+    When I run "npm start" in the site directory
+    # Then stderr should be empty
+    And stdout should contain "Wrote site to"
+    And site/build/index.html should contain each row:
+      | text                                                         |
+      | <div data-bookshop-browser=""></div>                         |
+      | <script src=\"http://localhost:30775/bookshop.js\"></script> |
+      | <script src=\"http://localhost:99/bookshop.js\"></script>    |
+