@@ -19,11 +19,11 @@ describe('<CompareChangesWidget />', () => {
1919 render ( < CompareChangesWidget usageKey = { usageKey } /> ) ;
2020
2121 // By default we see the new version:
22- const newTab = screen . getByRole ( 'tab' , { name : 'New version' } ) ;
22+ const newTab = await screen . findByRole ( 'tab' , { name : 'New version' } ) ;
2323 expect ( newTab ) . toBeInTheDocument ( ) ;
2424 expect ( newTab ) . toHaveClass ( 'active' ) ;
2525
26- const newTabPanel = screen . getByRole ( 'tabpanel' , { name : 'New version' } ) ;
26+ const newTabPanel = await screen . findByRole ( 'tabpanel' , { name : 'New version' } ) ;
2727 const newIframe = within ( newTabPanel ) . getByTitle ( 'Preview' ) ;
2828 expect ( newIframe ) . toBeVisible ( ) ;
2929 expect ( newIframe ) . toHaveAttribute (
@@ -32,10 +32,10 @@ describe('<CompareChangesWidget />', () => {
3232 ) ;
3333
3434 // Now switch to the "old version" tab:
35- const oldTab = screen . getByRole ( 'tab' , { name : 'Old version' } ) ;
35+ const oldTab = await screen . findByRole ( 'tab' , { name : 'Old version' } ) ;
3636 fireEvent . click ( oldTab ) ;
3737
38- const oldTabPanel = screen . getByRole ( 'tabpanel' , { name : 'Old version' } ) ;
38+ const oldTabPanel = await screen . findByRole ( 'tabpanel' , { name : 'Old version' } ) ;
3939 expect ( oldTabPanel ) . toBeVisible ( ) ;
4040 const oldIframe = within ( oldTabPanel ) . getByTitle ( 'Preview' ) ;
4141 expect ( oldIframe ) . toBeVisible ( ) ;
@@ -49,11 +49,11 @@ describe('<CompareChangesWidget />', () => {
4949 render ( < CompareChangesWidget usageKey = { usageKey } oldVersion = { 7 } newVersion = "published" /> ) ;
5050
5151 // By default we see the new version:
52- const newTab = screen . getByRole ( 'tab' , { name : 'New version' } ) ;
52+ const newTab = await screen . findByRole ( 'tab' , { name : 'New version' } ) ;
5353 expect ( newTab ) . toBeInTheDocument ( ) ;
5454 expect ( newTab ) . toHaveClass ( 'active' ) ;
5555
56- const newTabPanel = screen . getByRole ( 'tabpanel' , { name : 'New version' } ) ;
56+ const newTabPanel = await screen . findByRole ( 'tabpanel' , { name : 'New version' } ) ;
5757 const newIframe = within ( newTabPanel ) . getByTitle ( 'Preview' ) ;
5858 expect ( newIframe ) . toBeVisible ( ) ;
5959 expect ( newIframe ) . toHaveAttribute (
@@ -62,10 +62,10 @@ describe('<CompareChangesWidget />', () => {
6262 ) ;
6363
6464 // Now switch to the "old version" tab:
65- const oldTab = screen . getByRole ( 'tab' , { name : 'Old version' } ) ;
65+ const oldTab = await screen . findByRole ( 'tab' , { name : 'Old version' } ) ;
6666 fireEvent . click ( oldTab ) ;
6767
68- const oldTabPanel = screen . getByRole ( 'tabpanel' , { name : 'Old version' } ) ;
68+ const oldTabPanel = await screen . findByRole ( 'tabpanel' , { name : 'Old version' } ) ;
6969 expect ( oldTabPanel ) . toBeVisible ( ) ;
7070 const oldIframe = within ( oldTabPanel ) . getByTitle ( 'Preview' ) ;
7171 expect ( oldIframe ) . toBeVisible ( ) ;
@@ -74,4 +74,22 @@ describe('<CompareChangesWidget />', () => {
7474 `http://localhost:18010/xblocks/v2/${ usageKey } /embed/student_view/?version=7` ,
7575 ) ;
7676 } ) ;
77+
78+ it ( 'renders side-by-side compare mode with both iframes and expected sources' , async ( ) => {
79+ render ( < CompareChangesWidget usageKey = { usageKey } oldVersion = { 7 } newVersion = "published" sideBySide /> ) ;
80+
81+ expect ( await screen . findByText ( 'Old version' ) ) . toBeInTheDocument ( ) ;
82+ expect ( await screen . findByText ( 'New version' ) ) . toBeInTheDocument ( ) ;
83+
84+ const iframes = await screen . findAllByTitle ( 'Preview' ) ;
85+ expect ( iframes ) . toHaveLength ( 2 ) ;
86+ expect ( iframes [ 0 ] ) . toHaveAttribute (
87+ 'src' ,
88+ `http://localhost:18010/xblocks/v2/${ usageKey } /embed/student_view/?version=7` ,
89+ ) ;
90+ expect ( iframes [ 1 ] ) . toHaveAttribute (
91+ 'src' ,
92+ `http://localhost:18010/xblocks/v2/${ usageKey } /embed/student_view/?version=published` ,
93+ ) ;
94+ } ) ;
7795} ) ;
0 commit comments