@@ -633,131 +633,69 @@ describe('Component scoped slot', () => {
633633 } )
634634
635635 // 2.6 new slot syntax
636- if ( process . env . NEW_SLOT_SYNTAX ) {
637- describe ( 'v-slot syntax' , ( ) => {
638- const Foo = {
639- render ( h ) {
640- return h ( 'div' , [
641- this . $scopedSlots . default && this . $scopedSlots . default ( 'from foo default' ) ,
642- this . $scopedSlots . one && this . $scopedSlots . one ( 'from foo one' ) ,
643- this . $scopedSlots . two && this . $scopedSlots . two ( 'from foo two' )
644- ] )
645- }
636+ describe ( 'v-slot syntax' , ( ) => {
637+ const Foo = {
638+ render ( h ) {
639+ return h ( 'div' , [
640+ this . $scopedSlots . default && this . $scopedSlots . default ( 'from foo default' ) ,
641+ this . $scopedSlots . one && this . $scopedSlots . one ( 'from foo one' ) ,
642+ this . $scopedSlots . two && this . $scopedSlots . two ( 'from foo two' )
643+ ] )
646644 }
645+ }
647646
648- const Bar = {
649- render ( h ) {
650- return this . $scopedSlots . default && this . $scopedSlots . default ( 'from bar' )
651- }
647+ const Bar = {
648+ render ( h ) {
649+ return this . $scopedSlots . default && this . $scopedSlots . default ( 'from bar' )
652650 }
651+ }
653652
654- const Baz = {
655- render ( h ) {
656- return this . $scopedSlots . default && this . $scopedSlots . default ( 'from baz' )
657- }
653+ const Baz = {
654+ render ( h ) {
655+ return this . $scopedSlots . default && this . $scopedSlots . default ( 'from baz' )
658656 }
657+ }
659658
660- const toNamed = ( syntax , name ) => syntax [ 0 ] === '#'
661- ? `#${ name } // shorthand
662- : `${ syntax } ${ name } // full syntax
663-
664- function runSuite ( syntax ) {
665- it ( 'default slot' , ( ) => {
666- const vm = new Vue ( {
667- template : `<foo ${ syntax } ,
668- components : { Foo }
669- } ) . $mount ( )
670- expect ( vm . $el . innerHTML ) . toBe ( `from foo default<div>from foo default</div>` )
671- } )
672-
673- it ( 'nested default slots' , ( ) => {
674- const vm = new Vue ( {
675- template : `
676- <foo ${ syntax }
677- <bar ${ syntax }
678- <baz ${ syntax }
679- {{ foo }} | {{ bar }} | {{ baz }}
680- </baz>
681- </bar>
682- </foo>
683- ` ,
684- components : { Foo, Bar, Baz }
685- } ) . $mount ( )
686- expect ( vm . $el . innerHTML . trim ( ) ) . toBe ( `from foo default | from bar | from baz` )
687- } )
688-
689- it ( 'named slots' , ( ) => {
690- const vm = new Vue ( {
691- template : `
692- <foo>
693- <template ${ toNamed ( syntax , 'default' ) }
694- {{ foo }}
695- </template>
696- <template ${ toNamed ( syntax , 'one' ) }
697- {{ one }}
698- </template>
699- <template ${ toNamed ( syntax , 'two' ) }
700- {{ two }}
701- </template>
702- </foo>
703- ` ,
704- components : { Foo }
705- } ) . $mount ( )
706- expect ( vm . $el . innerHTML . replace ( / \s + / g, ' ' ) ) . toMatch ( `from foo default from foo one from foo two` )
707- } )
708-
709- it ( 'nested + named + default slots' , ( ) => {
710- const vm = new Vue ( {
711- template : `
712- <foo>
713- <template ${ toNamed ( syntax , 'one' ) }
714- <bar ${ syntax }
715- {{ one }} {{ bar }}
716- </bar>
717- </template>
718- <template ${ toNamed ( syntax , 'two' ) }
719- <baz ${ syntax }
720- {{ two }} {{ baz }}
721- </baz>
722- </template>
723- </foo>
724- ` ,
725- components : { Foo, Bar, Baz }
726- } ) . $mount ( )
727- expect ( vm . $el . innerHTML . replace ( / \s + / g, ' ' ) ) . toMatch ( `from foo one from bar from foo two from baz` )
728- } )
659+ const toNamed = ( syntax , name ) => syntax [ 0 ] === '#'
660+ ? `#${ name } // shorthand
661+ : `${ syntax } ${ name } // full syntax
729662
730- it ( 'should warn v-slot usage on non-component elements' , ( ) => {
731- const vm = new Vue ( {
732- template : `<div ${ syntax }
733- } ) . $mount ( )
734- expect ( `v-slot can only be used on components or <template>` ) . toHaveBeenWarned ( )
735- } )
736-
737- it ( 'should warn mixed usage' , ( ) => {
738- const vm = new Vue ( {
739- template : `<foo><bar slot="one" slot-scope="bar" ${ syntax } ,
740- components : { Foo, Bar }
741- } ) . $mount ( )
742- expect ( `Unexpected mixed usage of different slot syntaxes` ) . toHaveBeenWarned ( )
743- } )
744- }
663+ function runSuite ( syntax ) {
664+ it ( 'default slot' , ( ) => {
665+ const vm = new Vue ( {
666+ template : `<foo ${ syntax } ,
667+ components : { Foo }
668+ } ) . $mount ( )
669+ expect ( vm . $el . innerHTML ) . toBe ( `from foo default<div>from foo default</div>` )
670+ } )
745671
746- // run tests for both full syntax and shorthand
747- runSuite ( 'v-slot' )
748- runSuite ( '#default' )
672+ it ( 'nested default slots' , ( ) => {
673+ const vm = new Vue ( {
674+ template : `
675+ <foo ${ syntax }
676+ <bar ${ syntax }
677+ <baz ${ syntax }
678+ {{ foo }} | {{ bar }} | {{ baz }}
679+ </baz>
680+ </bar>
681+ </foo>
682+ ` ,
683+ components : { Foo, Bar, Baz }
684+ } ) . $mount ( )
685+ expect ( vm . $el . innerHTML . trim ( ) ) . toBe ( `from foo default | from bar | from baz` )
686+ } )
749687
750- it ( 'shorthand named slots' , ( ) => {
688+ it ( 'named slots' , ( ) => {
751689 const vm = new Vue ( {
752690 template : `
753691 <foo>
754- <template # default="foo">
692+ <template ${ toNamed ( syntax , ' default' ) }
755693 {{ foo }}
756694 </template>
757- <template # one="one">
695+ <template ${ toNamed ( syntax , ' one' ) }
758696 {{ one }}
759697 </template>
760- <template # two="two">
698+ <template ${ toNamed ( syntax , ' two' ) }
761699 {{ two }}
762700 </template>
763701 </foo>
@@ -767,62 +705,165 @@ describe('Component scoped slot', () => {
767705 expect ( vm . $el . innerHTML . replace ( / \s + / g, ' ' ) ) . toMatch ( `from foo default from foo one from foo two` )
768706 } )
769707
770- it ( 'should warn mixed root-default and named slots' , ( ) => {
708+ it ( 'nested + named + default slots' , ( ) => {
771709 const vm = new Vue ( {
772710 template : `
773- <foo #default="foo">
774- {{ foo }}
775- <template #one="one">
776- {{ one }}
711+ <foo>
712+ <template ${ toNamed ( syntax , 'one' ) }
713+ <bar ${ syntax }
714+ {{ one }} {{ bar }}
715+ </bar>
716+ </template>
717+ <template ${ toNamed ( syntax , 'two' ) }
718+ <baz ${ syntax }
719+ {{ two }} {{ baz }}
720+ </baz>
777721 </template>
778722 </foo>
779723 ` ,
780- components : { Foo }
724+ components : { Foo, Bar , Baz }
781725 } ) . $mount ( )
782- expect ( `default slot should also use <template>` ) . toHaveBeenWarned ( )
726+ expect ( vm . $el . innerHTML . replace ( / \s + / g , ' ' ) ) . toMatch ( `from foo one from bar from foo two from baz` )
783727 } )
784728
785- it ( 'shorthand without scope variable ' , ( ) => {
729+ it ( 'should warn v-slot usage on non-component elements ' , ( ) => {
786730 const vm = new Vue ( {
787- template : `
788- <foo>
789- <template #one>one</template>
790- <template #two>two</template>
791- </foo>
792- ` ,
793- components : { Foo }
731+ template : `<div ${ syntax }
794732 } ) . $mount ( )
795- expect ( vm . $el . innerHTML . replace ( / \s + / g , ' ' ) ) . toMatch ( `onetwo` )
733+ expect ( `v-slot can only be used on components or <template>` ) . toHaveBeenWarned ( )
796734 } )
797735
798- it ( 'shorthand named slots on root ' , ( ) => {
736+ it ( 'should warn mixed usage ' , ( ) => {
799737 const vm = new Vue ( {
800- template : `
801- <foo #one="one">
802- {{ one }}
803- </foo>
804- ` ,
805- components : { Foo }
738+ template : `<foo><bar slot="one" slot-scope="bar" ${ syntax } ,
739+ components : { Foo, Bar }
806740 } ) . $mount ( )
807- expect ( vm . $el . innerHTML . replace ( / \s + / g , ' ' ) ) . toMatch ( `from foo one` )
741+ expect ( `Unexpected mixed usage of different slot syntaxes` ) . toHaveBeenWarned ( )
808742 } )
743+ }
809744
810- it ( 'dynamic slot name' , ( ) => {
811- const vm = new Vue ( {
812- data : {
813- a : 'one' ,
814- b : 'two'
815- } ,
816- template : `
817- <foo>
818- <template #[a]="one">{{ one }} </template>
819- <template v-slot:[b]="two">{{ two }}</template>
820- </foo>
821- ` ,
822- components : { Foo }
823- } ) . $mount ( )
824- expect ( vm . $el . innerHTML . replace ( / \s + / g, ' ' ) ) . toMatch ( `from foo one from foo two` )
825- } )
745+ // run tests for both full syntax and shorthand
746+ runSuite ( 'v-slot' )
747+ runSuite ( '#default' )
748+
749+ it ( 'shorthand named slots' , ( ) => {
750+ const vm = new Vue ( {
751+ template : `
752+ <foo>
753+ <template #default="foo">
754+ {{ foo }}
755+ </template>
756+ <template #one="one">
757+ {{ one }}
758+ </template>
759+ <template #two="two">
760+ {{ two }}
761+ </template>
762+ </foo>
763+ ` ,
764+ components : { Foo }
765+ } ) . $mount ( )
766+ expect ( vm . $el . innerHTML . replace ( / \s + / g, ' ' ) ) . toMatch ( `from foo default from foo one from foo two` )
767+ } )
768+
769+ it ( 'should warn mixed root-default and named slots' , ( ) => {
770+ const vm = new Vue ( {
771+ template : `
772+ <foo #default="foo">
773+ {{ foo }}
774+ <template #one="one">
775+ {{ one }}
776+ </template>
777+ </foo>
778+ ` ,
779+ components : { Foo }
780+ } ) . $mount ( )
781+ expect ( `default slot should also use <template>` ) . toHaveBeenWarned ( )
782+ } )
783+
784+ it ( 'shorthand without scope variable' , ( ) => {
785+ const vm = new Vue ( {
786+ template : `
787+ <foo>
788+ <template #one>one</template>
789+ <template #two>two</template>
790+ </foo>
791+ ` ,
792+ components : { Foo }
793+ } ) . $mount ( )
794+ expect ( vm . $el . innerHTML . replace ( / \s + / g, ' ' ) ) . toMatch ( `onetwo` )
795+ } )
796+
797+ it ( 'shorthand named slots on root' , ( ) => {
798+ const vm = new Vue ( {
799+ template : `
800+ <foo #one="one">
801+ {{ one }}
802+ </foo>
803+ ` ,
804+ components : { Foo }
805+ } ) . $mount ( )
806+ expect ( vm . $el . innerHTML . replace ( / \s + / g, ' ' ) ) . toMatch ( `from foo one` )
826807 } )
827- }
808+
809+ it ( 'dynamic slot name' , done => {
810+ const vm = new Vue ( {
811+ data : {
812+ a : 'one' ,
813+ b : 'two'
814+ } ,
815+ template : `
816+ <foo>
817+ <template #[a]="one">a {{ one }} </template>
818+ <template v-slot:[b]="two">b {{ two }} </template>
819+ </foo>
820+ ` ,
821+ components : { Foo }
822+ } ) . $mount ( )
823+ expect ( vm . $el . innerHTML . replace ( / \s + / g, ' ' ) ) . toMatch ( `a from foo one b from foo two` )
824+ vm . a = 'two'
825+ vm . b = 'one'
826+ waitForUpdate ( ( ) => {
827+ expect ( vm . $el . innerHTML . replace ( / \s + / g, ' ' ) ) . toMatch ( `b from foo one a from foo two ` )
828+ } ) . then ( done )
829+ } )
830+ } )
831+
832+ // 2.6 scoped slot perf optimization
833+ it ( 'should have accurate tracking for scoped slots' , done => {
834+ const parentUpdate = jasmine . createSpy ( )
835+ const childUpdate = jasmine . createSpy ( )
836+ const vm = new Vue ( {
837+ template : `
838+ <div>{{ parentCount }}<foo #default>{{ childCount }}</foo></div>
839+ ` ,
840+ data : {
841+ parentCount : 0 ,
842+ childCount : 0
843+ } ,
844+ updated : parentUpdate ,
845+ components : {
846+ foo : {
847+ template : `<div><slot/></div>` ,
848+ updated : childUpdate
849+ }
850+ }
851+ } ) . $mount ( )
852+ expect ( vm . $el . innerHTML ) . toMatch ( `0<div>0</div>` )
853+
854+ vm . parentCount ++
855+ waitForUpdate ( ( ) => {
856+ expect ( vm . $el . innerHTML ) . toMatch ( `1<div>0</div>` )
857+ // should only trigger parent update
858+ expect ( parentUpdate . calls . count ( ) ) . toBe ( 1 )
859+ expect ( childUpdate . calls . count ( ) ) . toBe ( 0 )
860+
861+ vm . childCount ++
862+ } ) . then ( ( ) => {
863+ expect ( vm . $el . innerHTML ) . toMatch ( `1<div>1</div>` )
864+ // should only trigger child update
865+ expect ( parentUpdate . calls . count ( ) ) . toBe ( 1 )
866+ expect ( childUpdate . calls . count ( ) ) . toBe ( 1 )
867+ } ) . then ( done )
868+ } )
828869} )
0 commit comments