quasar 2.9.2 → 2.10.1

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/use-btn.js

@@ -4,7 +4,7 @@ import useAlign, { useAlignProps } from '../../composables/private/use-align.js'
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 
-const padding = {
+export const btnPadding = {
   none: 0,
   xs: 4,
   sm: 8,
@@ -24,6 +24,21 @@ const defaultSizes = {
 const formTypes = [ 'button', 'submit', 'reset' ]
 const mediaTypeRE = /[^\s]\/[^\s]/
 
+export const btnDesignOptions = [ 'flat', 'outline', 'push', 'unelevated' ]
+export const getBtnDesign = (props, defaultValue) => {
+  if (props.flat === true) return 'flat'
+  if (props.outline === true) return 'outline'
+  if (props.push === true) return 'push'
+  if (props.unelevated === true) return 'unelevated'
+  return defaultValue
+}
+export const getBtnDesignAttr = props => {
+  const design = getBtnDesign(props)
+  return design !== void 0
+    ? { [ design ]: true }
+    : {}
+}
+
 export const useBtnProps = {
   ...useSizeProps,
   ...useRouterLinkProps,
@@ -37,13 +52,14 @@ export const useBtnProps = {
   icon: String,
   iconRight: String,
 
-  round: Boolean,
+  ...btnDesignOptions.reduce(
+    (acc, val) => (acc[ val ] = Boolean) && acc,
+    {}
+  ),
+
   square: Boolean,
-  outline: Boolean,
-  flat: Boolean,
-  unelevated: Boolean,
+  round: Boolean,
   rounded: Boolean,
-  push: Boolean,
   glossy: Boolean,
 
   size: String,
@@ -93,7 +109,7 @@ export default function (props) {
       ? Object.assign({}, obj, {
         padding: props.padding
           .split(/\s+/)
-          .map(v => (v in padding ? padding[ v ] + 'px' : v))
+          .map(v => (v in btnPadding ? btnPadding[ v ] + 'px' : v))
           .join(' '),
         minWidth: '0',
         minHeight: '0'
@@ -113,13 +129,7 @@ export default function (props) {
     isActionable.value === true ? props.tabindex || 0 : -1
   ))
 
-  const design = computed(() => {
-    if (props.flat === true) return 'flat'
-    if (props.outline === true) return 'outline'
-    if (props.push === true) return 'push'
-    if (props.unelevated === true) return 'unelevated'
-    return 'standard'
-  })
+  const design = computed(() => getBtnDesign(props, 'standard'))
 
   const attributes = computed(() => {
     const acc = { tabindex: tabIndex.value }