Merge branch 'develop'

.gitignore

@@ -1,2 +1,4 @@
 /node_modules
-/lib
+/lib
+/cypress/server-test/node_modules
+/cypress/videos

.npmignore

@@ -1,4 +1,6 @@
 src
+cypress
+cypress.config.ts
 tsconfig.json
 tslint.json
 .prettierrc

README.md

@@ -1,6 +1,14 @@
 # Vuetify 3 Dialog
 Lite Vue plugin working with Vuetify, allowing you to show dialogs or snackbars programatically.
 
+## Summary
+- [Installation](#install-it)
+- [Usage](#usage)
+  - [Dialogs](#dialogs)
+  - [Snackbars](#snackbars)
+  - [SFC compatibility](#sfc-compatibility)
+- [Developers](#developers)
+
 ## Install it
 First, run `npm install vuetify3-dialog`.  
 **⚠️You must have Vuetify installed on your project. If you don't have installed yet, please follow this link : [Install Vuetify](https://vuetifyjs.com/en/getting-started/installation/)**  
@@ -34,12 +42,11 @@ this.$dialog.create({
   title: "My title",
   text: "My dialog message",
   buttons: [
-    { title: 'My first button', key: 'button1' },
-    { title: 'My second button', key: 'button2' },
-    { title: 'My third button', key: 'button3' },
+    { title: 'My first button', key: 'button1', /* any v-btn api option */ },
+    ...
   ],
   cardOptions: {
-    //any v-card api option
+    //any v-card api options
   }
 }).then((anwser) => {
   //Do something with the anwser corresponding to the key of the clicked button
@@ -59,13 +66,18 @@ You can also create a simple dialog with a message and a title, by precizing lev
 this.$dialog.info(
   "My dialog message",
   "My title", //optional
-  { width: '500px'} //optional v-card api option
+  { width: '500px'} //optional v-card api options,
+  { variant: 'outlined' } //optional v-btn api options
 ).then(() => {
   //Do something when the user close the dialog
 })
 ```
 There is 4 levels of severity : `info`, `success`, `warning` and `error`.
 
+__Usefull links:__
+- [v-card api](https://vuetifyjs.com/en/api/v-card/)  
+- [v-dialog api](https://vuetifyjs.com/en/api/v-dialog/)   
+
 ### Snackbars
 You can create a fully personalized snackbar with the following method :
 ```js
@@ -75,7 +87,7 @@ this.$notify.create({
   level: 'success',
   location: 'top right',
   notifyOptions: {
-    //any v-snackbar api option
+    //any v-snackbar api options
   }
 })
 .then(() => {
@@ -87,13 +99,16 @@ You can also create a simple snackbar with a message and a title, by precizing l
 ```js
 this.$notify.info(
   "My snackbar message",
-  { variant: 'outlined' } // any v-snackbar api option
+  { variant: 'outlined' } // any v-snackbar api options
 ).then(() => {
   //Do something when the user close the snackbar
 })
 ```
 There is 4 levels of severity : `info`, `success`, `warning` and `error`.
 
+__Usefull links:__
+- [v-snackbar api](https://vuetifyjs.com/en/api/v-snackbar/)
+
 ### SFC compatibility
 If you want to use this plugin in an SFC component, some methods are available. Working principe is the same as previous methods, and arguments are the same.  
 ```html
@@ -110,4 +125,12 @@ if(true){
   notifySuccess("My snackbar message")
 }
 </script>
-```
+```
+
+## Developers
+If you want to contribute to this project, you can clone it and run `npm install` to install dependencies.  
+
+Then, you need to test your changes. A demo project is located at `cypress/test-server` of this repository. You can launch it with `npm run test-server`.    
+If you have the following error : <span style="color: #e74c3c">[vite] Internal server error: Failed to resolve entry for package "vuetify3-dialog". The package may have incorrect main/module/exports specified in its package.json.</span>, make sure you have run `npm run build` before to build the plugin and make it available for the demo project.  
+
+Finally, when you will have finish your changes, make sure all tests are passing with `npm run test`, thanks in advance !

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+  retries: 2
+});

cypress/e2e/dialog.cy.ts

@@ -0,0 +1,63 @@
+beforeEach(() => {
+  cy.visit('http://localhost:3000')
+  cy.wait(500)
+})
+
+describe('server is started', () => {
+  it('homepage title is present', () => {
+    cy.get('h1').should('contain', 'Vuetify')
+  })
+
+  it('create dialog', () => {
+    cy.get('button#create-dialog').click()
+    cy.get('div.v-overlay--active').should('exist')
+    cy.get('div.v-card-title').should('contain', 'My dialog')
+    cy.get('div.v-card-text').should('contain', 'Hello world!')
+    cy.get('div.v-card-actions').find('button').should('have.length', 2)
+  })
+
+  it('success dialog', () => {
+    cy.get('button#success-dialog').click()
+    cy.get('div.v-overlay--active').should('exist')
+    cy.get('div.v-card-title').should('contain', 'My success dialog')
+    cy.get('div.v-card-title').find('i').should('have.class', 'mdi-check-circle')
+    cy.get('div.v-card-title').find('i').should('have.class', 'text-success')
+    cy.get('div.v-card-text').should('contain', 'Hello world!')
+    cy.get('div.v-card-actions').find('button').should('have.length', 1)
+    cy.get('div.v-card-actions').find('button').should('have.class', 'text-success')
+  })
+
+  it('confirm dialog', () => {
+
+    // Stub console.log to check if confirm dialog is true, because of click on confirm button
+    cy.window()
+      .its('console')
+      .then((console) => {
+        cy.stub(console, 'log').callsFake((msg) => {
+          expect(typeof msg).to.equal('boolean')
+          expect(msg).to.equal(true)
+        })
+      })
+    cy.get('button#confirm-dialog').click()
+    cy.get('div.v-overlay--active').should('exist')
+    cy.get('div.v-card-title').should('contain', 'My confirm dialog')
+    cy.get('div.v-card-title').find('i').should('have.class', 'mdi-alert')
+    cy.get('div.v-card-title').find('i').should('have.class', 'text-warning')
+    cy.get('div.v-card-text').should('contain', 'Hello world!')
+    cy.get('div.v-card-actions').find('button').should('have.length', 2)
+    cy.get('div.v-card-actions').find('button').should('have.class', 'text-warning')
+    cy.get('div.v-card-actions').find('button').should('have.class', 'text-grey')
+    cy.get('div.v-card-actions').find('button').should('contain', 'Cancel button')
+    cy.get('div.v-card-actions').find('button').should('contain', 'Confirm button')
+    //click on confirm button
+    cy.get('div.v-card-actions').find('button').eq(1).click()
+  })
+
+  it('create SFC dialog', () => {
+    cy.get('button#sfc-create-dialog').click()
+    cy.get('div.v-overlay--active').should('exist')
+    cy.get('div.v-card-title').should('contain', 'My SFC dialog')
+    cy.get('div.v-card-text').should('contain', 'Hello world!')
+    cy.get('div.v-card-actions').find('button').should('have.length', 2)
+  })
+})

cypress/e2e/notify.cy.ts

@@ -0,0 +1,28 @@
+beforeEach(() => {
+  cy.visit('http://localhost:3000')
+  cy.wait(500)
+})
+
+it('create notification', () => {
+  cy.get('button#create-notification').click()
+  cy.get('div.v-snackbar--active').should('exist')
+  cy.get('div.v-snackbar__wrapper').should('exist')
+  cy.get('div.v-snackbar__content').should('contain', 'Hello world!')
+  cy.get('div.v-snackbar__wrapper').should('have.class', 'bg-info')
+})
+
+it('error notification', () => {
+  cy.get('button#error-notification').click()
+  cy.get('div.v-snackbar--active').should('exist')
+  cy.get('div.v-snackbar__wrapper').should('exist')
+  cy.get('div.v-snackbar__content').should('contain', 'Hello error!')
+  cy.get('div.v-snackbar__wrapper').should('have.class', 'bg-error')
+})
+
+it('create sfc notification', () => {
+  cy.get('button#sfc-create-notification').click()
+  cy.get('div.v-snackbar--active').should('exist')
+  cy.get('div.v-snackbar__wrapper').should('exist')
+  cy.get('div.v-snackbar__content').should('contain', 'My SFC notification!')
+  cy.get('div.v-snackbar__wrapper').should('have.class', 'bg-success')
+})

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"
+}

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts 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) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts 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/test-server/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

cypress/test-server/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

cypress/test-server/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+}

cypress/test-server/.gitignore

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

cypress/test-server/README.md

@@ -0,0 +1,44 @@
+# default
+
+## Project setup
+
+```
+# yarn
+yarn
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+# yarn
+yarn dev
+
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+```
+
+### Compiles and minifies for production
+
+```
+# yarn
+yarn build
+
+# npm
+npm run build
+
+# pnpm
+pnpm build
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://vitejs.dev/config/).

cypress/test-server/checkForNodeModules.js

@@ -0,0 +1,18 @@
+//check if node_modules folder exists, and if not run npm install
+const fs = require('fs');
+const path = require('path');
+const { exec } = require('child_process');
+
+const nodeModulesExists = fs.existsSync(path.join(__dirname, '/node_modules'));
+
+if (!nodeModulesExists) {
+  console.log('node_modules folder does not exist for cypress/server-test, npm install in progress...');
+  exec('npm install', {}, (err, stdout, stderr) => {
+    if (err) {
+      console.log(err);
+      return;
+    }
+    console.log(stdout);
+    console.log(stderr);
+  });
+}