Upgrade react-markdown

client/package.json

@@ -60,7 +60,7 @@
     "react-dom": "^16.14.0",
     "react-ga": "2.7.0",
     "react-hot-loader": "^4.13.0",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "6.0.3",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-test-renderer": "16.13.1",

client/src/components/Lobby/Announcements.js

@@ -38,10 +38,9 @@ function Announcements() {
 
   return (
     <Paper className={classes.root}>
-      <ReactMarkdown
-        linkTarget="_blank"
-        source={announcements}
-      />
+      <ReactMarkdown linkTarget="_blank">
+        {announcements}
+      </ReactMarkdown>
     </Paper>
   );
 }

client/src/components/Lobby/Announcements.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import Announcements from './Announcements';
+import { lcFetch } from '../../lib/fetch';
+
+jest.mock('../../lib/fetch', () => ({
+  lcFetch: jest.fn(),
+}));
+
+const flushPromises = () => new Promise((resolve) => setImmediate(resolve));
+
+describe('Announcements', () => {
+  beforeEach(() => {
+    lcFetch.mockReset();
+  });
+
+  it('renders markdown announcements', async () => {
+    lcFetch.mockResolvedValue({
+      ok: true,
+      text: jest.fn().mockResolvedValue('[Docs](https://example.com)'),
+    });
+
+    let wrapper;
+
+    await act(async () => {
+      wrapper = mount(<Announcements />);
+      await flushPromises();
+    });
+
+    wrapper.update();
+
+    const link = wrapper.find('a').first();
+
+    expect(link.text()).toEqual('Docs');
+    expect(link.prop('href')).toEqual('https://example.com');
+    expect(link.prop('target')).toEqual('_blank');
+  });
+});

cypress/e2e/local_stack.cy.js

@@ -22,6 +22,17 @@ describe('local app stack', () => {
     });
   });
 
+  it('renders markdown announcements in the lobby', () => {
+    cy.intercept('GET', '**/api/announcements', '[Docs](https://example.com)').as('announcements');
+
+    cy.visit('/');
+    cy.wait('@announcements');
+
+    cy.contains('a', 'Docs')
+      .should('have.attr', 'href', 'https://example.com')
+      .and('have.attr', 'target', '_blank');
+  });
+
   it('logs in and exposes the test user through the API', () => {
     login();