quasar 2.15.1 → 2.15.3

package/src/components/chip/__tests__/QChip.cy.js

@@ -1,480 +0,0 @@
-import QChip, { defaultSizes } from '../QChip.js'
-
-const defaultOptions = {
-  label: 'simple chip'
-}
-
-const chipSizeValues = Object.keys(defaultSizes)
-
-function mountQChip (options = {}) {
-  options.props = {
-    ...defaultOptions,
-    ...options.props
-  }
-
-  return cy.mount(QChip, options)
-}
-
-describe('Chip API', () => {
-  describe('Props', () => {
-    describe('Category: content', () => {
-      describe('(prop): icon', () => {
-        it('should render an icon on the left', () => {
-          const icon = 'add'
-
-          mountQChip({
-            props: {
-              icon
-            }
-          })
-
-          cy.get('.q-chip')
-            .get('.q-icon.q-chip__icon--left')
-            .should('have.text', `${ icon }`)
-        })
-      })
-
-      describe('(prop): icon-right', () => {
-        it('should render an icon on the right', () => {
-          const icon = 'add'
-
-          mountQChip({
-            props: {
-              iconRight: icon
-            }
-          })
-
-          cy.get('.q-chip')
-            .get('.q-icon.q-chip__icon--right')
-            .should('have.text', `${ icon }`)
-        })
-      })
-
-      describe('(prop): icon-remove', () => {
-        it('should render a custom remove icon', () => {
-          const icon = 'delete'
-
-          mountQChip({
-            props: {
-              removable: true,
-              iconRemove: icon
-            }
-          })
-
-          cy.get('.q-chip')
-            .get('.q-icon.q-chip__icon--remove')
-            .should('have.text', `${ icon }`)
-        })
-      })
-
-      describe('(prop): icon-selected', () => {
-        it('should render a custom selected icon when one provided', () => {
-          const icon = 'done'
-
-          mountQChip({
-            props: {
-              selected: true,
-              iconSelected: icon
-            }
-          })
-
-          cy.get('.q-chip.q-chip--selected')
-            .get('.q-icon')
-            .should('have.text', `${ icon }`)
-        })
-      })
-
-      describe('(prop): label', () => {
-        it('should render a label inside the chip', () => {
-          const label = 'Chip label'
-
-          mountQChip({
-            props: {
-              label
-            }
-          })
-
-          cy.get('.q-chip').get('.q-chip__content').should('have.text', label)
-        })
-      })
-    })
-
-    describe('Category: general', () => {
-      describe('(prop): tabindex', () => {
-        it('should set the tabindex', () => {
-          const tabindex = 1
-
-          mountQChip({
-            props: {
-              clickable: true,
-              tabindex
-            }
-          })
-
-          cy.get('.q-chip').should('have.attr', 'tabindex', `${ tabindex }`)
-        })
-      })
-    })
-
-    describe('Category: model', () => {
-      describe('(prop): model-value', () => {
-        it('should render when "modelValue" prop is true', () => {
-          mountQChip({
-            props: {
-              modelValue: true
-            }
-          })
-
-          cy.get('.q-chip').should('exist')
-        })
-
-        it('should not render when "modelValue" prop is false', () => {
-          mountQChip({
-            props: {
-              modelValue: false
-            }
-          })
-
-          cy.get('.q-chip').should('not.exist')
-        })
-      })
-
-      describe('(prop): selected', () => {
-        it('should be selected when "selected" prop is true', () => {
-          mountQChip({
-            props: {
-              selected: true
-            }
-          })
-
-          cy.get('.q-chip.q-chip--selected').should('exist')
-        })
-
-        it('should not be selected when "selected" prop is false', () => {
-          mountQChip({
-            props: {
-              selected: false
-            }
-          })
-
-          cy.get('.q-chip').should('not.have.class', 'q-chip--selected')
-        })
-      })
-    })
-
-    describe('Category: state', () => {
-      describe('(prop): clickable', () => {
-        it('should have hover effects and emit "click" event when "clickable" prop is true', () => {
-          const fn = cy.stub()
-
-          mountQChip({
-            props: {
-              clickable: true,
-              onClick: fn
-            }
-          })
-
-          cy.get('.q-chip')
-            .should('have.css', 'cursor', 'pointer')
-            .click()
-          cy.get('.q-chip')
-            .then(() => expect(fn).to.be.calledOnce)
-        })
-      })
-
-      describe('(prop): removable', () => {
-        it('should display a remove icon emitting a "remove" event when clicked', () => {
-          const fn = cy.stub()
-
-          mountQChip({
-            props: {
-              removable: true,
-              onRemove: fn
-            }
-          })
-
-          cy.get('.q-chip')
-            .get('.q-icon.q-chip__icon--remove')
-            .as('clicked')
-            .click()
-          cy.get('@clicked')
-            .then(() => expect(fn).to.be.calledOnce)
-        })
-      })
-
-      describe('(prop): disable', () => {
-        it('should not have hover effect and not emit "click" event when "disable" prop is true', () => {
-          const fn = cy.stub()
-
-          mountQChip({
-            props: {
-              disable: true,
-              onClick: fn
-            }
-          })
-
-          cy.get('.q-chip')
-            .should('not.have.css', 'cursor', 'pointer')
-            .click()
-          cy.get('.q-chip')
-            .then(() => expect(fn).to.not.be.called)
-        })
-      })
-    })
-
-    describe('Category: style', () => {
-      describe('(prop): dense', () => {
-        it('should have a dense style when "dense" prop is true', () => {
-          mountQChip({
-            props: {
-              dense: true
-            }
-          })
-
-          cy.get('.q-chip.q-chip--dense').should('exist')
-        })
-      })
-
-      describe('(prop): size', () => {
-        it('should change QChip size based on a CSS unit value', () => {
-          const size = '50px'
-
-          mountQChip({
-            props: {
-              size
-            }
-          })
-
-          cy.get('.q-chip').should('have.css', 'font-size', size)
-        })
-
-        it(`should change QChip size based defined values: ${ chipSizeValues.join(', ') }`, () => {
-          mountQChip()
-
-          // loop over chipSizeValues
-          for (const key of chipSizeValues) {
-            cy.get('.q-chip')
-              .then(() => Cypress.vueWrapper.setProps({ size: key }))
-              .should('have.css', 'font-size', `${ defaultSizes[ key ] }px`)
-          }
-        })
-      })
-
-      describe('(prop): dark', () => {
-        it('should have a dark style when "dark" prop is true', () => {
-          mountQChip({
-            props: {
-              dark: true
-            }
-          })
-
-          cy.get('.q-chip')
-            .should('have.class', 'q-dark')
-            .and('have.class', 'q-chip--dark')
-        })
-      })
-
-      describe('(prop): color', () => {
-        it('should change color based on Quasar Color Palette', () => {
-          const color = 'red'
-
-          mountQChip({
-            props: {
-              color
-            }
-          })
-
-          cy.get('.q-chip').should('have.class', `bg-${ color }`)
-        })
-      })
-
-      describe('(prop): text-color', () => {
-        it('should change text color based on Quasar Color Palette', () => {
-          const textColor = 'red'
-
-          mountQChip({
-            props: {
-              textColor
-            }
-          })
-
-          cy.get('.q-chip')
-            .should('have.class', 'q-chip--colored')
-            .and('have.class', `text-${ textColor }`)
-        })
-      })
-
-      describe('(prop): square', () => {
-        it('should have a square style when "square" prop is true', () => {
-          mountQChip({
-            props: {
-              square: true
-            }
-          })
-
-          cy.get('.q-chip').should('have.class', 'q-chip--square')
-        })
-      })
-
-      describe('(prop): outline', () => {
-        it('should have a outline style when "outline" prop is true', () => {
-          mountQChip({
-            props: {
-              outline: true
-            }
-          })
-
-          cy.get('.q-chip').should('have.class', 'q-chip--outline')
-        })
-      })
-
-      describe('(prop): ripple', () => {
-        it('should have a ripple effect when "ripple" prop is true', () => {
-          mountQChip({
-            props: {
-              ripple: true
-            }
-          })
-
-          cy.get('.q-chip').click()
-          cy.get('.q-chip').get('.q-ripple').should('exist')
-        })
-
-        it('should not have a ripple effect when "ripple" prop is false', () => {
-          mountQChip({
-            props: {
-              ripple: false
-            }
-          })
-
-          cy.get('.q-chip').click()
-          cy.get('.q-chip').get('.q-ripple').should('not.exist')
-        })
-      })
-    })
-  })
-
-  describe('Slots', () => {
-    describe('(slot): default', () => {
-      it('should display the default slot content', () => {
-        mountQChip({
-          props: {
-            label: undefined
-          },
-
-          slots: {
-            default: 'Default Slot Content'
-          }
-        })
-
-        cy.get('.q-chip').should('have.text', 'Default Slot Content')
-      })
-    })
-  })
-
-  describe('Events', () => {
-    describe('(event): click', () => {
-      it('should emit "click" event when clicked and "clickable" prop is true', () => {
-        const fn = cy.stub()
-
-        mountQChip({
-          props: {
-            clickable: true,
-            onClick: fn
-          }
-        })
-
-        cy.get('.q-chip')
-          .click()
-        cy.get('.q-chip')
-          .then(() => expect(fn).to.be.calledOnce)
-      })
-
-      it('should not emit "click" event when "clickable" prop is false', () => {
-        const fn = cy.stub()
-
-        mountQChip({
-          props: {
-            clickable: false,
-            onClick: fn
-          }
-        })
-
-        cy.get('.q-chip')
-          .click()
-        cy.get('.q-chip')
-          .then(() => expect(fn).to.not.be.called)
-      })
-    })
-
-    describe('(event): update:selected', () => {
-      it('should update selected value when called', () => {
-        const fn = cy.stub()
-
-        mountQChip({
-          props: {
-            selected: false,
-            'onUpdate:selected': fn
-          }
-        })
-
-        cy.get('.q-chip')
-          .click()
-        cy.get('.q-chip')
-          .then(() => expect(fn).to.be.calledOnce)
-      })
-
-      it('should not emit update:selected event when "selected" prop is not set', () => {
-        const fn = cy.stub()
-
-        mountQChip({
-          props: {
-            selected: undefined,
-            'onUpdate:selected': fn
-          }
-        })
-
-        cy.get('.q-chip')
-          .click()
-        cy.get('.q-chip')
-          .then(() => expect(fn).to.not.be.called)
-      })
-    })
-
-    describe('(event): remove', () => {
-      it('should emit remove event when clicked and "removable" prop is true', () => {
-        const fn = cy.stub()
-
-        mountQChip({
-          props: {
-            removable: true,
-            onRemove: fn
-          }
-        })
-
-        cy.get('.q-chip')
-          .get('.q-icon.q-chip__icon--remove')
-          .as('clicked')
-          .click()
-        cy.get('@clicked')
-          .then(() => expect(fn).to.be.calledOnce)
-      })
-
-      it('should not emit remove event when "removable" prop is false', () => {
-        const fn = cy.stub()
-
-        mountQChip({
-          props: {
-            removable: false,
-            onRemove: fn
-          }
-        })
-
-        cy.get('.q-chip')
-          .click()
-        cy.get('.q-chip')
-          .then(() => expect(fn).to.not.be.called)
-      })
-    })
-  })
-})

package/src/components/dialog/__tests__/DialogWrapper.vue

@@ -1,33 +0,0 @@
-<template>
-<q-dialog ref="dialogRef" v-bind="$attrs">
-  <q-card>
-    <q-card-section>
-      <q-btn label="Dialog Button" data-cy="dialog-button"/>
-    </q-card-section>
-  </q-card>
-</q-dialog>
-
-<q-input data-cy="input-field"/>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  inheritAttrs: false,
-  setup () {
-    const dialogRef = ref(null)
-
-    function focus () {
-      dialogRef.value.focus()
-    }
-
-    function shake () {
-      dialogRef.value.shake()
-    }
-
-    return { dialogRef, focus, shake }
-  }
-})
-
-</script>