feat(PPDSC-2256): add unit test

newscorp-ghfb · Jul 25, 2022 · 92d414d · 92d414d
1 parent cc1ae11
commit 92d414d
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 0 deletions.
diff --git a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap
@@ -369,6 +369,123 @@ exports[`Paragraph renders with drop cap and complex children 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Paragraph renders with dropCap logical props 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: #2E2E2E;
+  font-family: "DM Sans",sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.emotion-0 svg {
+  fill: #2E2E2E;
+}
+
+.emotion-1 {
+  float: left;
+  color: #0A0A0A;
+  -webkit-margin-end: 0.15em;
+  margin-inline-end: 0.15em;
+  margin-inline: 8px;
+  margin-block-start: 4px;
+  margin-block: 8px;
+  padding-inline: 8px;
+  padding-block: 8px;
+}
+
+@media screen and (max-width: 767px) {
+  .emotion-1 {
+    font-family: "Bitter",serif;
+    font-size: 44px;
+    line-height: 1.125;
+    font-weight: 500;
+    letter-spacing: 0;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .emotion-1 {
+    font-family: "Bitter",serif;
+    font-size: 48px;
+    line-height: 1.125;
+    font-weight: 500;
+    letter-spacing: 0;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .emotion-1 {
+    font-family: "Bitter",serif;
+    font-size: 56px;
+    line-height: 1.125;
+    font-weight: 500;
+    letter-spacing: 0;
+  }
+}
+
+.emotion-1 svg {
+  fill: #0A0A0A;
+}
+
+@media screen and (max-width: 767px) {
+  .emotion-1 {
+    -webkit-padding-end: 8px;
+    padding-inline-end: 8px;
+    padding-block-end: 8px;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .emotion-1 {
+    -webkit-padding-end: 12px;
+    padding-inline-end: 12px;
+    padding-block-end: 12px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .emotion-1 {
+    -webkit-padding-end: 16px;
+    padding-inline-end: 16px;
+    padding-block-end: 16px;
+  }
+}
+
+<p
+    aria-hidden="true"
+    class="emotion-0"
+  >
+    <span
+      class="emotion-1"
+    >
+      d
+    </span>
+    ropcap with logical props
+  </p>
+  .emotion-0 {
+  display: block;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+<span
+    class="emotion-0"
+  >
+    dropcap with logical props
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Subscript renders Subscript 1`] = `
 <DocumentFragment>
   .emotion-0 {

diff --git a/src/typography/__tests__/paragraph.test.tsx b/src/typography/__tests__/paragraph.test.tsx
@@ -69,6 +69,22 @@ describe('Paragraph', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  test('renders with dropCap logical props', () => {
+    const wrapper = renderToFragmentWithTheme(Paragraph, {
+      children: 'dropcap with logical props',
+      dropCap: true,
+      overrides: {
+        dropCap: {
+          paddingInline: 'space020',
+          paddingBlock: 'space020',
+          marginBlock: 'space020',
+          marginInline: 'space020',
+        },
+      },
+    } as ParagraphProps);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   test('does not render dropCap when first children is not plain text', () => {
     const wrapper = renderToFragmentWithTheme(Paragraph, {
       children: (