[next] Auth Popup v2 (#2101)

* feat: Implement new Sign In view

* feat: Move forgot + resetPassword to new design

* feat: Implement sign up with new design

* fix: narrow gutter

* test: add unit tests

* test: integration tests

* feat: support show / hide password

* feat: support oauth2 flow

* feat: add views for user completion

* feat: implement oauth2 sign up

* test: fix snapshots

* fix: lint

* fix: get more complete mutation response

* fix: removed array of OIDC integrations

* fix: renamed resolver function

* fix: adapt oidc client implementation

* fix: targetFilter should be stream on signup

* fix: removed unneeded message

* fix: moved password into local profile

* fix: made username optional, removed valid null value

* fix: linting

* fix: respect targetFilter

* feat: support user registration mutations

- Added `setUsername`
- Added `setEmail`
- Added `setPassword`
- Added `permit` to `@auth`
- Added `email` to `User`

* fix: fixed issue with query

* feat: added user password update

* feat: complete sign in mutation

* fix: adapt some rebasing gitches

* test: improve tests

* test: unittest for setting auth token

* fix: failing tests

* test: move most tests from enzyme to react-test-renderer

* fix: remove schema warnings in tests

* test: improve window mock

* test: test different social login configurations

* test: test social logins for sign up

* fix: use htmlFor instead of for

* test: more feature tests

* feat: always go through account completion

* test: feature test account completion

* feat: addtional account completion test

* Update start.ts

* chore: refactor auth token retrieval logic

src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof ButtonsBar> = {
     children: "children",
   };
-  const wrapper = shallow(<ButtonsBar {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ButtonsBar {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/Comment.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -15,6 +15,7 @@ it("renders username and body", () => {
     footer: "footer",
     showEditedMarker: true,
   };
-  const wrapper = shallow(<Comment {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Comment {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/EditedMarker.spec.tsx

@@ -1,9 +1,10 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import EditedMarker from "./EditedMarker";
 
 it("renders correctly", () => {
-  const wrapper = shallow(<EditedMarker />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<EditedMarker />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof InReplyTo> = {
     username: "Username",
   };
-  const wrapper = shallow(<InReplyTo {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<InReplyTo {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/IndentedComment.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -12,6 +12,7 @@ it("renders correctly", () => {
     body: "Woof",
     createdAt: "1995-12-17T03:24:00.000Z",
   };
-  const wrapper = shallow(<IndentedComment {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<IndentedComment {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/ReplyButton.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -12,6 +12,7 @@ it("renders correctly", () => {
     onClick: noop,
     active: true,
   };
-  const wrapper = shallow(<ReplyButton {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ReplyButton {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -12,6 +12,7 @@ it("renders correctly", () => {
     onClick: noop,
     href: "http://localhost/comment",
   };
-  const wrapper = shallow(<ShowConversationLink {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ShowConversationLink {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/CommentsPane.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,14 +9,16 @@ it("renders stream", () => {
   const props: PropTypesOf<typeof CommentsPane> = {
     showPermalinkView: false,
   };
-  const wrapper = shallow(<CommentsPane {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentsPane {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders permalink view", () => {
   const props: PropTypesOf<typeof CommentsPane> = {
     showPermalinkView: true,
   };
-  const wrapper = shallow(<CommentsPane {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentsPane {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/ConversationThread.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -27,8 +27,9 @@ describe("with 2 remaining parent comments", () => {
         username: "parentAuthor",
       },
     };
-    const wrapper = shallow(<ConversationThreadN {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const renderer = createRenderer();
+    renderer.render(<ConversationThreadN {...props} />);
+    expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
   it("renders with disabled load more", () => {
     const props: PropTypesOf<typeof ConversationThreadN> = {
@@ -47,8 +48,9 @@ describe("with 2 remaining parent comments", () => {
         username: "parentAuthor",
       },
     };
-    const wrapper = shallow(<ConversationThreadN {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const renderer = createRenderer();
+    renderer.render(<ConversationThreadN {...props} />);
+    expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
 });
 
@@ -65,6 +67,7 @@ it("renders with no parent comments", () => {
     parents: [],
     rootParent: null,
   };
-  const wrapper = shallow(<ConversationThreadN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ConversationThreadN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Indent.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,8 +9,9 @@ it("renders level0", () => {
   const props: PropTypesOf<typeof Indent> = {
     children: <div>Hello World</div>,
   };
-  const wrapper = shallow(<Indent {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Indent {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders level1", () => {
@@ -18,8 +19,9 @@ it("renders level1", () => {
     level: 1,
     children: <div>Hello World</div>,
   };
-  const wrapper = shallow(<Indent {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Indent {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders without border", () => {
@@ -28,6 +30,7 @@ it("renders without border", () => {
     noBorder: true,
     children: <div>Hello World</div>,
   };
-  const wrapper = shallow(<Indent {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Indent {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/PermalinkView.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -18,8 +18,9 @@ it("renders correctly", () => {
     showAllCommentsHref: "http://localhost/link",
     onShowAllComments: noop,
   };
-  const wrapper = shallow(<PermalinkViewN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<PermalinkViewN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders comment not found", () => {
@@ -31,6 +32,7 @@ it("renders comment not found", () => {
     showAllCommentsHref: "http://localhost/link",
     onShowAllComments: noop,
   };
-  const wrapper = shallow(<PermalinkViewN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<PermalinkViewN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/PostCommentFormFake.spec.tsx

@@ -1,9 +1,10 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import PostCommentFormFake from "./PostCommentFormFake";
 
 it("renders correctly", () => {
-  const wrapper = shallow(<PostCommentFormFake />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<PostCommentFormFake />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/PoweredBy.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof PoweredBy> = {
     className: "custom",
   };
-  const wrapper = shallow(<PoweredBy {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<PoweredBy {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/RTE.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -11,6 +11,7 @@ it("renders correctly", () => {
     placeholder: "Post a comment",
     value: "Hello world",
   };
-  const wrapper = shallow(<RTE {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<RTE {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/ReplyTo.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof ReplyTo> = {
     username: "ParentAuthor",
   };
-  const wrapper = shallow(<ReplyTo {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ReplyTo {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Timeline/Circle.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -11,6 +11,7 @@ it("renders correctly", () => {
     hollow: true,
     end: true,
   };
-  const wrapper = shallow(<Circle {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Circle {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Timeline/Line.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -10,6 +10,7 @@ it("renders correctly", () => {
     className: "root",
     dotted: true,
   };
-  const wrapper = shallow(<Line {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Line {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -44,8 +44,9 @@ it("renders username and body", () => {
     disableReplies: false,
   };
 
-  const wrapper = shallow(<CommentContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders body only", () => {
@@ -80,8 +81,9 @@ it("renders body only", () => {
     setCommentID: noop as any,
   };
 
-  const wrapper = shallow(<CommentContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("hide reply button", () => {
@@ -118,8 +120,9 @@ it("hide reply button", () => {
     disableReplies: true,
   };
 
-  const wrapper = shallow(<CommentContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("shows conversation link", () => {
@@ -158,8 +161,9 @@ it("shows conversation link", () => {
     showConversationLink: true,
   };
 
-  const wrapper = shallow(<CommentContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders in reply to", () => {
@@ -200,6 +204,7 @@ it("renders in reply to", () => {
     disableReplies: false,
   };
 
-  const wrapper = shallow(<CommentContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.spec.tsx

@@ -1,6 +1,7 @@
 import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
@@ -36,10 +37,10 @@ it("renders correctly", async () => {
     autofocus: false,
   };
 
-  const wrapper = shallow(<ReplyCommentFormContainerN {...props} />);
+  const renderer = createRenderer();
+  renderer.render(<ReplyCommentFormContainerN {...props} />);
   await timeout();
-  wrapper.update();
-  expect(wrapper).toMatchSnapshot();
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders with initialValues", async () => {
@@ -66,10 +67,10 @@ it("renders with initialValues", async () => {
     "Hello World!"
   );
 
-  const wrapper = shallow(<ReplyCommentFormContainerN {...props} />);
+  const renderer = createRenderer();
+  renderer.render(<ReplyCommentFormContainerN {...props} />);
   await timeout();
-  wrapper.update();
-  expect(wrapper).toMatchSnapshot();
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("save values", async () => {

src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { render } from "./PermalinkViewQuery";
 
@@ -11,8 +11,9 @@ it("renders permalink view container", () => {
     } as any,
     error: null,
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders loading", () => {
@@ -20,8 +21,9 @@ it("renders loading", () => {
     props: null,
     error: null,
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders error", () => {
@@ -29,6 +31,7 @@ it("renders error", () => {
     props: null,
     error: new Error("error"),
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/queries/StreamQuery.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { render } from "./StreamQuery";
 
@@ -10,8 +10,9 @@ it("renders stream container", () => {
     } as any,
     error: null,
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders loading", () => {
@@ -19,8 +20,9 @@ it("renders loading", () => {
     props: null,
     error: null,
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders error", () => {
@@ -28,6 +30,7 @@ it("renders error", () => {
     props: null,
     error: new Error("error"),
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/profile/components/CommentHistory.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -17,8 +17,9 @@ it("renders correctly", () => {
     hasMore: false,
     disableLoadMore: false,
   };
-  const wrapper = shallow(<CommentHistoryN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentHistoryN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 describe("has more", () => {
@@ -30,8 +31,9 @@ describe("has more", () => {
       hasMore: true,
       disableLoadMore: false,
     };
-    const wrapper = shallow(<CommentHistoryN {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const renderer = createRenderer();
+    renderer.render(<CommentHistoryN {...props} />);
+    expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
   it("disables load more", () => {
     const props: PropTypesOf<typeof CommentHistoryN> = {
@@ -41,7 +43,8 @@ describe("has more", () => {
       hasMore: true,
       disableLoadMore: true,
     };
-    const wrapper = shallow(<CommentHistoryN {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const renderer = createRenderer();
+    renderer.render(<CommentHistoryN {...props} />);
+    expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
 });

src/core/client/stream/tabs/profile/components/HistoryComment.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -22,6 +22,7 @@ it("renders correctly", () => {
     conversationURL: "http://localhost/conversation",
     onGotoConversation: noop,
   };
-  const wrapper = shallow(<HistoryCommentN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<HistoryCommentN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/profile/components/Profile.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -14,6 +14,7 @@ it("renders correctly", () => {
     me: {},
     settings: {},
   };
-  const wrapper = shallow(<ProfileN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ProfileN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/profile/components/__snapshots__/CommentHistory.spec.tsx.snap

@@ -19,7 +19,6 @@ exports[`has more disables load more 1`] = `
         "id": "comment-1",
       }
     }
-    key="comment-1"
     story={Object {}}
   />
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -28,7 +27,6 @@ exports[`has more disables load more 1`] = `
         "id": "comment-2",
       }
     }
-    key="comment-2"
     story={Object {}}
   />
   <Localized
@@ -67,7 +65,6 @@ exports[`has more renders correctly 1`] = `
         "id": "comment-1",
       }
     }
-    key="comment-1"
     story={Object {}}
   />
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -76,7 +73,6 @@ exports[`has more renders correctly 1`] = `
         "id": "comment-2",
       }
     }
-    key="comment-2"
     story={Object {}}
   />
   <Localized
@@ -115,7 +111,6 @@ exports[`renders correctly 1`] = `
         "id": "comment-1",
       }
     }
-    key="comment-1"
     story={Object {}}
   />
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -124,7 +119,6 @@ exports[`renders correctly 1`] = `
         "id": "comment-2",
       }
     }
-    key="comment-2"
     story={Object {}}
   />
 </withPropsOnChange(HorizontalGutter)>