sass-layout/test.scss

@import "true";
@import "sass_layout";

@include test-module('Layout') {
  @include test('should layout a single node with width and height') {
    .root { @include layout((width: 100, height: 100)); }
    @include render-layout;
    @include assert-equal(render-node(".root"), (100, 100, 0, 0));
  }

  @include test('should layout node with children') {
    .root {
      @include layout(( width: 1000, height: 1000 ));
      .child_a { @include layout(( width: 500, height: 500 )); }
      .child_b { @include layout(( width: 250, height: 250 )); }
      .child_c { @include layout(( width: 125, height: 125 )); }
    }
    @include render-layout;
    @include assert-equal(render-node(".root"), (1000, 1000, 0, 0));
    @include assert-equal(render-node(".root .child_a"), (500, 500, 0, 0));
    @include assert-equal(render-node(".root .child_b"), (250, 250, 500, 0));
    @include assert-equal(render-node(".root .child_c"), (125, 125, 750, 0));
  }

  @include test('should layout node with nested children') {
    .r {
      @include layout(( width:  1000, height: 1000));
      .c_a { @include layout(( width: 500, height: 500 )); }
      .c_b {
        @include layout(( width: 500, height: 500 ));
        .cc_a { @include layout((width: 250, height: 250)) }
        .cc_b { @include layout((width: 250, height: 250)) }
      }
    }
    @include render-layout;
    @include assert-equal(render-node(".r .c_b"), (500, 500, 500, 0));
    @include assert-equal(render-node(".r .c_b .cc_a"), (250, 250, 0, 0));
    @include assert-equal(render-node(".r .c_b .cc_b"), (250, 250, 250, 0));
  }

  @include test('should layout node with margin') {
    .r { @include layout(( width:100, height: 200, margin: 10)) }
    @include render-layout;
    @include assert-equal(render-node('.r'), (100, 200, 10, 10))
  }

  @include test('should layout node with several children') {
    .r { 
      @include layout(( width: 1000, height: 1000, margin: 10 ));
      .c_a { @include layout(( width: 100, height: 100, margin: 50 )) }
      .c_b { @include layout(( width: 100, height: 100, margin: 25 )) }
      .c_c { @include layout(( width: 100, height: 100, margin: 10 )) }
    }
    @include render-layout;
    @include assert-equal(render-node('.r'), (1000, 1000, 10, 10));
    @include assert-equal(render-node('.r .c_a'), (100, 100, 50, 50));
    @include assert-equal(render-node('.r .c_b'), (100, 100, 225, 25));
    @include assert-equal(render-node('.r .c_c'), (100, 100, 360, 10));
  }

  @include test('should layout node with row flex direction') {
    .r {
      @include layout(( width: 1000, height: 1000, flex-direction: 'row' ));
      .c_a { @include layout(( width: 100, height: 200 )) }
      .c_b { @include layout(( width: 300, height: 150 )) }
    }
    @include render-layout;
    @include assert-equal(render-node('.r .c_b'), (300, 150, 0, 100));
  }

  @include test('should layout node based on children main dimensions') {
    .r {
      @include layout(( width: 300 ));
      .c_a { @include layout(( width: 300, height: 200 )) }
      .c_b { @include layout(( width: 300, height: 150 )) }
    }
    @include render-layout;
    @include assert-equal(render-node('.r'), (300, 350, 0, 0));
  }

  @include test('should layout node with just flex') {
    .r {
      @include layout(( width: 1000, height: 1000 ));
      .c_a { @include layout(( width: 100, height: 200 )) }
      .c_b { @include layout(( width: 100, flex: 1 )) }
    }
    @include render-layout;
    @include assert-equal(render-node('.r .c_b'), (100, 800, 200, 0));
  }

  @include test('should layout node with flex recursively') {
    .r {
      @include layout(( width: 1000, height: 1000 ));
      .c_a {
        @include layout(( width: 1000, flex: 1 ));
        .cc_a {
          @include layout(( width: 1000, flex: 1 ));
          .ccc_a { @include layout(( width: 1000, flex: 1 )); }
        }
      }
    }
    @include render-layout;
    @include assert-equal(render-node('.r .c_a'), (1000, 1000, 0, 0));
    @include assert-equal(render-node('.r .c_a .cc_a'), (1000, 1000, 0, 0));
    @include assert-equal(render-node('.r .c_a .cc_a .ccc_a'), (1000, 1000, 0, 0));
  }

  @include test('should layout node with targeted margin') {
    .r {
      @include layout(( width: 1000, height: 1000, margin-top: 10, margin-left: 5 ));
      .c_a { @include layout(( width: 100, height: 100, margin-top: 50, margin-left: 15, margin-bottom: 20 )) }
      .c_b { @include layout(( width: 100, height: 100, margin-left: 30 )) }
    }
    @include render-layout;
    @include assert-equal(render-node('.r'), (1000, 1000, 10, 5));
    @include assert-equal(render-node('.r .c_a'), (100, 100, 50, 15));
    @include assert-equal(render-node('.r .c_b'), (100, 100, 170, 30));
  }

  @include test('should layout node with justifyContent: flex-end') {
    .r {
      @include layout(( width: 1000, height: 1000, justify-content: flex-end ));
      .c_a { @include layout(( width: 100, height: 100 )) }
      .c_b { @include layout(( width: 100, height: 100 )) }
    }
    @include render-layout;
    @include assert-equal(render-node('.r .c_a'), (100, 100, 800, 0));
    @include assert-equal(render-node('.r .c_b'), (100, 100, 900, 0));
  }

  @include test('should layout node with justifyContent: space-between') {
    .r {
      @include layout(( width: 1000, height: 1000, justify-content: space-between ));
      .c_a { @include layout(( width: 100, height: 100 )) }
      .c_b { @include layout(( width: 100, height: 100 )) }
    }
    @include render-layout;
    @include assert-equal(render-node('.r .c_a'), (100, 100, 0, 0));
    @include assert-equal(render-node('.r .c_b'), (100, 100, 900, 0));
  }

  @include test('should layout node with justifyContent: space-around') {
    .r {
      @include layout(( width: 1000, height: 1000, justify-content: space-around ));
      .c_a { @include layout(( width: 100, height: 100 )) }
      .c_b { @include layout(( width: 100, height: 100 )) }
    }
    @include render-layout;
    @include assert-equal(render-node('.r .c_a'), (100, 100, 200, 0));
    @include assert-equal(render-node('.r .c_b'), (100, 100, 700, 0));
  }
}

@include report;