test: ensure model and view and el are synced data sources (#6100)

test/specs/data_sources/model/ComponentDataVariable.ts

@@ -38,6 +38,7 @@ describe('ComponentDataVariable', () => {
     })[0];
 
     expect(cmp.getEl()?.innerHTML).toContain('Name1');
+    expect(cmp.getInnerHTML()).toContain('Name1');
   });
 
   test('component updates on data-variable change', () => {
@@ -60,11 +61,13 @@ describe('ComponentDataVariable', () => {
     })[0];
 
     expect(cmp.getEl()?.innerHTML).toContain('Name1');
+    expect(cmp.getInnerHTML()).toContain('Name1');
 
     const ds = dsm.get('ds2');
     ds.getRecord('id1')?.set({ name: 'Name1-UP' });
 
     expect(cmp.getEl()?.innerHTML).toContain('Name1-UP');
+    expect(cmp.getInnerHTML()).toContain('Name1-UP');
   });
 
   test("component uses default value if data source doesn't exist", () => {
@@ -103,9 +106,11 @@ describe('ComponentDataVariable', () => {
     })[0];
 
     expect(cmp.getEl()?.innerHTML).toContain('Name1');
+    expect(cmp.getInnerHTML()).toContain('Name1');
 
     dsm.all.reset();
     expect(cmp.getEl()?.innerHTML).toContain('default');
+    expect(cmp.getInnerHTML()).toContain('default');
   });
 
   test('component updates on data source setRecords', () => {
@@ -128,11 +133,13 @@ describe('ComponentDataVariable', () => {
     })[0];
 
     expect(cmp.getEl()?.innerHTML).toContain('init name');
+    expect(cmp.getInnerHTML()).toContain('init name');
 
     const ds = dsm.get(dataSource.id);
     ds.setRecords([{ id: 'id1', name: 'updated name' }]);
 
     expect(cmp.getEl()?.innerHTML).toContain('updated name');
+    expect(cmp.getInnerHTML()).toContain('updated name');
   });
 
   test('component updates on record removal', () => {
@@ -155,11 +162,13 @@ describe('ComponentDataVariable', () => {
     })[0];
 
     expect(cmp.getEl()?.innerHTML).toContain('Name1');
+    expect(cmp.getInnerHTML()).toContain('Name1');
 
     const ds = dsm.get('ds4');
     ds.removeRecord('id1');
 
     expect(cmp.getEl()?.innerHTML).toContain('default');
+    expect(cmp.getInnerHTML()).toContain('default');
   });
 
   test('component initializes and updates with data-variable for nested object', () => {
@@ -189,11 +198,13 @@ describe('ComponentDataVariable', () => {
     })[0];
 
     expect(cmp.getEl()?.innerHTML).toContain('NestedName1');
+    expect(cmp.getInnerHTML()).toContain('NestedName1');
 
     const ds = dsm.get('dsNestedObject');
     ds.getRecord('id1')?.set({ nestedObject: { name: 'NestedName1-UP' } });
 
     expect(cmp.getEl()?.innerHTML).toContain('NestedName1-UP');
+    expect(cmp.getInnerHTML()).toContain('NestedName1-UP');
   });
 
   test('component initializes and updates with data-variable for nested object inside an array', () => {
@@ -228,6 +239,7 @@ describe('ComponentDataVariable', () => {
     })[0];
 
     expect(cmp.getEl()?.innerHTML).toContain('NestedItemName1');
+    expect(cmp.getInnerHTML()).toContain('NestedItemName1');
 
     const ds = dsm.get('dsNestedArray');
     ds.getRecord('id1')?.set({
@@ -240,6 +252,7 @@ describe('ComponentDataVariable', () => {
     });
 
     expect(cmp.getEl()?.innerHTML).toContain('NestedItemName1-UP');
+    expect(cmp.getInnerHTML()).toContain('NestedItemName1-UP');
   });
 
   test('component initalizes and updates data on datarecord set object', () => {

test/specs/data_sources/model/TraitDataVariable.ts

@@ -298,6 +298,7 @@ describe('TraitDataVariable', () => {
 
       const link = cmp.getEl() as HTMLLinkElement;
       expect(link?.href).toBe('http://localhost/url-to-cat-image');
+      expect(cmp?.getAttributes().href).toBe('url-to-cat-image');
 
       const testDs = dsm.get(inputDataSource.id);
       testDs.getRecord('id1')?.set({ value: 'url-to-dog-image' });

test/specs/data_sources/transformers.ts

@@ -51,6 +51,7 @@ describe('DataSource Transformers', () => {
 
     const el = cmp.getEl();
     expect(el?.innerHTML).toContain('I LOVE GRAPES');
+    expect(cmp.getInnerHTML()).toContain('I LOVE GRAPES');
 
     const result = ds.getRecord('id1')?.get('content');
     expect(result).toBe('I LOVE GRAPES');
@@ -98,6 +99,7 @@ describe('DataSource Transformers', () => {
 
     const el = cmp.getEl();
     expect(el?.innerHTML).toContain('I LOVE GRAPES');
+    expect(cmp.getInnerHTML()).toContain('I LOVE GRAPES');
 
     const result = ds.getRecord('id1')?.get('content');
     expect(result).toBe('I LOVE GRAPES');