🐛 Fix UpdateMessage Component

src/components/UpdateMessage.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { UpdateMessage } from './index'
+
+describe('UpdateMessage', function () {
+  const original = window.location
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    })
+  })
+
+  afterAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: original,
+    })
+  })
+
+  test('renders correctly when active', function () {
+    const { asFragment } = render(<UpdateMessage update />)
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders nothing when dismissed', function () {
+    const { asFragment } = render(<UpdateMessage update={false} />)
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('triggers reload correctly', function () {
+    render(<UpdateMessage update />)
+
+    expect(
+      screen.findByText('An update is available. Click here to update the App.')
+    )
+
+    screen.getByText('here').click()
+
+    expect(window.location.reload).toHaveBeenCalled()
+  })
+})

src/components/UpdateMessage.tsx

@@ -8,7 +8,7 @@ const Wrapper = styled.div`
   left: ${spacing.normal};
   bottom: ${spacing.normal};
   right: ${spacing.normal};
-  text-aling: center;
+  text-align: center;
   z-index: ${zIndex.updateMessage};
 `
 

src/components/__snapshots__/UpdateMessage.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UpdateMessage renders correctly when active 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-iCfMLu iiqfvg"
+  >
+    <div
+      class="ui yellow negative message"
+    >
+      An update is available. Click 
+      <a
+        class="sc-furwcr enHelU"
+      >
+        here
+      </a>
+       to update the App.
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`UpdateMessage renders nothing when dismissed 1`] = `<DocumentFragment />`;