1+ ///<reference types="jest" />
2+ import * as React from "react" ;
3+ import { mount , configure } from "enzyme" ;
4+ import * as Adapter from 'enzyme-adapter-react-16' ;
5+ import { FileBrowser } from "../../../src/controls/filePicker/controls/FileBrowser/FileBrowser" ;
6+ import { MockFileBrowserService } from "../../mock/services/MockFileBrowserService" ;
7+ import { IFile } from "../../../src/services/FileBrowserService.types" ;
8+ import { assert } from "chai" ;
9+ configure ( { adapter : new Adapter ( ) } ) ;
10+
11+ describe ( "<FileBrowser />" , ( ) => {
12+ test ( "should render loading animation" , async ( ) => {
13+ //The purpose of this test is to make sure we will see the loading animation before anything else.
14+ let mockFileBrowserService : MockFileBrowserService = new MockFileBrowserService ( ) ;
15+ let component = mount ( < FileBrowser
16+ fileBrowserService = { mockFileBrowserService as any }
17+ libraryUrl = ""
18+ folderPath = "string"
19+ accepts = { [ ] }
20+ onChange = { ( filePickerResult ) => { } }
21+ onOpenFolder = { ( folder : IFile ) => { } }
22+ /> ) ;
23+ //as in package.json we map spinner to lib-common spinner mount will actually render the whole thing
24+ //so let's try to find our spinner by class name
25+ let spinner = component . getDOMNode ( ) . querySelector ( ".ms-Spinner-circle" ) ;
26+ assert . isOk ( spinner ) ;
27+ } ) ;
28+ test ( "should load initial data" , async ( ) => {
29+ //In this test we will call componentDidMount manually
30+ //As mounting in test context will not trigger full component lifecycle we have to do it on our own
31+ //(It won't be a case if we were to use @testing-library/react but this is a topic for another time:) )
32+ let mockFileBrowserService : MockFileBrowserService = new MockFileBrowserService ( ) ;
33+ //FileBrowser uses getListItems method on fileBrowserService.
34+ //Our mock already provides that method, so let's assign our mock data
35+ mockFileBrowserService . getListItemsResult = {
36+ nextHref : undefined ,
37+ items : [ {
38+ name : "Test file" ,
39+ absoluteUrl : "https://test.sharepoint.com/sites/tea-point/Shared Documents/TestFile.docx" ,
40+ serverRelativeUrl : "/sites/tea-point/Shared Documents/TestFile.docx" ,
41+ isFolder : false ,
42+ modified : "" ,
43+ fileIcon : "" ,
44+ fileType : "docx" ,
45+ // URL required to generate thumbnail preview
46+ spItemUrl : "" ,
47+ supportsThumbnail : false
48+ } , {
49+ name : "Another test file" ,
50+ absoluteUrl : "https://test.sharepoint.com/sites/tea-point/Shared Documents/AnotherTestFile.docx" ,
51+ serverRelativeUrl : "/sites/tea-point/Shared Documents/AnotherTestFile.docx" ,
52+ isFolder : false ,
53+ modified : "" ,
54+ fileIcon : "" ,
55+ fileType : "docx" ,
56+ // URL required to generate thumbnail preview
57+ spItemUrl : "" ,
58+ supportsThumbnail : false
59+ } ]
60+ }
61+ //As we also want to validate correct data is passed to getListItem method, let's add some assertion in our mock event
62+ //Don't hesitate to peek the mock definition to check out how it's done.
63+ //To avoid false positives I declare asserted variable.
64+ //It's value will be set to true in event handler and asserted at the end of this test
65+ let asserted = false ;
66+ mockFileBrowserService . onGetListItems = ( listUrl , folderPath , acceptedExtensions , nextPageParams ) => {
67+ assert . equal ( listUrl , "Shared Documents" ) ;
68+ assert . equal ( folderPath , "/" ) ;
69+ assert . deepEqual ( acceptedExtensions , [ "docx" , "xlsx" ] ) ;
70+ //nextPageParams should be falsy in this case
71+ assert . isNotOk ( nextPageParams ) ;
72+ asserted = true ;
73+ }
74+ let component = mount ( < FileBrowser
75+ fileBrowserService = { mockFileBrowserService as any }
76+ libraryUrl = "Shared Documents"
77+ folderPath = "/"
78+ accepts = { [ "docx" , "xlsx" ] }
79+ onChange = { ( filePickerResult ) => { } }
80+ onOpenFolder = { ( folder : IFile ) => { } }
81+ /> ) ;
82+ //You could wonder - why not to test loading animation here instead of the previous test?
83+ //I want to avoid situation in which broken loading animation would affect test for loading data.
84+ //Those are two different functionalities I wish to test separately
85+ //as promised - here we are manually call lifecycle method. Note await keyword.
86+ await component . instance ( ) . componentDidMount ( ) ;
87+
88+ //Now, let's make sure our component is rerendered
89+ component . update ( ) ;
90+ //And now let's find our rows. Note we are using lib-commonjs to mock details list which allows us to fully render the component
91+ let dataRows = component . getDOMNode ( ) . querySelectorAll ( '[data-automationid="DetailsRowFields"]' )
92+ //We expect to have to rows. Content of each should be just the name of the document.
93+ assert . equal ( dataRows [ 0 ] . textContent , "Test file" ) ;
94+ assert . equal ( dataRows [ 1 ] . textContent , "Another test file" ) ;
95+ //And finally let's make sure we asserted the call to getListItems
96+ assert . isTrue ( asserted ) ;
97+ } ) ;
98+ } ) ;
0 commit comments