From 9ff4938885f032014f98e5d89040dc90242cc803 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 27 Oct 2021 13:45:51 +0100
Subject: [PATCH] [system] Add tests for custom base use cases

---
 packages/mui-system/src/breakpoints.test.js | 26 ++++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/mui-system/src/breakpoints.test.js b/packages/mui-system/src/breakpoints.test.js
index dbe0d996d24cd6..0cb0b209bfa08f 100644
--- a/packages/mui-system/src/breakpoints.test.js
+++ b/packages/mui-system/src/breakpoints.test.js
@@ -115,26 +115,40 @@ describe('breakpoints', () => {
         expect(values).to.equal(3);
       });
 
-      it('resolve breakpoint values for prop of array type given custom base', () => {
+      it('given custom base, resolve breakpoint values for prop of array type', () => {
         const columns = [1, 2, 3];
         const customBase = { xs: true, sm: true, md: true, lg: true };
         const values = resolveBreakpointValues({ values: columns, base: customBase });
         expect(values).to.deep.equal({ xs: 1, sm: 2, md: 3, lg: 3 });
       });
 
-      it('resolve breakpoint values for prop of object type given custom base', () => {
+      it('given custom base, resolve breakpoint values for prop of object type', () => {
         const columns = { xs: 1, sm: 2, md: 3 };
         const customBase = { xs: true, sm: true, md: true, lg: true };
         const values = resolveBreakpointValues({ values: columns, base: customBase });
         expect(values).to.deep.equal({ xs: 1, sm: 2, md: 3, lg: 3 });
       });
 
-      it('resolve breakpoint values for unordered prop of object type given custom base', () => {
+      it('given custom base, resolve breakpoint values for unordered prop of object type', () => {
         const columns = { sm: 2, md: 3, xs: 1 };
         const customBase = { xs: true, sm: true, md: true, lg: true };
         const values = resolveBreakpointValues({ values: columns, base: customBase });
         expect(values).to.deep.equal({ xs: 1, sm: 2, md: 3, lg: 3 });
       });
+
+      it('given custom base, resolve breakpoint values for prop of object type with missing breakpoints', () => {
+        const columns = { xs: 1, md: 2 };
+        const customBase = { xs: true, sm: true, md: true, lg: true };
+        const values = resolveBreakpointValues({ values: columns, base: customBase });
+        expect(values).to.deep.equal({ xs: 1, sm: 1, md: 2, lg: 2 });
+      });
+
+      it('given custom base, resolve breakpoint values for unordered prop of object type with missing breakpoints', () => {
+        const columns = { md: 2, xs: 1 };
+        const customBase = { xs: true, sm: true, md: true, lg: true };
+        const values = resolveBreakpointValues({ values: columns, base: customBase });
+        expect(values).to.deep.equal({ xs: 1, sm: 1, md: 2, lg: 2 });
+      });
     });
 
     describe('custom breakpoints', () => {
@@ -174,21 +188,21 @@ describe('breakpoints', () => {
         expect(values).to.equal(3);
       });
 
-      it('resolve breakpoint values for prop of array type given custom base', () => {
+      it('given custom base, resolve breakpoint values for prop of array type', () => {
         const columns = [1, 2, 3];
         const customBase = { extraSmall: true, small: true, medium: true, large: true };
         const values = resolveBreakpointValues({ values: columns, base: customBase });
         expect(values).to.deep.equal({ extraSmall: 1, small: 2, medium: 3, large: 3 });
       });
 
-      it('resolve breakpoint values for prop of object type given custom base', () => {
+      it('given custom base, resolve breakpoint values for prop of object type', () => {
         const columns = { extraSmall: 1, small: 2, medium: 3 };
         const customBase = { extraSmall: true, small: true, medium: true, large: true };
         const values = resolveBreakpointValues({ values: columns, base: customBase });
         expect(values).to.deep.equal({ extraSmall: 1, small: 2, medium: 3, large: 3 });
       });
 
-      it('resolve breakpoint values for unordered prop of object type given custom base', () => {
+      it('given custom base, resolve breakpoint values for unordered prop of object type', () => {
         const columns = { small: 2, medium: 3, extraSmall: 1 };
         const customBase = { extraSmall: true, small: true, medium: true, large: true };
         const values = resolveBreakpointValues({ values: columns, base: customBase });