├── .gitignore
├── README.md
├── babel.config.js
├── cypress.json
├── cypress
    ├── fixtures
    │   └── example.json
    ├── plugins
    │   └── index.js
    └── support
    │   └── index.js
├── index.html
├── jest.config.js
├── package.json
├── public
    └── favicon.ico
├── src
    ├── App.cy.js
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── BaseButton.cy.js
    │   ├── BaseButton.vue
    │   ├── ExampleBaseButton.vue
    │   ├── FoodCard.cy.js
    │   ├── FoodCard.vue
    │   ├── HelloWorld.cy.js
    │   ├── HelloWorld.vue
    │   ├── PerksModal.cy.js
    │   ├── PerksModal.test.js
    │   ├── PerksModal.vue
    │   └── __snapshots__
    │   │   └── PerksModal.test.js.snap
    ├── index.css
    └── main.js
├── vite.config.js
├── windi.config.js
├── yarn-error.log
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Cypress 💖 Vite
 2 | 
 3 | Hello! This repo is for my talk at [VueConfUS on April 14th](https://us.vuejs.org/). Tickets are free, so if you like this repo, you'll probably want to watch my talk.
 4 | 
 5 | It is _very_ likely that some of the tests in this repo will break. Its goal is to give you a bundler setup and dependencies that work.
 6 | 
 7 | The latest guides are here:
 8 | 
 9 | [https://on.cypress.io/component-testing](https://on.cypress.io/component-testing)
10 | 
11 | ### Getting Started
12 | 
13 | #### Install dependencies
14 | 
15 | ```bash
16 | yarn
17 | ```
18 | 
19 | #### Open component testing
20 | 
21 | ```bash
22 | yarn cy
23 | ```
24 | 
25 | #### Make some new files
26 | 
27 | **MyNewComponent.vue**
28 | 
29 | ```vue
30 | <template>
31 |   <h1>Hello world! 👋</h1>
32 | </template>
33 | ```
34 | 
35 | **MyNewComponent.cy.js**
36 | 
37 | ```js
38 | import { mount } from '@cypress/vue'
39 | import MyNewComponent from './MyNewComponent.vue' // keep the .vue, Vite needs it
40 | 
41 | describe('MyNewComponent', () => {
42 |   it('renders', () => {
43 |     mount(MyNewComponent)
44 |       .get('h1')
45 |       .should('have.text', 'Hello world')
46 |   })
47 | })
48 | ```
49 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@babel/env'
4 |   ],
5 |   plugins: [["@babel/transform-runtime", {
6 |       "regenerator": true
7 |     }]]
8 | }


--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 |   "testFiles": "**/*cy.*",
3 |   "componentFolder": "src"
4 | }


--------------------------------------------------------------------------------
/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Using fixtures to represent data",
3 |   "email": "hello@cypress.io",
4 |   "body": "Fixtures are a great way to mock data for responses to routes"
5 | }
6 | 


--------------------------------------------------------------------------------
/cypress/plugins/index.js:
--------------------------------------------------------------------------------
 1 | const { startDevServer } = require('@cypress/vite-dev-server')
 2 | const WindiCSS = require('vite-plugin-windicss').default
 3 | 
 4 | 
 5 | module.exports = (on, config) => {
 6 |   const viteConfig = {
 7 |     plugins: [
 8 |       WindiCSS()
 9 |     ]
10 |   }
11 |   
12 |   viteConfig.esbuild = viteConfig.esbuild || {}
13 |   viteConfig.esbuild.jsxFactory = 'h'
14 |   viteConfig.esbuild.jsxFragment = 'Fragment'
15 |   viteConfig.logLevel = 'error'
16 |   viteConfig.resolve = {
17 |     alias: {
18 |       'vue': 'vue/dist/vue.esm-bundler.js'
19 |     }
20 |   }
21 |   
22 |   on('dev-server:start', (options) => {
23 |     return startDevServer({ options, viteConfig })
24 |   })
25 |   return config
26 | }
27 | 


--------------------------------------------------------------------------------
/cypress/support/index.js:
--------------------------------------------------------------------------------
 1 | import 'virtual:windi.css'
 2 | import 'virtual:windi-devtools'
 3 | import '../../src/index.css'
 4 | 
 5 | beforeEach(() => {
 6 |   cy.viewport(600, 600, { log: false })
 7 | })
 8 | 
 9 | Cypress.Commands.overwrite('submit', function (original, $form) {
10 |   const spy = cy.spy(() => {
11 |   })
12 |   if ($form) {
13 |     $form[0].submit = spy
14 |   }
15 |   
16 |   return cy.wrap(original(...Array.from(arguments).slice(1)), { log: false }).wrap(spy, { log: false })
17 | })
18 | 
19 | Cypress.Commands.add('vue', () => {
20 |   return cy.wrap(Cypress.vueWrapper)
21 | })


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <link rel="icon" href="/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |   <title>Vite App</title>
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <script type="module" src="/src/main.js"></script>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "moduleFileExtensions": ["js", "json", "vue"],
3 |     "transform": {
4 |       "^.+\\.js$": "babel-jest",
5 |       "^.+\\.vue$": "vue-jest"
6 |     }
7 |   }
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cypress-loves-vite",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build",
 7 |     "cy": "cypress open-ct",
 8 |     "cy:ci": "cypress run-ct --quiet --reporter spec",
 9 |     "jest": "jest"
10 |   },
11 |   "dependencies": {
12 |     "@babel/preset-env": "^7.13.12",
13 |     "vue": "^3.0.4"
14 |   },
15 |   "devDependencies": {
16 |     "@babel/core": "^7.13.14",
17 |     "@babel/plugin-transform-regenerator": "^7.12.13",
18 |     "@babel/plugin-transform-runtime": "^7.13.10",
19 |     "@cypress/vite-dev-server": "^1.2.0",
20 |     "@cypress/vue": "^3.0.0-alpha.4",
21 |     "@vitejs/plugin-vue": "1.2.0",
22 |     "@vue/compiler-sfc": "3.0.9",
23 |     "babel-jest": "^26.6.3",
24 |     "cypress": "^7.0.0",
25 |     "jest": "^26.6.3",
26 |     "ts-jest": "^26.5.4",
27 |     "typescript": "^4.2.3",
28 |     "vite": "^2.1.5",
29 |     "vite-plugin-windicss": "^0.12.2",
30 |     "vue-jest": "^5.0.0-alpha.7"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JessicaSachs/cypress-loves-vite/83815382d5aa8884a3edf8103c501fd5ca55ea15/public/favicon.ico


--------------------------------------------------------------------------------
/src/App.cy.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/vue'
2 | import App from '../App.vue'
3 | 
4 | describe('<App />', () => {
5 |   it('renders the homepage link', () => {
6 |     mount(App)
7 |   })
8 | })


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <img alt="Vue logo" src="./assets/logo.png" />
 3 |   <HelloWorld msg="Hello Vue 3 + Vite" />
 4 | </template>
 5 | 
 6 | <script setup>
 7 | import HelloWorld from "./components/HelloWorld.vue";
 8 | 
 9 | // This starter template is using Vue 3 experimental <script setup> SFCs
10 | // Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
11 | </script>
12 | 
13 | <style>
14 | #app {
15 |   font-family: Avenir, Helvetica, Arial, sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   text-align: center;
19 |   color: #2c3e50;
20 |   margin-top: 60px;
21 | }
22 | </style>


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JessicaSachs/cypress-loves-vite/83815382d5aa8884a3edf8103c501fd5ca55ea15/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/BaseButton.cy.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@cypress/vue'
 2 | import ExampleBaseButton from './ExampleBaseButton.vue'
 3 | import BaseButton from './BaseButton.vue'
 4 | 
 5 | describe('BaseButton', () => {
 6 |   it('playground', () => {
 7 |     mount(ExampleBaseButton)
 8 |   })
 9 | 
10 |   it('takes in the default slot', () => {
11 |     mount(BaseButton, { slots: { default: 'Hello' }
12 |     }).get('button').should('have.text', 'Hello')
13 |   })
14 | })


--------------------------------------------------------------------------------
/src/components/BaseButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button :class="classes">
 3 |     <slot />
 4 |   </button>
 5 | </template>
 6 | 
 7 | <script>
 8 | const types = {
 9 |   warning: "warning",
10 |   primary: "primary",
11 |   danger: "danger",
12 |   success: "success",
13 | };
14 | export default {
15 |   props: {
16 |     size: { type: String, default: "medium" },
17 |     outline: { type: Boolean, default: false },
18 |     branded: { type: Boolean, default: false },
19 |     color: { type: String, default: "primary" },
20 |     rounded: { type: Boolean, default: false },
21 |   },
22 |   computed: {
23 |     classes() {
24 |       const classes = [types[this.color]];
25 |       classes.push(this.outline ? "outline" : "");
26 |       classes.push(this.rounded ? "rounded" : "");
27 |       classes.push(this.size);
28 |       return classes;
29 |     },
30 |   },
31 | };
32 | </script>
33 | 
34 | <style scoped>
35 | button {
36 |   @apply p-4 font-regular text-lg flex;
37 |   max-height: 40px;
38 |   align-items: center;
39 |   place-content: center;
40 | }
41 | 
42 | .primary {
43 |   @apply bg-blue-600;
44 | }
45 | 
46 | .success {
47 |   @apply bg-emerald-600;
48 | }
49 | 
50 | .warning {
51 |   @apply bg-amber-500;
52 | }
53 | 
54 | .danger {
55 |   @apply bg-rose-500;
56 | }
57 | 
58 | .large {
59 |   @apply p-8;
60 | }
61 | 
62 | .outline {
63 |   @apply bg-white border-blue-600 text-black;
64 |   border-width: 1px;
65 |   border-style: solid;
66 | }
67 | 
68 | .outline.success {
69 |   @apply border-emerald-600;
70 | }
71 | 
72 | .outline.danger {
73 |   @apply border-rose-500;
74 | }
75 | 
76 | .outline.warning {
77 |   @apply border-amber-500;
78 | }
79 | 
80 | .rounded {
81 |   border-radius: 40px;
82 | }
83 | 
84 | .small {
85 |   @apply text-sm;
86 |   max-width: 100px;
87 |   height: 30px;
88 | }
89 | </style>


--------------------------------------------------------------------------------
/src/components/ExampleBaseButton.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="p-4 gap-2">
  3 |     <h3 class="text-2xl">Button Playground</h3>
  4 |     <section class="">
  5 |       <div class="flex flex-row items-end gap-4">
  6 |         <BaseButton>Primary</BaseButton>
  7 |         <BaseButton v-for="size in sizes" :size="size" :key="size" outline>{{
  8 |           size
  9 |         }}</BaseButton>
 10 |       </div>
 11 |       <div class="flex flex-row items-end gap-4">
 12 |         <BaseButton v-for="color in colors" :color="color" :key="color">{{
 13 |           color
 14 |         }}</BaseButton>
 15 |       </div>
 16 |       <div class="flex flex-row items-end gap-4">
 17 |         <BaseButton
 18 |           v-for="color in colors"
 19 |           :color="color"
 20 |           :key="color"
 21 |           outline
 22 |           >{{ color }}</BaseButton
 23 |         >
 24 |       </div>
 25 | 
 26 |       <div class="flex flex-row items-end gap-4">
 27 |         <BaseButton
 28 |           v-for="color in colors"
 29 |           :color="color"
 30 |           :outline="true"
 31 |           :rounded="true"
 32 |           :key="color"
 33 |           >{{ color }}</BaseButton
 34 |         >
 35 |       </div>
 36 |     </section>
 37 |   </div>
 38 |   <hr class="my-8" />
 39 |   <div class="flex align-middle justify-evenly">
 40 |     <div>
 41 |       <BaseButton
 42 |         :color="config.color"
 43 |         :size="config.size"
 44 |         :outline="config.outline"
 45 |         :rounded="config.rounded"
 46 |         >Playground</BaseButton
 47 |       >
 48 |     </div>
 49 |     <form class="block">
 50 |       <label>
 51 |         Type:
 52 |         <select v-model="config.color">
 53 |           <option v-for="color in colors" :key="color" :value="color">
 54 |             {{ color }}
 55 |           </option>
 56 |         </select>
 57 |       </label>
 58 | 
 59 |       <label>
 60 |         Size:
 61 |         <select v-model="config.size">
 62 |           <option v-for="size in sizes" :key="size" :value="size">
 63 |             {{ size }}
 64 |           </option>
 65 |         </select>
 66 |       </label>
 67 | 
 68 |       <label>
 69 |         Outline:
 70 |         <input type="checkbox" v-model="config.outline" />
 71 |       </label>
 72 | 
 73 |       <label>
 74 |         Rounded:
 75 |         <input type="checkbox" v-model="config.rounded" />
 76 |       </label>
 77 |     </form>
 78 |   </div>
 79 | </template>
 80 | 
 81 | <script>
 82 | import BaseButton from "./BaseButton.vue";
 83 | 
 84 | const colors = ["primary", "success", "warning", "danger"];
 85 | const sizes = ["small", "medium", "large"];
 86 | 
 87 | export default {
 88 |   components: { BaseButton },
 89 |   data() {
 90 |     return {
 91 |       config: {
 92 |         color: colors[0],
 93 |         outline: false,
 94 |         size: "large",
 95 |       },
 96 |     };
 97 |   },
 98 |   computed: {
 99 |     colors() {
100 |       return colors;
101 |     },
102 |     sizes() {
103 |       return sizes;
104 |     },
105 |   },
106 | };
107 | </script>
108 | 
109 | <style scoped>
110 | label {
111 |   @apply m-4 block align-middle justify-center;
112 | }
113 | 
114 | select {
115 |   @apply p-2;
116 |   border: 1px solid #eaeaea;
117 |   text-transform: capitalize;
118 | }
119 | 
120 | input {
121 |   width: 20px;
122 |   height: 20px;
123 | }
124 | 
125 | p {
126 |   text-align: left;
127 | }
128 | 
129 | button {
130 |   text-transform: capitalize;
131 | }
132 | </style>


--------------------------------------------------------------------------------
/src/components/FoodCard.cy.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'vue'
 2 | import { mount } from '@cypress/vue'
 3 | import FoodCard from './FoodCard.vue'
 4 | 
 5 | const mountWithMargin = (comp, props = {}) => {
 6 |   return mount(() => h('div', { style: 'margin: 10px' }, h(comp, props)))
 7 | }
 8 | 
 9 | describe('FoodCard', () => {
10 |   it('render a culinary delight', () => {
11 |     const availability = 'Closed. Next delivery 11:30am tomorrow.'
12 |     mountWithMargin(FoodCard, {
13 |       availability,
14 |       restaurant: "Carl's Jr",
15 |       isAvailable: false,
16 |       genre: 'American',
17 |       stars: 3
18 |     })
19 | 
20 |     cy.get('[data-cy=genre]').contains('American')
21 |     cy.get('[data-cy=restaurant]').contains("Carl's Jr")
22 |     cy.get('[data-cy=stars]').should('have.length', 3)
23 |     cy.get('[data-cy=status]').contains(availability)
24 |   })
25 | })


--------------------------------------------------------------------------------
/src/components/FoodCard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="card">
  3 |     <div id="bookmark">
  4 |       <img 
  5 |         id="bookmark-img"
  6 |         src="https://i.pinimg.com/originals/ca/44/77/ca4477c4eeff8d0ac211fa114be21e6c.png"
  7 |       >
  8 |     </div>
  9 | 
 10 |     <img 
 11 |       id="image"
 12 |       src="https://res.cloudinary.com/grubhub/image/upload/d_search:browse-images:default.jpg/w_271,h_132,f_auto,q_auto,dpr_auto,g_auto,c_fill/yre8t3aa0fhgv8rhrjof"
 13 |     />
 14 | 
 15 |     <div class="card-content">
 16 |       <h1 data-cy="restaurant">{{ restaurant }}</h1>
 17 | 
 18 |       <div>
 19 |         <span class="badge">GH+</span><span data-cy="genre">{{ genre }}</span>
 20 |       </div>
 21 | 
 22 |       <div class="info">
 23 |         <span class="status" data-cy="status">
 24 |           <p :class="{ unavailable: !isAvailable }">
 25 |             {{ availability }}
 26 |           </p>
 27 |         </span>
 28 |         <span>
 29 |           <span 
 30 |             v-for="i in stars" 
 31 |             :key="i"
 32 |             data-cy="stars"
 33 |             class="star"
 34 |           >
 35 |             ⭐
 36 |           </span>
 37 |         ️️</span>
 38 |       </div>
 39 |     </div>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | const requiredString = {
 45 |   type: String,
 46 |   required: true
 47 | }
 48 | 
 49 | const requiredBoolean = {
 50 |   type: Boolean,
 51 |   required: true
 52 | }
 53 | 
 54 | export default {
 55 |   props: {
 56 |     restaurant: requiredString,
 57 |     genre: requiredString,
 58 |     availability: requiredString,
 59 |     isAvailable: requiredBoolean,
 60 |     stars: {
 61 |       type: Number,
 62 |       default: 0
 63 |     }
 64 |   }
 65 | }
 66 | </script>
 67 | 
 68 | 
 69 | <style scoped>
 70 | .card {
 71 |   position: relative;
 72 |   box-shadow: 0 0 0 1px rgb(67 41 163 / 8%), 0 1px 5px 0 rgb(67 41 163 / 8%);
 73 |   width: 400px;
 74 |   text-align: left;
 75 | }
 76 | 
 77 | .card:hover {
 78 |   cursor: pointer;
 79 |   box-shadow: 0 0 0 1px lightgray, 0 1px 5px 0 lightgray;
 80 |   transition: 0.25s;
 81 | }
 82 | 
 83 | #bookmark {
 84 |   position: absolute;
 85 |   right: 10px;
 86 |   top: 10px;
 87 |   width: 45px;
 88 |   height: 45px;
 89 |   border-radius: 50%;
 90 |   background: white;
 91 |   box-shadow: 0 0 0 1px rgb(67 41 163 / 8%), 0 1px 5px 0 rgb(67 41 163 / 8%);
 92 | }
 93 | 
 94 | #bookmark-img {
 95 |   margin: 3px 0 0 0;
 96 |   padding: 4px;
 97 |   height: 40px;
 98 |   width: 50px;
 99 | }
100 | 
101 | .info {
102 |   margin: 10px 0 0 0;
103 |   display: flex;
104 |   justify-content: space-between;
105 | }
106 | 
107 | .unavailable {
108 |   color: #fb6100;
109 | }
110 | 
111 | .badge {
112 |   background: #fbcf42;
113 |   padding: 1px 3px;
114 |   margin-right: 10px;
115 | }
116 | 
117 | .card-content {
118 |   padding: 20px;
119 |   height: 100%;
120 | }
121 | 
122 | .status {
123 |   max-width: 70%;
124 | }
125 | .star {
126 |   margin: 0 2px;
127 | }
128 | 
129 | img {
130 |   width: 100%;
131 | }
132 | 
133 | h1 {
134 |   font-size: 1.5rem;
135 |   font-weight: bold;
136 | }
137 | </style>


--------------------------------------------------------------------------------
/src/components/HelloWorld.cy.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/vue'
2 | import HelloWorld from './HelloWorld.vue'
3 | 
4 | describe('HelloWorld', () => {
5 |   it('renders properly', () => {
6 |     mount(HelloWorld)
7 |   })
8 | })


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>{{ msg }}</h1>
 3 | 
 4 |   <p>
 5 |     <a href="https://vitejs.dev/guide/features.html" target="_blank"
 6 |       >Vite Documentation</a
 7 |     >
 8 |     |
 9 |     <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
10 |   </p>
11 | 
12 |   <button @click="state.count++">count is: {{ state.count }}</button>
13 |   <p>
14 |     Edit
15 |     <code>components/HelloWorld.vue</code> to test hot module replacement.
16 |   </p>
17 | </template>
18 | 
19 | <script setup>
20 | import { defineProps, reactive } from "vue";
21 | 
22 | defineProps({
23 |   msg: String,
24 | });
25 | 
26 | const state = reactive({ count: 0 });
27 | </script>
28 | 
29 | <style scoped>
30 | a {
31 |   color: #42b983;
32 | }
33 | </style>


--------------------------------------------------------------------------------
/src/components/PerksModal.cy.js:
--------------------------------------------------------------------------------
  1 | import { mount } from '@cypress/vue'
  2 | import PerksModal from './PerksModal.vue'
  3 | 
  4 | const data = {
  5 |   email: 'hello@world.com',
  6 |   zipCode: '10036'
  7 | }
  8 | 
  9 | const wrapper = {
 10 |   template: `
 11 |     <h2>My page</h2>
 12 |     <button @click="visible = !visible">Toggle modal</button>
 13 |     <PerksModal @save="onSave" @close="visible = false" :visible="visible"/>
 14 |     <p>
 15 |       {{ formData }}
 16 |     </p>
 17 |   `,
 18 |   data() {
 19 |     return {
 20 |       visible: false,
 21 |       formData: {}
 22 |     }
 23 |   },
 24 |   methods: {
 25 |     onSave(newFormData) {
 26 |       this.formData = newFormData
 27 |     }
 28 |   },
 29 |   components: { PerksModal }
 30 | }
 31 | 
 32 | it('Playground', () => {
 33 |   mount(wrapper, {
 34 |     global: {
 35 |       stubs: {
 36 |         transition: false
 37 |       }
 38 |     }
 39 |   })
 40 | })
 41 | 
 42 | it('does not save the form values unless the submit button is clicked', () => {
 43 |   mount(PerksModal, { props: { visible: true } })
 44 |     .get('[data-testid=email]')
 45 |     .type(data.email)
 46 |     .get('.x-button')
 47 |     .click()
 48 |     .vue()
 49 |     .then((wrapper) => {
 50 |       expect(wrapper.emitted('save')).to.be.undefined
 51 |     })
 52 | })
 53 | 
 54 | it('is not visible when visible is set to false', () => {
 55 |   mount(PerksModal, { props: { visible: false } })
 56 |     .get('form')
 57 |     .should('not.be.visible')
 58 |     .get('.overlay')
 59 |     .should('not.be.visible')
 60 | })
 61 | 
 62 | it('is visible when visible is set to true', () => {
 63 |   mount(PerksModal, { props: { visible: true } })
 64 |     .get('form')
 65 |     .should('be.visible')
 66 |     .get('.overlay')
 67 |     .should('be.visible')
 68 | })
 69 | 
 70 | it('emits a save event with the form data', () => {
 71 |   mount(PerksModal, { props: { visible: true } })
 72 |     .get('[data-testid=email]')
 73 |     .type(data.email)
 74 |     .get('[data-testid=zip-code]')
 75 |     .type(data.zipCode)
 76 |     .get('button[type=submit]')
 77 |     .click()
 78 |     .vue()
 79 |     .then((wrapper) => {
 80 |       const { email, zipCode } = wrapper.emitted('save')[0][0]
 81 |       expect(email).to.equal(data.email)
 82 |       expect(zipCode).to.equal(data.zipCode)
 83 | 
 84 |       expect(wrapper.emitted('submit')).to.have.length(1)
 85 |     })
 86 | })
 87 | 
 88 | it('can be closed with the x button', () => {
 89 | 
 90 | })
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | 
 99 | 
100 | 
101 | 
102 | 
103 | 
104 | 
105 | 
106 | 
107 | 
108 | 
109 | 
110 | 
111 | 
112 | 
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | // it.only('Playground', () => {
121 | //   const wrapper = {
122 | //     template: `
123 | //       <h2>The web page</h2>
124 | //       <PerksModal :visible="visible" @close="visible = false"/>
125 | //       <button @click="visible = true" >Show/hide modal</button>
126 | //     `,
127 | //     data() {
128 | //       return {
129 | //         visible: true
130 | //       }
131 | //     },
132 | //     components: { PerksModal }
133 | //   }
134 | 
135 | //   mount(wrapper)
136 | // })
137 | 
138 | 
139 | // it('displays the modal when the visible prop is set to true', () => {
140 | //   mount(PerksModal, { props: { visible: true } })
141 | //     .get('form').should('be.visible')
142 | // })
143 | 
144 | // it('does not display the modal when the visible prop is set to false', () => {
145 | //   mount(PerksModal, { props: { visible: false } })
146 | //     .get('form').should('not.be.visible')
147 | // })
148 | 
149 | 
150 | 
151 | 
152 | 
153 | 
154 | 
155 | 
156 | 
157 | 
158 | 
159 | 
160 | 
161 | 
162 | 
163 | 
164 | 
165 | 
166 | 
167 | 
168 | 
169 | 
170 | 
171 | 
172 | 
173 | 
174 | 
175 | 
176 | 
177 | 
178 | 
179 | 
180 | const formData = {
181 |   email: 'jessica@cypress.io',
182 |   zipCode: '10036'
183 | }
184 | 
185 | 
186 | 
187 | // const wrapper = {
188 | //     template: `
189 | //       <h2>Hello world</h2>
190 | //       <PerksModal :visible="visible"
191 | //         @save="onSubmit" @close="visible = false" />
192 | //       <button class="modal-open" @click="visible = true">Show/Hide modal</button>
193 | //       <p>Data:</p>
194 | //       <p>{{ formData }}</p>
195 | //     `,
196 | 
197 | //     data() {
198 | //       return {
199 | //         visible: false,
200 | //         formData: {}
201 | //       }
202 | //     },
203 | //     methods: {
204 | //       onSubmit(newFormData) {
205 | //         debugger;
206 | //         this.formData = newFormData
207 | //       }
208 | //     },
209 | //     components: { PerksModal }
210 | // }
211 | 
212 | // it('Playground', () => {
213 | //   mount(PerksModal, { props: { visible: true }})
214 | // })
215 | 
216 | // it('closes the modal when the x button is clicked', () => {
217 | //   mount(wrapper).get('.modal-open')
218 | //     .click()
219 | //     .get('.x-button').click()
220 | //     .get('form').should('not.be.visible')
221 | // })
222 | 
223 | 
224 | // it('the save event emits the form data entered', () => {
225 | //   mount(PerksModal, { props: { visible: true } })
226 | //     .get('[data-testid=email]')
227 | //     .type(formData.email)
228 | //     .get('[data-testid=zip-code]')
229 | //     .type(formData.zipCode)
230 | //     .get('button[type=submit]').click()
231 | //     .vue()
232 | //     .then((wrapper) => {
233 | //       const value = wrapper.emitted('save')[0][0]
234 | //       expect(value.email).to.equal(formData.email)
235 | //       expect(value.zipCode).to.equal(formData.zipCode)
236 | 
237 | //       expect(wrapper.emitted('close')).to.have.length(1)
238 | //     })
239 | // })
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 | 
249 | 
250 | 
251 | 
252 | 
253 | // it('renders the modal when visible is set to true', () => {
254 | //   mount(PerksModal, { props: { visible: true } })
255 | //     .get('form')
256 | //     .should('be.visible')
257 | // })
258 | 
259 | // it('should not render the modal when visible is set to false', () => {
260 | //   mount(PerksModal, { props: { visible: false } })
261 | //     .get('form')
262 | //     .should('not.be.visible')
263 | // })
264 | 
265 | 
266 | 
267 | 
268 | 
269 | 
270 | 
271 | 
272 | 
273 | 
274 | 
275 | 
276 | 
277 | 
278 | 
279 | 
280 | 
281 | 
282 | 
283 | 
284 | 
285 | 
286 | 
287 | 
288 | 
289 | 
290 | 
291 | // const fillForm = (options, component = PerksModal) => {
292 | //   let { visible, email, zipCode } = options
293 | //   visible = visible || true
294 | //   email = email || ''
295 | //   zipCode = zipCode || ''
296 | 
297 | //   return mount(component, { props: { visible } })
298 | //     .get('[data-testid=email]')
299 | //     .type(email || ' ')
300 | //     .get('[data-testid=zip-code]')
301 | //     .type(zipCode || ' ')
302 | //     .get('form')
303 | // }
304 | 
305 | // const checkValidity = function (elements) {
306 | //   return Array.from(elements).map(el => el.checkValidity())
307 | // }
308 | 
309 | 
310 | // xdescribe('PerksModal', () => {
311 | //   it('renders properly', () => {
312 | //     mount(PerksModal, { props: { visible: true } }).get('form').should('be.visible')
313 | //   })
314 | 
315 | //   describe('valid submission', () => {
316 | //     it('can be filled out', () => {
317 | //       fillForm(formData)
318 | //     })
319 | 
320 | //     it('doesnt navigate when the submit button is pressed', () => {
321 | //       fillForm(formData)
322 | //         .submit()
323 | //         .should('not.have.been.called')
324 | //     })
325 | 
326 | //     it('emits the form data on submit', () => {
327 | //       const stub = cy.stub().as('submit')
328 | //       mount(PerksModal, { methods: { submit: stub } })
329 | //       fillForm(formData)
330 | //         .get('button[type="submit"]')
331 | //         .click()
332 | //         .vue()
333 | //         .should((wrapper) => {
334 | //           const emitted = wrapper.emitted('submit')
335 | //           expect(emitted).to.exist.and.have.length(2)
336 | //           expect(emitted[0][0].email).to.include(formData.email)
337 | //           expect(emitted[0][0].zipCode).to.include(formData.zipCode)
338 | //         })
339 | //     })
340 | //   })
341 | 
342 | //   describe('invalid submission', () => {
343 | //     it('prevents submission with invalid email', () => {
344 | //       const invalidEmail = 'vue-conf-us-is-awesome.com'
345 | 
346 | //       fillForm({ email: invalidEmail })
347 | //         .get('[data-testid=email]')
348 | //         .then(checkValidity).should('contain', false)
349 | //         .get('input').clear()
350 | //         .then(() => {
351 | //           return fillForm({ zipCode: '100000000' })
352 | //             .get('[data-testid=zip-code]')
353 | //             .checkValidity().should('contain', false)
354 | //         })
355 | //     })
356 | //   })
357 | 
358 | //   describe('visibility', () => {
359 | //     it('is controlled by the parent', () => {
360 | //       mount(PerksModal, { props: { visible: false } })
361 | //         .vue()
362 | //         .get('form')
363 | //         .should('not.exist')
364 | //         .vue()
365 | //         .then((wrapper) => {
366 | //           expect(wrapper.find().exists()).to.be.false
367 | //           wrapper.setProps({ visible: true })
368 | //         })
369 | //         .get('form').should('exist').and('be.visible')
370 | //     })
371 | //   })
372 | // })


--------------------------------------------------------------------------------
/src/components/PerksModal.test.js:
--------------------------------------------------------------------------------
  1 | import { mount } from '@vue/test-utils'
  2 | import PerksModal from './PerksModal.vue'
  3 | 
  4 | it('mounts', async () => {
  5 |   const wrapper = await mount(PerksModal, { props: { visible: true }})
  6 |   expect(wrapper.find('form').isVisible()).toBeTruthy()
  7 | })
  8 | 
  9 | it('mounts', async () => {
 10 |   const wrapper = await mount(PerksModal, { props: { visible: false }})
 11 |   expect(wrapper.find('form').isVisible()).toBeFalsy()
 12 |   expect(wrapper.element.innerHTML).toMatchSnapshot()
 13 | })
 14 | 
 15 | 
 16 | 
 17 | 
 18 | 
 19 | 
 20 | 
 21 | 
 22 | 
 23 | 
 24 | 
 25 | 
 26 | 
 27 | 
 28 | 
 29 | 
 30 | 
 31 | 
 32 | 
 33 | 
 34 | 
 35 | 
 36 | 
 37 | 
 38 | 
 39 | 
 40 | 
 41 | 
 42 | 
 43 | // it('can fill out the form', async () => {
 44 | //   // const email = 'jessica@cypress.io'
 45 | //   // const zipCode = 10036
 46 | //   const wrapper = await mount(PerksModal)
 47 | //   // await wrapper.find('[data-testid=email]').setValue(email)
 48 | //   // await wrapper.find('[data-testid=zip-code]').setValue(zipCode)
 49 | //   // wrapper.find('form').trigger('submit')
 50 | 
 51 | //   // const emitted = wrapper.emitted('submit')
 52 | //   // expect(emitted).toHaveLength(2)
 53 | //   // expect(emitted[0][0].email).toBe(email)
 54 | //   // expect(emitted[0][0].zipCode).toBe("" + zipCode)
 55 | 
 56 | //   // expect(wrapper.element.innerHTML).toMatchSnapshot()
 57 | // })
 58 | 
 59 | 
 60 | 
 61 | 
 62 | 
 63 | 
 64 | 
 65 | 
 66 | 
 67 | 
 68 | 
 69 | 
 70 | 
 71 | 
 72 | 
 73 | //     // await wrapper.find('[data-testid=email]').setValue(email)
 74 | //   // await wrapper.find('[data-testid=zip-code]').setValue(zipCode)
 75 | 
 76 | //   // wrapper.trigger('submit')
 77 | 
 78 | //   // await wrapper.find('form').trigger('submit')
 79 | 
 80 |   
 81 | // // })
 82 | 
 83 | 
 84 | 
 85 | 
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | 
 99 | 
100 | 
101 | 
102 | // // const formData = {
103 | // //   email: 'jessica@cypress.io',
104 | // //   zipCode: 32084
105 | // // }
106 | 
107 | // // const fillForm = async (options, component = PerksModal) => {
108 | // //   const { email, zipCode } = options
109 | // //   const wrapper = await mount(component, { props: { visible: true }})
110 | // //   await wrapper.find('[data-testid=email]').trigger('input', email)
111 | // //   await wrapper.find('[data-testid=zip-code]').trigger('input', zipCode)
112 | // //   return wrapper
113 | // // }
114 | 
115 | // // describe('PerksModal', () => {
116 | // //   it('renders properly', async () => {
117 | // //     const wrapper = await mount(PerksModal, { props: { visible: true }})
118 | // //     const form = await wrapper.find('form')
119 | // //     expect(form.isVisible()).toBeTruthy()
120 | // //   })
121 | 
122 | // //   describe('valid submission', () => {
123 | // //     it('can be filled out', async () => {
124 | // //       const wrapper = await fillForm(formData)
125 | // //       expect(wrapper.find('form').isVisible()).toBeTruthy()
126 | // //     })
127 | 
128 | // //     it('doesnt navigate when the submit button is pressed', async () => {
129 | // //       const spy = jest.fn()
130 | // //       const wrapper = await fillForm(formData)
131 | // //       const form = await wrapper.find('form')
132 | // //       form.submit = spy
133 | // //       await form.trigger('submit')
134 | // //       expect(spy).not.toHaveBeenCalled()
135 | // //     })
136 | 
137 | // //     it.only('emits the form data on submit', async () => {
138 | // //       const wrapper = await fillForm(formData)
139 | // //       const form = wrapper.find('form')
140 |       
141 | 
142 | // //       await wrapper.vm.$nextTick()
143 | // //       await button.trigger('click')
144 | 
145 | 
146 | // //       const emitted = wrapper.emitted('submit')
147 | // //       // debugger;
148 | // //       // console.log(wrapper.emitted())
149 | // //       // expect(emitted).toHaveLength(2)
150 | // //       // expect(emitted[0][1]).toEqual(expect.objectContaining(formData))
151 | // //     })
152 | // //   })
153 | // // })


--------------------------------------------------------------------------------
/src/components/PerksModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- fade in -->
  3 |   <transition name="fade">
  4 |     <div class="modal" v-show="visible">
  5 |       <div class="overlay"></div>
  6 |       <!-- <div class="overlay" key="overlay" /> -->
  7 |       <div class="content">
  8 |         <span class="close x-button" @click="$emit('close')">❌</span>
  9 |         <div class="header-image" />
 10 |         <!-- This form should not trigger a full-page refresh! -->
 11 |         <form @submit.prevent="onSubmit">
 12 |           <p class="modal-title">A $10 off Perk for your first order</p>
 13 |           <p class="modal-subtitle">
 14 |             Get <b>$10 off</b> your first order of $15+. Now, that's tasty!
 15 |           </p>
 16 |           <fieldset>
 17 |             <label for="email">
 18 |               Email address
 19 |               <input
 20 |                 id="email"
 21 |                 type="email"
 22 |                 v-model="formData.email"
 23 |                 data-testid="email"
 24 |               />
 25 |             </label>
 26 | 
 27 |             <label for="zip-code">
 28 |               ZIP Code
 29 |               <input
 30 |                 id="zip-code"
 31 |                 type="number"
 32 |                 v-model="formData.zipCode"
 33 |                 data-testid="zip-code"
 34 |               />
 35 |             </label>
 36 | 
 37 |             <!-- When the user clicks the submit button, trigger a form submission -->
 38 |             <BaseButton
 39 |               color="primary"
 40 |               size="medium"
 41 |               type="submit"
 42 |               class="w-full"
 43 |               >Get $10 off</BaseButton
 44 |             >
 45 |           </fieldset>
 46 | 
 47 |           <div class="footer-links">
 48 |             <p @click.prevent="onClose">
 49 |               <a data-testid="dismiss-text" class="close dismiss-text" href="#"
 50 |                 >Dismiss</a
 51 |               >
 52 |             </p>
 53 |             <p>
 54 |               <a data-testid="terms-link" class="terms" href="#"
 55 |                 >Terms apply.</a
 56 |               >
 57 |             </p>
 58 |           </div>
 59 |         </form>
 60 |       </div>
 61 |     </div>
 62 |   </transition>
 63 | </template>
 64 | 
 65 | <style scoped>
 66 | .close {
 67 |   cursor: pointer;
 68 | }
 69 | 
 70 | .x-button {
 71 |   position: absolute;
 72 |   top: 0;
 73 |   right: 0;
 74 |   text-decoration: none;
 75 | }
 76 | </style>
 77 | 
 78 | <script>
 79 | import BaseButton from "./BaseButton.vue";
 80 | 
 81 | export default {
 82 |   props: {
 83 |     visible: { type: Boolean },
 84 |   },
 85 |   data() {
 86 |     return {
 87 |       formData: {},
 88 |     };
 89 |   },
 90 |   methods: {
 91 |     onClose() {},
 92 |     onSubmit() {
 93 |       this.$emit("save", this.formData);
 94 |       this.$emit("close");
 95 |     },
 96 |   },
 97 |   components: { BaseButton },
 98 | };
 99 | </script>
100 | 
101 | <style scoped>
102 | .overlay {
103 |   background: rgba(0, 0, 0, 0.2);
104 |   width: 100vw;
105 |   height: 100vh;
106 |   position: absolute;
107 |   top: 0;
108 |   left: 0;
109 | }
110 | 
111 | /** Input Fields */
112 | 
113 | input {
114 |   @apply mb-2 mt-1 py-1 px-2 rounded-md border-2 border-true-gray-300 block;
115 | }
116 | 
117 | /** transform */
118 | 
119 | /** Full-screen container */
120 | .modal {
121 |   @apply grid absolute place-content-center;
122 |   top: 0;
123 |   left: 0;
124 | 
125 |   height: 100vh;
126 |   width: 100vw;
127 | }
128 | 
129 | /** Inner container */
130 | .content {
131 |   @apply bg-white
132 |     relative
133 |     grid
134 |     min-w-250px
135 |     shadow-xl
136 |     mb-80px;
137 | 
138 |   min-height: 80%;
139 |   height: 100%;
140 |   max-height: 800px;
141 |   max-width: 500px;
142 |   min-width: 400px;
143 | }
144 | 
145 | /** Title and Subtitle */
146 | .modal-title {
147 |   @apply text-lg font-black pt-1;
148 | }
149 | 
150 | .modal-subtitle {
151 |   @apply text-sm pb-2 px-2 mb-4;
152 | }
153 | 
154 | /**
155 |  * Form inputs
156 |  */
157 | fieldset {
158 |   @apply grid text-center gap-1 w-full;
159 | }
160 | 
161 | label {
162 |   @apply grid relative text-center font-bold text-sm;
163 | }
164 | 
165 | form {
166 |   @apply text-center grid place-items-center p-4;
167 | }
168 | 
169 | /** Footer section */
170 | .footer-links {
171 |   @apply grid text-center place-content-center flex-row;
172 | }
173 | 
174 | .close {
175 |   @apply text-black font-black text-sm;
176 | }
177 | 
178 | .dismiss-text {
179 |   @apply underline;
180 | }
181 | 
182 | .terms {
183 |   @apply font-medium text-xs underline;
184 |   color: blue;
185 | }
186 | </style>
187 | 
188 | <style scoped>
189 | .fade-enter-active,
190 | .fade-leave-active {
191 |   transition: opacity 0.5s ease;
192 | }
193 | 
194 | .fade-enter-from,
195 | .fade-leave-to {
196 |   opacity: 0;
197 | }
198 | </style>
199 | 
200 | <style scoped>
201 | .header-image {
202 |   @apply min-h-80px;
203 | 
204 |   background-image: url(https://source.unsplash.com/400x225/?grubhub);
205 |   background-size: cover;
206 | }
207 | </style>
208 | 
209 | <style>
210 | body {
211 |   @apply bg-gray-100;
212 | }
213 | </style>
214 | 


--------------------------------------------------------------------------------
/src/components/__snapshots__/PerksModal.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 | 
3 | exports[`mounts 1`] = `"<!-- fade in --><transition-stub><div class=\\"modal\\" style=\\"display: none;\\"><div class=\\"overlay\\"></div><!-- <div class=\\"overlay\\" key=\\"overlay\\" /> --><div class=\\"content\\"><span class=\\"close x-button\\">❌</span><div class=\\"header-image\\"></div><!-- This form should not trigger a full-page refresh! --><form><p class=\\"modal-title\\">A $10 off Perk for your first order</p><p class=\\"modal-subtitle\\"> Get <b>$10 off</b> your first order of $15+. Now, that's tasty! </p><fieldset><label for=\\"email\\"> Email address <input id=\\"email\\" type=\\"email\\" data-testid=\\"email\\"></label><label for=\\"zip-code\\"> ZIP Code <input id=\\"zip-code\\" type=\\"number\\" data-testid=\\"zip-code\\"></label><!-- When the user clicks the submit button, trigger a form submission --><button class=\\"primary medium w-full\\" type=\\"submit\\">Get $10 off</button></fieldset><div class=\\"footer-links\\"><p><a data-testid=\\"dismiss-text\\" class=\\"close dismiss-text\\" href=\\"#\\">Dismiss</a></p><p><a data-testid=\\"terms-link\\" class=\\"terms\\" href=\\"#\\">Terms apply.</a></p></div></form></div></div></transition-stub>"`;
4 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | #cypress-root, #app {
 2 |   font-family: Avenir, Helvetica, Arial, sans-serif;
 3 |   -webkit-font-smoothing: antialiased;
 4 |   -moz-osx-font-smoothing: grayscale;
 5 |   text-align: center;
 6 |   color: #2c3e50;
 7 |   padding: 2rem;
 8 | }
 9 | 
10 | h2 {
11 |   @apply text-2xl text-left pb-10;
12 | }
13 | 
14 | button {
15 |   @apply rounded-sm font-black text-white p-3 w-100 mt-2 bg-emerald-700;
16 | }
17 | 
18 | p {
19 |   @apply my-4;
20 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import './index.css'
4 | 
5 | createApp(App).mount('#app')
6 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | const vue = require('@vitejs/plugin-vue')
 2 | const { defineConfig } = require('vite')
 3 | const WindiCSS = require('vite-plugin-windicss').default
 4 | 
 5 | module.exports = defineConfig({
 6 |   plugins: [
 7 |     vue(),
 8 |     WindiCSS()
 9 |   ],
10 | });
11 | 


--------------------------------------------------------------------------------
/windi.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('vite-plugin-windicss')
 2 | const colors = require('windicss/colors')
 3 | const typography = require('windicss/plugin/typography')
 4 | 
 5 | module.exports = defineConfig({
 6 |   darkMode: 'class',
 7 |   plugins: [
 8 |     typography(),
 9 |   ],
10 |   theme: {
11 |     extend: {
12 |       typography: {
13 |         DEFAULT: {
14 |           css: {
15 |             maxWidth: '65ch',
16 |             color: 'inherit',
17 |             a: {
18 |               'color': 'inherit',
19 |               'opacity': 0.75,
20 |               'fontWeight': '500',
21 |               'textDecoration': 'underline',
22 |               '&:hover': {
23 |                 opacity: 1,
24 |                 color: colors.teal[600],
25 |               },
26 |             },
27 |             b: { color: 'inherit' },
28 |             strong: { color: 'inherit' },
29 |             em: { color: 'inherit' },
30 |             h1: { color: 'inherit' },
31 |             h2: { color: 'inherit' },
32 |             h3: { color: 'inherit' },
33 |             h4: { color: 'inherit' },
34 |             code: { color: 'inherit' },
35 |           },
36 |         },
37 |       },
38 |     },
39 |   },
40 | })
41 | 


--------------------------------------------------------------------------------