index.spec.ts

/** More tests can be found in src/lib.rs */
import { blurhashToCss, blurhashesToCss } from '.';

it('converts a blurhash into a CSS object', () => {
  expect(blurhashToCss('LEHLh[WB2yk8pyoJadR*.7kCMdnj')).toEqual({
    backgroundImage: [
      'linear-gradient(90deg,rgb(134,164,177) 10%,rgb(140,165,177) 10% 20%,rgb(153,170,177) 20% 30%,rgb(168,175,176) 30% 40%,rgb(178,179,173) 40% 50%,rgb(181,179,171) 50% 60%,rgb(176,177,170) 60% 70%,rgb(166,173,172) 70% 80%,rgb(152,169,176) 80% 90%,rgb(141,166,179) 90% 100%)',
      'linear-gradient(90deg,rgb(133,162,176) 10%,rgb(138,164,176) 10% 20%,rgb(152,168,175) 20% 30%,rgb(166,172,173) 30% 40%,rgb(176,175,170) 40% 50%,rgb(179,176,167) 50% 60%,rgb(174,174,167) 60% 70%,rgb(164,171,170) 70% 80%,rgb(151,167,174) 80% 90%,rgb(140,165,179) 90% 100%)',
      'linear-gradient(90deg,rgb(129,160,174) 10%,rgb(135,160,173) 10% 20%,rgb(148,162,169) 20% 30%,rgb(161,163,165) 30% 40%,rgb(171,164,159) 40% 50%,rgb(173,165,156) 50% 60%,rgb(169,165,157) 60% 70%,rgb(159,163,162) 70% 80%,rgb(147,162,170) 80% 90%,rgb(137,161,176) 90% 100%)',
      'linear-gradient(90deg,rgb(124,156,170) 10%,rgb(130,155,168) 10% 20%,rgb(142,153,162) 20% 30%,rgb(155,151,153) 30% 40%,rgb(164,149,144) 40% 50%,rgb(166,150,140) 50% 60%,rgb(162,151,142) 60% 70%,rgb(153,153,152) 70% 80%,rgb(142,155,163) 80% 90%,rgb(133,156,172) 90% 100%)',
      'linear-gradient(90deg,rgb(121,151,166) 10%,rgb(126,149,163) 10% 20%,rgb(137,144,153) 20% 30%,rgb(149,138,140) 30% 40%,rgb(158,134,127) 40% 50%,rgb(160,134,121) 50% 60%,rgb(156,138,127) 60% 70%,rgb(148,143,140) 70% 80%,rgb(138,148,156) 80% 90%,rgb(129,151,167) 90% 100%)',
      'linear-gradient(90deg,rgb(119,147,161) 10%,rgb(124,144,157) 10% 20%,rgb(135,137,146) 20% 30%,rgb(146,129,129) 30% 40%,rgb(155,124,114) 40% 50%,rgb(158,124,107) 50% 60%,rgb(154,130,114) 60% 70%,rgb(146,136,131) 70% 80%,rgb(136,142,149) 80% 90%,rgb(128,146,162) 90% 100%)',
      'linear-gradient(90deg,rgb(121,144,157) 10%,rgb(125,142,152) 10% 20%,rgb(135,135,141) 20% 30%,rgb(147,128,124) 30% 40%,rgb(156,124,108) 40% 50%,rgb(159,124,101) 50% 60%,rgb(157,129,108) 60% 70%,rgb(149,135,126) 70% 80%,rgb(138,140,143) 80% 90%,rgb(129,143,156) 90% 100%)',
      'linear-gradient(90deg,rgb(125,143,152) 10%,rgb(129,141,149) 10% 20%,rgb(139,137,139) 20% 30%,rgb(151,133,124) 30% 40%,rgb(160,131,111) 40% 50%,rgb(165,133,105) 50% 60%,rgb(163,136,111) 60% 70%,rgb(155,139,125) 70% 80%,rgb(143,141,140) 80% 90%,rgb(131,142,151) 90% 100%)',
      'linear-gradient(90deg,rgb(130,143,149) 10%,rgb(134,142,146) 10% 20%,rgb(144,142,139) 20% 30%,rgb(156,141,128) 30% 40%,rgb(166,142,119) 40% 50%,rgb(172,144,115) 50% 60%,rgb(170,146,118) 60% 70%,rgb(162,146,128) 70% 80%,rgb(148,144,139) 80% 90%,rgb(134,142,148) 90% 100%)',
      'linear-gradient(90deg,rgb(134,143,147) 10%,rgb(138,144,145) 10% 20%,rgb(147,145,139) 20% 30%,rgb(160,148,132) 30% 40%,rgb(171,151,125) 40% 50%,rgb(177,153,122) 50% 60%,rgb(176,153,125) 60% 70%,rgb(167,151,131) 70% 80%,rgb(152,147,139) 80% 90%,rgb(137,143,145) 90% 100%)',
    ].join(','),
    backgroundPosition: '0 0,0 11%,0 22%,0 33%,0 44%,0 56%,0 67%,0 78%,0 89%,0 100%',
    backgroundRepeat: 'no-repeat',
    backgroundSize: '100% 10%',
    filter: 'blur(24px)',
    transform: 'scale(1.2)',
  });
});

it('converts an array of blurhashes into an array of CSS objects', () => {
  expect(blurhashesToCss(['LEHLh[WB2yk8pyoJadR*.7kCMdnj', 'LGF5?xYk^6#M@-5c,1J5@[or[Q6.'])).toEqual(
    [
      {
        backgroundImage: [
          'linear-gradient(90deg,rgb(134,164,177) 10%,rgb(140,165,177) 10% 20%,rgb(153,170,177) 20% 30%,rgb(168,175,176) 30% 40%,rgb(178,179,173) 40% 50%,rgb(181,179,171) 50% 60%,rgb(176,177,170) 60% 70%,rgb(166,173,172) 70% 80%,rgb(152,169,176) 80% 90%,rgb(141,166,179) 90% 100%)',
          'linear-gradient(90deg,rgb(133,162,176) 10%,rgb(138,164,176) 10% 20%,rgb(152,168,175) 20% 30%,rgb(166,172,173) 30% 40%,rgb(176,175,170) 40% 50%,rgb(179,176,167) 50% 60%,rgb(174,174,167) 60% 70%,rgb(164,171,170) 70% 80%,rgb(151,167,174) 80% 90%,rgb(140,165,179) 90% 100%)',
          'linear-gradient(90deg,rgb(129,160,174) 10%,rgb(135,160,173) 10% 20%,rgb(148,162,169) 20% 30%,rgb(161,163,165) 30% 40%,rgb(171,164,159) 40% 50%,rgb(173,165,156) 50% 60%,rgb(169,165,157) 60% 70%,rgb(159,163,162) 70% 80%,rgb(147,162,170) 80% 90%,rgb(137,161,176) 90% 100%)',
          'linear-gradient(90deg,rgb(124,156,170) 10%,rgb(130,155,168) 10% 20%,rgb(142,153,162) 20% 30%,rgb(155,151,153) 30% 40%,rgb(164,149,144) 40% 50%,rgb(166,150,140) 50% 60%,rgb(162,151,142) 60% 70%,rgb(153,153,152) 70% 80%,rgb(142,155,163) 80% 90%,rgb(133,156,172) 90% 100%)',
          'linear-gradient(90deg,rgb(121,151,166) 10%,rgb(126,149,163) 10% 20%,rgb(137,144,153) 20% 30%,rgb(149,138,140) 30% 40%,rgb(158,134,127) 40% 50%,rgb(160,134,121) 50% 60%,rgb(156,138,127) 60% 70%,rgb(148,143,140) 70% 80%,rgb(138,148,156) 80% 90%,rgb(129,151,167) 90% 100%)',
          'linear-gradient(90deg,rgb(119,147,161) 10%,rgb(124,144,157) 10% 20%,rgb(135,137,146) 20% 30%,rgb(146,129,129) 30% 40%,rgb(155,124,114) 40% 50%,rgb(158,124,107) 50% 60%,rgb(154,130,114) 60% 70%,rgb(146,136,131) 70% 80%,rgb(136,142,149) 80% 90%,rgb(128,146,162) 90% 100%)',
          'linear-gradient(90deg,rgb(121,144,157) 10%,rgb(125,142,152) 10% 20%,rgb(135,135,141) 20% 30%,rgb(147,128,124) 30% 40%,rgb(156,124,108) 40% 50%,rgb(159,124,101) 50% 60%,rgb(157,129,108) 60% 70%,rgb(149,135,126) 70% 80%,rgb(138,140,143) 80% 90%,rgb(129,143,156) 90% 100%)',
          'linear-gradient(90deg,rgb(125,143,152) 10%,rgb(129,141,149) 10% 20%,rgb(139,137,139) 20% 30%,rgb(151,133,124) 30% 40%,rgb(160,131,111) 40% 50%,rgb(165,133,105) 50% 60%,rgb(163,136,111) 60% 70%,rgb(155,139,125) 70% 80%,rgb(143,141,140) 80% 90%,rgb(131,142,151) 90% 100%)',
          'linear-gradient(90deg,rgb(130,143,149) 10%,rgb(134,142,146) 10% 20%,rgb(144,142,139) 20% 30%,rgb(156,141,128) 30% 40%,rgb(166,142,119) 40% 50%,rgb(172,144,115) 50% 60%,rgb(170,146,118) 60% 70%,rgb(162,146,128) 70% 80%,rgb(148,144,139) 80% 90%,rgb(134,142,148) 90% 100%)',
          'linear-gradient(90deg,rgb(134,143,147) 10%,rgb(138,144,145) 10% 20%,rgb(147,145,139) 20% 30%,rgb(160,148,132) 30% 40%,rgb(171,151,125) 40% 50%,rgb(177,153,122) 50% 60%,rgb(176,153,125) 60% 70%,rgb(167,151,131) 70% 80%,rgb(152,147,139) 80% 90%,rgb(137,143,145) 90% 100%)',
        ].join(','),
        backgroundPosition: '0 0,0 11%,0 22%,0 33%,0 44%,0 56%,0 67%,0 78%,0 89%,0 100%',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 10%',
        filter: 'blur(24px)',
        transform: 'scale(1.2)',
      },
      {
        backgroundImage: [
          'linear-gradient(90deg,rgb(177,117,163) 10%,rgb(176,118,169) 10% 20%,rgb(172,119,180) 20% 30%,rgb(161,117,187) 30% 40%,rgb(140,110,184) 40% 50%,rgb(119,99,169) 50% 60%,rgb(118,87,148) 60% 70%,rgb(148,79,131) 70% 80%,rgb(187,78,125) 80% 90%,rgb(216,81,128) 90% 100%)',
          'linear-gradient(90deg,rgb(173,120,166) 10%,rgb(172,121,172) 10% 20%,rgb(167,122,183) 20% 30%,rgb(155,119,189) 30% 40%,rgb(136,112,183) 40% 50%,rgb(118,101,166) 50% 60%,rgb(121,90,143) 60% 70%,rgb(148,83,127) 70% 80%,rgb(183,83,126) 80% 90%,rgb(209,86,133) 90% 100%)',
          'linear-gradient(90deg,rgb(165,128,172) 10%,rgb(161,128,178) 10% 20%,rgb(152,128,189) 20% 30%,rgb(138,125,193) 30% 40%,rgb(123,118,182) 40% 50%,rgb(117,107,158) 50% 60%,rgb(126,97,129) 60% 70%,rgb(148,92,115) 70% 80%,rgb(172,94,128) 80% 90%,rgb(190,98,147) 90% 100%)',
          'linear-gradient(90deg,rgb(153,138,179) 10%,rgb(146,138,185) 10% 20%,rgb(129,137,195) 20% 30%,rgb(111,132,197) 30% 40%,rgb(103,124,181) 40% 50%,rgb(114,114,147) 50% 60%,rgb(132,105,108) 60% 70%,rgb(148,103,99) 70% 80%,rgb(156,106,130) 80% 90%,rgb(159,111,161) 90% 100%)',
          'linear-gradient(90deg,rgb(142,148,181) 10%,rgb(132,147,187) 10% 20%,rgb(105,145,198) 20% 30%,rgb(78,139,198) 30% 40%,rgb(81,131,178) 40% 50%,rgb(111,121,136) 50% 60%,rgb(136,113,87) 60% 70%,rgb(145,111,83) 70% 80%,rgb(138,115,131) 80% 90%,rgb(122,121,171) 90% 100%)',
          'linear-gradient(90deg,rgb(137,155,177) 10%,rgb(125,154,184) 10% 20%,rgb(91,151,195) 20% 30%,rgb(51,145,195) 30% 40%,rgb(65,136,174) 40% 50%,rgb(107,125,130) 50% 60%,rgb(135,118,76) 60% 70%,rgb(140,116,77) 70% 80%,rgb(121,120,131) 80% 90%,rgb(85,125,173) 90% 100%)',
          'linear-gradient(90deg,rgb(140,159,166) 10%,rgb(128,158,173) 10% 20%,rgb(96,155,185) 20% 30%,rgb(60,148,187) 30% 40%,rgb(66,138,170) 40% 50%,rgb(103,128,132) 50% 60%,rgb(129,120,86) 60% 70%,rgb(132,117,84) 70% 80%,rgb(111,120,129) 80% 90%,rgb(70,124,166) 90% 100%)',
          'linear-gradient(90deg,rgb(149,161,146) 10%,rgb(140,160,154) 10% 20%,rgb(116,156,169) 20% 30%,rgb(89,149,175) 30% 40%,rgb(82,139,165) 40% 50%,rgb(100,128,138) 50% 60%,rgb(118,119,108) 60% 70%,rgb(122,115,101) 70% 80%,rgb(110,115,125) 80% 90%,rgb(87,117,151) 90% 100%)',
          'linear-gradient(90deg,rgb(160,161,122) 10%,rgb(154,160,131) 10% 20%,rgb(137,156,149) 20% 30%,rgb(115,149,161) 30% 40%,rgb(99,139,160) 40% 50%,rgb(97,127,147) 50% 60%,rgb(104,117,129) 60% 70%,rgb(112,110,117) 70% 80%,rgb(114,108,120) 80% 90%,rgb(113,108,130) 90% 100%)',
          'linear-gradient(90deg,rgb(168,161,98) 10%,rgb(164,159,109) 10% 20%,rgb(152,155,131) 20% 30%,rgb(133,148,149) 30% 40%,rgb(111,138,157) 40% 50%,rgb(95,126,154) 50% 60%,rgb(92,115,143) 60% 70%,rgb(103,106,129) 70% 80%,rgb(120,101,117) 80% 90%,rgb(132,99,111) 90% 100%)',
        ].join(','),
        backgroundPosition: '0 0,0 11%,0 22%,0 33%,0 44%,0 56%,0 67%,0 78%,0 89%,0 100%',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 10%',
        filter: 'blur(24px)',
        transform: 'scale(1.2)',
      },
    ]
  );
});