fix(typo): typo three dots spinner

ZopaPublic · Feb 21, 2023 · 7de9633 · 7de9633
1 parent 579c8af
commit 7de9633
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 3 deletions.
diff --git a/src/components/atoms/Spinner/Spinner.test.tsx b/src/components/atoms/Spinner/Spinner.test.tsx
@@ -26,7 +26,7 @@ describe('<Spinner />', () => {
 describe('<ThreeDotsSpinner />', () => {
   it('renders three dots spinner', async () => {
     const { container } = render(<ThreeDotsSpinner />);
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
     const results = await axe(container.innerHTML);
     expect(results).toHaveNoViolations();
   });

diff --git a/src/components/atoms/Spinner/ThreeDotsSpinner.test.tsx b/src/components/atoms/Spinner/ThreeDotsSpinner.test.tsx
@@ -6,7 +6,7 @@ import ThreeDotsSpinner from './ThreeDotsSpinner';
 describe('<ThreeDotsSpinner />', () => {
   it('renders three dots spinner', async () => {
     const { container } = render(<ThreeDotsSpinner />);
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
     const results = await axe(container.innerHTML);
     expect(results).toHaveNoViolations();
   });

diff --git a/src/components/atoms/Spinner/ThreeDotsSpinner.tsx b/src/components/atoms/Spinner/ThreeDotsSpinner.tsx
@@ -8,7 +8,7 @@ const animateDots = keyframes`
       box-shadow: 0 2.5em 0 -1.3em;
   }
     40% {
-      box-shadow: 0 2.5em 0 0;qq
+      box-shadow: 0 2.5em 0 0;
   }
 `;
 

diff --git a/src/components/atoms/Spinner/__snapshots__/Spinner.test.tsx.snap b/src/components/atoms/Spinner/__snapshots__/Spinner.test.tsx.snap
@@ -26,3 +26,60 @@ exports[`<Spinner /> renders small 1`] = `
   width="20px"
 />
 `;
+
+exports[`<ThreeDotsSpinner /> renders three dots spinner 1`] = `
+.c0 {
+  color: #009E8E;
+  font-size: 6px;
+  margin: 36px auto;
+  position: relative;
+  text-indent: -9999em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+.c0,
+.c0:before,
+.c0:after {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation: iVfUMe 1.8s infinite ease-in-out;
+  animation: iVfUMe 1.8s infinite ease-in-out;
+}
+
+.c0:before {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.c0:after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.c0:before {
+  left: -3.5em;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.c0:after {
+  left: 3.5em;
+  -webkit-animation-delay: 0.64s;
+  animation-delay: 0.64s;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+</div>
+`;
diff --git a/src/components/atoms/Spinner/__snapshots__/ThreeDotsSpinner.test.tsx.snap b/src/components/atoms/Spinner/__snapshots__/ThreeDotsSpinner.test.tsx.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ThreeDotsSpinner /> renders three dots spinner 1`] = `
+.c0 {
+  color: #009E8E;
+  font-size: 6px;
+  margin: 36px auto;
+  position: relative;
+  text-indent: -9999em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+.c0,
+.c0:before,
+.c0:after {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation: iVfUMe 1.8s infinite ease-in-out;
+  animation: iVfUMe 1.8s infinite ease-in-out;
+}
+
+.c0:before {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.c0:after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.c0:before {
+  left: -3.5em;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.c0:after {
+  left: 3.5em;
+  -webkit-animation-delay: 0.64s;
+  animation-delay: 0.64s;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+</div>
+`;