quasar 2.10.0 → 2.10.2

package/src/components/btn/__tests__/use-btn.spec.js

@@ -1,187 +1,514 @@
+import { mount } from '@cypress/vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import { alignMap, alignValues } from '../../../composables/private/use-align.js'
+import QBtn from '../QBtn.js'
+import { btnPadding as paddingMap } from '../use-btn.js'
+
+const defaultOptions = {
+  label: 'simple Btn'
+}
+
+const typesValues = [ 'button', 'submit', 'reset' ]
+
+const paddingValues = Object.keys(paddingMap)
+
+function mountQBtn (options = {}) {
+  // Setup options object
+  options.global = options.global || {}
+  options.global.plugins = options.global.plugins || []
+
+  options.props = {
+    ...defaultOptions,
+    ...options.props
+  }
+
+  if (!options.router) {
+    options.router = createRouter({
+      routes: [],
+      history: createMemoryHistory()
+    })
+  }
+
+  // Add router plugin
+  options.global.plugins.push({
+    install (app) {
+      app.use(options.router)
+    }
+  })
+
+  return mount(QBtn, options)
+}
+
 describe('use-btn API', () => {
   describe('Props', () => {
     describe('Category: behavior|state', () => {
       describe('(prop): loading', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with "loading" slot when "loading" prop is set to true', () => {
+          mountQBtn({
+            props: {
+              loading: true
+            }
+          })
+
+          cy.get('.q-btn .q-spinner')
         })
       })
     })
 
     describe('Category: content', () => {
       describe('(prop): label', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a label inside the button', () => {
+          const label = 'Custom Label'
+          mountQBtn({
+            props: {
+              label
+            }
+          })
+
+          cy.get('.q-btn').should('contain', label)
         })
       })
 
       describe('(prop): icon', () => {
-        it.skip(' ', () => {
-          //
+        it('should render an icon on the left', () => {
+          const icon = 'home'
+
+          mountQBtn({
+            props: {
+              icon
+            }
+          })
+
+          cy.get('.q-btn .on-left').should('contain', icon)
         })
       })
 
       describe('(prop): icon-right', () => {
-        it.skip(' ', () => {
-          //
+        it('should render an icon on the right', () => {
+          const iconRight = 'home'
+
+          mountQBtn({
+            props: {
+              iconRight
+            }
+          })
+
+          cy.get('.q-btn .on-right').should('contain', iconRight)
         })
       })
 
       describe('(prop): no-caps', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with no uppercase text', () => {
+          mountQBtn({
+            props: {
+              noCaps: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'q-btn--no-uppercase')
         })
       })
 
       describe('(prop): no-wrap', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with no wrapping text', () => {
+          mountQBtn({
+            props: {
+              noWrap: true
+            }
+          })
+
+          cy.get('.q-btn .q-btn__content')
+            .should('have.class', 'no-wrap')
+            .should('have.class', 'text-no-wrap')
         })
       })
 
       describe('(prop): align', () => {
-        it.skip(' ', () => {
-          //
+        it(`should render a badge aligned based on defined values: ${ alignValues.join(', ') }`, () => {
+          mountQBtn()
+
+          for (const align of alignValues) {
+            cy.get('.q-btn .q-btn__content')
+              .then(() => Cypress.vueWrapper.setProps({ align }))
+              .should('have.class', `justify-${ alignMap[ align ] }`)
+          }
         })
       })
 
       describe('(prop): stack', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with icon and label stacked vertically', () => {
+          mountQBtn({
+            props: {
+              stack: true
+            }
+          })
+
+          cy.get('.q-btn .q-btn__content')
+            .should('have.class', 'column')
         })
       })
 
       describe('(prop): stretch', () => {
-        it.skip(' ', () => {
-          //
+        it('should render stretch height button when used in flexbox container', () => {
+          mountQBtn({
+            props: {
+              stretch: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'no-border-radius')
+            .should('have.class', 'self-stretch')
         })
       })
     })
 
     describe('Category: general', () => {
       describe('(prop): type', () => {
-        it.skip(' ', () => {
-          //
+        it(`should render a button with a type based on defined values: ${ typesValues.join(', ') }`, () => {
+          mountQBtn()
+
+          for (const type of typesValues) {
+            cy.get('.q-btn')
+              .then(() => Cypress.vueWrapper.setProps({ type }))
+              .should('have.attr', 'type', type)
+          }
+        })
+
+        it('should render a component with <a> tag when "type" prop is set to "a"', () => {
+          mountQBtn({
+            props: {
+              type: 'a'
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.prop', 'tagName').should('eq', 'A')
         })
       })
 
       describe('(prop): tabindex', () => {
-        it.skip(' ', () => {
-          //
+        it('should set the tabindex', () => {
+          const tabindex = 1
+
+          mountQBtn({
+            props: {
+              tabindex
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.attr', 'tabindex', tabindex)
         })
       })
     })
 
     describe('Category: navigation', () => {
       describe('(prop): to', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a component with <a> tag when "to" prop is set', () => {
+          const link = '/test'
+
+          mountQBtn({
+            props: {
+              to: link
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.attr', 'href', link)
+            .should('have.prop', 'tagName').should('eq', 'A')
         })
       })
 
       describe('(prop): replace', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a component with <a> tag when "replace" prop is set', () => {
+          const link = '/test'
+
+          mountQBtn({
+            props: {
+              to: link,
+              replace: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.attr', 'href', link)
+            .should('have.prop', 'tagName').should('eq', 'A')
         })
       })
 
       describe('(prop): href', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a component with <a> tag when "href" attribute is set', () => {
+          const href = 'https://quasar.dev'
+
+          mountQBtn({
+            props: {
+              href
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.attr', 'href', href)
+            .should('have.prop', 'tagName').should('eq', 'A')
         })
       })
 
       describe('(prop): target', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a component with <a> tag when "href" and "target" attributes are set', () => {
+          const href = 'https://quasar.dev'
+
+          mountQBtn({
+            props: {
+              href,
+              target: '_blank'
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.attr', 'target', '_blank')
+            .should('have.prop', 'tagName').should('eq', 'A')
         })
       })
     })
 
     describe('Category: state', () => {
       describe('(prop): disable', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a disabled button', () => {
+          mountQBtn({
+            props: {
+              disable: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'disabled')
+            .should('have.attr', 'disabled')
         })
       })
     })
 
     describe('Category: style', () => {
       describe('(prop): outline', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with outline style', () => {
+          mountQBtn({
+            props: {
+              outline: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'q-btn--outline')
         })
       })
 
       describe('(prop): flat', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with flat style', () => {
+          mountQBtn({
+            props: {
+              flat: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'q-btn--flat')
         })
       })
 
       describe('(prop): unelevated', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with unelevated style', () => {
+          mountQBtn({
+            props: {
+              unelevated: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'q-btn--unelevated')
         })
       })
 
       describe('(prop): rounded', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with rounded style', () => {
+          mountQBtn({
+            props: {
+              rounded: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'q-btn--rounded')
         })
       })
 
       describe('(prop): push', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with push style', () => {
+          mountQBtn({
+            props: {
+              push: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'q-btn--push')
+        })
+      })
+
+      describe('(prop): square', () => {
+        it('should render a button with square style', () => {
+          mountQBtn({
+            props: {
+              square: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'q-btn--square')
         })
       })
 
       describe('(prop): glossy', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with glossy style', () => {
+          mountQBtn({
+            props: {
+              glossy: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'glossy')
         })
       })
 
       describe('(prop): fab', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with fab style', () => {
+          mountQBtn({
+            props: {
+              fab: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'q-btn--fab')
         })
       })
 
       describe('(prop): fab-mini', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with fab-mini style', () => {
+          mountQBtn({
+            props: {
+              fabMini: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'q-btn--fab-mini')
         })
       })
 
       describe('(prop): padding', () => {
-        it.skip(' ', () => {
-          //
+        it(`should render a button with padding based on defined values: ${ paddingValues.join(', ') }`, () => {
+          mountQBtn()
+
+          for (const padding of paddingValues) {
+            cy.get('.q-btn')
+              .then(() => Cypress.vueWrapper.setProps({ padding }))
+              .should('have.css', 'padding', `${ paddingMap[ padding ] }px`)
+          }
+        })
+
+        it('should render a button with padding based custom value', () => {
+          const padding = '10px'
+
+          mountQBtn({
+            props: {
+              padding
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.css', 'padding', padding)
+        })
+
+        it('should render a button with padding vertically and horizontally based on defined values" ', () => {
+          mountQBtn()
+
+          for (const paddingVertically of paddingValues) {
+            for (const paddingHorizontally of paddingValues) {
+              if (paddingVertically === paddingHorizontally) { continue }
+
+              const padding = `${ paddingVertically } ${ paddingHorizontally }`
+
+              cy.get('.q-btn')
+                .then(() => Cypress.vueWrapper.setProps({ padding }))
+                .should('have.css', 'padding',
+                  `${ paddingMap[ paddingVertically ] }px ${ paddingMap[ paddingHorizontally ] }px`)
+            }
+          }
+        })
+
+        it('should render a button with "minWidth" and "minHeight" props set to "0"', () => {
+          mountQBtn({
+            props: {
+              padding: '0'
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.css', 'min-width', '0px')
+            .should('have.css', 'min-height', '0px')
         })
       })
 
       describe('(prop): color', () => {
-        it.skip(' ', () => {
-          //
+        it('should change text color based on Quasar Color Palette', () => {
+          const color = 'red'
+
+          mountQBtn({
+            props: { color }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', `bg-${ color }`)
         })
       })
 
       describe('(prop): text-color', () => {
-        it.skip(' ', () => {
-          //
+        it('should change text color based on Quasar Color Palette', () => {
+          const textColor = 'red'
+
+          mountQBtn({
+            props: { textColor }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', `text-${ textColor }`)
         })
       })
 
       describe('(prop): dense', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with dense style', () => {
+          mountQBtn({
+            props: {
+              dense: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .should('have.class', 'q-btn--dense')
         })
       })
 
       describe('(prop): ripple', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with ripple effect', () => {
+          mountQBtn({
+            props: {
+              ripple: true
+            }
+          })
+
+          cy.get('.q-btn')
+            .click().get('.q-ripple').should('exist')
         })
       })
     })

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -15,13 +15,6 @@ import { hSlot } from '../../utils/private/render.js'
 
 const btnPropsList = Object.keys(useBtnProps)
 
-// let's not duplicate type checking and prop validations
-// so just specify the props here with no type description
-const btnProps = btnPropsList.reduce(
-  (acc, key) => (acc[ key ] = {}) && acc,
-  {}
-)
-
 export const passBtnProps = props => btnPropsList.reduce(
   (acc, key) => {
     const val = props[ key ]
@@ -37,7 +30,7 @@ export default createComponent({
   name: 'QBtnDropdown',
 
   props: {
-    ...btnProps,
+    ...useBtnProps,
     ...useTransitionProps,
 
     modelValue: Boolean,
@@ -70,7 +63,7 @@ export default createComponent({
     toggleAriaLabel: String
   },
 
-  emits: [ 'update:modelValue', 'click', 'before-show', 'show', 'before-hide', 'hide' ],
+  emits: [ 'update:modelValue', 'click', 'beforeShow', 'show', 'beforeHide', 'hide' ],
 
   setup (props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
@@ -84,7 +77,6 @@ export default createComponent({
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': targetUid,
-        'aria-owns': targetUid,
         'aria-label': props.toggleAriaLabel || proxy.$q.lang.label[ showing.value === true ? 'collapse' : 'expand' ](props.label)
       }
 
@@ -118,7 +110,7 @@ export default createComponent({
 
     function onBeforeShow (e) {
       showing.value = true
-      emit('before-show', e)
+      emit('beforeShow', e)
     }
 
     function onShow (e) {
@@ -128,7 +120,7 @@ export default createComponent({
 
     function onBeforeHide (e) {
       showing.value = false
-      emit('before-hide', e)
+      emit('beforeHide', e)
     }
 
     function onHide (e) {

package/src/components/btn-dropdown/QBtnDropdown.json

@@ -97,7 +97,6 @@
         "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
       ],
       "default": "bottom end",
-      "examples": [ "top right", "bottom end" ],
       "category": "position"
     },
 
@@ -110,7 +109,6 @@
         "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
       ],
       "default": "top end",
-      "examples": [ "top right", "bottom end" ],
       "category": "position"
     },
 

package/src/components/btn-toggle/QBtnToggle.json

@@ -36,8 +36,7 @@
         "value": {
           "type": "Any",
           "desc": "Value of the option that will be used by component model",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "required": true
         },
         "slot": {
           "type": "String",
@@ -46,8 +45,7 @@
         },
         "...props": {
           "type": "Any",
-          "desc": "Any other QBtn props (including class and style)",
-          "__exemption": [ "examples" ]
+          "desc": "Any other QBtn props (including class and style)"
         }
       },
       "examples": [