diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..3c3629e6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/cypress/.gitignore b/cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/cypress/.gitignore @@ -0,0 +1,27 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/cypress/README.md b/cypress/README.md new file mode 100644 index 00000000..943d20f2 --- /dev/null +++ b/cypress/README.md @@ -0,0 +1,42 @@ +# cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/cypress/cypress.config.js b/cypress/cypress.config.js new file mode 100644 index 00000000..c3aba743 --- /dev/null +++ b/cypress/cypress.config.js @@ -0,0 +1,15 @@ +const { defineConfig } = require('cypress') + +module.exports = defineConfig({ + e2e: { + specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}', + baseUrl: 'http://localhost:4173/' + }, + component: { + specPattern: 'src/**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}', + devServer: { + framework: 'vue', + bundler: 'vite' + } + } +}) diff --git a/jsx-pinia-with-tests/cypress/integration/example.spec.js b/cypress/cypress/e2e/example.cy.js similarity index 100% rename from jsx-pinia-with-tests/cypress/integration/example.spec.js rename to cypress/cypress/e2e/example.cy.js diff --git a/jsx-router-with-tests/cypress/jsconfig.json b/cypress/cypress/e2e/jsconfig.json similarity index 70% rename from jsx-router-with-tests/cypress/jsconfig.json rename to cypress/cypress/e2e/jsconfig.json index b5b2f972..c790a70d 100644 --- a/jsx-router-with-tests/cypress/jsconfig.json +++ b/cypress/cypress/e2e/jsconfig.json @@ -4,5 +4,5 @@ "lib": ["es5", "dom"], "types": ["cypress"] }, - "include": ["./**/*"] + "include": ["./**/*", "../support/**/*"] } diff --git a/cypress/cypress/fixtures/example.json b/cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/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" +} diff --git a/cypress/cypress/support/commands.js b/cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/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) => { ... }) diff --git a/cypress/cypress/support/component-index.html b/cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/cypress/cypress/support/component.js b/cypress/cypress/support/component.js new file mode 100644 index 00000000..9b98cf0e --- /dev/null +++ b/cypress/cypress/support/component.js @@ -0,0 +1,30 @@ +// *********************************************************** +// This example support/component.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') + +// Import global styles +import '@/assets/main.css' + +import { mount } from 'cypress/vue2' + +Cypress.Commands.add('mount', mount) + +// Example use: +// cy.mount(MyComponent) diff --git a/jsx-pinia-with-tests/cypress/support/index.js b/cypress/cypress/support/e2e.js similarity index 100% rename from jsx-pinia-with-tests/cypress/support/index.js rename to cypress/cypress/support/e2e.js diff --git a/cypress/index.html b/cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/cypress/package.json b/cypress/package.json new file mode 100644 index 00000000..38f610bd --- /dev/null +++ b/cypress/package.json @@ -0,0 +1,24 @@ +{ + "name": "cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec" + }, + "dependencies": { + "vue": "^2.7.7" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^2.0.0", + "@vitejs/plugin-vue2": "^1.1.2", + "cypress": "^10.3.0", + "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", + "vite": "^3.0.2" + } +} diff --git a/cypress/public/favicon.ico b/cypress/public/favicon.ico new file mode 100644 index 00000000..df36fcfb Binary files /dev/null and b/cypress/public/favicon.ico differ diff --git a/cypress/src/App.vue b/cypress/src/App.vue new file mode 100644 index 00000000..45fbfd94 --- /dev/null +++ b/cypress/src/App.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/cypress/src/assets/base.css b/cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/cypress/src/assets/logo.svg b/cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cypress/src/assets/main.css b/cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/cypress/src/components/HelloWorld.vue b/cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/cypress/src/components/TheWelcome.vue b/cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/cypress/src/components/WelcomeItem.vue b/cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/cypress/src/components/__tests__/HelloWorld.cy.js b/cypress/src/components/__tests__/HelloWorld.cy.js new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/cypress/src/components/__tests__/HelloWorld.cy.js @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/cypress/src/components/icons/IconCommunity.vue b/cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/cypress/src/components/icons/IconDocumentation.vue b/cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/cypress/src/components/icons/IconEcosystem.vue b/cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/cypress/src/components/icons/IconSupport.vue b/cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/cypress/src/components/icons/IconTooling.vue b/cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/cypress/src/main.js b/cypress/src/main.js new file mode 100644 index 00000000..c5da47dc --- /dev/null +++ b/cypress/src/main.js @@ -0,0 +1,8 @@ +import Vue from 'vue' +import App from './App.vue' + +import './assets/main.css' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/cypress/vite.config.js b/cypress/vite.config.js new file mode 100644 index 00000000..d4945079 --- /dev/null +++ b/cypress/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/default/README.md b/default/README.md index c1783556..46c62b77 100644 --- a/default/README.md +++ b/default/README.md @@ -4,7 +4,7 @@ This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Customize configuration diff --git a/default/package.json b/default/package.json index 0a390125..2e6b920b 100644 --- a/default/package.json +++ b/default/package.json @@ -4,13 +4,15 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview --port 5050" + "preview": "vite preview --port 4173" }, "dependencies": { - "vue": "^3.2.22" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-vue": "^1.10.0", - "vite": "^2.6.14" + "@vitejs/plugin-legacy": "^2.0.0", + "@vitejs/plugin-vue2": "^1.1.2", + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/default/src/App.vue b/default/src/App.vue index b0b6901b..45fbfd94 100644 --- a/default/src/App.vue +++ b/default/src/App.vue @@ -4,30 +4,22 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/default/src/assets/main.css b/default/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/default/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/default/src/components/HelloWorld.vue b/default/src/components/HelloWorld.vue index aa16fa1f..de8b576a 100644 --- a/default/src/components/HelloWorld.vue +++ b/default/src/components/HelloWorld.vue @@ -13,7 +13,7 @@ defineProps({

You’ve successfully created a project with Vite + - Vue 3. + Vue 2.

diff --git a/default/src/components/TheWelcome.vue b/default/src/components/TheWelcome.vue index 1d003f86..cccc38ef 100644 --- a/default/src/components/TheWelcome.vue +++ b/default/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/default/src/components/icons/IconTooling.vue b/default/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/default/src/components/icons/IconTooling.vue +++ b/default/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ diff --git a/jsx-pinia-with-tests/src/components/TheWelcome.vue b/jsx-pinia-with-tests/src/components/TheWelcome.vue index 1d003f86..cccc38ef 100644 --- a/jsx-pinia-with-tests/src/components/TheWelcome.vue +++ b/jsx-pinia-with-tests/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js b/jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js index a69f3a9d..293bf197 100644 --- a/jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js +++ b/jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/jsx-pinia-with-tests/src/components/icons/IconTooling.vue b/jsx-pinia-with-tests/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/jsx-pinia-with-tests/src/components/icons/IconTooling.vue +++ b/jsx-pinia-with-tests/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ - diff --git a/jsx-pinia/src/assets/main.css b/jsx-pinia/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx-pinia/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx-pinia/src/components/HelloWorld.vue b/jsx-pinia/src/components/HelloWorld.vue index aa16fa1f..de8b576a 100644 --- a/jsx-pinia/src/components/HelloWorld.vue +++ b/jsx-pinia/src/components/HelloWorld.vue @@ -13,7 +13,7 @@ defineProps({

You’ve successfully created a project with Vite + - Vue 3. + Vue 2.

diff --git a/jsx-pinia/src/components/TheWelcome.vue b/jsx-pinia/src/components/TheWelcome.vue index 1d003f86..cccc38ef 100644 --- a/jsx-pinia/src/components/TheWelcome.vue +++ b/jsx-pinia/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/jsx-pinia/src/components/icons/IconTooling.vue b/jsx-pinia/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/jsx-pinia/src/components/icons/IconTooling.vue +++ b/jsx-pinia/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ diff --git a/jsx-with-tests/src/components/TheWelcome.vue b/jsx-with-tests/src/components/TheWelcome.vue index 1d003f86..cccc38ef 100644 --- a/jsx-with-tests/src/components/TheWelcome.vue +++ b/jsx-with-tests/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/jsx-with-tests/src/components/__tests__/HelloWorld.spec.js b/jsx-with-tests/src/components/__tests__/HelloWorld.spec.js index a69f3a9d..293bf197 100644 --- a/jsx-with-tests/src/components/__tests__/HelloWorld.spec.js +++ b/jsx-with-tests/src/components/__tests__/HelloWorld.spec.js @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/jsx-with-tests/src/components/icons/IconTooling.vue b/jsx-with-tests/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/jsx-with-tests/src/components/icons/IconTooling.vue +++ b/jsx-with-tests/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ - diff --git a/jsx/src/assets/main.css b/jsx/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx/src/components/HelloWorld.vue b/jsx/src/components/HelloWorld.vue index aa16fa1f..de8b576a 100644 --- a/jsx/src/components/HelloWorld.vue +++ b/jsx/src/components/HelloWorld.vue @@ -13,7 +13,7 @@ defineProps({

You’ve successfully created a project with Vite + - Vue 3. + Vue 2.

diff --git a/jsx/src/components/TheWelcome.vue b/jsx/src/components/TheWelcome.vue index 1d003f86..cccc38ef 100644 --- a/jsx/src/components/TheWelcome.vue +++ b/jsx/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/jsx/src/components/icons/IconTooling.vue b/jsx/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/jsx/src/components/icons/IconTooling.vue +++ b/jsx/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ diff --git a/pinia-with-tests/src/components/TheWelcome.vue b/pinia-with-tests/src/components/TheWelcome.vue index 1d003f86..cccc38ef 100644 --- a/pinia-with-tests/src/components/TheWelcome.vue +++ b/pinia-with-tests/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/pinia-with-tests/src/components/__tests__/HelloWorld.spec.js b/pinia-with-tests/src/components/__tests__/HelloWorld.spec.js index a69f3a9d..293bf197 100644 --- a/pinia-with-tests/src/components/__tests__/HelloWorld.spec.js +++ b/pinia-with-tests/src/components/__tests__/HelloWorld.spec.js @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/pinia-with-tests/src/components/icons/IconTooling.vue b/pinia-with-tests/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/pinia-with-tests/src/components/icons/IconTooling.vue +++ b/pinia-with-tests/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ - diff --git a/pinia/src/assets/main.css b/pinia/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/pinia/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/pinia/src/components/HelloWorld.vue b/pinia/src/components/HelloWorld.vue index aa16fa1f..de8b576a 100644 --- a/pinia/src/components/HelloWorld.vue +++ b/pinia/src/components/HelloWorld.vue @@ -13,7 +13,7 @@ defineProps({

You’ve successfully created a project with Vite + - Vue 3. + Vue 2.

diff --git a/pinia/src/components/TheWelcome.vue b/pinia/src/components/TheWelcome.vue index 1d003f86..cccc38ef 100644 --- a/pinia/src/components/TheWelcome.vue +++ b/pinia/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/pinia/src/components/icons/IconTooling.vue b/pinia/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/pinia/src/components/icons/IconTooling.vue +++ b/pinia/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ diff --git a/typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue b/typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue index b91a8edd..51d12392 100644 --- a/typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue +++ b/typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts index a69f3a9d..293bf197 100644 --- a/typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ b/typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue +++ b/typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ - diff --git a/typescript-jsx-pinia/src/assets/main.css b/typescript-jsx-pinia/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx-pinia/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx-pinia/src/components/HelloWorld.vue b/typescript-jsx-pinia/src/components/HelloWorld.vue index 01118cd9..624fb3e0 100644 --- a/typescript-jsx-pinia/src/components/HelloWorld.vue +++ b/typescript-jsx-pinia/src/components/HelloWorld.vue @@ -10,7 +10,7 @@ defineProps<{

You’ve successfully created a project with Vite + - Vue 3. + Vue 2.

diff --git a/typescript-jsx-pinia/src/components/TheWelcome.vue b/typescript-jsx-pinia/src/components/TheWelcome.vue index b91a8edd..51d12392 100644 --- a/typescript-jsx-pinia/src/components/TheWelcome.vue +++ b/typescript-jsx-pinia/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/typescript-jsx-pinia/src/components/icons/IconTooling.vue b/typescript-jsx-pinia/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/typescript-jsx-pinia/src/components/icons/IconTooling.vue +++ b/typescript-jsx-pinia/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ diff --git a/typescript-jsx-with-tests/src/components/TheWelcome.vue b/typescript-jsx-with-tests/src/components/TheWelcome.vue index b91a8edd..51d12392 100644 --- a/typescript-jsx-with-tests/src/components/TheWelcome.vue +++ b/typescript-jsx-with-tests/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts index a69f3a9d..293bf197 100644 --- a/typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ b/typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/typescript-jsx-with-tests/src/components/icons/IconTooling.vue b/typescript-jsx-with-tests/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/typescript-jsx-with-tests/src/components/icons/IconTooling.vue +++ b/typescript-jsx-with-tests/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ - diff --git a/typescript-jsx/src/assets/main.css b/typescript-jsx/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx/src/components/HelloWorld.vue b/typescript-jsx/src/components/HelloWorld.vue index 01118cd9..624fb3e0 100644 --- a/typescript-jsx/src/components/HelloWorld.vue +++ b/typescript-jsx/src/components/HelloWorld.vue @@ -10,7 +10,7 @@ defineProps<{

You’ve successfully created a project with Vite + - Vue 3. + Vue 2.

diff --git a/typescript-jsx/src/components/TheWelcome.vue b/typescript-jsx/src/components/TheWelcome.vue index b91a8edd..51d12392 100644 --- a/typescript-jsx/src/components/TheWelcome.vue +++ b/typescript-jsx/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/typescript-jsx/src/components/icons/IconTooling.vue b/typescript-jsx/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/typescript-jsx/src/components/icons/IconTooling.vue +++ b/typescript-jsx/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ diff --git a/typescript-pinia-with-tests/src/components/TheWelcome.vue b/typescript-pinia-with-tests/src/components/TheWelcome.vue index b91a8edd..51d12392 100644 --- a/typescript-pinia-with-tests/src/components/TheWelcome.vue +++ b/typescript-pinia-with-tests/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/typescript-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts index a69f3a9d..293bf197 100644 --- a/typescript-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ b/typescript-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/typescript-pinia-with-tests/src/components/icons/IconTooling.vue b/typescript-pinia-with-tests/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/typescript-pinia-with-tests/src/components/icons/IconTooling.vue +++ b/typescript-pinia-with-tests/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ - diff --git a/typescript-pinia/src/assets/main.css b/typescript-pinia/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-pinia/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-pinia/src/components/HelloWorld.vue b/typescript-pinia/src/components/HelloWorld.vue index 01118cd9..624fb3e0 100644 --- a/typescript-pinia/src/components/HelloWorld.vue +++ b/typescript-pinia/src/components/HelloWorld.vue @@ -10,7 +10,7 @@ defineProps<{

You’ve successfully created a project with Vite + - Vue 3. + Vue 2.

diff --git a/typescript-pinia/src/components/TheWelcome.vue b/typescript-pinia/src/components/TheWelcome.vue index b91a8edd..51d12392 100644 --- a/typescript-pinia/src/components/TheWelcome.vue +++ b/typescript-pinia/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/typescript-pinia/src/components/icons/IconTooling.vue b/typescript-pinia/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/typescript-pinia/src/components/icons/IconTooling.vue +++ b/typescript-pinia/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ diff --git a/typescript-with-tests/src/components/TheWelcome.vue b/typescript-with-tests/src/components/TheWelcome.vue index b91a8edd..51d12392 100644 --- a/typescript-with-tests/src/components/TheWelcome.vue +++ b/typescript-with-tests/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/typescript-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-with-tests/src/components/__tests__/HelloWorld.spec.ts index a69f3a9d..293bf197 100644 --- a/typescript-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ b/typescript-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/typescript-with-tests/src/components/icons/IconTooling.vue b/typescript-with-tests/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/typescript-with-tests/src/components/icons/IconTooling.vue +++ b/typescript-with-tests/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ - diff --git a/typescript/src/assets/main.css b/typescript/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript/src/components/HelloWorld.vue b/typescript/src/components/HelloWorld.vue index 01118cd9..624fb3e0 100644 --- a/typescript/src/components/HelloWorld.vue +++ b/typescript/src/components/HelloWorld.vue @@ -10,7 +10,7 @@ defineProps<{

You’ve successfully created a project with Vite + - Vue 3. + Vue 2.

diff --git a/typescript/src/components/TheWelcome.vue b/typescript/src/components/TheWelcome.vue index b91a8edd..51d12392 100644 --- a/typescript/src/components/TheWelcome.vue +++ b/typescript/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/typescript/src/components/icons/IconTooling.vue b/typescript/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/typescript/src/components/icons/IconTooling.vue +++ b/typescript/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@ diff --git a/with-tests/src/components/TheWelcome.vue b/with-tests/src/components/TheWelcome.vue index 1d003f86..cccc38ef 100644 --- a/with-tests/src/components/TheWelcome.vue +++ b/with-tests/src/components/TheWelcome.vue @@ -8,77 +8,79 @@ import SupportIcon from './icons/IconSupport.vue' diff --git a/with-tests/src/components/__tests__/HelloWorld.spec.js b/with-tests/src/components/__tests__/HelloWorld.spec.js index a69f3a9d..293bf197 100644 --- a/with-tests/src/components/__tests__/HelloWorld.spec.js +++ b/with-tests/src/components/__tests__/HelloWorld.spec.js @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/with-tests/src/components/icons/IconTooling.vue b/with-tests/src/components/icons/IconTooling.vue index 660598d7..07dc46b0 100644 --- a/with-tests/src/components/icons/IconTooling.vue +++ b/with-tests/src/components/icons/IconTooling.vue @@ -2,8 +2,6 @@