Update tests

Author: larsenwork

index.js

@@ -35,7 +35,7 @@ module.exports = postcss.plugin('easing-gradient', (opts) => {
                     const colorStops = getColorStops(colors, coordinates, options.alphaDecimals || defaultAlphaDecimals)
                     param = colorStops.join(', ')
                   } catch (error) {
-                    console.log(`While looking at ${param} we got:`, error)
+                    console.log(`While looking at ${param} we got an error. Check the color before or after it.`)
                   }
                 }
                 return param

index.test.js

@@ -12,35 +12,42 @@ function run (input, output, opts) {
 /**
  * Default output
  */
-it('create a scrim gradient', () => {
+it('create an steps gradient with direction', () => {
   return run(
-    'a{ background: scrim-gradient(black, transparent); }',
-    'a{ background: linear-gradient(hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100%); }', // eslint-disable-line max-len
+    'a{ background: linear-gradient(to right, green, steps(4, none), red); }',
+    'a{ background: linear-gradient(to right, green, hsl(80.2, 100%, 18.8%) 0%, hsl(80.2, 100%, 18.8%) 33.3%, hsl(30.1, 100%, 25%) 33.3%, hsl(30.1, 100%, 25%) 66.7%, hsl(10, 100%, 37.5%) 66.7%, hsl(10, 100%, 37.5%) 100%, red); }', // eslint-disable-line max-len
     { }
   )
 })
-it('create an easing gradient with direction', () => {
+it('create an cubic bezier gradient with direction', () => {
   return run(
-    'a{ background: ease-in-out-quad-gradient(to bottom left, #bada55, olive); }',
-    'a{ background: linear-gradient(to bottom left, hsl(74.4, 64.3%, 59.4%) 0%, hsl(74.2, 63.2%, 58.8%) 9.7%, hsl(73.5, 60.7%, 57.1%) 18.3%, hsl(72.6, 57.5%, 54.9%) 25.7%, hsl(71.5, 54.2%, 52.3%) 32.2%, hsl(70.4, 52.1%, 49.6%) 37.9%, hsl(69.2, 55.1%, 46.7%) 43.1%, hsl(67.9, 58.7%, 43.7%) 47.9%, hsl(66.7, 62.8%, 40.6%) 52.4%, hsl(65.4, 67.6%, 37.7%) 57.2%, hsl(64.2, 72.9%, 34.8%) 62.4%, hsl(63, 79%, 32%) 68.2%, hsl(61.9, 85.5%, 29.5%) 74.7%, hsl(60.9, 92.3%, 27.3%) 82.2%, hsl(60.2, 97.8%, 25.7%) 90.9%, hsl(60, 100%, 25.1%) 100%); }', // eslint-disable-line max-len
+    'a{ background: linear-gradient(to right, black, cubic-bezier(0.48, 0.30, 0.64, 1.00), transparent); }',
+    'a{ background: linear-gradient(to right, black, hsla(0, 0%, 0%, 0.945) 7.9%, hsla(0, 0%, 0%, 0.883) 15.3%, hsla(0, 0%, 0%, 0.815) 22.2%, hsla(0, 0%, 0%, 0.743) 28.7%, hsla(0, 0%, 0%, 0.667) 34.8%, hsla(0, 0%, 0%, 0.589) 40.6%, hsla(0, 0%, 0%, 0.509) 46.2%, hsla(0, 0%, 0%, 0.429) 51.7%, hsla(0, 0%, 0%, 0.348) 57.2%, hsla(0, 0%, 0%, 0.269) 62.8%, hsla(0, 0%, 0%, 0.193) 68.7%, hsla(0, 0%, 0%, 0.121) 75.2%, hsla(0, 0%, 0%, 0.059) 82.6%, hsla(0, 0%, 0%, 0.015) 91.2%, transparent); }', // eslint-disable-line max-len
+    { }
+  )
+})
+it('create an ease gradient with direction', () => {
+  return run(
+    'a{ background: linear-gradient(to right, green, ease, red); }',
+    'a{ background: linear-gradient(to right, green, hsl(111.8, 100%, 23.5%) 7.8%, hsl(98.9, 100%, 21.3%) 13.2%, hsl(82, 100%, 19%) 17.6%, hsl(60, 100%, 16.7%) 21.7%, hsl(40.6, 100%, 21.3%) 25.8%, hsl(28.1, 100%, 25.9%) 30.2%, hsl(19.5, 100%, 30.3%) 35.1%, hsl(13.5, 100%, 34.6%) 40.6%, hsl(9, 100%, 38.5%) 46.9%, hsl(5.7, 100%, 42%) 54.1%, hsl(3.4, 100%, 45%) 62.2%, hsl(1.7, 100%, 47.3%) 71.1%, hsl(0.7, 100%, 48.9%) 80.6%, hsl(0.2, 100%, 49.7%) 90.5%, red); }', // eslint-disable-line max-len
     { }
   )
 })
 
 /**
  * Output with custom settings
  */
-it('create a scrim gradient with 1 alphaDecimal', () => {
+it('create a cubic bezier gradient with 1 alphaDecimal', () => {
   return run(
-    'a{ background: scrim-gradient(to right, black, transparent); }',
-    'a{ background: linear-gradient(to right, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.7) 19%, hsla(0, 0%, 0%, 0.5) 34%, hsla(0, 0%, 0%, 0.4) 47%, hsla(0, 0%, 0%, 0.3) 56.5%, hsla(0, 0%, 0%, 0.2) 65%, hsla(0, 0%, 0%, 0.1) 73%, hsla(0, 0%, 0%, 0.1) 80.2%, hsla(0, 0%, 0%, 0) 86.1%, hsla(0, 0%, 0%, 0) 91%, hsla(0, 0%, 0%, 0) 95.2%, hsla(0, 0%, 0%, 0) 98.2%, hsla(0, 0%, 0%, 0) 100%); }', // eslint-disable-line max-len
+    'a{ background: linear-gradient(black, cubic-bezier(0.48, 0.30, 0.64, 1.00), transparent); }',
+    'a{ background: linear-gradient(black, hsla(0, 0%, 0%, 0.9) 7.9%, hsla(0, 0%, 0%, 0.9) 15.3%, hsla(0, 0%, 0%, 0.8) 22.2%, hsla(0, 0%, 0%, 0.7) 28.7%, hsla(0, 0%, 0%, 0.7) 34.8%, hsla(0, 0%, 0%, 0.6) 40.6%, hsla(0, 0%, 0%, 0.5) 46.2%, hsla(0, 0%, 0%, 0.4) 51.7%, hsla(0, 0%, 0%, 0.3) 57.2%, hsla(0, 0%, 0%, 0.3) 62.8%, hsla(0, 0%, 0%, 0.2) 68.7%, hsla(0, 0%, 0%, 0.1) 75.2%, hsla(0, 0%, 0%, 0.1) 82.6%, hsla(0, 0%, 0%, 0) 91.2%, transparent); }', // eslint-disable-line max-len
     { alphaDecimals: 1 }
   )
 })
 it('create a scrim gradient with .5 precision', () => {
   return run(
-    'a{ background: ease-in-out-quad-gradient(black, transparent); }',
-    'a{ background: linear-gradient(hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.707) 38.3%, hsla(0, 0%, 0%, 0.287) 62.1%, hsla(0, 0%, 0%, 0) 100%); }', // eslint-disable-line max-len
+    'a{ background: linear-gradient(black, cubic-bezier(0.48, 0.30, 0.64, 1.00), transparent); }',
+    'a{ background: linear-gradient(black, hsla(0, 0%, 0%, 0.67) 34.6%, hsla(0, 0%, 0%, 0.278) 62.2%, transparent); }', // eslint-disable-line max-len
     { precision: 0.5 }
   )
 })
@@ -50,29 +57,26 @@ it('create a scrim gradient with .5 precision', () => {
  */
 it('ignore unsuported gradients', () => {
   return run(
-    'a{ background: ease-in-out-cubic-gradient(black, transparent); }',
-    'a{ background: ease-in-out-cubic-gradient(black, transparent); }',
+    'a{ background: linear-gradient(black, funky-ease, transparent); }',
+    'a{ background: linear-gradient(black, funky-ease, transparent); }',
     { }
   )
 })
 it('ignore gradients with color stop locations set', () => {
   return run(
-    'a{ background: scrim-gradient(black 20%, transparent); }',
-    'a{ background: scrim-gradient(black 20%, transparent); }',
+    'a{ background: linear-gradient(black 20px, cubic-bezier(0.48, 0.30, 0.64, 1.00), transparent); }',
+    'a{ background: linear-gradient(black 20px, cubic-bezier(0.48, 0.30, 0.64, 1.00), transparent); }',
     { }
   )
 })
-it('ignore gradients with 3 color stops', () => {
-  return run(
-    'a{ background: scrim-gradient(black, white, transparent); }',
-    'a{ background: scrim-gradient(black, white, transparent); }',
-    { }
-  )
-})
-it('ignore gradients with identical colors', () => {
+
+/**
+ * Fallback to linear gradient when incorrect transition functions
+ */
+it('ignore gradients with incorrect transition function syntax set', () => {
   return run(
-    'a{ background: scrim-gradient(black, #000); }',
-    'a{ background: scrim-gradient(black, #000); }',
+    'a{ background: linear-gradient(black, cubic-bezier(0.48, 0.30, 0.64), transparent); }',
+    'a{ background: linear-gradient(black, transparent); }',
     { }
   )
 })