test: fixed tests for box and snapshots updated for ModalLayout and T…

…ooltip
strapi · Apr 16, 2024 · 78662ac · 78662ac
1 parent be41c57
commit 78662ac
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 21 deletions.
diff --git a/packages/strapi-design-system/src/Box/__tests__/Box.spec.tsx b/packages/strapi-design-system/src/Box/__tests__/Box.spec.tsx
@@ -10,13 +10,57 @@ describe('Box', () => {
     expect(container.children[0]).toHaveStyle(`${colorProp}: #7b79ff`);
   });
 
-  it.each(['padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'])(
-    'retrieves the theme value corresponding to the %s props',
-    (spacingProp) => {
-      const { container } = setup({ [spacingProp]: 4 });
-      expect(container.children[0]).toHaveStyle(`${spacingProp}: 16px`);
-    },
-  );
+  it('retrieves the theme value corresponding to the padding', () => {
+    const { container } = setup({ padding: 4 });
+    expect(container.children[0]).toHaveStyle(`padding-block: 16px`);
+    expect(container.children[0]).toHaveStyle(`padding-inline: 16px`);
+  });
+
+  it('retrieves the theme value corresponding to the paddingTop', () => {
+    const { container } = setup({ paddingTop: 1 });
+    expect(container.children[0]).toHaveStyle(`padding-block-start: 4px`);
+  });
+
+  it('retrieves the theme value corresponding to the paddingBottom', () => {
+    const { container } = setup({ paddingBottom: 2 });
+    expect(container.children[0]).toHaveStyle(`padding-block-end: 8px`);
+  });
+
+  it('retrieves the theme value corresponding to the paddingLeft', () => {
+    const { container } = setup({ paddingLeft: 1 });
+    expect(container.children[0]).toHaveStyle(`padding-inline-start: 4px`);
+  });
+
+  it('retrieves the theme value corresponding to the paddingRight', () => {
+    const { container } = setup({ paddingRight: 2 });
+    expect(container.children[0]).toHaveStyle(`padding-inline-end: 8px`);
+  });
+
+  it('retrieves the theme value corresponding to the margin', () => {
+    const { container } = setup({ margin: 4 });
+    expect(container.children[0]).toHaveStyle(`margin-block: 16px`);
+    expect(container.children[0]).toHaveStyle(`margin-inline: 16px`);
+  });
+
+  it('retrieves the theme value corresponding to the marginTop', () => {
+    const { container } = setup({ marginTop: 1 });
+    expect(container.children[0]).toHaveStyle(`margin-block-start: 4px`);
+  });
+
+  it('retrieves the theme value corresponding to the marginBottom', () => {
+    const { container } = setup({ marginBottom: 2 });
+    expect(container.children[0]).toHaveStyle(`margin-block-end: 8px`);
+  });
+
+  it('retrieves the theme value corresponding to the marginLeft', () => {
+    const { container } = setup({ marginLeft: 1 });
+    expect(container.children[0]).toHaveStyle(`margin-inline-start: 4px`);
+  });
+
+  it('retrieves the theme value corresponding to the marginRight', () => {
+    const { container } = setup({ marginRight: 2 });
+    expect(container.children[0]).toHaveStyle(`margin-inline-end: 8px`);
+  });
 
   it.each(['color', 'cursor', 'height', 'width'])(
     'does not render color or cursor props as HTML attributes',

diff --git a/...es/strapi-design-system/src/ModalLayout/__tests__/__snapshots__/ModalLayout.spec.tsx.snap b/...es/strapi-design-system/src/ModalLayout/__tests__/__snapshots__/ModalLayout.spec.tsx.snap
@@ -21,8 +21,8 @@ exports[`ModalLayout should render component and match snapshot 1`] = `
 }
 
 .c1 {
-  padding-right: 40px;
-  padding-left: 40px;
+  padding-inline-end: 40px;
+  padding-inline-start: 40px;
   position: fixed;
   z-index: 4;
 }
@@ -36,30 +36,33 @@ exports[`ModalLayout should render component and match snapshot 1`] = `
 
 .c5 {
   background: #f6f6f9;
-  padding-top: 16px;
-  padding-right: 20px;
-  padding-bottom: 16px;
-  padding-left: 20px;
+  padding-block-start: 16px;
+  padding-inline-end: 20px;
+  padding-block-end: 16px;
+  padding-inline-start: 20px;
 }
 
 .c8 {
   background: #ffffff;
-  padding: 8px;
+  padding-block: 8px;
+  padding-inline: 8px;
   border-radius: 4px;
   border-color: #dcdce4;
   border: 1px solid #dcdce4;
   cursor: pointer;
 }
 
 .c11 {
-  padding: 32px;
+  padding-block: 32px;
+  padding-inline: 32px;
 }
 
 .c15 {
   background: #4945ff;
-  padding: 8px;
-  padding-right: 16px;
-  padding-left: 16px;
+  padding-block: 8px;
+  padding-inline: 8px;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
   border-radius: 4px;
   border-color: #4945ff;
   border: 1px solid #4945ff;

diff --git a/packages/strapi-design-system/src/Tooltip/__tests__/__snapshots__/Tooltip.spec.tsx.snap b/packages/strapi-design-system/src/Tooltip/__tests__/__snapshots__/Tooltip.spec.tsx.snap
@@ -15,7 +15,8 @@ exports[`Tooltip snapshots document.body when the button is focused (aria-descri
 
 .c1 {
   background: #212134;
-  padding: 8px;
+  padding-block: 8px;
+  padding-inline: 8px;
   border-radius: 4px;
   position: absolute;
 }
@@ -106,7 +107,8 @@ exports[`Tooltip snapshots document.body when the tooltip is not visible but exi
 
 .c1 {
   background: #212134;
-  padding: 8px;
+  padding-block: 8px;
+  padding-inline: 8px;
   border-radius: 4px;
   position: absolute;
 }
@@ -190,7 +192,8 @@ exports[`Tooltip snapshots document.body with a label 1`] = `
 
 .c1 {
   background: #212134;
-  padding: 8px;
+  padding-block: 8px;
+  padding-inline: 8px;
   border-radius: 4px;
   position: absolute;
 }