layoutUtils.spec.tsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import {Layout} from 'react-grid-layout';
  2. import {
  3. calculateColumnDepths,
  4. getNextAvailablePosition,
  5. } from 'sentry/views/dashboards/layoutUtils';
  6. describe('Dashboards > Utils', () => {
  7. describe('calculateColumnDepths', () => {
  8. it('returns 0s when layouts is empty', () => {
  9. const layout = [];
  10. const expectedColumnDepths = [0, 0, 0, 0, 0, 0];
  11. const columnDepths = calculateColumnDepths(layout);
  12. expect(columnDepths).toEqual(expectedColumnDepths);
  13. });
  14. it('returns the depth of layouts at the same level', () => {
  15. const layout = [
  16. {x: 0, y: 0, w: 1, h: 3},
  17. {x: 1, y: 0, w: 2, h: 2},
  18. {x: 4, y: 0, w: 2, h: 4},
  19. ] as Layout[];
  20. const expectedColumnDepths = [3, 2, 2, 0, 4, 4];
  21. const columnDepths = calculateColumnDepths(layout);
  22. expect(columnDepths).toEqual(expectedColumnDepths);
  23. });
  24. it('ignores any "space" above and returns the depth of a lower widget', () => {
  25. const layout = [{x: 0, y: 6, w: 2, h: 3}] as Layout[];
  26. const expectedColumnDepths = [9, 9, 0, 0, 0, 0];
  27. const columnDepths = calculateColumnDepths(layout);
  28. expect(columnDepths).toEqual(expectedColumnDepths);
  29. });
  30. });
  31. describe('getNextAvailablePosition', () => {
  32. it('returns 0, 0 when there is space for a widget in the top left', () => {
  33. const columnDepths = [0, 0, 1, 1, 0, 0];
  34. const expectedPosition = {x: 0, y: 0};
  35. const expectedNextColumnDepths = [2, 2, 1, 1, 0, 0];
  36. const [position, nextColumnDepths] = getNextAvailablePosition(columnDepths, 2);
  37. expect(position).toEqual(expectedPosition);
  38. expect(nextColumnDepths).toEqual(expectedNextColumnDepths);
  39. });
  40. it('returns the middle position if there is space', () => {
  41. const columnDepths = [1, 1, 0, 0, 1, 1];
  42. const expectedPosition = {x: 2, y: 0};
  43. const expectedNextColumnDepths = [1, 1, 2, 2, 1, 1];
  44. const [position, nextColumnDepths] = getNextAvailablePosition(columnDepths, 2);
  45. expect(position).toEqual(expectedPosition);
  46. expect(nextColumnDepths).toEqual(expectedNextColumnDepths);
  47. });
  48. it('returns top right if there is space', () => {
  49. const columnDepths = [1, 1, 1, 1, 0, 0];
  50. const expectedPosition = {x: 4, y: 0};
  51. const expectedNextColumnDepths = [1, 1, 1, 1, 2, 2];
  52. const [position, nextColumnDepths] = getNextAvailablePosition(columnDepths, 2);
  53. expect(position).toEqual(expectedPosition);
  54. expect(nextColumnDepths).toEqual(expectedNextColumnDepths);
  55. });
  56. it('returns next row if there is no space', () => {
  57. const columnDepths = [1, 1, 1, 1, 1, 1];
  58. const expectedPosition = {x: 0, y: 1};
  59. const expectedNextColumnDepths = [3, 3, 1, 1, 1, 1];
  60. const [position, nextColumnDepths] = getNextAvailablePosition(columnDepths, 2);
  61. expect(position).toEqual(expectedPosition);
  62. expect(nextColumnDepths).toEqual(expectedNextColumnDepths);
  63. });
  64. it('returns the next column depth for multiple sequential calculations', () => {
  65. const initialColumnDepths = [1, 1, 1, 1, 0, 0];
  66. const expectedPosition = {x: 0, y: 1};
  67. const expectedNextColumnDepths = [3, 3, 1, 1, 2, 2];
  68. // Call it twice and pass the output of the first into the second
  69. const [_, intermediateDepths] = getNextAvailablePosition(initialColumnDepths, 2);
  70. const [position, finalColumnDepths] = getNextAvailablePosition(
  71. intermediateDepths,
  72. 2
  73. );
  74. expect(position).toEqual(expectedPosition);
  75. expect(finalColumnDepths).toEqual(expectedNextColumnDepths);
  76. });
  77. it('returns proper next column depth with different height', () => {
  78. const columnDepths = [1, 1, 1, 1, 1, 1];
  79. const expectedPosition = {x: 0, y: 1};
  80. const expectedNextColumnDepths = [5, 5, 1, 1, 1, 1];
  81. const [position, nextColumnDepths] = getNextAvailablePosition(columnDepths, 4);
  82. expect(position).toEqual(expectedPosition);
  83. expect(nextColumnDepths).toEqual(expectedNextColumnDepths);
  84. });
  85. it('does not mutate its input array', () => {
  86. const columnDepths = [1, 1, 1, 1, 1, 1];
  87. getNextAvailablePosition(columnDepths, 4);
  88. expect(columnDepths).toEqual([1, 1, 1, 1, 1, 1]);
  89. });
  90. });
  91. });