FE-792 Add Stack component tests

SparkPost · Jan 3, 2020 · 668474b · 668474b
1 parent fc3b1d2
commit 668474b
Show file tree

Hide file tree

Showing 2 changed files with 149 additions and 2 deletions.
diff --git a/packages/matchbox/src/components/Stack/tests/Stack.test.js b/packages/matchbox/src/components/Stack/tests/Stack.test.js
@@ -3,8 +3,26 @@ import Stack from '../Stack';
 import 'jest-styled-components';
 
 describe('Stack', () => {
-  it('it should render correctly', () => {
-    const wrapper = global.renderStyled(<Stack>Just a Stack</Stack>);
+  it('it should render defaults correctly', () => {
+    const wrapper = global.renderStyled(<Stack><div>1</div><div>2</div></Stack>);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('it should render with align and space props', () => {
+    const wrapper = global.renderStyled(
+      <Stack align='right' space='500'>
+        <div>1</div><div>2</div>
+      </Stack>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('it should render with align responsive props', () => {
+    const wrapper = global.renderStyled(
+      <Stack align={['center', 'left']}>
+        <div>1</div>
+      </Stack>
+    );
     expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/packages/matchbox/src/components/Stack/tests/__snapshots__/Stack.test.js.snap b/packages/matchbox/src/components/Stack/tests/__snapshots__/Stack.test.js.snap
@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stack it should render defaults correctly 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding-bottom: 400;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+<div>
+  <div
+    class="c0"
+    display="flex"
+  >
+    <div>
+      1
+    </div>
+  </div>
+  <div
+    class="c1"
+    display="flex"
+  >
+    <div>
+      2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stack it should render with align and space props 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  padding-bottom: 500;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+<div>
+  <div
+    class="c0"
+    display="flex"
+  >
+    <div>
+      1
+    </div>
+  </div>
+  <div
+    class="c1"
+    display="flex"
+  >
+    <div>
+      2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stack it should render with align responsive props 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+@media screen and (min-width:40em) {
+  .c0 {
+    -webkit-align-items: flex-start;
+    -webkit-box-align: flex-start;
+    -ms-flex-align: flex-start;
+    align-items: flex-start;
+  }
+}
+
+<div>
+  <div
+    class="c0"
+    display="flex"
+  >
+    <div>
+      1
+    </div>
+  </div>
+</div>
+`;