feat: made changes to unit test. Added to test to check gradient butt…

…on for passed style, linear gradient.

dev/views/Buttons.vue

@@ -7,6 +7,8 @@
  <div><ButtonDestructive>Button Destructive</ButtonDestructive></div>
  <br>
  <div><ButtonGradient :color-direction="colorDirection" :gradient-start="colorStart" :gradient-end="colorEnd" >Button Gradient</ButtonGradient></div>
+ <div><ButtonGradient >Button Gradient</ButtonGradient></div>
+
  <br>
 
 

src/components/ButtonGradient.vue

@@ -27,11 +27,9 @@ export default Vue.extend({
  }, 
  computed:{
  returnGradientStyle(): string {
- const colorDirection = this.colorDirection === undefined? "to right" : this.colorDirection
- const gradientStart = this.gradientStart === undefined? "#000000" : this.gradientStart
- const gradientEnd = this.gradientEnd === undefined? "#000000" : this.gradientEnd
+ 
 
- return `background-image: linear-gradient(${colorDirection}, ${gradientStart}, ${gradientEnd} );`
+ return `background-image: linear-gradient(${this.colorDirection}, ${this.gradientStart}, ${this.gradientEnd} );`
  
  }
  }

tests/unit/Buttons.spec.ts

@@ -185,41 +185,55 @@ describe('Buttons', () => {
  expect(base.classes()).to.include('ft-button--disabled')
  })
  })
- })
-
- describe('ButtonGradient',() =>{
+ describe('ButtonGradient',() =>{
 
- it('Takes is required props and appropiate value', () => {
- let props = { gradientStart: "#000" , gradientEnd: "#fff", colorDirection: "to right" }
-
- let start = props.gradientStart
- let end = props.gradientEnd
- let direction = props.colorDirection
+ it('Takes is required props and appropiate value', () => {
+ let props = { gradientStart: "#000" , gradientEnd: "#fff", colorDirection: "to right" }
 
- expect(start).to.be.eql("#000")
- expect(start).to.include('#')
+ let start = props.gradientStart
+ let end = props.gradientEnd
+ let direction = props.colorDirection
+
+ expect(start).to.be.eql("#000")
+ expect(start).to.include('#')
+
+ expect(end).to.be.eql("#fff")
+ expect(end).to.include('#')
 
- expect(end).to.be.eql("#fff")
- expect(end).to.include('#')
-
- expect(direction).to.include('to')
- })
- it('Undefined required props are undefined', () =>{
- let props = { gradientStart: undefined , gradientEnd: undefined, colorDirection: "to right" }
-
- let start = props.gradientStart
- let end = props.gradientEnd
- let direction = props.colorDirection
+ expect(direction).to.include('to')
+ })
+ it('Undefined required props are undefined', () =>{
+ let props = { gradientStart: undefined , gradientEnd: undefined, colorDirection: "to right" }
 
- expect(start).to.be.eql(undefined)
+ let start = props.gradientStart
+ let end = props.gradientEnd
+ let direction = props.colorDirection
+
+ expect(start).to.be.eql(undefined)
+
+ expect(end).to.be.eql(undefined)
 
- expect(end).to.be.eql(undefined)
-
- expect(direction).to.include('to')
+ expect(direction).to.include('to')
+ })
+
+
+ }) 
+ describe(buttonName, () => {
 
 
+ it("Mounts gradient button and checks if it contains the background image style attribute with a linear gradient. " ,() =>{
+ let wrapper = mount(Button)
+ let gradientwrap = wrapper.find("a")
+ expect(gradientwrap. hasStyle("background-image", "linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0));"))
+
+ })
+
+
  })
-
  })
+
+
 
+
+
 })