test(blade): add datepicker tests (#2186)

* test: add single datepicker tests * test: add date range tests * chore: minor changes * feat: add more tests * chore: update web snaps * chore: update rn snaps * chore: update
razorpay · May 23, 2024 · 2c586b6 · 2c586b6
1 parent 2a37160
commit 2c586b6
Show file tree

Hide file tree

Showing 13 changed files with 477 additions and 17 deletions.
diff --git a/...es/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap b/...es/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BottomSheet /> should render a BottomSheet ssr 1`] = `"<div id="root"><div data-testid="bottomsheet-backdrop" opacity="1" data-blade-component="base-box" class="BaseBox-bmPWx BottomSheetBackdropweb__StyledBottomSheetBackdrop-sc-198k9f6-0 jkMvvn iDnIUr"></div><div data-blade-component="bottom-sheet" data-testid="bottomsheet-surface" aria-modal="true" role="dialog" style="opacity:1;pointer-events:all;height:0;bottom:0;top:auto;z-index:101" class="BottomSheetweb__BottomSheetSurface-qlloie-0 blXGyU"><div data-blade-component="base-box" class="BaseBox-bmPWx gWSczs"><div data-blade-component="BottomSheetGrabHandle" class="BottomSheetGrabHandleweb__BottomSheetGrabHandle-mo12ak-0 iHfLFm"></div><div data-blade-component="bottom-sheet-header" class="BaseBox-bmPWx bONxzW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">Address Details</p><div data-blade-component="base-box" class="BaseBox-bmPWx jOqpMP"><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 igYNjO iHlsLG"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO iSRZOa" data-blade-component="text">2</p></div></div></div></div></div></div><p class="StyledBaseText-dVBfTO kAzdjS" data-blade-component="text">Saving addresses will improve your checkout experience</p></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><button type="button" aria-label="Close" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jCUyST"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div data-blade-component="bottom-sheet-body" data-testid="bottomsheet-body" style="-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:auto;overflow:auto;touch-action:none" class="BaseBox-bmPWx eaEeoi"><div data-blade-component="base-box" class="BaseBox-bmPWx iaqkon"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">BottomSheet body</p></div></div><div data-blade-component="bottom-sheet-footer" class="BaseBox-bmPWx hZLBAO"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="base-box" class="BaseBox-bmPWx dJEYFx"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dJxnSi"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  jPBClF"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO RwjIC" data-blade-component="base-text">Remove address</div></div></div></button></div></div></div></div></div>"`;
+exports[`<BottomSheet /> should render a BottomSheet ssr 1`] = `"<div id="root"><div data-testid="bottomsheet-backdrop" opacity="1" data-blade-component="base-box" class="BaseBox-bmPWx BottomSheetBackdropweb__StyledBottomSheetBackdrop-sc-198k9f6-0 jkMvvn iDnIUr"></div><div data-blade-component="bottom-sheet" data-testid="bottomsheet-surface" aria-modal="true" role="dialog" style="opacity:1;pointer-events:all;height:0;bottom:0;top:auto;z-index:101" class="BottomSheetweb__BottomSheetSurface-qlloie-0 blXGyU"><div data-blade-component="base-box" class="BaseBox-bmPWx gWSczs"><div data-blade-component="BottomSheetGrabHandle" class="BottomSheetGrabHandleweb__BottomSheetGrabHandle-mo12ak-0 iHfLFm"></div><div data-blade-component="bottom-sheet-header" class="BaseBox-bmPWx bONxzW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">Address Details</p><div data-blade-component="base-box" class="BaseBox-bmPWx jOqpMP"><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 igYNjO iHlsLG"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO iSRZOa" data-blade-component="text">2</p></div></div></div></div></div></div><p class="StyledBaseText-dVBfTO kAzdjS" data-blade-component="text">Saving addresses will improve your checkout experience</p></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><button type="button" aria-label="Close" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jCUyST"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div data-blade-component="bottom-sheet-body" data-testid="bottomsheet-body" style="-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:auto;touch-action:none" class="BaseBox-bmPWx QAxeY"><div data-blade-component="base-box" class="BaseBox-bmPWx iaqkon"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">BottomSheet body</p></div></div><div data-blade-component="bottom-sheet-footer" class="BaseBox-bmPWx hZLBAO"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="base-box" class="BaseBox-bmPWx dJEYFx"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dJxnSi"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  jPBClF"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO RwjIC" data-blade-component="base-text">Remove address</div></div></div></button></div></div></div></div></div>"`;
 
 exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 .c3.c3.c3.c3.c3 {
@@ -159,6 +159,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 }
 
 .c28.c28.c28.c28.c28 {
+  overflow: auto;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -820,7 +821,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
         class="c28"
         data-blade-component="bottom-sheet-body"
         data-testid="bottomsheet-body"
-        style="-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:auto;overflow:auto;touch-action:none"
+        style="-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:auto;touch-action:none"
       >
         <div
           class="c29"

diff --git a/...es/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/...es/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
@@ -51,6 +51,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c11.c11.c11.c11.c11 {
+  overflow: auto;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -551,7 +552,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
               class="c11"
               data-blade-component="bottom-sheet-body"
               data-testid="bottomsheet-body"
-              style="user-select: auto; overflow: auto;"
+              style="user-select: auto;"
             >
               <div
                 class="c12"
@@ -895,6 +896,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
 }
 
 .c28.c28.c28.c28.c28 {
+  overflow: auto;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1555,7 +1557,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
           class="c28"
           data-blade-component="bottom-sheet-body"
           data-testid="bottomsheet-body"
-          style="user-select: auto; overflow: auto;"
+          style="user-select: auto;"
         >
           <div
             class="c29"
@@ -1633,6 +1635,7 @@ exports[`<BottomSheet /> should render empty header with padding 0 1`] = `
 }
 
 .c9.c9.c9.c9.c9 {
+  overflow: auto;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1904,7 +1907,7 @@ exports[`<BottomSheet /> should render empty header with padding 0 1`] = `
           class="c9"
           data-blade-component="bottom-sheet-body"
           data-testid="bottomsheet-body"
-          style="user-select: auto; overflow: auto;"
+          style="user-select: auto;"
         >
           <div
             class="c10"

diff --git a/.../src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap b/.../src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
@@ -8175,7 +8175,7 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
           }
           textAlign="center"
         >
-          PAY NOW
+          Pay Now
         </Text>
       </View>
     </View>

diff --git a/...ade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap b/...ade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
@@ -6710,7 +6710,7 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
           class="c4"
           data-blade-component="base-text"
         >
-          PAY NOW
+          Pay Now
         </div>
       </div>
     </div>

diff --git a/...es/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap b/...es/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
@@ -5246,7 +5246,7 @@ exports[`<Button /> should render xsmall size button 1`] = `
           }
           textAlign="center"
         >
-          PAY NOW
+          Pay Now
         </Text>
       </View>
     </View>

diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap
@@ -4272,7 +4272,7 @@ exports[`<Button /> should render xsmall size button 1`] = `
           class="c4"
           data-blade-component="base-text"
         >
-          PAY NOW
+          Pay Now
         </div>
       </div>
     </div>

diff --git a/...es/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap b/...es/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap
@@ -1957,7 +1957,7 @@ exports[`<ButtonGroup /> should render ButtonGroup with xsmall size 1`] = `
             class="c5"
             data-blade-component="base-text"
           >
-            ONE
+            One
           </div>
         </div>
       </div>
@@ -1984,7 +1984,7 @@ exports[`<ButtonGroup /> should render ButtonGroup with xsmall size 1`] = `
             class="c5"
             data-blade-component="base-text"
           >
-            TWO
+            Two
           </div>
         </div>
       </div>
@@ -2011,7 +2011,7 @@ exports[`<ButtonGroup /> should render ButtonGroup with xsmall size 1`] = `
             class="c5"
             data-blade-component="base-text"
           >
-            THREE
+            Three
           </div>
         </div>
       </div>

diff --git a/packages/blade/src/components/DatePicker/CalendarHeader.web.tsx b/packages/blade/src/components/DatePicker/CalendarHeader.web.tsx
@@ -133,6 +133,7 @@ const CalendarHeader = ({
               color="neutral"
               iconPosition="right"
               icon={ChevronDownIcon}
+              accessibilityLabel="Change month"
             >
               {month} {year}
             </Link>
@@ -147,6 +148,7 @@ const CalendarHeader = ({
               color="neutral"
               iconPosition="right"
               icon={ChevronDownIcon}
+              accessibilityLabel="Change decade"
             >
               {year}
             </Link>

diff --git a/packages/blade/src/components/DatePicker/DatePicker.stories.tsx b/packages/blade/src/components/DatePicker/DatePicker.stories.tsx
@@ -11,7 +11,7 @@ export default {
   tags: ['autodocs'],
 } as Meta<CalendarProps<'single' | 'range'>>;
 
-export const Calendar: StoryFn<typeof DatePicker> = ({ ...args }) => {
+export const Calendar: StoryFn<typeof DatePicker> = () => {
   const [isOpen, setIsOpen] = React.useState(true);
   const [date, setDate] = React.useState<DatesRangeValue>([
     new Date(),