charge_miniapp/node_modules/widget-ui/test/css-layout.test.ts

import Element from "../src/element";

test("layout", () => {
  const container = new Element({
    width: 100,
    height: 100,
    padding: 10,
    borderWidth: 2
  })

  const div1 = new Element({
    left: 5,
    top: 5,
    width: 14,
    height: 14
  })

  container.add(div1);
  container.layout();
  // css-layout 是 border-box
  expect(container.layoutBox.left).toBe(0);
  expect(container.layoutBox.top).toBe(0);
  expect(container.layoutBox.width).toBe(100);
  expect(container.layoutBox.height).toBe(100);

  expect(div1.layoutBox.left).toBe(10 + 2 + 5);
  expect(div1.layoutBox.top).toBe(10 + 2 + 5);
  expect(div1.layoutBox.width).toBe(14);
  expect(div1.layoutBox.height).toBe(14);
});

test("overflow", () => {
  const container = new Element({
    width: 100,
    height: 100,
    padding: 10,
    borderWidth: 2
  })

  const div1 = new Element({
    width: 114,
    height: 114,
  })

  container.add(div1);
  container.layout();

  // 写死尺寸的情况下子元素不收缩父元素不撑开
  expect(container.layoutBox.width).toBe(100);
  expect(container.layoutBox.height).toBe(100);

  expect(div1.layoutBox.left).toBe(10 + 2);
  expect(div1.layoutBox.top).toBe(10 + 2);
  expect(div1.layoutBox.width).toBe(114);
  expect(div1.layoutBox.height).toBe(114);
});

test("right bottom", () => {
  const container = new Element({
    width: 100,
    height: 100,
    padding: 10,
    borderWidth: 2
  })

  const div1 = new Element({
    width: 14,
    height: 14,
    right: 13,
    bottom: 9,
    position: "absolute"
  })

  container.add(div1);
  container.layout();

  // right bottom 只有在 position 为 absolute 的情况下才有用
  expect(container.layoutBox.width).toBe(100);
  expect(container.layoutBox.height).toBe(100);

  // 但这时就是以整个父元素为边界，而不是 border + padding 后的边界
  expect(div1.layoutBox.left).toBe(100 - 13 - 14);
  expect(div1.layoutBox.top).toBe(100 - 9 - 14);
});

test("flex center", () => {
  const container = new Element({
    width: 100,
    height: 100,
    padding: 10,
    borderWidth: 2,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  })

  const div1 = new Element({
    width: 14,
    height: 14
  })

  container.add(div1);
  container.layout();
  // 使用 flex 水平垂直居中
  expect(div1.layoutBox.left).toBe((100 - 14)/2);
  expect(div1.layoutBox.top).toBe((100 - 14)/2);
})

test("flex top bottom", () => {
  const container = new Element({
    width: 100,
    height: 100,
    padding: 10,
    borderWidth: 2,
    flexDirection: "column",
    justifyContent: "space-between",
    alignItems: "stretch"
  })

  // flex 实现一上一下两行水平填满
  const div1 = new Element({
    height: 10
  })

  const div2 = new Element({
    height: 20
  })

  container.add(div1);
  container.add(div2);
  container.layout();

  expect(div1.layoutBox.left).toBe(10 + 2);
  expect(div1.layoutBox.top).toBe(10 + 2);
  expect(div1.layoutBox.width).toBe(100 - 10*2 - 2*2);

  expect(div2.layoutBox.left).toBe(10 + 2);
  expect(div2.layoutBox.top).toBe(100 - 10 - 2 - 20);
  expect(div2.layoutBox.width).toBe(100 - 10*2 - 2*2);
})

test("rewrite uuid", () => {
  // 小程序为了保证 webview 和 service 侧的 coverview 不冲突，所以设置了不同的自增起点
  // uuid 静态方法就是为了根据不同的需求去覆写
  let uuid = 79648527;
  Element.uuid = () =>  uuid++;
  const container = new Element();
  expect(container.id).toEqual(79648527);
  const div = new Element();
  expect(div.id).toEqual(79648528);
});

test("absolute left top", () => {
  const container = new Element({
    width: 300,
    height: 200,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  })
  

  const div1 = new Element({
    width: 80,
    height: 60
  })
  
  const div2 = new Element({
    width: 40,
    height: 30
  })

  div1.add(div2)
  container.add(div1)
  container.layout()

  expect(div1.layoutBox.left).toBe(110)
  expect(div1.layoutBox.top).toBe(70)

  expect(div2.layoutBox.left).toBe(110)
  expect(div2.layoutBox.top).toBe(70)
})