Adding new tests for media-type & show-breakpoints. Also updating docs (

#148)

_mq.scss

@@ -24,15 +24,19 @@ $breakpoints: (
 /// to this list, ordered by width. For example: (mobile, tablet, desktop).
 ///
 /// @example scss
-///   $show-breakpoints: (mobile, tablet, desktop);
-///   @import 'path/to/mq';
+///   @use 'path/to/mq' with ($show-breakpoints: ('mobile', 'tablet', 'desktop'));
+///
 ///
 /// @type map
 $show-breakpoints: () !default;
 
 /// Customize the media type (for example: `@media screen` or `@media print`)
 /// By default sass-mq uses an "all" media type (`@media all and …`)
 ///
+/// If you want to overried the media type, you can use this option.
+/// @example scss
+///   @use 'path/to/mq' with ($media-type: 'screen');
+///
 /// @type String
 /// @link https://github.com/sass-mq/sass-mq#changing-media-type Full documentation and example
 $media-type: all !default;
@@ -52,7 +56,7 @@ $media-type: all !default;
     @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
     @return px2em($px * 1px);
   }
-  // if $px is compatible with em units then return value unchanged
+  // if $px is compatible with em units, then return value unchanged
   @if math.compatible($px, 1em) {
     @return $px;
   }
@@ -65,7 +69,7 @@ $media-type: all !default;
 ///
 /// @example scss
 ///  $tablet-width: get-breakpoint-width(tablet);
-///  @media (min-width: get-breakpoint-width(desktop)) {}
+///  @media (min-width: get-breakpoint-width(tablet)) {}
 ///
 /// @requires {Variable} $breakpoints
 ///
@@ -99,6 +103,7 @@ $media-type: all !default;
 /// @link https://github.com/sass-mq/sass-mq#responsive-mode-on-default Full documentation and examples
 ///
 /// @example scss
+///  @use 'path/to/mq' as *;
 ///  .element {
 ///    @include mq($from: mobile) {
 ///      color: red;

test/mq-media-type.spec.scss

@@ -0,0 +1,23 @@
+@use 'true' as *;
+@use '_mq' as mq with ($media-type: 'print');
+@use 'sass:meta';
+
+@include describe('[variable] $media-type') {
+  @include describe('Given new values to override $media-type') {
+    @include it('Should outputs a media print query') {
+      @include assert {
+        @include output {
+          @include mq.mq() {
+            content: 'custom content for print';
+          }
+        }
+
+        @include expect {
+          @media print {
+            content: 'custom content for print';
+          }
+        }
+      }
+    }
+  }
+}

test/mq-show-breakpoints.spec.scss

@@ -0,0 +1,44 @@
+@use 'true' as *;
+@use '_mq' as mq with ($show-breakpoints: ('mobile', 'desktop'));
+@use 'sass:meta';
+
+@include describe('[variable] $show-breakpoints') {
+  @include describe('Given new values to override $show-breakpoints') {
+    @include it(
+      'should print body:before and media queries for given $show-breakpoints names'
+    ) {
+      @include assert {
+        @include output {
+          @include mq.show-breakpoints;
+        }
+        @include expect {
+          body:before {
+            background-color: #fcf8e3;
+            border-bottom: 1px solid #fbeed5;
+            border-left: 1px solid #fbeed5;
+            color: #c09853;
+            font: small-caption;
+            padding: 3px 6px;
+            pointer-events: none;
+            position: fixed;
+            right: 0;
+            top: 0;
+            z-index: 100;
+          }
+
+          @media (min-width: 20em) {
+            body:before {
+              content: 'mobile ≥ 320px (20em)';
+            }
+          }
+
+          @media (min-width: 61.25em) {
+            body:before {
+              content: 'desktop ≥ 980px (61.25em)';
+            }
+          }
+        }
+      }
+    }
+  }
+}