test: update menu-bar visual tests to not capture full body (#7841)

packages/menu-bar/test/visual/lumo/menu-bar.test.js

@@ -21,6 +21,7 @@ describe('menu-bar', () => {
       describe('basic', () => {
         beforeEach(async () => {
           div = document.createElement('div');
+          div.style.display = 'inline-block';
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
@@ -38,29 +39,33 @@ describe('menu-bar', () => {
         });
 
         it('basic', async () => {
-          await visualDiff(document.body, `${dir}-basic`);
+          await visualDiff(div, `${dir}-basic`);
         });
 
         it('opened', async () => {
+          div.style.height = '150px';
           element._buttons[1].click();
           await nextRender(element);
-          await visualDiff(document.body, `${dir}-opened`);
+          await visualDiff(div, `${dir}-opened`);
         });
 
         it('reverse-collapse opened', async () => {
-          div.style.width = '250px';
+          element.style.width = '250px';
+          div.style.width = '350px';
+          div.style.height = '150px';
           element.reverseCollapse = true;
           await nextRender(element);
           element._buttons[4].click();
           const overlay = element._subMenu._overlayElement;
           await oneEvent(overlay, 'vaadin-overlay-open');
-          await visualDiff(document.body, `${dir}-reverse-collapse-opened`);
+          await visualDiff(div, `${dir}-reverse-collapse-opened`);
         });
       });
 
       describe('single button', () => {
         beforeEach(async () => {
           div = document.createElement('div');
+          div.style.display = 'inline-block';
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
@@ -70,13 +75,13 @@ describe('menu-bar', () => {
         });
 
         it('single button', async () => {
-          await visualDiff(document.body, `${dir}-single-button`);
+          await visualDiff(div, `${dir}-single-button`);
         });
 
         it('single overflow button', async () => {
           element.items = [{ text: 'View' }, { text: 'Edit' }];
           element.style.maxWidth = '100px';
-          await visualDiff(document.body, `${dir}-single-button-overflow`);
+          await visualDiff(div, `${dir}-single-button-overflow`);
         });
       });
 
@@ -93,6 +98,7 @@ describe('menu-bar', () => {
 
         beforeEach(async () => {
           div = document.createElement('div');
+          div.style.display = 'inline-block';
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
@@ -116,53 +122,59 @@ describe('menu-bar', () => {
 
         it('primary', async () => {
           div.style.width = '320px';
+          div.style.height = '150px';
           element.setAttribute('theme', 'primary');
           arrowDown(element._buttons[1]);
           await oneEvent(overlay, 'vaadin-overlay-open');
-          await visualDiff(document.body, `${dir}-primary`);
+          await visualDiff(div, `${dir}-primary`);
         });
 
         it('secondary', async () => {
           div.style.width = '320px';
+          div.style.height = '150px';
           element.setAttribute('theme', 'secondary');
           arrowDown(element._buttons[1]);
           await oneEvent(overlay, 'vaadin-overlay-open');
-          await visualDiff(document.body, `${dir}-secondary`);
+          await visualDiff(div, `${dir}-secondary`);
         });
 
         it('tertiary', async () => {
           div.style.width = '265px';
+          div.style.height = '150px';
           element.setAttribute('theme', 'tertiary');
           arrowDown(element._buttons[1]);
           await oneEvent(overlay, 'vaadin-overlay-open');
-          await visualDiff(document.body, `${dir}-tertiary`);
+          await visualDiff(div, `${dir}-tertiary`);
         });
 
         it('tertiary-inline', async () => {
           div.style.width = '200px';
+          div.style.height = '150px';
           element.setAttribute('theme', 'tertiary-inline');
           arrowDown(element._buttons[1]);
           await oneEvent(overlay, 'vaadin-overlay-open');
-          await visualDiff(document.body, `${dir}-tertiary-inline`);
+          await visualDiff(div, `${dir}-tertiary-inline`);
         });
 
         it('small', async () => {
           div.style.width = '265px';
+          div.style.height = '150px';
           element.setAttribute('theme', 'small');
           arrowDown(element._buttons[1]);
           await oneEvent(overlay, 'vaadin-overlay-open');
-          await visualDiff(document.body, `${dir}-small`);
+          await visualDiff(div, `${dir}-small`);
         });
 
         it('end-aligned', async () => {
+          div.style.width = '600px';
           element.setAttribute('theme', 'end-aligned');
-          await visualDiff(document.body, `${dir}-end-aligned`);
+          await visualDiff(div, `${dir}-end-aligned`);
         });
 
         it('end-aligned overflow button', async () => {
           element.style.width = '100px';
           element.setAttribute('theme', 'end-aligned');
-          await visualDiff(document.body, `${dir}-end-aligned-overflow-button`);
+          await visualDiff(div, `${dir}-end-aligned-overflow-button`);
         });
       });
 
@@ -175,6 +187,7 @@ describe('menu-bar', () => {
 
         beforeEach(async () => {
           div = document.createElement('div');
+          div.style.display = 'inline-block';
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);