quasar 2.15.1 → 2.15.2

package/src/components/btn/QBtn.test.js

@@ -0,0 +1,350 @@
+import { mount } from '@vue/test-utils'
+import { describe, test, expect, vi } from 'vitest'
+
+import QBtn from './QBtn.js'
+
+const defaultOptions = {
+  label: 'simple Btn'
+}
+
+function mountQBtn (options = {}) {
+  options.props = {
+    ...defaultOptions,
+    ...options.props
+  }
+
+  return mount(QBtn, options)
+}
+
+describe('[QBtn API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)percentage]', () => {
+      test('should render a button with a percentage when "loading" prop is set to true', () => {
+        const percentage = 50
+        const wrapper = mountQBtn({
+          props: {
+            percentage,
+            loading: true
+          }
+        })
+
+        expect(
+          wrapper.get('.q-btn')
+            .attributes('aria-valuenow')
+        ).toBe(percentage.toString())
+      })
+    })
+
+    describe('[(prop)dark-percentage]', () => {
+      test('should render a button with a dark percentage when "loading" prop is set to true', () => {
+        const percentage = 50
+        const wrapper = mountQBtn({
+          props: {
+            percentage,
+            loading: true,
+            darkPercentage: true
+          }
+        })
+
+        expect(
+          wrapper.get('.q-btn')
+            .attributes('aria-valuenow')
+        ).toBe(percentage.toString())
+
+        expect(
+          wrapper.get('.q-btn__progress')
+            .classes()
+        ).toContain('q-btn__progress--dark')
+      })
+    })
+
+    describe.todo('(prop): loading', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): disable', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe('[(prop)round]', () => {
+      test('should render a circle shaped button when "round" prop is set to true', () => {
+        const wrapper = mountQBtn({
+          props: {
+            round: true
+          }
+        })
+
+        expect(
+          wrapper.get('.q-btn')
+            .classes()
+        ).toContain('q-btn--round')
+      })
+    })
+
+    describe.todo('(prop): size', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): outline', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): flat', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): unelevated', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): rounded', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): push', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): square', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): glossy', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): fab', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): fab-mini', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): padding', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): color', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): text-color', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): dense', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): ripple', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): type', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): tabindex', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): to', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): exact', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): replace', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): active-class', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): exact-active-class', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): href', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): target', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): label', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): icon', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): icon-right', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): no-caps', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): no-wrap', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): align', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): stack', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): stretch', () => {
+      test(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('should render a button with a label', () => {
+        const wrapper = mountQBtn()
+
+        expect(
+          wrapper.get('.q-btn')
+            .text()
+        ).toContain(defaultOptions.label)
+      })
+    })
+
+    describe('[(slot)loading]', () => {
+      test('should render a button with a loading slot', () => {
+        const loadingSlot = 'loading slot'
+        const wrapper = mountQBtn({
+          props: {
+            loading: true
+          },
+          slots: {
+            loading: loadingSlot
+          }
+        })
+
+        const text = wrapper.get('.q-btn').text()
+        expect(text).toContain(loadingSlot)
+        expect(text).toContain(defaultOptions.label)
+
+        expect(
+          wrapper.get('.q-btn__content')
+            .isVisible()
+        ).not.toBe(true)
+      })
+    })
+  })
+
+  describe('[Events]', () => {
+    describe('[(event)click]', () => {
+      test('should emit a click event when the button is clicked', () => {
+        const fn = vi.fn()
+        const wrapper = mountQBtn({
+          props: {
+            onClick: fn
+          }
+        })
+
+        wrapper.get('.q-btn').trigger('click')
+
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+
+  describe('[Methods]', () => {
+    describe('[(method)click]', () => {
+      test('should click the button', () => {
+        const fn = vi.fn()
+        const wrapper = mountQBtn({
+          props: {
+            onClick: fn
+          }
+        })
+
+        wrapper.trigger('click')
+
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

package/src/components/btn/use-btn.json

@@ -5,11 +5,11 @@
     "type":{
       "type": "String",
       "desc": "1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag",
-      "default": "button",
+      "default": "'button'",
       "examples": [
-        "a", "submit", "button", "reset",
-        "image/png",
-        "href=\"https://quasar.dev\" target=\"_blank\""
+        "'a'", "'submit'", "'button'", "'reset'",
+        "'image/png'",
+        "# href=\"https://quasar.dev\" target=\"_blank\""
       ],
       "category": "general"
     },
@@ -18,8 +18,8 @@
       "type": [ "String", "Object" ],
       "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used",
       "examples": [
-        "/home/dashboard",
-        ":to=\"{ name: 'my-route-name' }\""
+        "'/home/dashboard'",
+        "{ name: 'my-route-name' }"
       ],
       "category": "navigation"
     },
@@ -33,7 +33,7 @@
     "href": {
       "type": "String",
       "desc": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props",
-      "examples": [ "https://quasar.dev", "href=\"https://quasar.dev\" target=\"_blank\"" ],
+      "examples": [ "'https://quasar.dev'", "# href=\"https://quasar.dev\" target=\"_blank\"" ],
       "category": "navigation",
       "addedIn": "v2.4"
     },
@@ -41,7 +41,7 @@
     "target": {
       "type": "String",
       "desc": "Native <a> link target attribute; Use it only with 'to' or 'href' props",
-      "examples": [ "_blank", "_self", "_parent", "_top" ],
+      "examples": [ "'_blank'", "'_self'", "'_parent'", "'_top'" ],
       "category": "navigation",
       "addedIn": "v2.4"
     },
@@ -49,7 +49,7 @@
     "label":{
       "type": [ "String", "Number" ],
       "desc": "The text that will be shown on the button",
-      "examples": [ "Button Label" ],
+      "examples": [ "'Button Label'" ],
       "category": "content"
     },
 
@@ -117,7 +117,7 @@
     "padding": {
       "type": "String",
       "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set",
-      "examples": [ "16px", "10px 5px", "2rem", "xs", "md lg", "2px 2px 5px 7px" ],
+      "examples": [ "'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'", "'2px 2px 5px 7px'" ],
       "category": "style"
     },
 
@@ -156,8 +156,8 @@
     "align": {
       "type": "String",
       "desc": "Label or content alignment",
-      "default": "center",
-      "values": [ "left", "right", "center", "around", "between", "evenly" ],
+      "default": "'center'",
+      "values": [ "'left'", "'right'", "'center'", "'around'", "'between'", "'evenly'" ],
       "category": "content"
     },
 
@@ -175,7 +175,7 @@
 
     "loading": {
       "type": [ "Boolean", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)",
       "category": "behavior|state"
     },