@@ -32,9 +32,11 @@ describe('translation-integration', function () {
32
32
33
33
html : 'this is a <i>HTML</i> content' ,
34
34
pre : 'tic ' ,
35
+ preHtml : '<b>tic</b><span>foo</span> ' ,
35
36
mid : 'tac' ,
36
37
midHtml : '<i>tac</i>' ,
37
38
post : ' toe' ,
39
+ postHtml : ' <b>toe</b><span>bar</span>' ,
38
40
39
41
imgPath : 'foo.jpg'
40
42
} ;
@@ -327,6 +329,30 @@ describe('translation-integration', function () {
327
329
328
330
assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , 'tic <i>tac</i>' ) ;
329
331
} ) ;
332
+ it ( 'works for html content for [prepend] + textContent' , async function ( ) {
333
+
334
+ @customElement ( {
335
+ name : 'app' , template : `<span t='[prepend]preHtml;[html]mid'></span>`
336
+ } )
337
+ class App { }
338
+
339
+ const host = DOM . createElement ( 'app' ) ;
340
+ await setup ( host , new App ( ) ) ;
341
+
342
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<b>tic</b><span>foo</span> tac' ) ;
343
+ } ) ;
344
+ it ( 'works for html content for [prepend] + innerHtml' , async function ( ) {
345
+
346
+ @customElement ( {
347
+ name : 'app' , template : `<span t='[prepend]preHtml;[html]midHtml'></span>`
348
+ } )
349
+ class App { }
350
+
351
+ const host = DOM . createElement ( 'app' ) ;
352
+ await setup ( host , new App ( ) ) ;
353
+
354
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<b>tic</b><span>foo</span> <i>tac</i>' ) ;
355
+ } ) ;
330
356
331
357
it ( 'works for [append] only' , async function ( ) {
332
358
@@ -364,6 +390,30 @@ describe('translation-integration', function () {
364
390
365
391
assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<i>tac</i> toe' ) ;
366
392
} ) ;
393
+ it ( 'works for html content for [append] + textContent' , async function ( ) {
394
+
395
+ @customElement ( {
396
+ name : 'app' , template : `<span t='[append]postHtml;[html]mid'></span>`
397
+ } )
398
+ class App { }
399
+
400
+ const host = DOM . createElement ( 'app' ) ;
401
+ await setup ( host , new App ( ) ) ;
402
+
403
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , 'tac <b>toe</b><span>bar</span>' ) ;
404
+ } ) ;
405
+ it ( 'works for html content for [append]' , async function ( ) {
406
+
407
+ @customElement ( {
408
+ name : 'app' , template : `<span t='[append]postHtml;[html]midHtml'></span>`
409
+ } )
410
+ class App { }
411
+
412
+ const host = DOM . createElement ( 'app' ) ;
413
+ await setup ( host , new App ( ) ) ;
414
+
415
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<i>tac</i> <b>toe</b><span>bar</span>' ) ;
416
+ } ) ;
367
417
368
418
it ( 'works for [prepend] and [append]' , async function ( ) {
369
419
@@ -401,6 +451,131 @@ describe('translation-integration', function () {
401
451
402
452
assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , 'tic <i>tac</i> toe' ) ;
403
453
} ) ;
454
+ it ( 'works for html resource for [prepend] and [append] + textContent' , async function ( ) {
455
+
456
+ @customElement ( {
457
+ name : 'app' , template : `<span t='[prepend]preHtml;[append]postHtml;mid'></span>`
458
+ } )
459
+ class App { }
460
+
461
+ const host = DOM . createElement ( 'app' ) ;
462
+ await setup ( host , new App ( ) ) ;
463
+
464
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<b>tic</b><span>foo</span> tac <b>toe</b><span>bar</span>' ) ;
465
+ } ) ;
466
+ it ( 'works for html resource for [prepend] and [append] + innerHtml' , async function ( ) {
467
+
468
+ @customElement ( {
469
+ name : 'app' , template : `<span t='[prepend]preHtml;[append]postHtml;[html]midHtml'></span>`
470
+ } )
471
+ class App { }
472
+
473
+ const host = DOM . createElement ( 'app' ) ;
474
+ await setup ( host , new App ( ) ) ;
475
+
476
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<b>tic</b><span>foo</span> <i>tac</i> <b>toe</b><span>bar</span>' ) ;
477
+ } ) ;
478
+
479
+ it ( 'works correctly with the change of both [prepend], and [append] - textContent' , async function ( ) {
480
+
481
+ @customElement ( {
482
+ name : 'app' , template : `<span t.bind='keyExpr'>tac</span>`
483
+ } )
484
+ class App {
485
+ public keyExpr : string = '[prepend]preHtml;[append]postHtml' ;
486
+ }
487
+
488
+ const host = DOM . createElement ( 'app' ) ;
489
+ const app = new App ( ) ;
490
+ const { ctx } = await setup ( host , app ) ;
491
+
492
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<b>tic</b><span>foo</span> tac <b>toe</b><span>bar</span>' ) ;
493
+ app . keyExpr = '[prepend]pre;[append]post' ;
494
+
495
+ ctx . lifecycle . processRAFQueue ( LifecycleFlags . none ) ;
496
+
497
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , 'tic tac toe' ) ;
498
+ } ) ;
499
+ it ( 'works correctly with the change of both [prepend], and [append] - textContent' , async function ( ) {
500
+
501
+ @customElement ( {
502
+ name : 'app' , template : `<span t.bind='keyExpr'>tac</span>`
503
+ } )
504
+ class App {
505
+ public keyExpr : string = '[prepend]pre;[append]post' ;
506
+ }
507
+
508
+ const host = DOM . createElement ( 'app' ) ;
509
+ const app = new App ( ) ;
510
+ const { ctx } = await setup ( host , app ) ;
511
+
512
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , 'tic tac toe' ) ;
513
+ app . keyExpr = '[prepend]preHtml;[append]postHtml' ;
514
+
515
+ ctx . lifecycle . processRAFQueue ( LifecycleFlags . none ) ;
516
+
517
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<b>tic</b><span>foo</span> tac <b>toe</b><span>bar</span>' ) ;
518
+ } ) ;
519
+ it ( 'works correctly with the removal of [append]' , async function ( ) {
520
+
521
+ @customElement ( {
522
+ name : 'app' , template : `<span t.bind='keyExpr'>tac</span>`
523
+ } )
524
+ class App {
525
+ public keyExpr : string = '[prepend]preHtml;[append]postHtml' ;
526
+ }
527
+
528
+ const host = DOM . createElement ( 'app' ) ;
529
+ const app = new App ( ) ;
530
+ const { ctx } = await setup ( host , app ) ;
531
+
532
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<b>tic</b><span>foo</span> tac <b>toe</b><span>bar</span>' ) ;
533
+ app . keyExpr = '[prepend]preHtml' ;
534
+
535
+ ctx . lifecycle . processRAFQueue ( LifecycleFlags . none ) ;
536
+
537
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<b>tic</b><span>foo</span> tac' ) ;
538
+ } ) ;
539
+ it ( 'works correctly with the removal of [prepend]' , async function ( ) {
540
+
541
+ @customElement ( {
542
+ name : 'app' , template : `<span t.bind='keyExpr'>tac</span>`
543
+ } )
544
+ class App {
545
+ public keyExpr : string = '[prepend]preHtml;[append]postHtml' ;
546
+ }
547
+
548
+ const host = DOM . createElement ( 'app' ) ;
549
+ const app = new App ( ) ;
550
+ const { ctx } = await setup ( host , app ) ;
551
+
552
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<b>tic</b><span>foo</span> tac <b>toe</b><span>bar</span>' ) ;
553
+ app . keyExpr = '[append]postHtml' ;
554
+
555
+ ctx . lifecycle . processRAFQueue ( LifecycleFlags . none ) ;
556
+
557
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , 'tac <b>toe</b><span>bar</span>' ) ;
558
+ } ) ;
559
+ it ( 'works correctly with the removal of both [prepend] and [append]' , async function ( ) {
560
+
561
+ @customElement ( {
562
+ name : 'app' , template : `<span t.bind='keyExpr'>tac</span>`
563
+ } )
564
+ class App {
565
+ public keyExpr : string = '[prepend]preHtml;[append]postHtml' ;
566
+ }
567
+
568
+ const host = DOM . createElement ( 'app' ) ;
569
+ const app = new App ( ) ;
570
+ const { ctx } = await setup ( host , app ) ;
571
+
572
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<b>tic</b><span>foo</span> tac <b>toe</b><span>bar</span>' ) ;
573
+ app . keyExpr = '[html]midHtml' ;
574
+
575
+ ctx . lifecycle . processRAFQueue ( LifecycleFlags . none ) ;
576
+
577
+ assert . equal ( ( host as Element ) . querySelector ( 'span' ) . innerHTML , '<i>tac</i>' ) ;
578
+ } ) ;
404
579
} ) ;
405
580
406
581
describe ( 'updates translation' , function ( ) {
0 commit comments