mirror of
https://github.com/wassname/talk.git
synced 2026-09-11 12:51:33 +08:00
Merge branch 'next' into permalink-i18n-readOnly
This commit is contained in:
Kiwi
@@ -1,7 +1,8 @@
|
||||
/* Here we add global stylings for body and document */
|
||||
:global {
|
||||
body {
|
||||
margin: "0";
|
||||
margin: 0;
|
||||
padding: 2px 8px;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@@ -1,21 +1,25 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly on big screens 1`] = `
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-itemGutter Flex-alignBaseline Flex-directionRow"
|
||||
>
|
||||
<div>
|
||||
Hello World
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
|
||||
>
|
||||
<div>
|
||||
Hello World
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders correctly on small screens 1`] = `
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<div>
|
||||
Hello World
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<div>
|
||||
Hello World
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
.root {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
composes: bodyCopy from "talk-ui/shared/typography.css";
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ export interface PostCommentFormProps {
|
||||
const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
|
||||
<Form onSubmit={props.onSubmit}>
|
||||
{({ handleSubmit, submitting }) => (
|
||||
<form autoComplete="off" onSubmit={handleSubmit}>
|
||||
<form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
|
||||
<Field name="body" validate={required}>
|
||||
{({ input, meta }) => (
|
||||
<div>
|
||||
|
||||
@@ -7,6 +7,7 @@ import { Button, Flex } from "talk-ui/components";
|
||||
import CommentContainer from "../containers/CommentContainer";
|
||||
import PostCommentFormContainer from "../containers/PostCommentFormContainer";
|
||||
import ReplyListContainer from "../containers/ReplyListContainer";
|
||||
import UserBoxContainer from "../containers/UserBoxContainer";
|
||||
import * as styles from "./Stream.css";
|
||||
|
||||
export interface StreamProps {
|
||||
@@ -20,7 +21,8 @@ export interface StreamProps {
|
||||
|
||||
const Stream: StatelessComponent<StreamProps> = props => {
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<Flex className={styles.root} direction="column" itemGutter>
|
||||
<UserBoxContainer />
|
||||
<PostCommentFormContainer assetID={props.assetID} />
|
||||
<Flex
|
||||
direction="column"
|
||||
@@ -50,7 +52,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
|
||||
</Localized>
|
||||
)}
|
||||
</Flex>
|
||||
</div>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
.joinText {
|
||||
margin-right: var(--spacing-unit);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { shallow } from "enzyme";
|
||||
import { noop } from "lodash";
|
||||
import React from "react";
|
||||
|
||||
import { PropTypesOf } from "talk-framework/types";
|
||||
|
||||
import UserBoxUnauthenticated from "./UserBoxUnauthenticated";
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<typeof UserBoxUnauthenticated> = {
|
||||
onSignIn: noop,
|
||||
onRegister: noop,
|
||||
};
|
||||
const wrapper = shallow(<UserBoxUnauthenticated {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { StatelessComponent } from "react";
|
||||
|
||||
import { Button, Flex, Typography } from "talk-ui/components";
|
||||
|
||||
import * as styles from "./UserBoxUnauthenticated.css";
|
||||
|
||||
export interface UserBoxUnauthenticatedProps {
|
||||
onSignIn: () => void;
|
||||
onRegister: () => void;
|
||||
}
|
||||
|
||||
const UserBoxUnauthenticated: StatelessComponent<
|
||||
UserBoxUnauthenticatedProps
|
||||
> = props => {
|
||||
return (
|
||||
<Flex>
|
||||
<Localized id="comments-userBoxUnauthenticated-joinTheConversation">
|
||||
<Typography
|
||||
className={styles.joinText}
|
||||
variant="bodyCopyBold"
|
||||
component="span"
|
||||
>
|
||||
Join the conversation
|
||||
</Typography>
|
||||
</Localized>
|
||||
<Typography variant="bodyCopyBold" component="span">
|
||||
|
|
||||
</Typography>
|
||||
<Localized id="comments-userBoxUnauthenticated-signIn">
|
||||
<Button color="primary" size="small" onClick={props.onSignIn}>
|
||||
Sign in
|
||||
</Button>
|
||||
</Localized>
|
||||
<Localized id="comments-userBoxUnauthenticated-register">
|
||||
<Button
|
||||
color="primary"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
onClick={props.onRegister}
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</Localized>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserBoxUnauthenticated;
|
||||
@@ -1,9 +1,12 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<div
|
||||
<withPropsOnChange(Flex)
|
||||
className="Stream-root"
|
||||
direction="column"
|
||||
itemGutter={true}
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
|
||||
<withContext(createMutationContainer(PostCommentFormContainer))
|
||||
assetID="asset-id"
|
||||
/>
|
||||
@@ -55,13 +58,16 @@ exports[`renders correctly 1`] = `
|
||||
/>
|
||||
</withPropsOnChange(Flex)>
|
||||
</withPropsOnChange(Flex)>
|
||||
</div>
|
||||
</withPropsOnChange(Flex)>
|
||||
`;
|
||||
|
||||
exports[`when there is more disables load more button 1`] = `
|
||||
<div
|
||||
<withPropsOnChange(Flex)
|
||||
className="Stream-root"
|
||||
direction="column"
|
||||
itemGutter={true}
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
|
||||
<withContext(createMutationContainer(PostCommentFormContainer))
|
||||
assetID="asset-id"
|
||||
/>
|
||||
@@ -127,13 +133,16 @@ exports[`when there is more disables load more button 1`] = `
|
||||
</withPropsOnChange(Button)>
|
||||
</Localized>
|
||||
</withPropsOnChange(Flex)>
|
||||
</div>
|
||||
</withPropsOnChange(Flex)>
|
||||
`;
|
||||
|
||||
exports[`when there is more renders a load more button 1`] = `
|
||||
<div
|
||||
<withPropsOnChange(Flex)
|
||||
className="Stream-root"
|
||||
direction="column"
|
||||
itemGutter={true}
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
|
||||
<withContext(createMutationContainer(PostCommentFormContainer))
|
||||
assetID="asset-id"
|
||||
/>
|
||||
@@ -199,5 +208,5 @@ exports[`when there is more renders a load more button 1`] = `
|
||||
</withPropsOnChange(Button)>
|
||||
</Localized>
|
||||
</withPropsOnChange(Flex)>
|
||||
</div>
|
||||
</withPropsOnChange(Flex)>
|
||||
`;
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<withPropsOnChange(Flex)>
|
||||
<Localized
|
||||
id="comments-userBoxUnauthenticated-joinTheConversation"
|
||||
>
|
||||
<withPropsOnChange(Typography)
|
||||
className="UserBoxUnauthenticated-joinText"
|
||||
component="span"
|
||||
variant="bodyCopyBold"
|
||||
>
|
||||
Join the conversation
|
||||
</withPropsOnChange(Typography)>
|
||||
</Localized>
|
||||
<withPropsOnChange(Typography)
|
||||
component="span"
|
||||
variant="bodyCopyBold"
|
||||
>
|
||||
|
|
||||
</withPropsOnChange(Typography)>
|
||||
<Localized
|
||||
id="comments-userBoxUnauthenticated-signIn"
|
||||
>
|
||||
<withPropsOnChange(Button)
|
||||
color="primary"
|
||||
onClick={[Function]}
|
||||
size="small"
|
||||
>
|
||||
Sign in
|
||||
</withPropsOnChange(Button)>
|
||||
</Localized>
|
||||
<Localized
|
||||
id="comments-userBoxUnauthenticated-register"
|
||||
>
|
||||
<withPropsOnChange(Button)
|
||||
color="primary"
|
||||
onClick={[Function]}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
>
|
||||
Register
|
||||
</withPropsOnChange(Button)>
|
||||
</Localized>
|
||||
</withPropsOnChange(Flex)>
|
||||
`;
|
||||
@@ -0,0 +1,24 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
|
||||
import { PropTypesOf } from "talk-framework/types";
|
||||
|
||||
import { UserBoxContainer } from "./UserBoxContainer";
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<UserBoxContainer> = {
|
||||
local: {
|
||||
authPopup: {
|
||||
open: false,
|
||||
focus: false,
|
||||
view: "SIGN_IN",
|
||||
},
|
||||
},
|
||||
// tslint:disable-next-line:no-empty
|
||||
showAuthPopup: async () => {},
|
||||
// tslint:disable-next-line:no-empty
|
||||
setAuthPopupState: async () => {},
|
||||
};
|
||||
const wrapper = shallow(<UserBoxContainer {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,72 @@
|
||||
import * as React from "react";
|
||||
import { Component } from "react";
|
||||
|
||||
import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
|
||||
import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql";
|
||||
import {
|
||||
SetAuthPopupStateMutation,
|
||||
ShowAuthPopupMutation,
|
||||
withSetAuthPopupStateMutation,
|
||||
withShowAuthPopupMutation,
|
||||
} from "talk-stream/mutations";
|
||||
import { Popup } from "talk-ui/components";
|
||||
|
||||
import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
|
||||
|
||||
interface InnerProps {
|
||||
local: Local;
|
||||
showAuthPopup: ShowAuthPopupMutation;
|
||||
setAuthPopupState: SetAuthPopupStateMutation;
|
||||
}
|
||||
|
||||
export class UserBoxContainer extends Component<InnerProps> {
|
||||
private handleFocus = () => this.props.setAuthPopupState({ focus: true });
|
||||
private handleBlur = () => this.props.setAuthPopupState({ focus: false });
|
||||
private handleClose = () => this.props.setAuthPopupState({ open: false });
|
||||
private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
|
||||
private handleRegister = () => this.props.showAuthPopup({ view: "SIGN_UP" });
|
||||
|
||||
public render() {
|
||||
const {
|
||||
local: {
|
||||
authPopup: { open, focus, view },
|
||||
},
|
||||
} = this.props;
|
||||
return (
|
||||
<>
|
||||
<Popup
|
||||
href={`/auth.html?view=${view}`}
|
||||
title="Talk Auth"
|
||||
features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
|
||||
open={open}
|
||||
focus={focus}
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
onClose={this.handleClose}
|
||||
/>
|
||||
<UserBoxUnauthenticated
|
||||
onSignIn={this.handleSignIn}
|
||||
onRegister={this.handleRegister}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const enhanced = withSetAuthPopupStateMutation(
|
||||
withShowAuthPopupMutation(
|
||||
withLocalStateContainer<Local>(
|
||||
graphql`
|
||||
fragment UserBoxContainerLocal on Local {
|
||||
authPopup {
|
||||
open
|
||||
focus
|
||||
view
|
||||
}
|
||||
}
|
||||
`
|
||||
)(UserBoxContainer)
|
||||
)
|
||||
);
|
||||
|
||||
export default enhanced;
|
||||
@@ -0,0 +1,20 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<React.Fragment>
|
||||
<Popup
|
||||
features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
|
||||
focus={false}
|
||||
href="/auth.html?view=SIGN_IN"
|
||||
onBlur={[Function]}
|
||||
onClose={[Function]}
|
||||
onFocus={[Function]}
|
||||
open={false}
|
||||
title="Talk Auth"
|
||||
/>
|
||||
<UserBoxUnauthenticated
|
||||
onRegister={[Function]}
|
||||
onSignIn={[Function]}
|
||||
/>
|
||||
</React.Fragment>
|
||||
`;
|
||||
@@ -0,0 +1,35 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`init local state 1`] = `
|
||||
"{
|
||||
\\"client:root\\": {
|
||||
\\"__id\\": \\"client:root\\",
|
||||
\\"__typename\\": \\"__Root\\",
|
||||
\\"local\\": {
|
||||
\\"__ref\\": \\"client:root.local\\"
|
||||
}
|
||||
},
|
||||
\\"client:root.local\\": {
|
||||
\\"__id\\": \\"client:root.local\\",
|
||||
\\"__typename\\": \\"Local\\",
|
||||
\\"network\\": {
|
||||
\\"__ref\\": \\"client:root.local.network\\"
|
||||
},
|
||||
\\"authPopup\\": {
|
||||
\\"__ref\\": \\"client:root.local.authPopup\\"
|
||||
}
|
||||
},
|
||||
\\"client:root.local.network\\": {
|
||||
\\"__id\\": \\"client:root.local.network\\",
|
||||
\\"__typename\\": \\"Network\\",
|
||||
\\"isOffline\\": false
|
||||
},
|
||||
\\"client:root.local.authPopup\\": {
|
||||
\\"__id\\": \\"client:root.local.authPopup\\",
|
||||
\\"__typename\\": \\"AuthPopup\\",
|
||||
\\"open\\": false,
|
||||
\\"focus\\": false,
|
||||
\\"href\\": \\"\\"
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -4,3 +4,6 @@
|
||||
|
||||
export const NETWORK_TYPE = "Network";
|
||||
export const NETWORK_ID = "client:root.local.network";
|
||||
|
||||
export const AUTH_POPUP_TYPE = "AuthPopup";
|
||||
export const AUTH_POPUP_ID = "client:root.local.authPopup";
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Environment, RecordSource } from "relay-runtime";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { LOCAL_ID } from "talk-framework/lib/relay";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
|
||||
import initLocalState from "./initLocalState";
|
||||
|
||||
let environment: Environment;
|
||||
let source: RecordSource;
|
||||
|
||||
beforeEach(() => {
|
||||
source = new RecordSource();
|
||||
environment = createRelayEnvironment({
|
||||
source,
|
||||
initLocalState: false,
|
||||
});
|
||||
});
|
||||
|
||||
it("init local state", async () => {
|
||||
initLocalState(environment);
|
||||
await timeout();
|
||||
expect(JSON.stringify(source.toJSON(), null, 2)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("set assetID from query", () => {
|
||||
const assetID = "asset-id";
|
||||
const previousLocation = location.toString();
|
||||
const previousState = window.history.state;
|
||||
window.history.replaceState(
|
||||
previousState,
|
||||
document.title,
|
||||
`http://localhost/?assetID=${assetID}`
|
||||
);
|
||||
initLocalState(environment);
|
||||
expect(source.get(LOCAL_ID)!.assetID).toBe(assetID);
|
||||
window.history.replaceState(previousState, document.title, previousLocation);
|
||||
});
|
||||
|
||||
it("set commentID from query", () => {
|
||||
const commentID = "comment-id";
|
||||
const previousLocation = location.toString();
|
||||
const previousState = window.history.state;
|
||||
window.history.replaceState(
|
||||
previousState,
|
||||
document.title,
|
||||
`http://localhost/?commentID=${commentID}`
|
||||
);
|
||||
initLocalState(environment);
|
||||
expect(source.get(LOCAL_ID)!.commentID).toBe(commentID);
|
||||
window.history.replaceState(previousState, document.title, previousLocation);
|
||||
});
|
||||
@@ -7,7 +7,12 @@ import {
|
||||
LOCAL_TYPE,
|
||||
} from "talk-framework/lib/relay";
|
||||
|
||||
import { NETWORK_ID, NETWORK_TYPE } from "./constants";
|
||||
import {
|
||||
AUTH_POPUP_ID,
|
||||
AUTH_POPUP_TYPE,
|
||||
NETWORK_ID,
|
||||
NETWORK_TYPE,
|
||||
} from "./constants";
|
||||
|
||||
/**
|
||||
* Initializes the local state, before we start the App.
|
||||
@@ -18,6 +23,7 @@ export default async function initLocalState(environment: Environment) {
|
||||
|
||||
// Create the Local Record which is the Root for the client states.
|
||||
const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
|
||||
root.setLinkedRecord(localRecord, "local");
|
||||
|
||||
// Parse query params
|
||||
const query = qs.parse(location.search);
|
||||
@@ -47,6 +53,17 @@ export default async function initLocalState(environment: Environment) {
|
||||
);
|
||||
networkRecord.setValue(false, "isOffline");
|
||||
localRecord.setLinkedRecord(networkRecord, "network");
|
||||
root.setLinkedRecord(localRecord, "local");
|
||||
|
||||
// Create authPopup Record
|
||||
const authPopupRecord = createAndRetain(
|
||||
environment,
|
||||
s,
|
||||
AUTH_POPUP_ID,
|
||||
AUTH_POPUP_TYPE
|
||||
);
|
||||
authPopupRecord.setValue(false, "open");
|
||||
authPopupRecord.setValue(false, "focus");
|
||||
authPopupRecord.setValue("", "href");
|
||||
localRecord.setLinkedRecord(authPopupRecord, "authPopup");
|
||||
});
|
||||
}
|
||||
|
||||
@@ -3,11 +3,24 @@ type Network {
|
||||
isOffline: Boolean!
|
||||
}
|
||||
|
||||
enum View {
|
||||
SIGN_UP
|
||||
SIGN_IN
|
||||
FORGOT_PASSWORD
|
||||
}
|
||||
|
||||
type AuthPopup {
|
||||
open: Boolean!
|
||||
focus: Boolean!
|
||||
view: View
|
||||
}
|
||||
|
||||
type Local {
|
||||
network: Network!
|
||||
assetID: String
|
||||
commentID: String
|
||||
assetURL: String
|
||||
commentID: String
|
||||
authPopup: AuthPopup!
|
||||
}
|
||||
|
||||
extend type Query {
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Environment, RecordSource } from "relay-runtime";
|
||||
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
|
||||
import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "../local";
|
||||
import { commit } from "./SetAuthPopupStateMutation";
|
||||
|
||||
let environment: Environment;
|
||||
const source: RecordSource = new RecordSource();
|
||||
|
||||
beforeAll(() => {
|
||||
environment = createRelayEnvironment({
|
||||
source,
|
||||
initLocalState: (localRecord, sourceProxy) => {
|
||||
const record = sourceProxy.create(AUTH_POPUP_ID, AUTH_POPUP_TYPE);
|
||||
record.setValue(false, "open");
|
||||
record.setValue(false, "focus");
|
||||
localRecord.setLinkedRecord(record, "authPopup");
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("sets state", () => {
|
||||
commit(environment, { open: true, focus: false });
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(false);
|
||||
});
|
||||
|
||||
it("sets state", () => {
|
||||
commit(environment, {
|
||||
open: false,
|
||||
focus: true,
|
||||
href: "https://coralproject.net",
|
||||
});
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(false);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.href).toEqual("https://coralproject.net");
|
||||
});
|
||||
|
||||
it("keep previous state", () => {
|
||||
commit(environment, { open: false, focus: true });
|
||||
commit(environment, {});
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(false);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
|
||||
});
|
||||
|
||||
it("change only one", () => {
|
||||
commit(environment, { open: false, focus: true });
|
||||
commit(environment, { open: true });
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
import { commitLocalUpdate, Environment } from "relay-runtime";
|
||||
|
||||
import { createMutationContainer } from "talk-framework/lib/relay";
|
||||
|
||||
import { AUTH_POPUP_ID } from "../local";
|
||||
|
||||
export interface SetAuthPopupStateInput {
|
||||
open?: boolean;
|
||||
focus?: boolean;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
export type SetAuthPopupStateMutation = (
|
||||
input: SetAuthPopupStateInput
|
||||
) => Promise<void>;
|
||||
|
||||
export async function commit(
|
||||
environment: Environment,
|
||||
input: SetAuthPopupStateInput
|
||||
) {
|
||||
return commitLocalUpdate(environment, store => {
|
||||
const record = store.get(AUTH_POPUP_ID)!;
|
||||
if (input.open !== undefined) {
|
||||
record.setValue(input.open, "open");
|
||||
}
|
||||
if (input.focus !== undefined) {
|
||||
record.setValue(input.focus, "focus");
|
||||
}
|
||||
if (input.href !== undefined) {
|
||||
record.setValue(input.href, "href");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export const withSetAuthPopupStateMutation = createMutationContainer(
|
||||
"setAuthPopupState",
|
||||
commit
|
||||
);
|
||||
@@ -3,7 +3,6 @@ import { Environment, RecordSource } from "relay-runtime";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
|
||||
import { NETWORK_ID, NETWORK_TYPE } from "../local";
|
||||
|
||||
import { commit } from "./SetNetworkStatusMutation";
|
||||
|
||||
let environment: Environment;
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Environment, RecordSource } from "relay-runtime";
|
||||
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
|
||||
import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "../local";
|
||||
import { commit } from "./ShowAuthPopupMutation";
|
||||
|
||||
let environment: Environment;
|
||||
const source: RecordSource = new RecordSource();
|
||||
|
||||
beforeAll(() => {
|
||||
environment = createRelayEnvironment({
|
||||
source,
|
||||
initLocalState: (localRecord, sourceProxy) => {
|
||||
const record = sourceProxy.create(AUTH_POPUP_ID, AUTH_POPUP_TYPE);
|
||||
record.setValue(false, "open");
|
||||
record.setValue(false, "focus");
|
||||
localRecord.setLinkedRecord(record, "authPopup");
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("opens popup", () => {
|
||||
commit(environment, { view: "SIGN_IN" });
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(false);
|
||||
expect(source.get(AUTH_POPUP_ID)!.view).toEqual("SIGN_IN");
|
||||
});
|
||||
|
||||
it("focuses popup", () => {
|
||||
commit(environment, { view: "SIGN_IN" });
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.view).toEqual("SIGN_IN");
|
||||
});
|
||||
|
||||
it("only change view when opened and focused", () => {
|
||||
commit(environment, { view: "FORGOT_PASSWORD" });
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.view).toEqual("FORGOT_PASSWORD");
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
import { commitLocalUpdate, Environment } from "relay-runtime";
|
||||
|
||||
import { createMutationContainer } from "talk-framework/lib/relay";
|
||||
|
||||
import { AUTH_POPUP_ID } from "../local";
|
||||
|
||||
export interface ShowAuthPopupInput {
|
||||
view: "SIGN_IN" | "SIGN_UP" | "FORGOT_PASSWORD";
|
||||
}
|
||||
|
||||
export type ShowAuthPopupMutation = (
|
||||
input: ShowAuthPopupInput
|
||||
) => Promise<void>;
|
||||
|
||||
export async function commit(
|
||||
environment: Environment,
|
||||
input: ShowAuthPopupInput
|
||||
) {
|
||||
return commitLocalUpdate(environment, store => {
|
||||
const record = store.get(AUTH_POPUP_ID)!;
|
||||
record.setValue(input.view, "view");
|
||||
if (!record.getValue("open")) {
|
||||
record.setValue(true, "open");
|
||||
return;
|
||||
}
|
||||
if (!record.getValue("focus")) {
|
||||
record.setValue(true, "focus");
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export const withShowAuthPopupMutation = createMutationContainer(
|
||||
"showAuthPopup",
|
||||
commit
|
||||
);
|
||||
@@ -13,3 +13,11 @@ export {
|
||||
SetCommentIDMutation,
|
||||
SetCommentIDInput,
|
||||
} from "./SetCommentIDMutation";
|
||||
export {
|
||||
withShowAuthPopupMutation,
|
||||
ShowAuthPopupMutation,
|
||||
} from "./ShowAuthPopupMutation";
|
||||
export {
|
||||
withSetAuthPopupStateMutation,
|
||||
SetAuthPopupStateMutation,
|
||||
} from "./SetAuthPopupStateMutation";
|
||||
|
||||
@@ -1,141 +1,200 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`loads more comments 1`] = `
|
||||
<div
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<form
|
||||
autoComplete="off"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-wrap Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
|
||||
>
|
||||
Markus
|
||||
Join the conversation
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Isabelle
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:14:00.000Z"
|
||||
title="2018-07-06T18:14:00.000Z"
|
||||
>
|
||||
2018-07-06T18:14:00.000Z
|
||||
</time>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Hey!
|
||||
</p>
|
||||
</form>
|
||||
<div>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Isabelle
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:14:00.000Z"
|
||||
title="2018-07-06T18:14:00.000Z"
|
||||
>
|
||||
2018-07-06T18:14:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Hey!
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,126 +203,181 @@ exports[`loads more comments 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders comment stream 1`] = `
|
||||
<div
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<form
|
||||
autoComplete="off"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-wrap Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
|
||||
>
|
||||
Markus
|
||||
Join the conversation
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
Lukas
|
||||
|
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
aria-controls="talk-comments-stream-log"
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
|
||||
disabled={false}
|
||||
id="talk-comments-stream-loadMore"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Load More
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
aria-controls="talk-comments-stream-log"
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
|
||||
disabled={false}
|
||||
id="talk-comments-stream-loadMore"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Load More
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,57 +1,63 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders permalink view 1`] = `
|
||||
<div
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="PermalinkView-root"
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<a
|
||||
className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
|
||||
href="http://localhost/"
|
||||
id="talk-comments-permalinkView-showAllComments"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
target="_parent"
|
||||
>
|
||||
Show all Comments
|
||||
</a>
|
||||
<div
|
||||
className="Flex-root Flex-alignFlexStart Flex-directionColumn"
|
||||
className="PermalinkView-root"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
<a
|
||||
className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
|
||||
href="http://localhost/"
|
||||
id="talk-comments-permalinkView-showAllComments"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
target="_parent"
|
||||
>
|
||||
Show all Comments
|
||||
</a>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,77 +65,128 @@ exports[`renders permalink view 1`] = `
|
||||
`;
|
||||
|
||||
exports[`show all comments 1`] = `
|
||||
<div
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<form
|
||||
autoComplete="off"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-wrap Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
|
||||
>
|
||||
Markus
|
||||
Join the conversation
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders permalink view with unknown asset 1`] = `
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div
|
||||
className="PermalinkView-root"
|
||||
>
|
||||
<a
|
||||
className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
|
||||
href="http://localhost/"
|
||||
id="talk-comments-permalinkView-showAllComments"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
target="_parent"
|
||||
>
|
||||
Show all Comments
|
||||
</a>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Comment not found
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
+135
-82
@@ -1,108 +1,161 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders permalink view with unknown comment 1`] = `
|
||||
<div
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="PermalinkView-root"
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<a
|
||||
className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
|
||||
href="http://localhost/"
|
||||
id="talk-comments-permalinkView-showAllComments"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
target="_parent"
|
||||
<div
|
||||
className="PermalinkView-root"
|
||||
>
|
||||
Show all Comments
|
||||
</a>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Comment not found
|
||||
</p>
|
||||
<a
|
||||
className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
|
||||
href="http://localhost/"
|
||||
id="talk-comments-permalinkView-showAllComments"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
target="_parent"
|
||||
>
|
||||
Show all Comments
|
||||
</a>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Comment not found
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`show all comments 1`] = `
|
||||
<div
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<form
|
||||
autoComplete="off"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-wrap Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
|
||||
>
|
||||
Markus
|
||||
Join the conversation
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,173 +1,234 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders comment stream 1`] = `
|
||||
<div
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<form
|
||||
autoComplete="off"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-wrap Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
|
||||
>
|
||||
Markus
|
||||
Join the conversation
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
Markus
|
||||
|
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
I like yoghurt
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="Indent-root Indent-level0"
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-replyList-log--comment-with-replies"
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
I like yoghurt
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="Indent-root Indent-level0"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-replyList-log--comment-with-replies"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,109 +1,164 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders comment stream 1`] = `
|
||||
<div
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<form
|
||||
autoComplete="off"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-wrap Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
|
||||
>
|
||||
Markus
|
||||
Join the conversation
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,119 +1,30 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders comment stream 1`] = `
|
||||
<div
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<form
|
||||
autoComplete="off"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-wrap Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
|
||||
>
|
||||
Markus
|
||||
Join the conversation
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="Indent-root Indent-level0"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-replyList-log--comment-0"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
aria-controls="talk-comments-replyList-log--comment-0"
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
|
||||
disabled={false}
|
||||
id="talk-comments-replyList-showAll--comment-0"
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
@@ -122,8 +33,152 @@ exports[`renders comment stream 1`] = `
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Show All Replies
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="Indent-root Indent-level0"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-replyList-log--comment-0"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
aria-controls="talk-comments-replyList-log--comment-0"
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
|
||||
disabled={false}
|
||||
id="talk-comments-replyList-showAll--comment-0"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Show All Replies
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -133,141 +188,198 @@ exports[`renders comment stream 1`] = `
|
||||
`;
|
||||
|
||||
exports[`show all replies 1`] = `
|
||||
<div
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<form
|
||||
autoComplete="off"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-wrap Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
|
||||
>
|
||||
Markus
|
||||
Join the conversation
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="Indent-root Indent-level0"
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
className="PostCommentForm-textarea"
|
||||
name="body"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-replyList-log--comment-0"
|
||||
className="PostCommentForm-postButtonContainer"
|
||||
>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-stream-log"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Markus
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:24:00.000Z"
|
||||
title="2018-07-06T18:24:00.000Z"
|
||||
>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Joining Too
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="Indent-root Indent-level0"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
|
||||
id="talk-comments-replyList-log--comment-0"
|
||||
role="log"
|
||||
>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Lukas
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:20:00.000Z"
|
||||
title="2018-07-06T18:20:00.000Z"
|
||||
>
|
||||
2018-07-06T18:20:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Isabelle
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:14:00.000Z"
|
||||
title="2018-07-06T18:14:00.000Z"
|
||||
>
|
||||
2018-07-06T18:14:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Hey!
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
What's up?
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="article"
|
||||
>
|
||||
<div
|
||||
className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
|
||||
>
|
||||
Isabelle
|
||||
</span>
|
||||
<time
|
||||
className="Timestamp-root RelativeTime-root"
|
||||
dateTime="2018-07-06T18:14:00.000Z"
|
||||
title="2018-07-06T18:14:00.000Z"
|
||||
>
|
||||
2018-07-06T18:14:00.000Z
|
||||
</time>
|
||||
</div>
|
||||
<p
|
||||
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
|
||||
>
|
||||
Hey!
|
||||
</p>
|
||||
<div
|
||||
className="Comment-footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { IResolvers } from "graphql-tools";
|
||||
import { Environment, RecordProxy, RecordSourceProxy } from "relay-runtime";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "talk-stream/local";
|
||||
|
||||
interface CreateEnvironmentParams {
|
||||
logNetwork?: boolean;
|
||||
resolvers: IResolvers<any, any>;
|
||||
initLocalState?: (
|
||||
local: RecordProxy,
|
||||
source: RecordSourceProxy,
|
||||
environment: Environment
|
||||
) => void;
|
||||
}
|
||||
|
||||
export default function createEnvironment(params: CreateEnvironmentParams) {
|
||||
return createRelayEnvironment({
|
||||
network: {
|
||||
logNetwork: params.logNetwork,
|
||||
resolvers: params.resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
initLocalState: (localRecord, source, environment) => {
|
||||
const authPopupRecord = source.create(AUTH_POPUP_ID, AUTH_POPUP_TYPE);
|
||||
authPopupRecord.setValue(false, "open");
|
||||
authPopupRecord.setValue(false, "focus");
|
||||
authPopupRecord.setValue("", "href");
|
||||
localRecord.setLinkedRecord(authPopupRecord, "authPopup");
|
||||
if (params.initLocalState) {
|
||||
params.initLocalState(localRecord, source, environment);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,13 +1,12 @@
|
||||
import React from "react";
|
||||
import TestRenderer from "react-test-renderer";
|
||||
import { RecordProxy } from "relay-runtime";
|
||||
import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assets, comments } from "./fixtures";
|
||||
|
||||
const connectionStub = sinon.stub().throws();
|
||||
@@ -61,14 +60,11 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord, source) => {
|
||||
localRecord.setValue(assetStub.id, "assetID");
|
||||
},
|
||||
});
|
||||
|
||||
@@ -5,9 +5,9 @@ import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assets, comments } from "./fixtures";
|
||||
|
||||
const commentStub = {
|
||||
@@ -44,13 +44,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue(assetStub.id, "assetID");
|
||||
localRecord.setValue(commentStub.id, "commentID");
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import TestRenderer from "react-test-renderer";
|
||||
import { RecordProxy } from "relay-runtime";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
|
||||
const resolvers = {
|
||||
Query: {
|
||||
comment: () => null,
|
||||
asset: () => null,
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue("unknown-asset-id", "assetID");
|
||||
localRecord.setValue("unknown-comment-id", "commentID");
|
||||
},
|
||||
});
|
||||
|
||||
const context: TalkContext = {
|
||||
relayEnvironment: environment,
|
||||
localeMessages: [],
|
||||
};
|
||||
|
||||
const testRenderer = TestRenderer.create(
|
||||
<TalkContextProvider value={context}>
|
||||
<AppContainer />
|
||||
</TalkContextProvider>
|
||||
);
|
||||
|
||||
it("renders permalink view with unknown asset", async () => {
|
||||
// Wait for loading.
|
||||
await timeout();
|
||||
expect(testRenderer.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
@@ -5,9 +5,9 @@ import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assets, comments } from "./fixtures";
|
||||
|
||||
const commentStub = {
|
||||
@@ -40,13 +40,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue(assetStub.id, "assetID");
|
||||
localRecord.setValue("unknown-comment-id", "commentID");
|
||||
|
||||
@@ -5,9 +5,9 @@ import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assetWithReplies } from "./fixtures";
|
||||
|
||||
const resolvers = {
|
||||
@@ -20,13 +20,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue(assetWithReplies.id, "assetID");
|
||||
},
|
||||
|
||||
@@ -5,9 +5,9 @@ import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assets } from "./fixtures";
|
||||
|
||||
const resolvers = {
|
||||
@@ -20,13 +20,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue(assets[0].id, "assetID");
|
||||
},
|
||||
|
||||
@@ -5,9 +5,9 @@ import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assets, comments } from "./fixtures";
|
||||
|
||||
const connectionStub = sinon.stub().throws();
|
||||
@@ -77,13 +77,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue(assetStub.id, "assetID");
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user