@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.3

package/utils/__tests__/string.test.ts

@@ -1,4 +1,4 @@
-import { decodeHtml, resourceNames, pathArrayToTree } from '@shell/utils/string';
+import { decodeHtml, resourceNames, pathArrayToTree, isBase64EncodedCert } from '@shell/utils/string';
 
 describe('fx: decodeHtml', () => {
   it('should decode HTML values from escaped string into valid markup', () => {
@@ -361,3 +361,25 @@ describe('fx: pathArrayToTree', () => {
     expect(actual).toStrictEqual(expected);
   });
 });
+
+describe('fx: isBase64EncodedCert', () => {
+  it.each([
+    ['valid base64 cert', 'LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0t', true],
+    ['base64 with padding', 'c3NoIGtleQ==', false],
+    ['base64 with newlines', 'LS0tLS1CRUdJTiBDRVJU\nSUZJQ0FURS0tLS0t\nTUlJQmtUQ0I=', true],
+    ['base64 with CRLF', 'LS0tLS1CRUdJTiBDRVJU\r\nSUZJQ0FURS0tLS0t\r\nTUlJQmtUQ0I=', true],
+  ])('should return %p for %p', (_, value, expected) => {
+    expect(isBase64EncodedCert(value as string)).toBe(expected);
+  });
+
+  it.each([
+    ['empty string', ''],
+    ['null', null],
+    ['undefined', undefined],
+    ['short string like "test"', 'test'],
+    ['short valid base64', 'Zm9v'],
+    ['invalid characters', 'not-valid-base64!'],
+  ])('should return false for %p', (_, value) => {
+    expect(isBase64EncodedCert(value as string)).toBe(false);
+  });
+});

package/utils/__tests__/style.test.ts

@@ -0,0 +1,154 @@
+import {
+  ALL_STATE_COLORS,
+  BLANK_IMAGE,
+  StateColor,
+  getHighestAlertColor,
+  isHigherAlert,
+  isTruncated,
+  stateColorCssVar,
+  toBgColor,
+} from '@shell/utils/style';
+
+describe('stateColorCssVar', () => {
+  it.each([
+    ['success', 'var(--success)'],
+    ['warning', 'var(--warning)'],
+    ['error', 'var(--error)'],
+    ['info', 'var(--info)'],
+    ['disabled', 'var(--disabled)'],
+  ] as [StateColor, string][])('returns css var for %s', (color, expected) => {
+    expect(stateColorCssVar(color)).toBe(expected);
+  });
+});
+
+describe('toBgColor', () => {
+  it('returns bg-info when no color provided', () => {
+    expect(toBgColor(undefined)).toBe('bg-info');
+  });
+
+  it.each([
+    ['success', 'bg-success'],
+    ['warning', 'bg-warning'],
+    ['error', 'bg-error'],
+    ['info', 'bg-info'],
+    ['disabled', 'bg-disabled'],
+  ] as [StateColor, string][])('returns bg-%s for color %s', (color, expected) => {
+    expect(toBgColor(color)).toBe(expected);
+  });
+});
+
+describe('isHigherAlert', () => {
+  it.each([
+    ['error', 'warning', true],
+    ['error', 'success', true],
+    ['error', 'info', true],
+    ['warning', 'success', true],
+    ['warning', 'info', true],
+    ['success', 'info', true],
+    ['warning', 'error', false],
+    ['success', 'error', false],
+    ['info', 'error', false],
+    ['success', 'warning', false],
+    ['info', 'warning', false],
+    ['info', 'success', false],
+    ['error', 'error', false],
+    ['warning', 'warning', false],
+    ['info', 'info', false],
+    ['disabled', 'info', false],
+    ['disabled', 'error', false],
+    ['info', 'disabled', true],
+    ['error', 'disabled', true],
+  ] as [StateColor, StateColor, boolean][])('%s vs %s → %s', (a, b, expected) => {
+    expect(isHigherAlert(a, b)).toBe(expected);
+  });
+});
+
+describe('getHighestAlertColor', () => {
+  it.each([
+    {
+      desc: 'info for an empty array', colors: [], expected: 'info'
+    },
+    {
+      desc: 'error when single error element', colors: ['error'], expected: 'error'
+    },
+    {
+      desc: 'warning when single warning element', colors: ['warning'], expected: 'warning'
+    },
+    {
+      desc: 'error when present among mixed levels', colors: ['info', 'warning', 'error', 'success'], expected: 'error'
+    },
+    {
+      desc: 'warning when no error is present', colors: ['info', 'success', 'warning'], expected: 'warning'
+    },
+    {
+      desc: 'success when only info and success are present', colors: ['info', 'success'], expected: 'success'
+    },
+    {
+      desc: 'info when all colors are info', colors: ['info', 'info', 'info'], expected: 'info'
+    },
+    {
+      desc: 'info (default) when all colors are disabled', colors: ['disabled', 'disabled'], expected: 'info'
+    },
+  ])('returns $desc', ({ colors, expected }) => {
+    expect(getHighestAlertColor(colors as StateColor[])).toBe(expected);
+  });
+});
+
+describe('isTruncated', () => {
+  it('returns false when element is null', () => {
+    expect(isTruncated(null)).toBe(false);
+  });
+
+  it.each([
+    {
+      desc: 'false when text fits within element bounds',
+      el:   {
+        scrollWidth: 100, clientWidth: 200, scrollHeight: 20, clientHeight: 20
+      },
+      expected: false,
+    },
+    {
+      desc: 'true when text is horizontally truncated',
+      el:   {
+        scrollWidth: 300, clientWidth: 200, scrollHeight: 20, clientHeight: 20
+      },
+      expected: true,
+    },
+    {
+      desc: 'true when text is vertically truncated',
+      el:   {
+        scrollWidth: 100, clientWidth: 100, scrollHeight: 50, clientHeight: 40
+      },
+      expected: true,
+    },
+    {
+      desc: 'false for single-pixel vertical overflow (1px tolerance)',
+      el:   {
+        scrollWidth: 100, clientWidth: 100, scrollHeight: 21, clientHeight: 20
+      },
+      expected: false,
+    },
+    {
+      desc: 'true for 2+ pixel vertical overflow',
+      el:   {
+        scrollWidth: 100, clientWidth: 100, scrollHeight: 22, clientHeight: 20
+      },
+      expected: true,
+    },
+  ])('returns $desc', ({ el, expected }) => {
+    expect(isTruncated(el as HTMLElement)).toBe(expected);
+  });
+});
+
+describe('all state colors constant', () => {
+  it('contains all expected state colors', () => {
+    expect(ALL_STATE_COLORS).toStrictEqual(['success', 'warning', 'error', 'info', 'disabled']);
+  });
+});
+
+describe('blank image constant', () => {
+  it('is a valid base64 data URI', () => {
+    expect(BLANK_IMAGE).toMatch(/^data:image\//);
+    expect(BLANK_IMAGE).toContain('base64,');
+  });
+});

package/utils/__tests__/svg-filter.test.ts

@@ -0,0 +1,184 @@
+import { Solver } from '@shell/utils/svg-filter';
+
+describe('solver', () => {
+  describe('css', () => {
+    it.each([
+      {
+        desc:     'all-zero filter values produce zero percentages and zero hue-rotate',
+        filters:  [0, 0, 0, 0, 0, 0],
+        expected: 'filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(0%);',
+      },
+      {
+        desc:     'integer filter values are rounded and formatted correctly',
+        filters:  [50, 20, 3750, 50, 100, 100],
+        expected: 'filter: invert(50%) sepia(20%) saturate(3750%) hue-rotate(180deg) brightness(100%) contrast(100%);',
+      },
+      {
+        desc:     'fractional filter values are rounded to nearest integer',
+        filters:  [10.6, 30.4, 100.5, 25.2, 80.9, 120.1],
+        expected: 'filter: invert(11%) sepia(30%) saturate(101%) hue-rotate(91deg) brightness(81%) contrast(120%);',
+      },
+      {
+        desc:     'hue-rotate index (3) uses 3.6 multiplier',
+        filters:  [0, 0, 0, 100, 0, 0],
+        expected: 'filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(360deg) brightness(0%) contrast(0%);',
+      },
+    ])('$desc', ({ filters, expected }) => {
+      const solver = new Solver({
+        r: 255, g: 0, b: 0
+      });
+
+      expect(solver.css(filters)).toStrictEqual(expected);
+    });
+  });
+
+  describe('loss', () => {
+    it('returns 0 for filters that reproduce the target color exactly', () => {
+      // Target: black (0,0,0). Starting from black and applying:
+      // invert(0%), sepia(0%), saturate(0%), hueRotate(0), brightness(100%), contrast(100%)
+      // should leave color as (0,0,0) — perfect match.
+      const solver = new Solver({
+        r: 0, g: 0, b: 0
+      });
+      const loss = solver.loss([0, 0, 0, 0, 100, 100]);
+
+      expect(loss).toStrictEqual(0);
+    });
+
+    it('returns a positive value when filters produce a color that differs from the target', () => {
+      const solver = new Solver({
+        r: 255, g: 0, b: 0
+      });
+      // Filters that are all zero → color stays black → far from red target
+      const loss = solver.loss([0, 0, 0, 0, 0, 0]);
+
+      expect(loss).toBeGreaterThan(0);
+    });
+
+    it('loss is smaller when color produced by filters is closer to target', () => {
+      const solver = new Solver({
+        r: 0, g: 0, b: 0
+      });
+      // filters [0,0,0,0,0,0]: contrast(0) pushes everything to mid-gray → far from black target
+      const highLoss = solver.loss([0, 0, 0, 0, 0, 0]);
+      // filters [0,0,0,0,100,100]: identity transforms → stays black → matches target
+      const lowerLoss = solver.loss([0, 0, 0, 0, 100, 100]);
+
+      expect(lowerLoss).toBeLessThan(highLoss);
+    });
+
+    it('uses the same reusedColor instance without side effects between calls', () => {
+      const solver = new Solver({
+        r: 100, g: 150, b: 200
+      });
+      const loss1 = solver.loss([10, 5, 200, 30, 90, 110]);
+      const loss2 = solver.loss([10, 5, 200, 30, 90, 110]);
+
+      // Same inputs must produce the same loss regardless of call order
+      expect(loss1).toStrictEqual(loss2);
+    });
+  });
+
+  describe('constructor', () => {
+    it('stores target color components', () => {
+      const solver = new Solver({
+        r: 100, g: 150, b: 200
+      });
+
+      expect(solver.target.r).toStrictEqual(100);
+      expect(solver.target.g).toStrictEqual(150);
+      expect(solver.target.b).toStrictEqual(200);
+    });
+
+    it('clamps target components above 255 to 255', () => {
+      const solver = new Solver({
+        r: 300, g: 0, b: 0
+      });
+
+      expect(solver.target.r).toStrictEqual(255);
+    });
+
+    it('clamps target components below 0 to 0', () => {
+      const solver = new Solver({
+        r: 0, g: -10, b: 0
+      });
+
+      expect(solver.target.g).toStrictEqual(0);
+    });
+
+    it('computes targetHSL from the provided color', () => {
+      // Pure white: hsl should be h=0, s=0, l=100
+      const solver = new Solver({
+        r: 255, g: 255, b: 255
+      });
+
+      expect(solver.targetHSL.h).toStrictEqual(0);
+      expect(solver.targetHSL.s).toStrictEqual(0);
+      expect(solver.targetHSL.l).toBeCloseTo(100, 1);
+    });
+
+    it('computes targetHSL for pure red', () => {
+      // Pure red: r=255, g=0, b=0 → hsl h≈0 (normalised *100 → 0), s=100, l=50
+      const solver = new Solver({
+        r: 255, g: 0, b: 0
+      });
+
+      expect(solver.targetHSL.h).toBeCloseTo(0, 1);
+      expect(solver.targetHSL.s).toBeCloseTo(100, 1);
+      expect(solver.targetHSL.l).toBeCloseTo(50, 1);
+    });
+  });
+
+  describe('solve', () => {
+    it('returns an object with values, loss, filter and filterVal properties', () => {
+      const solver = new Solver({
+        r: 255, g: 0, b: 0
+      });
+      const result = solver.solve();
+
+      expect(result).toHaveProperty('values');
+      expect(result).toHaveProperty('loss');
+      expect(result).toHaveProperty('filter');
+      expect(result).toHaveProperty('filterVal');
+    });
+
+    it('filter starts with "filter: " and ends with ";"', () => {
+      const solver = new Solver({
+        r: 0, g: 128, b: 255
+      });
+      const result = solver.solve();
+
+      expect(result.filter.startsWith('filter: ')).toBe(true);
+      expect(result.filter.endsWith(';')).toBe(true);
+    });
+
+    it('filterVal is filter without the "filter: " prefix and trailing ";"', () => {
+      const solver = new Solver({
+        r: 0, g: 200, b: 100
+      });
+      const result = solver.solve();
+
+      expect(result.filterVal).toStrictEqual(
+        result.filter.replace('filter: ', '').replace(';', '')
+      );
+    });
+
+    it('loss is a non-negative number', () => {
+      const solver = new Solver({
+        r: 50, g: 100, b: 150
+      });
+      const result = solver.solve();
+
+      expect(result.loss).toBeGreaterThanOrEqual(0);
+    });
+
+    it('values array has exactly 6 elements', () => {
+      const solver = new Solver({
+        r: 10, g: 20, b: 30
+      });
+      const result = solver.solve();
+
+      expect(result.values).toHaveLength(6);
+    });
+  });
+});