WIP: feat(vnSelect): VnSelectOption #919

Draft
jsegarra wants to merge 31 commits from vnselectoption into dev
13 changed files with 87 additions and 105 deletions
Showing only changes of commit dbf723343d - Show all commits

15
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5000",
"webRoot": "${workspaceFolder}"
}
]
}

View File

@ -22,6 +22,8 @@ module.exports = defineConfig({
},
component: {
indexHtmlFile: 'test/cypress/support/component-index.html',
supportFile: 'test/cypress/support/component.js',
specPattern: 'test/cypress/components/**/*.spec.js',
devServer: {
framework: 'vue',

View File

@ -1,57 +0,0 @@
import { mount } from 'cypress/vue';
import { Quasar } from 'quasar';
import { i18n } from 'src/boot/i18n';
// ***********************************************
// 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) => { ... })
import { createTestingPinia } from '@pinia/testing';
import { shallowMount } from '@vue/test-utils';
const pinia = createTestingPinia({ createSpy: () => {}, stubActions: false });
Cypress.Commands.add('vnMount', (component, options = {}) => {
const globalConfig = {
global: {
stubs: ['router-view', 'vue-i18n'],
plugins: [Quasar, i18n, pinia],
mocks: { t: (key) => key },
},
};
// options.global = options.global || {};
// options.global.stubs = options.global.stubs || {};
// options.global.stubs.transition = false;
// options.global.components = options.global.components || {};
// options.global.plugins = options.global.plugins || [];
// Use store passed in from options, or initialize a new one
// const { /* store = getStore(), */ ...mountOptions } = options;
// Add plugins here
// options.global.plugins.push({
// install(app) {
// app.use(i18n);
// },
// });
return shallowMount(component, { ...globalConfig, ...options });
});

View File

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>

View File

@ -1,27 +0,0 @@
// ***********************************************************
// 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 { mount } from 'cypress/vue'
Cypress.Commands.add('mount', mount)
// Example use:
// cy.mount(MyComponent)

View File

@ -3,12 +3,12 @@ const path = require('path');
// Ruta de la carpeta de componentes
// Ruta de la carpeta de pruebas
['common', 'ui'].forEach((folder) => {
generateTest(folder);
});
// ['common', 'ui'].forEach((folder) => {
generateTest('folder');
// });
function generateTest(type) {
const componentsDir = path.join(__dirname, `src/components/${type}`);
const testDir = path.join(__dirname, `test/cypress/components/${type}`);
const componentsDir = path.join(__dirname, `src/components`);
const testDir = path.join(__dirname, `test/cypress/components`);
// Leer todos los archivos en la carpeta de componentes
fs.readdir(componentsDir, (err, files) => {
if (err) return console.error('Error leyendo la carpeta de componentes:', err);
@ -23,7 +23,7 @@ function generateTest(type) {
// Contenido del archivo de prueba
const testFileContent = `
import ${componentName} from 'src/components/${type}/${file}';
import ${componentName} from 'src/components/${file}';
describe('<${componentName} />', () => {
it('TODO: boilerplate', () => {

View File

@ -2,7 +2,7 @@
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import { useStateStore } from 'stores/useStateStore';
import { useStateStore } from 'src/stores/useStateStore';
import { useQuasar } from 'quasar';
import PinnedModules from './PinnedModules.vue';
import UserPanel from 'src/components/UserPanel.vue';
@ -98,6 +98,8 @@ const pinnedModulesRef = ref();
</template>
<style lang="scss" scoped>
@import '/src/css/quasar.variables.scss';
.searchbar {
width: max-content;
}

View File

@ -67,7 +67,10 @@ function getBreadcrumb(param) {
/>
</QBreadcrumbs>
</template>
<style lang="scss">
<style lang="scss" scoped>
@import '/src/css/quasar.variables.scss';
@import '/node_modules/quasar/src/css/variables.sass';
.q-breadcrumbs {
&__el,
> div {

View File

@ -1,4 +1,3 @@
import NavBar from 'src/components/NavBar.vue';
describe('<NavBar />', () => {

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>

View File

@ -49,3 +49,31 @@ function createWrapper(component, options) {
Cypress.Commands.add('createWrapper', createWrapper);
// Cypress.Commands.add('mount', mount);
import { shallowMount } from '@vue/test-utils';
import { Quasar } from 'quasar';
Cypress.Commands.add('vnMount', (component, options = {}) => {
const globalConfig = {
global: {
stubs: ['router-view', 'vue-i18n'],
plugins: [Quasar, i18n, pinia],
mocks: { t: (key) => key },
},
};
// options.global = options.global || {};
// options.global.stubs = options.global.stubs || {};
// options.global.stubs.transition = false;
// options.global.components = options.global.components || {};
// options.global.plugins = options.global.plugins || [];
// Use store passed in from options, or initialize a new one
// const { /* store = getStore(), */ ...mountOptions } = options;
// Add plugins here
// options.global.plugins.push({
// install(app) {
// app.use(i18n);
// },
// });
return shallowMount(component, { ...globalConfig, ...options });
});