// Breakpoint Integration Tests
// ============================

// Tests
@include test-module('breakpoint integration') {
  @include test('[mixin] susy-breakpoint') {
    $layout: 24 .5 static;

    $test: susy-get(columns);
    $expect: susy-get(columns, $layout);
    @include assert-unequal($test, $expect,
      'Assert that we arent testing the default layout');

    @include susy-breakpoint(720px, $layout) {
      $test: susy-get(columns);
      @include assert-equal($test, $expect,
        'Susy-breakpoint creates a new global layout context');
    }
  }

  @include output-test('susy-breakpoint') {
    @include assert-setup('susy-breakpoint') {
      .test,
      .expect {
        width: 100%;
      }
    }

    @include assert-output(
      'Creates a custom media-query around any content block.'
    ) {
      .test {
        @include susy-breakpoint(35em, 8 .25 inside, '.foo') {
          @include span(4);
        }
      }

      .expect {
        @media (min-width: 35em) {
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          width: 50%;
          float: left;
          padding-left: 1.25%;
          padding-right: 1.25%;
        }

        .foo & {
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          width: 50%;
          float: left;
          padding-left: 1.25%;
          padding-right: 1.25%;
        }
      }
    }
  }

  @include output-test('susy-media') {
    @include assert-setup('susy-media') {
      .test,
      .expect {
        width: 100%;
      }
    }

    @include assert-output(
      'Creates a custom media-query around any content block.'
    ) {
      .test {
        @include susy-media(35em, '.foo') {
          width: 50%;
        }
      }

      .expect {
        @media (min-width: 35em) {
          width: 50%;
        }

        .foo & {
          width: 50%;
        }
      }
    }
  }

  @include test('[function] susy-get-media') {
    $susy-media: (large: 60em, print: 'print') !global;

    $test: susy-get-media(large);
    $expect: 60em;
    @include assert-equal($test, $expect,
      'Returns $susy-media values based on key name.');

    $test: susy-get-media(print);
    $expect: 'print';
    @include assert-equal($test, $expect,
      'Returns $susy-media values when key = value.');
  }

  @include test('[function] susy-parse-media') {
    $test: susy-parse-media(35em);
    $expect: (
      min-width: 35em,
    );
    @include assert-equal($test, $expect,
      'Returns a simple length as min-width query.');

    $test: susy-parse-media(400px 800px);
    $expect: (
      min-width: 400px,
      max-width: 800px,
    );
    @include assert-equal($test, $expect,
      'Returns two length as min and max-width queries.');

    $test: susy-parse-media(max-width 800px);
    $expect: (
      max-width: 800px,
    );
    @include assert-equal($test, $expect,
      'Returns single list pair as custom query.');

    $test: susy-parse-media((max-width: 800px, max-height: 20em));
    $expect: (
      max-width: 800px,
      max-height: 20em,
    );
    @include assert-equal($test, $expect,
      'Returns a map as custom queries.');
  }

  @include test('susy-render-media') {
    $test: susy-render-media((
              min-width: 30em,
              max-width: 60em,
            ));
    $expect: '(min-width: 30em) and (max-width: 60em)';
    @include assert-equal($test, $expect,
      'Returns a usable query string based on a map.');

  }
}
