11import { HttpClientTestingModule , HttpTestingController } from '@angular/common/http/testing' ;
22import { waitForAsync , fakeAsync , flushMicrotasks , inject , TestBed } from '@angular/core/testing' ;
33import { EXAMPLE_COMPONENTS , ExampleData , LiveExample } from '@angular/components-examples' ;
4- import { StackBlitzWriter } from './stack-blitz-writer' ;
4+ import { StackBlitzWriter , TEMPLATE_FILES } from './stack-blitz-writer' ;
5+ import stackblitz from '@stackblitz/sdk' ;
56
67const testExampleId = 'my-test-example-id' ;
8+ const testExampleBasePath = `/docs-content/examples-source/cdk/my-comp/${ testExampleId } ;
9+
10+ const FAKE_DOCS : { [ key : string ] : string } = {
11+ '/assets/stack-blitz/src/index.html' : '<material-docs-example></material-docs-example>' ,
12+ '/assets/stack-blitz/src/app/app.module.ts' :
13+ `import {MaterialDocsExample} from './material-docs-example';` ,
14+ [ `${ testExampleBasePath } ] : 'ExampleComponent' ,
15+ [ `${ testExampleBasePath } ] : `<example></example>` ,
16+ [ `${ testExampleBasePath } ] : 'DetailComponent' ,
17+ } ;
18+
19+ const TEST_URLS = TEMPLATE_FILES . map ( filePath => `/assets/stack-blitz/${ filePath } ) . concat ( [
20+ `${ testExampleBasePath } ,
21+ `${ testExampleBasePath } ,
22+ `${ testExampleBasePath } ,
23+ ] ) ;
724
825describe ( 'StackBlitzWriter' , ( ) => {
926 let stackBlitzWriter : StackBlitzWriter ;
@@ -27,7 +44,8 @@ describe('StackBlitzWriter', () => {
2744 beforeEach ( ( ) => {
2845 stackBlitzWriter = TestBed . inject ( StackBlitzWriter ) ;
2946 data = new ExampleData ( '' ) ;
30- data . componentNames = [ ] ;
47+ data . selectorName = 'this-is-the-comp-name' ;
48+ data . componentNames = [ 'ExampleComponent' , 'AdditionalComp' ] ;
3149 data . exampleFiles = [ 'test.ts' , 'test.html' , 'src/detail.ts' ] ;
3250 data . indexFilename = data . exampleFiles [ 0 ] ;
3351
@@ -40,94 +58,70 @@ describe('StackBlitzWriter', () => {
4058 delete EXAMPLE_COMPONENTS [ testExampleId ] ;
4159 } ) ;
4260
61+ function fakeExternalFileRequests ( ) {
62+ for ( const url of TEST_URLS ) {
63+ http . expectOne ( url ) . flush ( FAKE_DOCS [ url ] || 'fake' ) ;
64+ }
65+ }
66+
4367 it ( 'should append correct copyright' , ( ) => {
4468 const year = new Date ( ) . getFullYear ( ) ;
4569 expect ( stackBlitzWriter . _appendCopyright ( 'test.ts' , 'NoContent' ) ) . toBe ( `NoContent
4670
4771/** Copyright ${ year }
4872 Use of this source code is governed by an MIT-style license that
49- can be found in the LICENSE file at http ://angular.io/license */` ) ;
73+ can be found in the LICENSE file at https ://angular.io/license */` ) ;
5074
5175 expect ( stackBlitzWriter . _appendCopyright ( 'test.html' , 'NoContent' ) ) . toBe ( `NoContent
5276
5377<!-- Copyright ${ year }
5478 Use of this source code is governed by an MIT-style license that
55- can be found in the LICENSE file at http ://angular.io/license -->` ) ;
79+ can be found in the LICENSE file at https ://angular.io/license -->` ) ;
5680
5781 } ) ;
5882
59- it ( 'should create form element' , ( ) => {
60- expect ( stackBlitzWriter . _createFormElement ( 'index.ts' ) . outerHTML ) . toBe (
61- `<form action="https://run.stackblitz.com/api/angular/v1?file=index.ts" ` +
62- `method="post" target="_blank"></form>` ) ;
63- } ) ;
83+ it ( 'should set tags for example stackblitz' , fakeAsync ( ( ) => {
84+ const openProjectSpy = spyOn ( stackblitz , 'openProject' ) ;
6485
65- it ( 'should add files to form input' , ( ) => {
66- const form = stackBlitzWriter . _createFormElement ( 'index.ts' ) ;
86+ stackBlitzWriter
87+ . createStackBlitzForExample ( testExampleId , data , false )
88+ . then ( openBlitzFn => openBlitzFn ( ) ) ;
6789
68- stackBlitzWriter . _addFileToForm ( form , data , 'NoContent' , 'test.ts' , 'path/to/file' , false ) ;
69- stackBlitzWriter . _addFileToForm ( form , data , 'Test' , 'test.html' , 'path/to/file' , false ) ;
70- stackBlitzWriter . _addFileToForm ( form , data , 'Detail' , 'src/detail.ts' , 'path/to/file' , false ) ;
90+ flushMicrotasks ( ) ;
91+ fakeExternalFileRequests ( ) ;
92+ flushMicrotasks ( ) ;
7193
72- expect ( form . elements . length ) . toBe ( 3 ) ;
73- expect ( form . elements [ 0 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/app/test.ts]' ) ;
74- expect ( form . elements [ 1 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/app/test.html]' ) ;
75- expect ( form . elements [ 2 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/app/src/detail.ts]' ) ;
76- } ) ;
94+ expect ( openProjectSpy ) . toHaveBeenCalledTimes ( 1 ) ;
95+ expect ( openProjectSpy ) . toHaveBeenCalledWith ( jasmine . objectContaining (
96+ { tags : [ 'angular' , 'material' , 'cdk' , 'web' , 'example' ] } ) , jasmine . anything ( ) ) ;
97+ } ) ) ;
98+
99+ it ( 'should read and transform template files properly' , fakeAsync ( ( ) => {
100+ const openProjectSpy = spyOn ( stackblitz , 'openProject' ) ;
77101
78- it ( 'should open a new window with stackblitz url' , fakeAsync ( ( ) => {
79- let form : HTMLFormElement ;
80- stackBlitzWriter . constructStackBlitzForm ( testExampleId , data , false ) . then ( result => {
81- form = result ;
82- flushMicrotasks ( ) ;
83-
84- for ( const url of TEST_URLS ) {
85- http . expectOne ( url ) . flush ( FAKE_DOCS [ url ] || '' ) ;
86- }
87- flushMicrotasks ( ) ;
88-
89- expect ( form . elements . length ) . toBe ( 14 ) ;
90-
91- // Should have correct tags
92- expect ( form . elements [ 0 ] . getAttribute ( 'name' ) ) . toBe ( 'tags[0]' ) ;
93- expect ( form . elements [ 0 ] . getAttribute ( 'value' ) ) . toBe ( 'angular' ) ;
94- expect ( form . elements [ 1 ] . getAttribute ( 'name' ) ) . toBe ( 'tags[1]' ) ;
95- expect ( form . elements [ 1 ] . getAttribute ( 'value' ) ) . toBe ( 'material' ) ;
96- expect ( form . elements [ 2 ] . getAttribute ( 'name' ) ) . toBe ( 'tags[2]' ) ;
97- expect ( form . elements [ 2 ] . getAttribute ( 'value' ) ) . toBe ( 'example' ) ;
98-
99- // Should bet set as private and have description and dependencies.
100- expect ( form . elements [ 3 ] . getAttribute ( 'name' ) ) . toBe ( 'private' ) ;
101- expect ( form . elements [ 3 ] . getAttribute ( 'value' ) ) . toBe ( 'true' ) ;
102- expect ( form . elements [ 4 ] . getAttribute ( 'name' ) ) . toBe ( 'description' ) ;
103- expect ( form . elements [ 5 ] . getAttribute ( 'name' ) ) . toBe ( 'dependencies' ) ;
104-
105- // Should have files needed for example.
106- expect ( form . elements [ 6 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/index.html]' ) ;
107- expect ( form . elements [ 7 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/styles.scss]' ) ;
108- expect ( form . elements [ 8 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/polyfills.ts]' ) ;
109- expect ( form . elements [ 9 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/main.ts]' ) ;
110- expect ( form . elements [ 10 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/app/material-module.ts]' ) ;
111- expect ( form . elements [ 11 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/app/test.ts]' ) ;
112- expect ( form . elements [ 12 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/app/test.html]' ) ;
113- expect ( form . elements [ 13 ] . getAttribute ( 'name' ) ) . toBe ( 'files[src/app/src/detail.ts]' ) ;
102+ stackBlitzWriter
103+ . createStackBlitzForExample ( testExampleId , data , false )
104+ . then ( openBlitzFn => openBlitzFn ( ) ) ;
105+
106+ flushMicrotasks ( ) ;
107+ fakeExternalFileRequests ( ) ;
108+ flushMicrotasks ( ) ;
109+
110+ const expectedFiles = jasmine . objectContaining ( {
111+ 'angular.json' : 'fake' ,
112+ 'src/main.ts' : 'fake' ,
113+ 'src/test.ts' : 'fake' ,
114+ 'src/index.html' : `<this-is-the-comp-name></this-is-the-comp-name>` ,
115+ 'src/app/app.module.ts' : `import {ExampleComponent, AdditionalComp} from './test';` ,
116+ 'src/app/test.ts' : `ExampleComponent
117+
118+ /** Copyright 2021 Google LLC. All Rights Reserved.
119+ Use of this source code is governed by an MIT-style license that
120+ can be found in the LICENSE file at https://angular.io/license */` ,
114121 } ) ;
122+
123+ expect ( openProjectSpy ) . toHaveBeenCalledTimes ( 1 ) ;
124+ expect ( openProjectSpy ) . toHaveBeenCalledWith (
125+ jasmine . objectContaining ( { files : expectedFiles } ) , { openFile : 'src/app/test.ts' } ) ;
115126 } ) ) ;
116127} ) ;
117-
118- const FAKE_DOCS : { [ key : string ] : string } = {
119- '/docs-content/examples-source/test.ts' : 'ExampleComponent' ,
120- '/docs-content/examples-source/test.html' : `<example></example>` ,
121- '/docs-content/examples-source/src/detail.ts' : 'DetailComponent' ,
122- } ;
123-
124- const TEST_URLS = [
125- '/assets/stack-blitz/src/index.html' ,
126- '/assets/stack-blitz/src/styles.scss' ,
127- '/assets/stack-blitz/src/polyfills.ts' ,
128- '/assets/stack-blitz/src/main.ts' ,
129- '/assets/stack-blitz/src/app/material-module.ts' ,
130- `/docs-content/examples-source/cdk/my-comp/${ testExampleId } ,
131- `/docs-content/examples-source/cdk/my-comp/${ testExampleId } ,
132- `/docs-content/examples-source/cdk/my-comp/${ testExampleId } ,
133- ] ;
0 commit comments