Add more coverage for custom elements (#11811)
Dan Abramov committed
Dec 8, 2017 at 17:19 UTC
cda9fb04999bb0cc2dd148449748556464f3bf74
2 files changed
+98
-49
packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+30
@@ -2551,4 +2551,34 @@ describe('ReactDOMComponent', () => {
2551
}
2552
});
2553
});
2554
+
2555
+ // These tests mostly verify the existing behavior.
2556
+ // It may not always makes sense but we can't change it in minors.
2557
+ describe('Custom elements', () => {
2558
+ it('does not strip unknown boolean attributes', () => {
2559
+ const container = document.createElement('div');
2560
+ ReactDOM.render(<some-custom-element foo={true} />, container);
2561
+ const node = container.firstChild;
2562
+ expect(node.getAttribute('foo')).toBe('true');
2563
+ ReactDOM.render(<some-custom-element foo={false} />, container);
2564
+ expect(node.getAttribute('foo')).toBe('false');
2565
+ ReactDOM.render(<some-custom-element />, container);
2566
+ expect(node.hasAttribute('foo')).toBe(false);
2567
+ ReactDOM.render(<some-custom-element foo={true} />, container);
2568
+ expect(node.hasAttribute('foo')).toBe(true);
2569
+ });
2570
+
2571
+ it('does not strip the on* attributes', () => {
2572
+ const container = document.createElement('div');
2573
+ ReactDOM.render(<some-custom-element onx="bar" />, container);
2574
+ const node = container.firstChild;
2575
+ expect(node.getAttribute('onx')).toBe('bar');
2576
+ ReactDOM.render(<some-custom-element onx="buzz" />, container);
2577
+ expect(node.getAttribute('onx')).toBe('buzz');
2578
+ ReactDOM.render(<some-custom-element />, container);
2579
+ expect(node.hasAttribute('onx')).toBe(false);
2580
+ ReactDOM.render(<some-custom-element onx="bar" />, container);
2581
+ expect(node.getAttribute('onx')).toBe('bar');
2582
+ });
2583
+ });
2584
});
packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+68
-49
@@ -213,16 +213,6 @@ describe('ReactDOMServerIntegration', () => {
213
expect(e.className).toBe('test');
214
},
215
);
216
-
217
- itRenders('class for custom elements', async render => {
218
- const e = await render(<div is="custom-element" class="test" />, 0);
219
- expect(e.getAttribute('class')).toBe('test');
220
- });
221
-
222
- itRenders('className for custom elements', async render => {
223
- const e = await render(<div is="custom-element" className="test" />, 0);
224
- expect(e.getAttribute('className')).toBe('test');
225
- });
216
});
217
218
describe('htmlFor property', function() {
@@ -256,16 +246,6 @@ describe('ReactDOMServerIntegration', () => {
246
const e = await render(<div htmlFor={null} />);
247
expect(e.hasAttribute('htmlFor')).toBe(false);
248
});
259
-
260
- itRenders('htmlFor attribute on custom elements', async render => {
261
- const e = await render(<div is="custom-element" htmlFor="test" />);
262
- expect(e.getAttribute('htmlFor')).toBe('test');
263
- });
264
-
265
- itRenders('for attribute on custom elements', async render => {
266
- const e = await render(<div is="custom-element" for="test" />);
267
- expect(e.getAttribute('for')).toBe('test');
268
- });
249
});
250
251
describe('numeric properties', function() {
@@ -529,35 +509,6 @@ describe('ReactDOMServerIntegration', () => {
509
expect(e.getAttribute('foo')).toBe('bar');
510
});
511
532
- itRenders('unknown attributes for custom elements', async render => {
533
- const e = await render(<custom-element foo="bar" />);
534
- expect(e.getAttribute('foo')).toBe('bar');
535
- });
536
-
537
- itRenders(
538
- 'no unknown attributes for custom elements with null value',
539
- async render => {
540
- const e = await render(<custom-element foo={null} />);
541
- expect(e.hasAttribute('foo')).toBe(false);
542
- },
543
- );
544
-
545
- itRenders(
546
- 'unknown attributes for custom elements using is',
547
- async render => {
548
- const e = await render(<div is="custom-element" foo="bar" />);
549
- expect(e.getAttribute('foo')).toBe('bar');
550
- },
551
- );
552
-
553
- itRenders(
554
- 'no unknown attributes for custom elements using is with null value',
555
- async render => {
556
- const e = await render(<div is="custom-element" foo={null} />);
557
- expect(e.hasAttribute('foo')).toBe(false);
558
- },
559
- );
560
-
512
itRenders('SVG tags with dashes in them', async render => {
513
const e = await render(
514
<svg>
@@ -594,4 +545,72 @@ describe('ReactDOMServerIntegration', () => {
545
expect(e.getAttribute('on')).toEqual('tap:do-something');
546
});
547
});
548
+
549
+ // These tests mostly verify the existing behavior.
550
+ // It may not always make sense but we can't change it in minors.
551
+ describe('custom elements', () => {
552
+ itRenders('class for custom elements', async render => {
553
+ const e = await render(<div is="custom-element" class="test" />, 0);
554
+ expect(e.getAttribute('class')).toBe('test');
555
+ });
556
+
557
+ itRenders('className for custom elements', async render => {
558
+ const e = await render(<div is="custom-element" className="test" />, 0);
559
+ expect(e.getAttribute('className')).toBe('test');
560
+ });
561
+
562
+ itRenders('htmlFor attribute on custom elements', async render => {
563
+ const e = await render(<div is="custom-element" htmlFor="test" />);
564
+ expect(e.getAttribute('htmlFor')).toBe('test');
565
+ });
566
+
567
+ itRenders('for attribute on custom elements', async render => {
568
+ const e = await render(<div is="custom-element" for="test" />);
569
+ expect(e.getAttribute('for')).toBe('test');
570
+ });
571
+
572
+ itRenders('unknown attributes for custom elements', async render => {
573
+ const e = await render(<custom-element foo="bar" />);
574
+ expect(e.getAttribute('foo')).toBe('bar');
575
+ });
576
+
577
+ itRenders('unknown `on*` attributes for custom elements', async render => {
578
+ const e = await render(<custom-element onunknown="bar" />);
579
+ expect(e.getAttribute('onunknown')).toBe('bar');
580
+ });
581
+
582
+ itRenders('unknown boolean `true` attributes as strings', async render => {
583
+ const e = await render(<custom-element foo={true} />);
584
+ expect(e.getAttribute('foo')).toBe('true');
585
+ });
586
+
587
+ itRenders('unknown boolean `false` attributes as strings', async render => {
588
+ const e = await render(<custom-element foo={false} />);
589
+ expect(e.getAttribute('foo')).toBe('false');
590
+ });
591
+
592
+ itRenders(
593
+ 'no unknown attributes for custom elements with null value',
594
+ async render => {
595
+ const e = await render(<custom-element foo={null} />);
596
+ expect(e.hasAttribute('foo')).toBe(false);
597
+ },
598
+ );
599
+
600
+ itRenders(
601
+ 'unknown attributes for custom elements using is',
602
+ async render => {
603
+ const e = await render(<div is="custom-element" foo="bar" />);
604
+ expect(e.getAttribute('foo')).toBe('bar');
605
+ },
606
+ );
607
+
608
+ itRenders(
609
+ 'no unknown attributes for custom elements using is with null value',
610
+ async render => {
611
+ const e = await render(<div is="custom-element" foo={null} />);
612
+ expect(e.hasAttribute('foo')).toBe(false);
613
+ },
614
+ );
615
+ });
616
});