From e16e8480fb6449bfa1245070b50355a116e8794f Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Mon, 13 Mar 2023 18:32:55 -0400
Subject: [PATCH] Add computed prop tests for const tags

---
 .../_config.js                                | 20 +++++++++
 .../main.svelte                               | 25 +++++++++++
 .../_config.js                                | 15 +++++++
 .../main.svelte                               | 42 +++++++++++++++++++
 4 files changed, 102 insertions(+)
 create mode 100644 test/runtime/samples/const-tag-await-then-destructuring-computed-props/_config.js
 create mode 100644 test/runtime/samples/const-tag-await-then-destructuring-computed-props/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each-destructure-computed-props/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-destructure-computed-props/main.svelte

diff --git a/test/runtime/samples/const-tag-await-then-destructuring-computed-props/_config.js b/test/runtime/samples/const-tag-await-then-destructuring-computed-props/_config.js
new file mode 100644
index 0000000000..ef1c60c66c
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then-destructuring-computed-props/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+    <p>4, 12, 60</p>
+  `,
+
+	async test({ component, target, assert }) {
+    component.permutation = [2, 3, 1];
+		await (component.promise1 = Promise.resolve({length: 1, width: 2, height: 3}));
+    try {
+		  await (component.promise2 = Promise.reject({length: 97, width: 98, height: 99}));
+    } catch (e) {
+      // nothing
+    }
+
+		assert.htmlEqual(target.innerHTML, `
+      <p>2, 11, 2</p>
+      <p>9506, 28811, 98</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-await-then-destructuring-computed-props/main.svelte b/test/runtime/samples/const-tag-await-then-destructuring-computed-props/main.svelte
new file mode 100644
index 0000000000..536f4a509a
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then-destructuring-computed-props/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let promise1 = {length: 5, width: 3, height: 4};
+	export let promise2 = {length: 12, width: 5, height: 13};
+  export let permutation = [1, 2, 3];
+
+  function calculate(length, width, height) {
+		return { 
+      '1-Dimensions': [length, width, height],
+      '2-Dimensions': [length * width, width * height, length * height],
+      '3-Dimensions': [length * width * height, length + width + height, length * width + width * height + length * height]
+    };
+	}
+</script>
+
+{#await promise1 then { length, width, height }}
+  {@const [a, b, c] = permutation}
+	{@const { [`${a}-Dimensions`]: { [c - 1]: first }, [`${b}-Dimensions`]: { [b - 1]: second }, [`${c}-Dimensions`]: { [a - 1]: third } } = calculate(length, width, height) }
+  <p>{first}, {second}, {third}</p>
+{/await}
+
+{#await promise2 catch { length, width, height }}
+  {@const [a, b, c] = permutation}
+	{@const { [`${a}-Dimensions`]: { [c - 1]: first }, [`${b}-Dimensions`]: { [b - 1]: second }, [`${c}-Dimensions`]: { [a - 1]: third } } = calculate(length, width, height) } 
+  <p>{first}, {second}, {third}</p>
+{/await}
diff --git a/test/runtime/samples/const-tag-each-destructure-computed-props/_config.js b/test/runtime/samples/const-tag-each-destructure-computed-props/_config.js
new file mode 100644
index 0000000000..87aac12083
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-destructure-computed-props/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<button>6, 12, 8, 24</button>
+		<button>45, 35, 63, 315</button>
+		<button>60, 48, 80, 480</button>
+	`,
+
+	async test({ component, target, assert }) {
+    component.boxes = [{ length: 10, width: 20, height: 30 }];
+
+    assert.htmlEqual(target.innerHTML, 
+      '<button>200, 600, 300, 6000</button>'
+    );
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-destructure-computed-props/main.svelte b/test/runtime/samples/const-tag-each-destructure-computed-props/main.svelte
new file mode 100644
index 0000000000..f45674044e
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-destructure-computed-props/main.svelte
@@ -0,0 +1,42 @@
+<script>
+	export let boxes = [
+		{length: 2, width: 3, height: 4},
+		{length: 9, width: 5, height: 7},
+		{length: 10, width: 6, height: 8}
+	];
+
+	function calculate(length, width, height) {
+		return { 
+      twoDimensions: {
+        bottomArea: length * width,
+        sideArea1: width * height,
+        sideArea2: length * height
+      },
+      threeDimensions: {
+        volume: length * width * height
+      }
+    };
+	}
+
+  export let dimension = 'Dimensions';
+  function changeDimension() {
+    dimension = 'DIMENSIONS';
+  }
+
+  let area = 'Area';
+</script>
+
+{#each boxes as { length, width, height }}
+	{@const {
+    [`two${dimension}`]: { 
+      i = 1, 
+      [`bottom${area}`]: bottom, 
+      [`side${area}${i++}`]: sideone, 
+      [`side${area}${i++}`]: sidetwo 
+    },
+    [`three${dimension}`]: {
+      volume
+    }
+  } = calculate(length, width, height)}
+	<button on:click={changeDimension}>{bottom}, {sideone}, {sidetwo}, {volume}</button>
+{/each}