diff --git a/src/components/modal/mute/modal.jsx b/src/components/modal/mute/modal.jsx
index 2a4f34397..00a25ee74 100644
--- a/src/components/modal/mute/modal.jsx
+++ b/src/components/modal/mute/modal.jsx
@@ -20,6 +20,10 @@ class MuteModal extends React.Component {
'handleNext',
'handlePrevious'
]);
+ this.numSteps = 2;
+ if (this.props.showWarning) {
+ this.numSteps++;
+ }
this.state = {
step: 0
};
@@ -82,6 +86,23 @@ class MuteModal extends React.Component {
/>
+ {this.props.showWarning ? (
+
+
+
+ ) : null}
@@ -97,7 +118,7 @@ class MuteModal extends React.Component {
) : null }
- {this.state.step >= 1 ? (
+ {this.state.step >= this.numSteps - 1 ? (
@@ -300,7 +305,8 @@ ComposeComment.propTypes = {
commenteeId: PropTypes.number,
muteStatus: PropTypes.shape({
offenses: PropTypes.array,
- muteExpiresAt: PropTypes.number
+ muteExpiresAt: PropTypes.number,
+ showWarning: PropTypes.bool
}),
onAddComment: PropTypes.func,
onCancel: PropTypes.func,
@@ -317,7 +323,7 @@ ComposeComment.propTypes = {
const mapStateToProps = state => ({
muteStatus: state.session.session.permissions.mute_status ?
state.session.session.permissions.mute_status :
- {muteExpiresAt: 0, offenses: []},
+ {muteExpiresAt: 0, offenses: [], showWarning: false},
user: state.session.session.user
});
diff --git a/test/unit/components/compose-comment.test.jsx b/test/unit/components/compose-comment.test.jsx
index c49e9dd75..f0fd8558b 100644
--- a/test/unit/components/compose-comment.test.jsx
+++ b/test/unit/components/compose-comment.test.jsx
@@ -104,7 +104,8 @@ describe('Compose Comment test', () => {
permissions: {
mute_status: {
muteExpiresAt: 5,
- offenses: []
+ offenses: [],
+ showWarning: true
}
}
}
@@ -114,6 +115,7 @@ describe('Compose Comment test', () => {
const commentInstance = component.instance();
// Check conversion to ms from seconds is done at init time.
expect(commentInstance.state.muteExpiresAtMs).toEqual(5 * 1000);
+ expect(commentInstance.state.showWarning).toBe(true);
// Compose box should be hidden if muted unless they got muted due to a comment they just posted.
expect(component.find('FlexRow.compose-comment').exists()).toEqual(false);
expect(component.find('MuteModal').exists()).toEqual(false);
@@ -191,9 +193,41 @@ describe('Compose Comment test', () => {
commentInstance.setState({muteOpen: true});
component.update();
expect(component.find('MuteModal').exists()).toEqual(true);
+ expect(component.find('MuteModal').props().showWarning).toBe(false);
global.Date.now = realDateNow;
});
+ test('Mute Modal gets showWarning props from state', () => {
+ const store = mockStore({
+ session: {
+ session: {
+ user: {},
+ permissions: {
+ mute_status: {}
+ }
+ }
+ }
+ });
+ const component = mountWithIntl(
+
+ , {context: {store}}
+ );
+ // set state on the ComposeComment component, not the wrapper
+ const commentInstance = component.find('ComposeComment').instance();
+ commentInstance.setState({muteOpen: true});
+ component.update();
+ expect(component.find('MuteModal').exists()).toEqual(true);
+ expect(component.find('MuteModal').props().showWarning).toBe(false);
+ commentInstance.setState({
+ muteOpen: true,
+ showWarning: true
+ });
+ component.update();
+ expect(component.find('MuteModal').props().showWarning).toBe(true);
+ });
+
test('shouldShowMuteModal is false when list is undefined ', () => {
const commentInstance = getComposeCommentWrapper({}).instance();
expect(commentInstance.shouldShowMuteModal()).toBe(false);
diff --git a/test/unit/components/mute-modal.test.jsx b/test/unit/components/mute-modal.test.jsx
index d5c1907f6..94550a346 100644
--- a/test/unit/components/mute-modal.test.jsx
+++ b/test/unit/components/mute-modal.test.jsx
@@ -33,6 +33,20 @@ describe('MuteModalTest', () => {
expect(component.find('button.back-button').exists()).toEqual(false);
});
+ test('Mute Modal shows extra showWarning step', () => {
+ const component = mountWithIntl(
+
+ );
+ component.find('MuteModal').instance()
+ .setState({step: 2});
+ component.update();
+ expect(component.find('MuteStep').prop('bottomImg')).toEqual('/svgs/commenting/warning.svg');
+ expect(component.find('MuteStep').prop('totalSteps')).toEqual(3);
+ });
+
test('Mute Modal shows back & close button on last step', () => {
const component = mountWithIntl(