From e65573e38424d82b670f7fc0b2d229b6cc293621 Mon Sep 17 00:00:00 2001
From: Gavin King <gavin.king@itslearning.com>
Date: Sun, 17 Jun 2018 20:28:31 +0200
Subject: [PATCH] Creating svelte test and integration locations to match vue

---
 .circleci/config.yml                          | 11 ++++++++
 .github/CODEOWNERS                            |  6 +++--
 .../buildTypes/StotybookApp.kt                |  1 +
 .../app-acceptance.stories.storyshot          |  8 ++++++
 .../stories/app-acceptance.stories.js         |  1 +
 examples/svelte-kitchen-sink/package.json     | 12 ---------
 .../addon-actions.stories.storyshot           | 19 +++++++++++++
 .../addon-backgrounds.stories.storyshot       |  7 +++++
 .../addon-centered.stories.storyshot          | 11 ++++++++
 .../addon-knobs.stories.storyshot             | 11 ++++++++
 .../src/stories/__snapshots__/index.storyshot | 27 +++++++++++++++++++
 jest.config.js                                |  4 ++-
 package.json                                  |  1 +
 scripts/build-storybooks.sh                   |  2 +-
 scripts/netlify-build.sh                      |  7 +++++
 scripts/test.js                               | 16 ++++++++++-
 yarn.lock                                     |  4 +++
 17 files changed, 131 insertions(+), 17 deletions(-)
 create mode 100644 examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
 create mode 100644 examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
 create mode 100644 examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
 create mode 100644 examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
 create mode 100644 examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot

diff --git a/.circleci/config.yml b/.circleci/config.yml
index dd5a757f5786..5b890871da1b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -39,6 +39,7 @@ jobs:
             - examples/official-storybook/node_modules
             - examples/polymer-cli/node_modules
             - examples/vue-kitchen-sink/node_modules
+            - examples/svelte-kitchen-sink/node_modules
             - examples/marko-cli/node_modules
       - save_cache:
           name: "Cache core dist"
@@ -72,6 +73,11 @@ jobs:
           command: |
             cd examples/vue-kitchen-sink
             yarn build-storybook
+      - run:
+          name: "Build svelte kitchen-sink"
+          command: |
+            cd examples/svelte-kitchen-sink
+            yarn build-storybook
       - run:
           name: "Build angular-cli"
           command: |
@@ -126,6 +132,11 @@ jobs:
           command: |
             cd examples/vue-kitchen-sink
             yarn storybook --smoke-test
+      - run:
+          name: "Run svelte kitchen-sink (smoke test)"
+          command: |
+            cd examples/svelte-kitchen-sink
+            yarn storybook --smoke-test
       - run:
           name: "Run angular-cli (smoke test)"
           command: |
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 8b17af4b00e2..c5046de9426d 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -13,7 +13,7 @@
 /addons/links/ @hypnosphi @ndelangen
 /addons/notes/ @alexandrebodin
 /addons/options/ @danielduan @UsulPro
-/addons/storyshots/ @igor-dv @thomasbertet @hypnosphi 
+/addons/storyshots/ @igor-dv @thomasbertet @hypnosphi
 /addons/storysource/ @igor-dv
 /addons/viewport/ @saponifi3d
 
@@ -22,16 +22,18 @@
 /app/react/ @xavcz @shilman @thomasbertet
 /app/react-native/ @rmevans9 @danielduan @Gongreg @tmeasday
 /app/vue/ @thomasbertet @kazupon
+/app/svelte/
 
 /docs/ @ndelangen @shilman @hypnosphi
 
 /examples/angular-cli/ @igor-dv @alterx
-/examples/cra-kitchen-sink/ @ndelangen @UsulPro @hypnosphi 
+/examples/cra-kitchen-sink/ @ndelangen @UsulPro @hypnosphi
 /examples/crna-kitchen-sink/ @Gongreg @danielduan
 /examples/official-storybook/ @hypnosphi @danielduan @UsulPro
 /examples/polymer-cli/ @naipath @igor-dv
 /examples/react-native-vanilla/ @tmeasday @danielduan
 /examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
+/examples/svelte-kitchen-sink/
 
 /lib/addons/ @ndelangen @theinterned
 /lib/channel-postmessage/ @mnmtanish @ndelangen
diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StotybookApp.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StotybookApp.kt
index e30bd54b3bc3..0c43b087072c 100644
--- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StotybookApp.kt
+++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StotybookApp.kt
@@ -9,6 +9,7 @@ import jetbrains.buildServer.configs.kotlin.v2017_2.failureConditions.failOnMetr
 enum class StorybookApp(val appName: String, val exampleDir: String, val merged: Boolean = true) {
     CRA("CRA", "cra-kitchen-sink"),
     VUE("Vue", "vue-kitchen-sink"),
+    SVELTE("Svelte", "svelte-kitchen-sink"),
     ANGULAR("Angular", "angular-cli"),
     POLYMER("Polymer", "polymer-cli"),
     MITHRIL("Mithril", "mithril-kitchen-sink"),
diff --git a/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot b/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot
index b21bba9770d8..26dab3d069e1 100644
--- a/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot
@@ -47,3 +47,11 @@ exports[`Storyshots App|acceptance vue-kitchen-sink 1`] = `
   title="vue-kitchen-sink"
 />
 `;
+
+exports[`Storyshots App|acceptance svelte-kitchen-sink 1`] = `
+<iframe
+  src="svelte-kitchen-sink/index.html"
+  style="border:0;position:absolute;top:0;left:0;width:100vw;height:100vh"
+  title="svelte-kitchen-sink"
+/>
+`;
diff --git a/examples/official-storybook/stories/app-acceptance.stories.js b/examples/official-storybook/stories/app-acceptance.stories.js
index 41d67264af4a..fd446d59775a 100644
--- a/examples/official-storybook/stories/app-acceptance.stories.js
+++ b/examples/official-storybook/stories/app-acceptance.stories.js
@@ -19,6 +19,7 @@ const style = {
 [
   'cra-kitchen-sink',
   'vue-kitchen-sink',
+  'svelte-kitchen-sink',
   'angular-cli',
   'polymer-cli',
   'mithril-kitchen-sink',
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 134b8fc4966e..ad624dd9dc7e 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -25,7 +25,6 @@
     "@storybook/addons": "4.0.0-alpha.9",
     "@storybook/svelte": "4.0.0-alpha.9",
     "babel-core": "^6.26.3",
-    "babel-jest": "^23.0.1",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
     "cross-env": "^5.1.6",
@@ -36,16 +35,5 @@
     "webpack": "^4.10.2",
     "webpack-cli": "^3.0.8",
     "webpack-dev-server": "^3.1.4"
-  },
-  "jest": {
-    "transform": {
-      "\\.js$": "babel-jest",
-      "\\.svelte$": "svelte-jest"
-    },
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "svelte"
-    ]
   }
 }
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..7759695338e4
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action on component method 1`] = `
+Object {
+  "Component": [Function],
+  "methods": Object {
+    "onClick": [Function],
+  },
+}
+`;
+
+exports[`Storyshots Addon|Actions Action on view method 1`] = `
+Object {
+  "Component": [Function],
+  "methods": Object {
+    "onButtonClicked": [Function],
+  },
+}
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
new file mode 100644
index 000000000000..7c6082ee5841
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+Object {
+  "Component": [Function],
+}
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
new file mode 100644
index 000000000000..2faff288a2ab
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Centered rounded 1`] = `
+Object {
+  "Component": [Function],
+  "data": Object {
+    "Story": [Function],
+    "rounded": true,
+  },
+}
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..0a87afdd6c1b
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+Object {
+  "Component": [Function],
+  "data": Object {
+    "backgroundColor": "green",
+    "width": 200,
+  },
+}
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
new file mode 100644
index 000000000000..fe6d1e49af3f
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button rounded 1`] = `
+Object {
+  "Component": [Function],
+  "data": Object {
+    "message": "Rounded text",
+    "rounded": true,
+  },
+}
+`;
+
+exports[`Storyshots Button square 1`] = `
+Object {
+  "Component": [Function],
+  "data": Object {
+    "message": "Squared text",
+    "rounded": false,
+  },
+}
+`;
+
+exports[`Storyshots Welcome Welcome 1`] = `
+Object {
+  "Component": [Function],
+}
+`;
diff --git a/jest.config.js b/jest.config.js
index 4ca272a6bdaf..a28d3ce44395 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,6 +16,7 @@ module.exports = {
     '<rootDir>/lib',
     '<rootDir>/examples/cra-kitchen-sink',
     '<rootDir>/examples/vue-kitchen-sink',
+    '<rootDir>/examples/svelte-kitchen-sink',
     '<rootDir>/examples/html-kitchen-sink',
     '<rootDir>/examples/official-storybook',
     '<rootDir>/examples/angular-cli',
@@ -24,6 +25,7 @@ module.exports = {
     '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
     '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
+    '.*\\.(svelte)$': '<rootDir>/node_modules/svelte-jest',
   },
   testPathIgnorePatterns: ['/node_modules/', 'addon-jest.test.js', '/cli/test/'],
   collectCoverage: false,
@@ -40,5 +42,5 @@ module.exports = {
   setupTestFrameworkScriptFile: './scripts/jest.init.js',
   setupFiles: ['raf/polyfill'],
   testURL: 'http://localhost',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html', 'vue'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html', '.svelte', 'vue'],
 };
diff --git a/package.json b/package.json
index a7f25e8746fd..acd905dbe7a4 100644
--- a/package.json
+++ b/package.json
@@ -109,6 +109,7 @@
     "remark-lint": "^6.0.2",
     "remark-preset-lint-recommended": "^3.0.2",
     "shelljs": "^0.8.2",
+    "svelte-jest": "^0.2.0",
     "tslint": "~5.10.0",
     "tslint-config-prettier": "^1.13.0",
     "tslint-plugin-prettier": "^1.3.0",
diff --git a/scripts/build-storybooks.sh b/scripts/build-storybooks.sh
index 30f4e8361371..772555587f41 100755
--- a/scripts/build-storybooks.sh
+++ b/scripts/build-storybooks.sh
@@ -2,7 +2,7 @@
 #
 # This builds all the example storybooks for running chromatic on your dev machine
 
-examples=(angular-cli cra-kitchen-sink html-kitchen-sink marko-cli mithril-kitchen-sink polymer-cli vue-kitchen-sink official-storybook)
+examples=(angular-cli cra-kitchen-sink html-kitchen-sink marko-cli mithril-kitchen-sink polymer-cli vue-kitchen-sink svelte-kitchen-sink official-storybook)
 
 for example in "${examples[@]}"
 do
diff --git a/scripts/netlify-build.sh b/scripts/netlify-build.sh
index 761f1f145a53..b4404c1bb176 100755
--- a/scripts/netlify-build.sh
+++ b/scripts/netlify-build.sh
@@ -28,6 +28,13 @@ elif [ "$BUILD_CONTEXT" = "VUE" ]; then
   yarn build-storybook
   mv storybook-static ../../netlify-build
   popd
+elif [ "$BUILD_CONTEXT" = "SVELTE" ]; then
+  echo "netlify-build Svelte examples"
+  pushd examples/svelte-kitchen-sink
+  yarn
+  yarn build-storybook
+  mv storybook-static ../../netlify-build
+  popd
 elif [ "$BUILD_CONTEXT" = "ANGULAR" ]; then
   echo "netlify-build Angular examples"
   pushd examples/angular-cli
diff --git a/scripts/test.js b/scripts/test.js
index 9921c17f94b3..7ca44bf97a1b 100755
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -43,12 +43,26 @@ const createOption = ({ defaultValue, option, name, extraParam }) => ({
 
 const tasks = {
   core: createProject({
-    name: `Core & React & Vue & Polymer & Angular ${chalk.gray('(core)')}`,
+    name: `Core & React & Vue & Polymer & Angular & Svelte ${chalk.gray('(core)')}`,
     defaultValue: true,
     option: '--core',
     projectLocation: path.join(__dirname, '..'),
     isJest: true,
   }),
+  vue: createProject({
+    name: `Vue ${chalk.gray('(vue)')}`,
+    defaultValue: true,
+    option: '--vue',
+    projectLocation: path.join(__dirname, '..', 'examples/vue-kitchen-sink'),
+    isJest: true,
+  }),
+  svelte: createProject({
+    name: `Svelte ${chalk.gray('(svelte)')}`,
+    defaultValue: true,
+    option: '--svelte',
+    projectLocation: path.join(__dirname, '..', 'examples/svelte-kitchen-sink'),
+    isJest: true,
+  }),
   'react-native-vanilla': createProject({
     name: `React-Native example ${chalk.gray('(react-native-vanilla)')}`,
     defaultValue: true,
diff --git a/yarn.lock b/yarn.lock
index 4ee3b4cf9efb..8f271f1e5676 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17004,6 +17004,10 @@ svelte-dev-helper@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/svelte-dev-helper/-/svelte-dev-helper-1.1.7.tgz#b7d887c7be5abf7e2436f9467560061b1e2a935f"
 
+svelte-jest@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/svelte-jest/-/svelte-jest-0.2.0.tgz#a05ed16d092e8916de7a4526d1d5673499094756"
+
 svelte-loader@^2.9.1:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/svelte-loader/-/svelte-loader-2.9.1.tgz#e493c51ac6c2fe53867b1512abf46eb991ca3205"