forked from verdnatura/salix-front
removed sample code
This commit is contained in:
parent
49b5ed8003
commit
9e79ad907b
|
|
@ -1,12 +0,0 @@
|
||||||
<template>
|
|
||||||
<q-btn data-cy="button" label="test emit" color="positive" rounded icon="edit" @click="$emit('test')" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'QuasarButton',
|
|
||||||
emits: ['test'],
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- notice dialogRef here -->
|
|
||||||
<q-dialog ref="dialogRef" @hide="onDialogHide" data-cy="dialog">
|
|
||||||
<q-card class="q-dialog-plugin">
|
|
||||||
<q-card-section>{{ message }}</q-card-section>
|
|
||||||
|
|
||||||
<!-- buttons example -->
|
|
||||||
<q-card-actions align="right">
|
|
||||||
<q-btn data-cy="ok-button" color="primary" label="OK" @click="onOKClick" />
|
|
||||||
<q-btn color="primary" label="Cancel" @click="onCancelClick" />
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { useDialogPluginComponent } from 'quasar';
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'QuasarDialog',
|
|
||||||
props: {
|
|
||||||
message: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
// REQUIRED; need to specify some events that your
|
|
||||||
// component will emit through useDialogPluginComponent()
|
|
||||||
emits: useDialogPluginComponent.emits,
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
// REQUIRED; must be called inside of setup()
|
|
||||||
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
|
|
||||||
// dialogRef - Vue ref to be applied to QDialog
|
|
||||||
// onDialogHide - Function to be used as handler for @hide on QDialog
|
|
||||||
// onDialogOK - Function to call to settle dialog with "ok" outcome
|
|
||||||
// example: onDialogOK() - no payload
|
|
||||||
// example: onDialogOK({ /*.../* }) - with payload
|
|
||||||
// onDialogCancel - Function to call to settle dialog with "cancel" outcome
|
|
||||||
|
|
||||||
return {
|
|
||||||
// This is REQUIRED;
|
|
||||||
// Need to inject these (from useDialogPluginComponent() call)
|
|
||||||
// into the vue scope for the vue html template
|
|
||||||
dialogRef,
|
|
||||||
onDialogHide,
|
|
||||||
|
|
||||||
// other methods that we used in our vue html template;
|
|
||||||
// these are part of our example (so not required)
|
|
||||||
onOKClick() {
|
|
||||||
// on OK, it is REQUIRED to
|
|
||||||
// call onDialogOK (with optional payload)
|
|
||||||
onDialogOK();
|
|
||||||
// or with payload: onDialogOK({ ... })
|
|
||||||
// ...and it will also hide the dialog automatically
|
|
||||||
},
|
|
||||||
|
|
||||||
// we can passthrough onDialogCancel directly
|
|
||||||
onCancelClick: onDialogCancel,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
<template>
|
|
||||||
<q-drawer
|
|
||||||
v-model="showDrawer"
|
|
||||||
show-if-above
|
|
||||||
:width="200"
|
|
||||||
:breakpoint="700"
|
|
||||||
elevated
|
|
||||||
data-cy="drawer"
|
|
||||||
class="bg-primary text-white"
|
|
||||||
>
|
|
||||||
<q-scroll-area class="fit">
|
|
||||||
<div class="q-pa-sm">
|
|
||||||
<div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
|
|
||||||
</div>
|
|
||||||
<q-btn data-cy="button">Am I on screen?</q-btn>
|
|
||||||
</q-scroll-area>
|
|
||||||
</q-drawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { ref, defineComponent } from 'vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'QuasarDrawer',
|
|
||||||
setup() {
|
|
||||||
const showDrawer = ref(true);
|
|
||||||
|
|
||||||
return {
|
|
||||||
showDrawer,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<template>
|
|
||||||
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
|
||||||
<q-btn data-cy="button" rounded color="accent" icon="arrow_forward">
|
|
||||||
{{ title }}
|
|
||||||
</q-btn>
|
|
||||||
</q-page-sticky>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'QuasarPageSticky',
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<template>
|
|
||||||
<q-btn color="primary" data-cy="button">
|
|
||||||
Button
|
|
||||||
<q-tooltip v-model="showTooltip" data-cy="tooltip" class="bg-red" :offset="[10, 10]"> Here I am! </q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { ref, defineComponent } from 'vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'QuasarTooltip',
|
|
||||||
setup() {
|
|
||||||
const showTooltip = ref(true);
|
|
||||||
|
|
||||||
return {
|
|
||||||
showTooltip,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { mount } from '@cypress/vue';
|
|
||||||
import QuasarButton from '../QuasarButton.vue';
|
|
||||||
|
|
||||||
describe('QuasarButton', () => {
|
|
||||||
it('renders a message', () => {
|
|
||||||
const label = 'Hello there';
|
|
||||||
mount(QuasarButton, {
|
|
||||||
props: {
|
|
||||||
label,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.dataCy('button').should('contain', label);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders another message', () => {
|
|
||||||
const label = 'Will this work?';
|
|
||||||
mount(QuasarButton, {
|
|
||||||
props: {
|
|
||||||
label,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.dataCy('button').should('contain', label);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should have a `positive` color', () => {
|
|
||||||
mount(QuasarButton);
|
|
||||||
|
|
||||||
cy.dataCy('button').should('have.backgroundColor', 'var(--q-positive)').should('have.color', 'white');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should emit `test` upon click', () => {
|
|
||||||
mount(QuasarButton);
|
|
||||||
|
|
||||||
cy.dataCy('button')
|
|
||||||
.click()
|
|
||||||
.should(() => {
|
|
||||||
expect(Cypress.vueWrapper.emitted('test')).to.have.length(1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
import { mount } from '@cypress/vue';
|
|
||||||
import DialogWrapper from 'app/test/cypress/wrappers/DialogWrapper.vue';
|
|
||||||
import QuasarDialog from '../QuasarDialog.vue';
|
|
||||||
|
|
||||||
describe('QuasarDialog', () => {
|
|
||||||
it('should show a dialog with a message', () => {
|
|
||||||
const message = 'Hello, I am a dialog';
|
|
||||||
mount(DialogWrapper, {
|
|
||||||
props: {
|
|
||||||
component: QuasarDialog,
|
|
||||||
componentProps: {
|
|
||||||
message,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
cy.dataCy('dialog').should('exist').should('contain', message);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should close a dialog when clikcing ok', () => {
|
|
||||||
// The dialog is still visible from the previous test
|
|
||||||
cy.dataCy('dialog').should('exist').dataCy('ok-button').click();
|
|
||||||
cy.dataCy('dialog').should('not.exist');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import { mount } from '@cypress/vue';
|
|
||||||
import LayoutContainer from 'app/test/cypress/wrappers/LayoutContainer.vue';
|
|
||||||
import QuasarDrawer from '../QuasarDrawer.vue';
|
|
||||||
|
|
||||||
describe('QuasarDrawer', () => {
|
|
||||||
it('should show a drawer', () => {
|
|
||||||
mount(LayoutContainer, {
|
|
||||||
props: {
|
|
||||||
component: QuasarDrawer,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
cy.dataCy('drawer').should('exist').dataCy('button').should('not.be.visible');
|
|
||||||
cy.get('.q-scrollarea .scroll').scrollTo('bottom', { duration: 500 }).dataCy('button').should('be.visible');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
import { mount } from '@cypress/vue';
|
|
||||||
import LayoutContainer from 'app/test/cypress/wrappers/LayoutContainer.vue';
|
|
||||||
import QuasarPageSticky from '../QuasarPageSticky.vue';
|
|
||||||
|
|
||||||
describe('QuasarPageSticky', () => {
|
|
||||||
it('should show a sticky at the bottom-right of the page', () => {
|
|
||||||
mount(LayoutContainer, {
|
|
||||||
props: {
|
|
||||||
component: QuasarPageSticky,
|
|
||||||
title: 'Test',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.dataCy('button')
|
|
||||||
.should('be.visible')
|
|
||||||
.should(($el) => {
|
|
||||||
const rect = $el[0].getBoundingClientRect();
|
|
||||||
expect(rect.bottom).to.equal(window.innerHeight - 18);
|
|
||||||
expect(rect.right).to.equal(window.innerWidth - 18);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
import { mount } from '@cypress/vue';
|
|
||||||
import QuasarTooltip from '../QuasarTooltip.vue';
|
|
||||||
|
|
||||||
describe('QuasarTooltip', () => {
|
|
||||||
it('should show a tooltip', () => {
|
|
||||||
mount(QuasarTooltip);
|
|
||||||
|
|
||||||
cy.dataCy('button').trigger('mouseover');
|
|
||||||
cy.dataCy('tooltip').contains('Here I am!');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue