import * as React from "react" ; import { fireEvent , render } from "@testing-library/react" ; import { expect } from "chai" ; import * as sinon from "sinon" ; import { SettingsContainer , useSaveBeforeActivatingNewSettingsTab , useSaveBeforeClosingSettingsContainer } from "../../core-react/settings/SettingsContainer" ; import { SettingsManager , SettingsTabEntry } from "../../core-react/settings/SettingsManager" ; import TestUtils from "../TestUtils" ; function TestModalSettingsPage ( { settingsManager , title } ) { const saveChanges = ( afterSaveFunction , args ? ) => { afterSaveFunction ( args ) ; } ; useSaveBeforeClosingSettingsContainer ( settingsManager , saveChanges ) ; useSaveBeforeActivatingNewSettingsTab ( settingsManager , saveChanges ) ; return < div > { title } < /div>; } describe ( "<SettingsContainer />" , ( ) => { const settingsManager = new SettingsManager ( ) ; const tabs = [ { tabId : "page1" , itemPriority : 10 , pageWillHandleCloseRequest : true , label : "Page 1" , tooltip : "Page1" , icon : "icon-measure" , page : < TestModalSettingsPage settingsManager = { settingsManager } title = "Page 1" / > } , { tabId : "page2" , itemPriority : 20 , label : "Page2" , subLabel : "sublabel page2" , tooltip : < span > react - tooltip < /span>, icon: "icon-paintbrush", page : < div > Page 2 < / div > } , { tabId : "page3" , itemPriority : 30 , label : "page3" , subLabel : "sublabel page2" , page : < div > Page 3 < / div > } , { tabId : "tab-page4" , itemPriority : 40 , label : "page4" , subLabel : "disabled page4" , isDisabled : true , page : < div > Page 4 < / div > } , ] ; it ( "should render with category header" , async ( ) => { const wrapper = render ( < SettingsContainer showHeader = { true } tabs = { tabs } settingsManager = { settingsManager } currentSettingsTab = { tabs [ 1 ] } / > ) ; const liPage2 = wrapper . container . querySelector ( `li[data-for='page2']` ) as HTMLLIElement ; expect ( liPage2 . classList . contains ( "core-active" ) ) . to . be . true ; const headerDiv = wrapper . container . querySelector ( `div.core-settings-container-right-header` ) ; expect ( headerDiv ) . to . not . be . null ; } ) ; it ( "should render" , async ( ) => { const spyMethod = sinon . spy ( ) ; const wrapper = render ( < SettingsContainer tabs = { tabs } settingsManager = { settingsManager } currentSettingsTab = { tabs [ 1 ] } onSettingsTabSelected = { spyMethod } / > ) ; const headerDiv = wrapper . container . querySelector ( `div.core-settings-container-right-header` ) ; expect ( headerDiv ) . to . be . null ; let activePageSelector = `li[data-for='page2']` ; const liPage2 = wrapper . container . querySelector ( activePageSelector ) as HTMLLIElement ; expect ( liPage2 . classList . contains ( "core-active" ) ) . to . be . true ; const tab3 = wrapper . getByTestId ( "page3" ) ; fireEvent . click ( tab3 ) ; await TestUtils . flushAsyncOperations ( ) ; activePageSelector = `li[data-for='page3']` ; const liPage3 = wrapper . container . querySelector ( activePageSelector ) as HTMLLIElement ; expect ( liPage3 . classList . contains ( "core-active" ) ) . to . be . true ; expect ( spyMethod . calledOnce ) . to . be . true ; } ) ; it ( "should trigger tab activation" , async ( ) => { const spyMethod = sinon . spy ( ) ; const wrapper = render ( < SettingsContainer tabs = { tabs } settingsManager = { settingsManager } onSettingsTabSelected = { spyMethod } / > ) ; let activePageSelector = `li[data-for='page1']` ; const liPage1 = wrapper . container . querySelector ( activePageSelector ) as HTMLLIElement ; expect ( liPage1 . classList . contains ( "core-active" ) ) . to . be . true ; const tab3 = wrapper . getByTestId ( "page3" ) ; fireEvent . click ( tab3 ) ; await Promise . all ( spyMethod . returnValues ) ; activePageSelector = `li[data-for='page3']` ; const liPage3 = wrapper . container . querySelector ( activePageSelector ) as HTMLLIElement ; expect ( liPage3 . classList . contains ( "core-active" ) ) . to . be . true ; expect ( spyMethod . calledOnce ) . to . be . true ; } ) ; it ( "simulate tab activation via keyin" , async ( ) => { const spyMethod = sinon . spy ( ) ; const wrapper = render ( < SettingsContainer tabs = { tabs } settingsManager = { settingsManager } onSettingsTabSelected = { spyMethod } currentSettingsTab = { tabs [ 1 ] } / > ) ; settingsManager . activateSettingsTab ( "page3" ) ; await Promise . all ( spyMethod . returnValues ) ; const activePageSelector = `li[data-for='page3']` ; const liPage3 = wrapper . container . querySelector ( activePageSelector ) as HTMLLIElement ; expect ( liPage3 . classList . contains ( "core-active" ) ) . to . be . true ; expect ( spyMethod . calledOnce ) . to . be . true ; spyMethod . resetHistory ( ) ; settingsManager . closeSettingsContainer ( spyMethod ) ; await Promise . all ( spyMethod . returnValues ) ; } ) ; it ( "simulate tab 4 activation via keyin" , async ( ) => { const spyMethod = sinon . spy ( ) ; const wrapper = render ( < SettingsContainer tabs = { tabs } settingsManager = { settingsManager } onSettingsTabSelected = { spyMethod } / > ) ; settingsManager . activateSettingsTab ( "page4" ) ; await TestUtils . flushAsyncOperations ( ) ; const activePageSelector = `li[data-for='page1']` ; const liPage1 = wrapper . container . querySelector ( activePageSelector ) as HTMLLIElement ; expect ( liPage1 . classList . contains ( "core-active" ) ) . to . be . true ; } ) ; it ( "should trigger close activation" , async ( ) => { const spyMethod = sinon . spy ( ) ; const wrapper = render ( < SettingsContainer tabs = { tabs } settingsManager = { settingsManager } / > ) ; const activePageSelector = `li[data-for='page1']` ; const liPage1 = wrapper . container . querySelector ( activePageSelector ) as HTMLLIElement ; expect ( liPage1 . classList . contains ( "core-active" ) ) . to . be . true ; settingsManager . closeSettingsContainer ( spyMethod ) ; await Promise . all ( spyMethod . returnValues ) ; wrapper . unmount ( ) ; } ) ; } ) ;