Creating svelte test and integration locations to match vue

storybookjs · Jun 17, 2018 · e65573e · plumpNation · Aug 25, 2018 · igor-dv
1 parent 1035614
commit e65573e
Show file tree

Hide file tree

Showing 17 changed files with 131 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"