@heartlandone/vega-sandbox-pr-1475-b1e358890f4e71c36ade3ba715f51e7030022002 2.26.0

package/dist/collection/helpers/ui/test/element-appender.test.js

@@ -0,0 +1,425 @@
+import { LogUtility } from '../../../utils/log';
+import { ElementAppender } from '../element-appender';
+const innerHTML = `<div class='test-parent-host'><div class='test-host'><div class='dropdown'></div></div></div>`;
+test('return result as expect when call show', () => {
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  Object.assign(document.body, {
+    scrollHeight: 500,
+    scrollWidth: 500,
+    scrollTop: 0,
+    scrollLeft: 0,
+  });
+  Object.assign(target, {
+    offsetTop: 0,
+    offsetLeft: 0,
+  });
+  const drop1 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    placement: ['bottom', 'top'],
+  });
+  drop1.show();
+  expect(document.body).toEqualHtml(`
+	<div class="test-parent-host"><div class="test-host"></div></div>
+	<div class="dropdown vega-placement-bottom vega-alignment-start" style="box-sizing: border-box; left: 0px; top: 0px; z-index: 10001;"></div>
+	`);
+  drop1.hide();
+  spyOn(target, 'getBoundingClientRect').and.returnValue({
+    width: 120,
+    height: 0,
+    top: 120,
+    left: 0,
+  });
+  const drop2 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    size: 200,
+    translocation: { X: 20, Y: 20 },
+    placement: 'top',
+  });
+  drop2.show();
+  expect(document.body).toEqualHtml(`
+	<div class="test-parent-host"><div class="test-host"></div></div>
+	<div class="dropdown vega-placement-top vega-alignment-start" style=" box-sizing: border-box; left: 20px; top: 100px; width: 200px; z-index: 10001;"></div>
+	`);
+  drop2.hide();
+  const drop3 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    size: 100,
+  });
+  drop3.show();
+  expect(element.style.width).toEqual('100px');
+  drop3.hide();
+  const drop4 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    size: '20%',
+  });
+  drop4.show();
+  expect(element.style.width).toEqual('20%');
+  drop4.hide();
+});
+test('should log error message while no target element given', () => {
+  const element = document.createElement('div');
+  spyOn(LogUtility, 'error');
+  const drop = new ElementAppender({
+    target: null,
+    appendableElement: element,
+  });
+  drop.show();
+  expect(LogUtility.error).toHaveBeenCalledWith(`No target element found, please add it at new elementAppender.`);
+});
+test('should log error message while no appendable element given', () => {
+  const target = document.createElement('div');
+  spyOn(LogUtility, 'error');
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: null,
+  });
+  drop.show();
+  expect(LogUtility.error).toHaveBeenCalledWith(`No appendable element found, please add it at new elementAppender.`);
+});
+test('return result as expect when call hide', () => {
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  Object.assign(target, {
+    offsetTop: 0,
+    offsetLeft: 0,
+  });
+  Object.assign(document.body, {
+    scrollHeight: 500,
+    scrollWidth: 500,
+    scrollTop: 0,
+    scrollLeft: 0,
+  });
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    placement: ['bottom', 'top'],
+  });
+  drop.show();
+  drop.hide();
+  expect(document.body).toEqualHtml(`
+	<div class="test-parent-host"><div class="test-host"></div></div>
+	<div class="dropdown vega-placement-bottom vega-alignment-start vega-force-hidden" style="box-sizing: border-box; left: 0px; top: 0px;"></div>
+	`);
+});
+test('should not change css position in body when is not static', () => {
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  document.body.style.position = 'fixed';
+  spyOn(window, 'getComputedStyle').and.returnValue({ position: 'fixed' });
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+  });
+  drop.show();
+  expect(document.body.style.position).toEqual('fixed');
+  drop.hide();
+  expect(document.body.style.position).toEqual('fixed');
+});
+test('should change css position to relative in body when is static', () => {
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  document.body.style.position = 'static';
+  spyOn(window, 'getComputedStyle').and.returnValue({ position: 'static' });
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+  });
+  drop.show();
+  expect(document.body.style.position).toEqual('relative');
+  drop.hide();
+  expect(document.body.style.position).toEqual('static');
+});
+test('return result as expect when call destroy', () => {
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+  });
+  drop.show();
+  drop.destroy();
+  expect(document.body).toEqualHtml(`
+	<div class="test-parent-host"><div class="test-host"></div></div>
+	`);
+});
+test('content should append to body while not in modal', () => {
+  const target = document.createElement('vega-input-select');
+  document.body.appendChild(target);
+  const element = document.createElement('div');
+  element.classList.add('dropdown');
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+  });
+  drop.show();
+  expect(document.body).toEqualHtml(`
+	<vega-input-select></vega-input-select>
+	<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: 0px; top: 0px; z-index: 10001;"></div
+	`);
+  drop.hide();
+});
+test('content should append to modal while in modal', () => {
+  const modal = document.createElement('vega-modal');
+  const modalShadowRoot = modal.attachShadow({ mode: 'open' });
+  const dialog = document.createElement('div');
+  dialog.classList.add('modal-dialog');
+  modalShadowRoot.append(dialog);
+  const target = document.createElement('vega-input-select');
+  target.setAttribute('slot', 'content');
+  modal.append(target);
+  document.body.appendChild(modal);
+  const element = document.createElement('div');
+  element.classList.add('dropdown');
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+  });
+  drop.show();
+  expect(document.body).toEqualHtml(`<vega-modal>
+	<mock:shadow-root>
+	  <div class="modal-dialog"></div>
+	</mock:shadow-root>
+	<vega-input-select slot="content"></vega-input-select>
+	<div class="dropdown vega-alignment-start vega-placement-top" slot="content" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+  </vega-modal>`);
+  drop.hide();
+});
+test('content append proper while positionRelativeTo set', () => {
+  const container = document.createElement('div');
+  const target = document.createElement('vega-input-select');
+  container.appendChild(target);
+  container.setAttribute('id', 'container');
+  document.body.appendChild(container);
+  const element = document.createElement('div');
+  element.classList.add('dropdown');
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    positionRelativeTo: '#container',
+  });
+  drop.show();
+  expect(document.body).toEqualHtml(`
+	<div id="container">
+		<vega-input-select></vega-input-select>
+		<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+	</div>
+	`);
+  drop.hide();
+});
+test('content should append to modal content while in scroll modal content', () => {
+  const modal = document.createElement('vega-modal');
+  const modalShadowRoot = modal.attachShadow({ mode: 'open' });
+  const dialog = document.createElement('div');
+  dialog.classList.add('modal-dialog');
+  const modalContent = document.createElement('div');
+  modalContent.classList.add('vega-modal-content-with-scroll');
+  const target = document.createElement('vega-input-select');
+  dialog.append(modalContent);
+  modalShadowRoot.append(dialog);
+  modal.append(target);
+  document.body.appendChild(modal);
+  const element = document.createElement('div');
+  element.classList.add('dropdown');
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+  });
+  drop.show();
+  expect(document.body).toEqualHtml(`<vega-modal>
+	<mock:shadow-root>
+	  <div class="modal-dialog">
+		<div class="vega-modal-content-with-scroll"></div>
+	  </div>
+	</mock:shadow-root>
+	<vega-input-select></vega-input-select>
+	<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+  </vega-modal>`);
+  drop.hide();
+});
+test('content should append to popover content while in scroll modal content', () => {
+  const modal = document.createElement('vega-modal');
+  const popover = document.createElement('vega-popover');
+  popover.classList.add('vega-popover');
+  const target = document.createElement('vega-input-select');
+  popover.append(target);
+  modal.append(popover);
+  document.body.appendChild(modal);
+  const element = document.createElement('div');
+  element.classList.add('dropdown');
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+  });
+  drop.show();
+  expect(document.body).toEqualHtml(`
+	<vega-modal>
+		<vega-popover class="vega-popover">
+			<vega-input-select></vega-input-select>
+			<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+		</vega-popover>
+	</vega-modal>
+	`);
+  drop.hide();
+});
+test('return result as expect when with matchContainerHeight', () => {
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  Object.assign(target, { offsetTop: 0 });
+  Object.assign(target, { offsetLeft: 0 });
+  Object.assign(document.body, { clientHeight: 500 });
+  Object.assign(document.body, { scrollWidth: 500 });
+  const drop1 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    matchContainerHeight: true,
+    placement: ['bottom', 'top'],
+    maxHeight: 200,
+  });
+  drop1.show();
+  expect(element.style.maxHeight).toEqual('200px');
+  drop1.hide();
+  const drop2 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    matchContainerHeight: true,
+    placement: ['bottom', 'top'],
+    maxHeight: 600,
+  });
+  drop2.show();
+  expect(element.style.maxHeight).toEqual('500px');
+  drop2.hide();
+});
+test('return result as expect when without matchContainerHeight', () => {
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  Object.assign(target, { offsetTop: 0 });
+  Object.assign(target, { offsetLeft: 0 });
+  Object.assign(document.body, { scrollHeight: 500 });
+  Object.assign(document.body, { scrollWidth: 500 });
+  const drop1 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    placement: ['bottom', 'top'],
+    maxHeight: 200,
+  });
+  drop1.show();
+  expect(element.style.maxHeight).toEqual('200px');
+  drop1.hide();
+  const drop2 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    placement: ['bottom', 'top'],
+    maxHeight: 600,
+  });
+  drop2.show();
+  expect(element.style.maxHeight).toEqual('600px');
+  drop2.hide();
+});
+test('zIndex should render proper when element show/hide', () => {
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    placement: ['bottom', 'top'],
+  });
+  drop.show();
+  expect(element.style.zIndex).toEqual('10001');
+  drop.hide();
+});
+test('return result as expect when max/min width set', () => {
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  const drop = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    maxWidth: 300,
+    minWidth: 100,
+  });
+  drop.show();
+  element.style.removeProperty('z-index');
+  expect(document.body).toEqualHtml(`
+	<div class="test-parent-host"><div class="test-host"></div></div>
+	<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; min-width: 100px; max-width: 300px; left: 0px; top: 0px;"></div>
+	`);
+  drop.hide();
+});
+test('should override the positionRelativeTo while set in show method', () => {
+  document.body.innerHTML = `<div class='test-parent-host'><div class='test-outer'><div class='test-host'><div class='dropdown'></div></div></div></div>`;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  const container = document.querySelector('.test-parent-host');
+  const outer = document.querySelector('.test-outer');
+  document.body.style.position = 'static';
+  spyOn(window, 'getComputedStyle').and.returnValue({ position: 'static' });
+  const drop1 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    positionRelativeTo: '.test-parent-host',
+  });
+  drop1.show();
+  expect(container.style.position).toEqual('relative');
+  drop1.hide();
+  const drop2 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    positionRelativeTo: '.test-outer',
+  });
+  drop2.show();
+  expect(outer.style.position).toEqual('relative');
+  drop2.hide();
+});
+test('should append element to body only once when the element is not in', () => {
+  document.body.innerHTML = `<div class='test-parent-host'><div class='test-outer'><div class='test-host'><div class='dropdown'></div></div></div></div>`;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  const drop1 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+  });
+  spyOn(document.body, 'append').and.callThrough();
+  drop1.show();
+  expect(element).not.toHaveClass('vega-force-hidden');
+  expect(element.parentElement).toEqual(document.body);
+  drop1.hide();
+  expect(element).toHaveClass('vega-force-hidden');
+  drop1.show();
+  expect(element).not.toHaveClass('vega-force-hidden');
+  expect(element.parentElement).toEqual(document.body);
+  expect(document.body.append).toBeCalledTimes(1);
+});
+test('should append element to positionRelativeTo element only once when the element is not in', () => {
+  document.body.innerHTML = `<div class='test-parent-host'><div class='test-outer'><div class='test-host'><div class='dropdown'></div></div></div></div>`;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  const container = document.querySelector('.test-parent-host');
+  const drop1 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    positionRelativeTo: '.test-parent-host',
+  });
+  spyOn(container, 'append').and.callThrough();
+  drop1.show();
+  expect(element).not.toHaveClass('vega-force-hidden');
+  expect(element.parentElement).toEqual(container);
+  drop1.hide();
+  expect(element).toHaveClass('vega-force-hidden');
+  drop1.show();
+  expect(element).not.toHaveClass('vega-force-hidden');
+  expect(element.parentElement).toEqual(container);
+  expect(container.append).toBeCalledTimes(1);
+});