docs: use sapper/cypress for e2e testing

.travis.yml

@@ -2,5 +2,6 @@ language: node_js
 node_js: 10
 cache: yarn
 script:
-  - yarn build
   - yarn prepack
+  - yarn build
+  - cd docs && yarn && yarn test

CONTRIBUTING.md

@@ -1,15 +1,13 @@
 # Contributing
 
-## Getting Started
+## Prerequisites
 
-### Prerequisites
+This project uses Node.js and Yarn.
 
-This project uses node (>=10) and yarn (>=1).
+- [Node.js](https://nodejs.org/en/download/package-manager/#macos) (version >=10)
+- [Yarn](https://yarnpkg.com/en/docs/install#mac-stable)
 
-- [node](https://nodejs.org/en/download/package-manager/#macos) (version 10.x or greater)
-- [yarn](https://yarnpkg.com/en/docs/install#mac-stable) (version 1.x or greater)
-
-### Fork and Clone
+## Fork and Clone
 
 Fork the repo and clone your fork:
 
@@ -26,7 +24,7 @@ git remote add upstream git@github.com:IBM/carbon-components-svelte.git
 git remote -v
 ```
 
-### Install
+## Install
 
 Install the project dependencies:
 
@@ -38,19 +36,7 @@ yarn install
 
 ## Workflow
 
-### Repo Structure
-
-```js
-.storybook // Storybook configuration
-docs // static, exported Storybook used by GitHub Pages
-src
-│
-└───components // individual components
-└───internal // code excluded from the component library
-└───lib // shared utilities
-```
-
-### Developing
+### Develop
 
 This project uses Storybook for UI development and "live" documentation.
 
@@ -74,7 +60,7 @@ src/Component
 └───index.js // export components (e.g. `Component.svelte`, `Component.Skeleton.svelte`)
 ```
 
-### Building
+### Build
 
 #### Component Library
 
@@ -87,11 +73,11 @@ The library should be compiled in two formats:
 
 #### Storybook
 
-To build the Storybook, run `yarn build:storybook`.
+To build the Storybook, run `yarn build`.
 
-The Storybook should be outputted to the `docs` folder.
+The Storybook should be outputted to the `storybook-static` folder.
 
-## Submitting a Pull Request
+## Submit a Pull Request
 
 ### Sync Your Fork
 

docs/.cfignore

@@ -0,0 +1,3 @@
+*
+!Staticfile
+!public

docs/.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+/public/
+/node_modules/
+/src/node_modules/@sapper/
+yarn-error.log
+/cypress/screenshots/
+/__sapper__/

docs/README.md

@@ -0,0 +1,26 @@
+# docs
+
+This application was scaffolded using the default webpack [Sapper](https://github.com/sveltejs/sapper) template.
+
+## Deploying to IBM Cloud
+
+Deploy to IBM Cloud using the Staticfile buildpack.
+
+### Log in
+
+Log in using the IBM Cloud CLI:
+
+```sh
+ibmcloud login
+
+# if using Single-Sign On (SSO):
+ibmcloud login --sso
+```
+
+### Deploy
+
+```sh
+yarn build
+ibmcloud target --cf
+ibmcloud cf push
+```

docs/Staticfile

@@ -0,0 +1,3 @@
+root: public
+location_include: includes/*.conf
+force_https: true

docs/cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "video": false,
+  "defaultCommandTimeout": 1000
+}

docs/cypress/integration/Button.js

@@ -0,0 +1,11 @@
+describe("Button", () => {
+  beforeEach(() => {
+    cy.examples("Button");
+  });
+
+  it("renders correctly", () => {
+    cy.get("button").then(($) => {
+      expect($.length).to.eql(4);
+    });
+  });
+});

docs/cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

docs/cypress/support/commands.js

@@ -0,0 +1,3 @@
+Cypress.Commands.add("examples", (component) => {
+  cy.visit(`/examples/${component}`);
+});

docs/cypress/support/index.js

@@ -0,0 +1 @@
+import "./commands";

docs/includes/header.conf

@@ -0,0 +1,5 @@
+location ~* ((service-worker)\.js)$ {
+  add_header 'Cache-Control' 'no-store';
+  expires off;
+  proxy_no_cache 1;
+}

docs/manifest.yml

@@ -0,0 +1,7 @@
+---
+applications:
+  - name: carbon-svelte
+    memory: 32M
+    disk_quota: 32M
+    buildpacks:
+      - https://github.com/cloudfoundry/staticfile-buildpack.git

docs/package.json

@@ -0,0 +1,25 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "sapper dev",
+    "build": "shx rm -rf public && sapper export && shx mv __sapper__/export public",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open",
+    "test": "run-p --race dev cy:run",
+    "test:tdd": "run-p --race dev cy:open"
+  },
+  "dependencies": {
+    "polka": "next",
+    "sirv": "^1.0.1"
+  },
+  "devDependencies": {
+    "carbon-components-svelte": "../",
+    "cypress": "^4.10.0",
+    "npm-run-all": "^4.1.5",
+    "sapper": "^0.27.16",
+    "shx": "^0.3.2",
+    "svelte": "^3.24.0",
+    "svelte-loader": "^2.9.0",
+    "webpack": "^4.7.0"
+  }
+}

docs/src/client.js

@@ -0,0 +1,3 @@
+import * as sapper from "@sapper/app";
+
+sapper.start({ target: document.querySelector("#sapper") });

docs/src/components/GlobalHeader.svelte

@@ -0,0 +1,33 @@
+<script>
+  export let segment = undefined;
+
+  import {
+    SkipToContent,
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderUtilities,
+    HeaderActionLink
+  } from "carbon-components-svelte";
+</script>
+
+<Header
+  company="Carbon"
+  platformName="Components Svelte"
+  href="."
+  rel="prefetch"
+  aria-current={segment === undefined ? 'page' : undefined}>
+  <SkipToContent />
+  <HeaderNav>
+    <HeaderNavItem
+      rel="prefetch"
+      href="about"
+      text="About"
+      aria-current={segment === 'about' ? 'page' : undefined} />
+    <HeaderNavItem
+      rel="prefetch"
+      href="components"
+      text="Components"
+      aria-current={segment === 'components' ? 'page' : undefined} />
+  </HeaderNav>
+</Header>

docs/src/routes/_error.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let status;
+  export let error = {};
+
+  import { Link } from "carbon-components-svelte";
+</script>
+
+<svelte:head>
+  <title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<div>
+  {error.message}.
+  <Link href=".">Return home</Link>
+</div>
+
+{#if process.env.NODE_ENV === 'development' && error.stack}
+  <pre>{error.stack}</pre>
+{/if}

docs/src/routes/_layout.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let segment = undefined;
+
+  import { Content } from "carbon-components-svelte";
+  import GlobalHeader from "../components/GlobalHeader.svelte";
+</script>
+
+{#if segment !== 'examples'}
+  <GlobalHeader {segment} />
+  <Content>
+    <slot />
+  </Content>
+{:else}
+  <slot />
+{/if}

docs/src/routes/about.svelte

@@ -0,0 +1,6 @@
+<h1>About</h1>
+
+<p>
+  <code>carbon-components-svelte</code>
+  is the Svelte implementation of the Carbon Design System
+</p>

docs/src/routes/components/[slug].json.js

@@ -0,0 +1,17 @@
+import components from "./_components.js";
+
+const componentsMap = new Map();
+
+components.forEach((post) => {
+  componentsMap.set(post.slug, JSON.stringify(post));
+});
+
+export function get(req, res, next) {
+  if (componentsMap.has(req.params.slug)) {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(componentsMap.get(req.params.slug));
+  } else {
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ message: "Not found" }));
+  }
+}

docs/src/routes/components/[slug].svelte

@@ -0,0 +1,38 @@
+<script context="module">
+  export async function preload({ params }) {
+    const res = await this.fetch(`components/${params.slug}.json`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { data };
+    } else {
+      this.error(res.status, data.message);
+    }
+  }
+</script>
+
+<script>
+  export let data = {};
+
+  import { onMount } from "svelte";
+
+  let component = undefined;
+
+  onMount(async () => {
+    try {
+      component = await import(`../examples/${data.title}.svelte`);
+    } catch (e) {
+      console.log(e);
+    }
+  });
+</script>
+
+<svelte:head>
+  <title>{data.title}</title>
+</svelte:head>
+
+<h1>{data.title}</h1>
+
+{#if component}
+  <svelte:component this={component.default} />
+{/if}

docs/src/routes/components/_components.js

@@ -0,0 +1,10 @@
+const components = [
+  {
+    title: "Button",
+  },
+].map((post) => ({
+  ...post,
+  slug: post.title.toLowerCase().replace(/\s+/g, "-"),
+}));
+
+export default components;

docs/src/routes/components/index.json.js

@@ -0,0 +1,6 @@
+import components from "./_components.js";
+
+export function get(req, res) {
+  res.writeHead(200, { "Content-Type": "application/json" });
+  res.end(JSON.stringify(components));
+}

docs/src/routes/components/index.svelte

@@ -0,0 +1,27 @@
+<script context="module">
+  export function preload() {
+    return this.fetch("components.json")
+      .then(r => r.json())
+      .then(data => ({ data }));
+  }
+</script>
+
+<script>
+  export let data = [];
+
+  import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
+</script>
+
+<svelte:head>
+  <title>Components</title>
+</svelte:head>
+
+<h1>Components</h1>
+
+<UnorderedList>
+  {#each data as data, i (data.title)}
+    <ListItem>
+      <Link rel="prefetch" href="components/{data.slug}">{data.title}</Link>
+    </ListItem>
+  {/each}
+</UnorderedList>

docs/src/routes/examples/Button.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button kind="primary">Primary button</Button>
+<Button kind="secondary">Secondary button</Button>
+<Button kind="tertiary">Tertiary button</Button>
+<Button kind="ghost">Ghost button</Button>

docs/src/routes/examples/_layout.svelte

@@ -0,0 +1 @@
+<slot />

docs/src/routes/index.svelte

@@ -0,0 +1,10 @@
+<script>
+  import components from "./components/_components";
+  import { Link } from "carbon-components-svelte";
+</script>
+
+<h1>Welcome</h1>
+
+{#each components as component}
+  <Link href="examples/{component.title}">{component.title}</Link>
+{/each}

docs/src/server.js

@@ -0,0 +1,11 @@
+import sirv from "sirv";
+import polka from "polka";
+import * as sapper from "@sapper/server";
+
+const { PORT, NODE_ENV } = process.env;
+
+polka()
+  .use(sirv("static", { dev: NODE_ENV === "development" }), sapper.middleware())
+  .listen(PORT, (err) => {
+    if (err) console.log("error", err);
+  });

docs/src/service-worker.js

@@ -0,0 +1,82 @@
+import { timestamp, files, shell, routes } from '@sapper/service-worker';
+
+const ASSETS = `cache${timestamp}`;
+
+// `shell` is an array of all the files generated by the bundler,
+// `files` is an array of everything in the `static` directory
+const to_cache = shell.concat(files);
+const cached = new Set(to_cache);
+
+self.addEventListener('install', event => {
+	event.waitUntil(
+		caches
+			.open(ASSETS)
+			.then(cache => cache.addAll(to_cache))
+			.then(() => {
+				self.skipWaiting();
+			})
+	);
+});
+
+self.addEventListener('activate', event => {
+	event.waitUntil(
+		caches.keys().then(async keys => {
+			// delete old caches
+			for (const key of keys) {
+				if (key !== ASSETS) await caches.delete(key);
+			}
+
+			self.clients.claim();
+		})
+	);
+});
+
+self.addEventListener('fetch', event => {
+	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+
+	const url = new URL(event.request.url);
+
+	// don't try to handle e.g. data: URIs
+	if (!url.protocol.startsWith('http')) return;
+
+	// ignore dev server requests
+	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
+
+	// always serve static files and bundler-generated assets from cache
+	if (url.host === self.location.host && cached.has(url.pathname)) {
+		event.respondWith(caches.match(event.request));
+		return;
+	}
+
+	// for pages, you might want to serve a shell `service-worker-index.html` file,
+	// which Sapper has generated for you. It's not right for every
+	// app, but if it's right for yours then uncomment this section
+	/*
+	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
+		event.respondWith(caches.match('/service-worker-index.html'));
+		return;
+	}
+	*/
+
+	if (event.request.cache === 'only-if-cached') return;
+
+	// for everything else, try the network first, falling back to
+	// cache if the user is offline. (If the pages never change, you
+	// might prefer a cache-first approach to a network-first one.)
+	event.respondWith(
+		caches
+			.open(`offline${timestamp}`)
+			.then(async cache => {
+				try {
+					const response = await fetch(event.request);
+					cache.put(event.request, response.clone());
+					return response;
+				} catch(err) {
+					const response = await cache.match(event.request);
+					if (response) return response;
+
+					throw err;
+				}
+			})
+	);
+});

docs/src/template.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="theme-color" content="#161616" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="upgrade-insecure-requests"
+    />
+
+    %sapper.base%
+
+    <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/carbon-components/css/carbon-components.min.css"
+    />
+    <title>Carbon Components Svelte</title>
+
+    %sapper.styles% %sapper.head%
+  </head>
+  <body>
+    <div id="sapper">%sapper.html%</div>
+
+    %sapper.scripts%
+  </body>
+</html>

docs/static/manifest.json

@@ -0,0 +1,20 @@
+{
+  "background_color": "#161616",
+  "theme_color": "#0f62fe",
+  "name": "Carbon Components Svelte",
+  "short_name": "Carbon Svelte",
+  "display": "minimal-ui",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "logo-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "logo-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

docs/webpack.config.js

@@ -0,0 +1,64 @@
+const webpack = require("webpack");
+const path = require("path");
+const config = require("sapper/config/webpack.js");
+const pkg = require("./package.json");
+
+const mode = process.env.NODE_ENV;
+const dev = mode === "development";
+
+const alias = { svelte: path.resolve("node_modules", "svelte") };
+const extensions = [".mjs", ".js", ".json", ".svelte", ".html"];
+const mainFields = ["svelte", "module", "browser", "main"];
+
+module.exports = {
+  client: {
+    entry: config.client.entry(),
+    output: config.client.output(),
+    resolve: { alias, extensions, mainFields },
+    module: {
+      rules: [
+        {
+          test: /\.(svelte|html)$/,
+          use: {
+            loader: "svelte-loader",
+            options: { dev, hydratable: true, hotReload: false },
+          },
+        },
+      ],
+    },
+    mode,
+    plugins: [
+      new webpack.DefinePlugin({
+        "process.browser": true,
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      }),
+    ].filter(Boolean),
+    devtool: dev && "inline-source-map",
+  },
+
+  server: {
+    entry: config.server.entry(),
+    output: config.server.output(),
+    target: "node",
+    resolve: { alias, extensions, mainFields },
+    externals: Object.keys(pkg.dependencies).concat("encoding"),
+    module: {
+      rules: [
+        {
+          test: /\.(svelte|html)$/,
+          use: {
+            loader: "svelte-loader",
+            options: { css: false, generate: "ssr", dev },
+          },
+        },
+      ],
+    },
+    mode: process.env.NODE_ENV,
+    performance: { hints: false },
+  },
+  serviceworker: {
+    entry: config.serviceworker.entry(),
+    output: config.serviceworker.output(),
+    mode: process.env.NODE_ENV,
+  },
+};