Update attr (#22)

* Update: .buttons and .tags group sizing (.are-small, .are-medium, .are-large) * Update test * Add snapshot test
vouill · Feb 14, 2019 · 6c188cf · 6c188cf
1 parent d08749c
commit 6c188cf
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 21 deletions.
diff --git a/src/plugin/helpers.js b/src/plugin/helpers.js
@@ -1,11 +1,11 @@
 /**
  * Created by Vouill on 23/07/17.
+ *
+ * By default, components are rendered as div. This is not useful for components such as input for example.
+ * This map makes possible a custom default value for the following components.
+ * Key: Bulma component name ; Value: default rendered html tag
  */
-/*
-*   By default, components are rendered as div. This is not useful for components such as input for example.
-*   This map makes possible a custom default value for the following components.
-*   Key: Bulma component name ; Value: default rendered html tag
-*/
+
 export const vueBulmaDefaultRenderElement = new Map([
   ['breadcrumb', 'nav'],
   ['button', 'button'],
@@ -50,8 +50,8 @@ export const vueBulmaDefaultRenderElement = new Map([
 ])
 
 /*
-*   This is the list of all available vue-bulma-components rendered when using Vue.use(). If one is missing, add it here.
-*/
+ * This is the list of all available vue-bulma-components rendered when using Vue.use(). If one is missing, add it here.
+ */
 export const bulmaComponentList = [
   'box',
   'breadcrumb',
@@ -176,10 +176,11 @@ export const toPascalCase = str => {
 
 // thanks the solution @israelroldan
 export const isBulmaAttribute = attr =>
-  attr.trim() && /^(is|has|fa)-.+/.test(attr)
+  attr.trim() && /^(is|are|has|fa)-.+/.test(attr)
 
 const internalAttribute = ['outerElement', 'outer-element']
-export const isInternalAttribute = attr => attr.trim() && internalAttribute.indexOf(attr) > -1
+export const isInternalAttribute = attr =>
+  attr.trim() && internalAttribute.indexOf(attr) > -1
 
 export const getOutrEl = (outrEl, reqOutrEl, elName, defaultEl = 'div') =>
   outrEl || reqOutrEl || vueBulmaDefaultRenderElement.get(elName) || defaultEl
diff --git a/test/unit/__snapshots__/plugin-component.spec.js.snap b/test/unit/__snapshots__/plugin-component.spec.js.snap
@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Bulma component generator  should create a basic bulma buttons component with set size 1`] = `"<div class=\\"buttons are-large\\"></div>"`;
+
 exports[`Bulma component generator  should create a basic bulma component 1`] = `"<div class=\\"panel\\"></div>"`;
 
 exports[`Bulma component generator  should create a basic bulma component with modifiers 1`] = `"<span class=\\"box is-primary\\"></span>"`;

diff --git a/test/unit/helpers.spec.js b/test/unit/helpers.spec.js
@@ -5,30 +5,32 @@ import {
 } from 'src/plugin/helpers'
 
 describe('Helpers', () => {
-  it('should convert camel to dash case', () => {
-    expect(camelCaseToDash('IsPrimary')).toEqual('is-primary')
-    expect(camelCaseToDash('isPrimary')).toEqual('is-primary')
-    expect(camelCaseToDash('Isprimary')).not.toEqual('is-primary')
-    expect(camelCaseToDash('isprimary')).not.toEqual('is-primary')
-    expect(camelCaseToDash('is-primary')).toEqual('is-primary')
-    expect(camelCaseToDash('is-')).toEqual('is-')
-    expect(camelCaseToDash('is2')).toEqual('is-2')
-    expect(camelCaseToDash('Is2')).toEqual('is-2')
-    expect(camelCaseToDash('is-128x128')).toEqual('is-128x128')
-  })
-
   it('should find Bulma class', () => {
     expect(isBulmaAttribute('is')).toEqual(false)
+    expect(isBulmaAttribute('are')).toEqual(false)
     expect(isBulmaAttribute('has')).toEqual(false)
     expect(isBulmaAttribute('fa')).toEqual(false)
     expect(isBulmaAttribute('is-')).toEqual(false)
     expect(isBulmaAttribute('has-')).toEqual(false)
     expect(isBulmaAttribute('fa-')).toEqual(false)
     expect(isBulmaAttribute('is-primary')).toEqual(true)
+    expect(isBulmaAttribute('are-large')).toEqual(true)
     expect(isBulmaAttribute('has-text-centered')).toEqual(true)
     expect(isBulmaAttribute('fa-home')).toEqual(true)
   })
 
+  it('should convert camel to dash case', () => {
+    expect(camelCaseToDash('IsPrimary')).toEqual('is-primary')
+    expect(camelCaseToDash('isPrimary')).toEqual('is-primary')
+    expect(camelCaseToDash('Isprimary')).not.toEqual('is-primary')
+    expect(camelCaseToDash('isprimary')).not.toEqual('is-primary')
+    expect(camelCaseToDash('is-primary')).toEqual('is-primary')
+    expect(camelCaseToDash('is-')).toEqual('is-')
+    expect(camelCaseToDash('is2')).toEqual('is-2')
+    expect(camelCaseToDash('Is2')).toEqual('is-2')
+    expect(camelCaseToDash('is-128x128')).toEqual('is-128x128')
+  })
+
   it('should convert string to PascalCase', () => {
     expect(toPascalCase('string')).toEqual('String')
     expect(toPascalCase('camelCase')).toEqual('CamelCase')

diff --git a/test/unit/plugin-component.spec.js b/test/unit/plugin-component.spec.js
@@ -52,6 +52,15 @@ describe('Bulma component generator ', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
+  it('should create a basic bulma buttons component with set size', () => {
+    const wrapper = shallowMount(componentGenerator('buttons'), {
+      context: {
+        props: { 'are-large': true }
+      }
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
   it('should create a basic bulma component with modifiers binded to false', () => {
     const wrapper = shallowMount(componentGenerator('box'), {
       context: {