Add vue demo

vue-cli-local-dev-and-cypress/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

vue-cli-local-dev-and-cypress/README.md

@@ -0,0 +1,27 @@
+# Vue CLI Local Dev and Cypress Testing
+
+This app is set up with Mirage for both local development and UI testing with Cypress.
+
+The Mirage server is in [src/server.js](./src/server.js). The Cypress spec is in [cypress/integration/example.spec.js](./cypress/integration/example.spec.js).
+
+## How to use
+
+Pull down the repo and install deps:
+
+```sh
+git clone git@github.com:miragejs/examples.git
+cd examples/vue-cli-local-dev-and-cypress
+yarn
+```
+
+To run this app in development against a local Mirage server:
+
+```sh
+yarn serve
+```
+
+To run the Cypress tests:
+
+```sh
+yarn e2e
+```

vue-cli-local-dev-and-cypress/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

vue-cli-local-dev-and-cypress/cypress.json

@@ -0,0 +1 @@
+{}

vue-cli-local-dev-and-cypress/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

vue-cli-local-dev-and-cypress/cypress/integration/example.spec.js

@@ -0,0 +1,24 @@
+import { makeServer } from "../../src/server";
+
+let server;
+
+beforeEach(() => {
+  server = makeServer({ environment: "test" });
+});
+
+afterEach(() => {
+  server.shutdown();
+});
+
+it("shows the users from our server", () => {
+  server.logging = true;
+  server.db.loadData({
+    todos: [{ text: "Buy groceries", isDone: false }],
+  });
+
+  cy.visit("/");
+
+  cy.get('[data-testid="Buy groceries"]')
+    .get("input")
+    .should("not.value", "Buy groceries");
+});

vue-cli-local-dev-and-cypress/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// 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)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

vue-cli-local-dev-and-cypress/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

vue-cli-local-dev-and-cypress/cypress/support/index.js

@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+Cypress.on("window:before:load", (win) => {
+  win.handleFromCypress = function(request) {
+    return fetch(request.url, {
+      method: request.method,
+      headers: request.requestHeaders,
+      body: request.requestBody,
+    }).then((res) => {
+      let content =
+        res.headers.map &&
+        res.headers.map["content-type"] === "application/json"
+          ? res.json()
+          : res.text();
+      return new Promise((resolve) => {
+        content.then((body) => resolve([res.status, res.headers, body]));
+      });
+    });
+  };
+});

vue-cli-local-dev-and-cypress/netlify.toml

@@ -0,0 +1,5 @@
+# SPA push state routing
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

vue-cli-local-dev-and-cypress/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "vue-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "e2e": "vue-cli-service test:e2e"
+  },
+  "dependencies": {
+    "@vue/cli-plugin-e2e-cypress": "^4.5.6",
+    "axios": "^0.19.0",
+    "core-js": "^2.6.5",
+    "miragejs": "0.1.41",
+    "prettier": "^1.18.2",
+    "tailwindcss": "^1.1.2",
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.3"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.11.0",
+    "@vue/cli-plugin-eslint": "^3.11.0",
+    "@vue/cli-service": "^3.11.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-cypress": "^2.9.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "null-loader": "^3.0.0",
+    "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "plugin:cypress/recommended",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

vue-cli-local-dev-and-cypress/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer")]
+};

vue-cli-local-dev-and-cypress/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title>Mirage Vue demo</title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but vue-demo doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

vue-cli-local-dev-and-cypress/src/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="app" class="text-gray-900 bg-gray-300 h-screen pt-8">
+    <div class="max-w-sm mx-auto">
+      <header class="pb-8">
+        <router-link
+          to="/"
+          class="pb-1 mr-4"
+          exact-active-class="border-b-2 border-gray-700"
+          >Home</router-link
+        >
+        <router-link
+          to="/about"
+          class="pb-1"
+          active-class="border-b-2 border-gray-700"
+          >About</router-link
+        >
+      </header>
+
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<style src="./assets/tailwind.css"></style>

vue-cli-local-dev-and-cypress/src/assets/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

vue-cli-local-dev-and-cypress/src/components/About.vue

@@ -0,0 +1,14 @@
+<template lang="html">
+  <div>
+    <h1 class="text-xl font-bold">About this app</h1>
+    <p class="mt-4">
+      This is an SPA made with <a href="https://miragejs.com">Mirage</a> and
+      <a href="https://vuejs.org">Vue</a>. It has two routes to help demonstrate
+      how Mirage's in-memory database enables realistic data fetching and
+      persisting during a single application session.
+    </p>
+    <p class="mt-4">
+      Mirage's state is reset whenever the application is reloaded.
+    </p>
+  </div>
+</template>

vue-cli-local-dev-and-cypress/src/components/Todo.vue

@@ -0,0 +1,77 @@
+<template>
+  <li
+    :class="[
+      {
+        'bg-white border-gray-300': isFocused,
+        'border-transparent hover:bg-gray-200': !isFocused,
+        'opacity-50': !isFocused && localTodo.isDone
+      },
+      'rounded focus:bg-white border-2 flex items-center relative'
+    ]"
+    :data-testid="localTodo.text"
+  >
+    <input
+      type="checkbox"
+      v-model="localTodo.isDone"
+      @change="save"
+      class="ml-2"
+    />
+
+    <form @submit.prevent="save" class="relative w-full">
+      <input
+        type="text"
+        v-model="localTodo.text"
+        placeholder="New Todo"
+        @focus="isFocused = true"
+        @blur="save"
+        :class="[
+          {
+            'line-through': localTodo.isDone && !isFocused
+          },
+          'bg-transparent focus:outline-none px-3 py-1 block w-full'
+        ]"
+      />
+    </form>
+  </li>
+</template>
+
+<script>
+export default {
+  props: ["todo"],
+
+  data() {
+    return {
+      localTodo: { ...this.todo },
+      isFocused: false
+    };
+  },
+
+  watch: {
+    todo: {
+      handler() {
+        this.localTodo = { ...this.todo };
+      },
+      deep: true
+    }
+  },
+
+  computed: {
+    hasChanges() {
+      return (
+        this.localTodo.text !== this.todo.text ||
+        this.localTodo.isDone !== this.todo.isDone
+      );
+    }
+  },
+
+  methods: {
+    async save() {
+      this.isFocused = false;
+
+      if (this.hasChanges) {
+        this.$emit("change", this.localTodo);
+      }
+    }
+  }
+};
+</script>