fix: address feedback

toptal · Jul 26, 2023 · 5c2ab6a · 5c2ab6a
1 parent ea9df5f
commit 5c2ab6a
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 30 deletions.
diff --git a/cypress/component/Page.spec.tsx b/cypress/component/Page.spec.tsx
@@ -1,37 +1,11 @@
 import React from 'react'
 import type { PageSidebarProps } from '@toptal/picasso'
 import { Container, Menu, Page, Typography } from '@toptal/picasso'
-import type { BreakpointKeys } from '@toptal/picasso-provider/Picasso/config'
-import { PicassoBreakpoints } from '@toptal/picasso-provider/Picasso/config'
+import { getCheckpoints } from '@toptal/picasso/test-utils'
 
 const component = 'Page'
 const containerHeight = '30rem'
 
-/**
- * Produces an array of checkpoints – screen size values, needed for covering
- * all existing breakpoints in tests (checkpoints are different from breakpoints
- * by certain offset).
- *
- * @returns {number[]} Array of checkpoints
- */
-const getCheckpoints = () => {
-  const offset = 1
-  const breakpoints = PicassoBreakpoints.breakpoints.values
-  const breakpointKeys = Object.keys(breakpoints)
-
-  return [
-    ...breakpointKeys
-      // Skip the first breakpoint as it equals to 0
-      .slice(1)
-      // Genereate checkpoints by subtsracting offset from each breakpoint
-      .map(
-        breakpointKey => breakpoints[breakpointKey as BreakpointKeys] - offset
-      ),
-    // Add the last checkpoint that covers screens wider that the last breakpoint
-    breakpoints[breakpointKeys.slice(-1) as unknown as BreakpointKeys] + offset,
-  ]
-}
-
 const checkpoints = getCheckpoints()
 
 // Sidebar menu has custom breakpoint at 1280px that changes its behavior, so 1280px

diff --git a/packages/picasso/src/PageTopBar/__snapshots__/test.tsx.snap b/packages/picasso/src/PageTopBar/__snapshots__/test.tsx.snap
@@ -50,7 +50,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
                 <div
                   class="PicassoPopper-root PicassoDropdown-popper PageHamburger-popper"
                   role="navigation"
-                  style="position: fixed; top: 0px; left: 0px; display: none; margin-top: 0.4rem;"
+                  style="position: fixed; top: 0px; left: 0px; display: none;"
                 >
                   <div>
                     <div
@@ -147,7 +147,7 @@ exports[`Page.TopBar render with link 1`] = `
                 <div
                   class="PicassoPopper-root PicassoDropdown-popper PageHamburger-popper"
                   role="navigation"
-                  style="position: fixed; top: 0px; left: 0px; display: none; margin-top: 0.4rem;"
+                  style="position: fixed; top: 0px; left: 0px; display: none;"
                 >
                   <div>
                     <div
@@ -270,7 +270,7 @@ exports[`Page.TopBar renders 1`] = `
                 <div
                   class="PicassoPopper-root PicassoDropdown-popper PageHamburger-popper"
                   role="navigation"
-                  style="position: fixed; top: 0px; left: 0px; display: none; margin-top: 0.4rem;"
+                  style="position: fixed; top: 0px; left: 0px; display: none;"
                 >
                   <div>
                     <div

diff --git a/packages/picasso/src/test-utils/get-checkpoints.ts b/packages/picasso/src/test-utils/get-checkpoints.ts
@@ -0,0 +1,27 @@
+import type { BreakpointKeys } from '@toptal/picasso-provider'
+import { PicassoBreakpoints } from '@toptal/picasso-provider'
+
+/**
+ * Produces an array of checkpoints – screen size values, needed for covering
+ * all existing breakpoints in tests (checkpoints are different from breakpoints
+ * by certain offset).
+ *
+ * @returns {number[]} Array of checkpoints
+ */
+export const getCheckpoints = () => {
+  const offset = 1
+  const breakpoints = PicassoBreakpoints.breakpoints.values
+  const breakpointKeys = Object.keys(breakpoints)
+
+  return [
+    ...breakpointKeys
+      // Skip the first breakpoint as it equals to 0
+      .slice(1)
+      // Genereate checkpoints by subtsracting offset from each breakpoint
+      .map(
+        breakpointKey => breakpoints[breakpointKey as BreakpointKeys] - offset
+      ),
+    // Add the last checkpoint that covers screens wider that the last breakpoint
+    breakpoints[breakpointKeys.slice(-1) as unknown as BreakpointKeys] + offset,
+  ]
+}
diff --git a/packages/picasso/src/test-utils/index.tsx b/packages/picasso/src/test-utils/index.tsx
@@ -31,3 +31,4 @@ const customRender = (
 
 export * from '@testing-library/react'
 export { customRender as render, TestingPicasso }
+export { getCheckpoints } from './get-checkpoints'
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -6,6 +6,7 @@
       "*": ["@types/*"],
       "~/*": ["./*"],
       "@toptal/picasso/*": ["node_modules/@toptal/picasso/src/*"],
+      "@toptal/picasso-provider/*": ["node_modules/@toptal/picasso-provider/src/*"],
       "@toptal/*": ["node_modules/@toptal/*/src"]
     }
   },