test: conversion of value to DOM String

Author: cdoublev

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     node: true,
   },
   globals: {
+    BigInt: true,
     exports: true,
     module: true,
     require: true,

lib/CSSStyleDeclaration.test.js

@@ -12,6 +12,10 @@ const invalidProperties = Array.from(implementedProperties).filter(
   prop => !allowedProperties.includes(parsers.dashedToCamelCase(prop))
 );
 
+if (typeof BigInt === 'undefined') {
+  var BigInt = Number;
+}
+
 describe('CSSStyleDeclaration', () => {
   test('has only valid properties implemented', () => {
     expect(invalidProperties.length).toEqual(0);
@@ -352,6 +356,56 @@ describe('CSSStyleDeclaration', () => {
     expect(style.fillOpacity).toEqual('0');
   });
 
+  test('setting a property with a value that can not be converted to string should throw an error', () => {
+    const style = new CSSStyleDeclaration();
+
+    expect(() => (style.opacity = Symbol('0'))).toThrow('Cannot convert symbol to string');
+    expect(() => (style.opacity = { toString: () => [0] })).toThrow(
+      'Cannot convert object to primitive value'
+    );
+  });
+
+  test('setting a property with a value that can be converted to string should work', () => {
+    const style = new CSSStyleDeclaration();
+
+    // Property with custom setter
+    style.borderStyle = { toString: () => 'solid' };
+    expect(style.borderStyle).toEqual('solid');
+
+    // Property with default setter
+    style.opacity = 1;
+    expect(style.opacity).toBe('1');
+    style.opacity = { toString: () => '0' };
+    expect(style.opacity).toBe('0');
+
+    style.opacity = { toString: () => 1 };
+    expect(style.opacity).toEqual('1');
+
+    style.opacity = BigInt(0);
+    expect(style.opacity).toBe('0');
+    style.opacity = { toString: () => BigInt(1) };
+    expect(style.opacity).toEqual('1');
+
+    style.setProperty('--custom', [0]);
+    expect(style.getPropertyValue('--custom')).toEqual('0');
+
+    style.setProperty('--custom', null);
+    expect(style.getPropertyValue('--custom')).toBe('');
+    style.setProperty('--custom', { toString: () => null });
+    expect(style.getPropertyValue('--custom')).toBe('null');
+
+    style.setProperty('--custom', undefined);
+    expect(style.getPropertyValue('--custom')).toBe('undefined');
+    style.setProperty('--custom', null);
+    style.setProperty('--custom', { toString: () => undefined });
+    expect(style.getPropertyValue('--custom')).toBe('undefined');
+
+    style.setProperty('--custom', false);
+    expect(style.getPropertyValue('--custom')).toBe('false');
+    style.setProperty('--custom', { toString: () => true });
+    expect(style.getPropertyValue('--custom')).toBe('true');
+  });
+
   test('onchange callback should be called when the csstext changes', () => {
     var style = new CSSStyleDeclaration(function(cssText) {
       expect(cssText).toEqual('opacity: 0;');