@@ -866,7 +866,7 @@ export class GlimmerishComponents extends RenderTest {
866
866
@test ( { kind : 'glimmer' } ) 'destruction is not autotracked' ( ) {
867
867
class State {
868
868
@tracked willDestroyCalls = 0 ;
869
- increment = ( ) => this . willDestroyCalls ++ ;
869
+ incrementWillDestroy = ( ) => this . willDestroyCalls ++ ;
870
870
}
871
871
let state = new State ( ) ;
872
872
class Child extends GlimmerishComponent {
@@ -884,26 +884,62 @@ export class GlimmerishComponents extends RenderTest {
884
884
this . registerComponent (
885
885
'Glimmer' ,
886
886
'Example' ,
887
- `
888
- <p>willDestroyCalls: {{@willDestroyCalls}}</p>
887
+ `<p>willDestroyCalls: {{@willDestroyCalls}}</p>
889
888
<button {{on "click" this.toggleChild}}>Toggle child</button>
890
889
891
890
{{#if this.showChild}}
892
891
<Child @incrementWillDestroy={{@incrementWillDestroy}} />
893
- {{/if}}
894
- ` ,
892
+ {{/if}}` ,
895
893
Example
896
894
) ;
897
895
898
896
this . render (
899
- '<Example @incrementWillDestroy={{this.state.increment}} @willDestroyCalls={{this.state.willDestroyCalls}} />' ,
897
+ `<Example
898
+ @incrementWillDestroy={{this.state.incrementWillDestroy}}
899
+ @willDestroyCalls={{this.state.willDestroyCalls}}
900
+ />` ,
900
901
{ state }
901
902
) ;
902
903
903
- this . assert . strictEqual ( this . takeSnapshot ( ) , '..' ) ;
904
- this . assert . strictEqual ( state . willDestroyCalls , 0 ) ;
905
- this . assertHTML ( '' , 'p' , 'destroys correctly' ) ;
904
+ // Helper because assertHTML is invisible-character sensitive, and this test doesn't care about
905
+ // that.
906
+ // Where is qunit-dom?
907
+ let output = ( calls : number , hasChild : boolean ) => {
908
+ if ( hasChild ) {
909
+ return `<p>willDestroyCalls: ${ calls } </p>
910
+ <button>Toggle child</button>
906
911
912
+ a child
913
+ ` ;
914
+ }
915
+ return `<p>willDestroyCalls: ${ calls } </p>
916
+ <button>Toggle child</button>
917
+ <!---->
918
+ ` ;
919
+ } ;
920
+
921
+ const el = ( ) => this . element as unknown as HTMLElement ;
922
+ const click = ( ) => {
923
+ el ( ) . querySelector ( 'button' ) ?. click ( ) ;
924
+ this . rerender ( ) ;
925
+ } ;
926
+
927
+ this . assert . strictEqual ( state . willDestroyCalls , 0 , '0 destructions' ) ;
928
+ this . assertHTML ( output ( 0 , true ) , 'initial render' ) ;
929
+
930
+ click ( ) ;
931
+ this . assert . strictEqual ( state . willDestroyCalls , 1 , '1 destruction' ) ;
932
+ this . assertHTML ( output ( 1 , false ) , 'destroyed once' ) ;
933
+
934
+ click ( ) ;
935
+ this . assert . strictEqual ( state . willDestroyCalls , 1 , '1 destruction' ) ;
936
+ this . assertHTML ( output ( 1 , true ) , 'shown again, no change' ) ;
937
+
938
+ click ( ) ;
939
+ this . assert . strictEqual ( state . willDestroyCalls , 2 , '2 destruction' ) ;
940
+ this . assertHTML ( output ( 2 , false ) , 'destroyed twice' ) ;
941
+
942
+ this . destroy ( ) ;
907
943
this . assertHTML ( '' , 'destroys correctly' ) ;
908
944
}
909
945
0 commit comments