From 94eb3dc6dee6a29058c45e495f777f7a7d2d9ff5 Mon Sep 17 00:00:00 2001 From: seotts Date: Thu, 18 Mar 2021 16:15:11 -0400 Subject: [PATCH] Continued work --- src/views/preview/comment/compose-comment.jsx | 21 ++++++++--- test/unit/components/compose-comment.test.jsx | 35 ++++++++++++++----- 2 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/views/preview/comment/compose-comment.jsx b/src/views/preview/comment/compose-comment.jsx index 66d900235..58c322ca4 100644 --- a/src/views/preview/comment/compose-comment.jsx +++ b/src/views/preview/comment/compose-comment.jsx @@ -49,7 +49,7 @@ class ComposeComment extends React.Component { this.props.muteStatus.muteExpiresAt * 1000 : 0; // convert to ms this.state = { message: '', - status: muteExpiresAtMs > 0 ? ComposeStatus.COMPOSE_DISALLOWED : ComposeStatus.EDITING, + status: muteExpiresAtMs > Date.now() ? ComposeStatus.COMPOSE_DISALLOWED : ComposeStatus.EDITING, error: null, appealId: null, muteOpen: muteExpiresAtMs > Date.now() && this.props.isReply, @@ -162,7 +162,7 @@ class ComposeComment extends React.Component { // Cancel (i.e. complete) the reply action if the user clicked on the reply button while // alreay muted. This "closes" the reply. If they just got muted, we want to leave it open // so the blue CommentingStatus box shows. - if (this.props.isReply && this.state.status !== ComposeStatus.REJECTED_MUTE) { + if (this.props.isReply && this.state.status === ComposeStatus.COMPOSE_DISALLOWED) { this.handleCancel(); } } @@ -186,6 +186,11 @@ class ComposeComment extends React.Component { return false; } + // TODO: Check with Kathy, but we think you should always see the modal when you reply? + if (this.props.isReply) { + return true; + } + // If the user is already muted (for example, in a different tab), // do not show modal because it would be confusing if (!justMuted) { @@ -215,7 +220,7 @@ class ComposeComment extends React.Component { // Decides which step of the mute modal to start on. If this was a reply button click, // we show them the step that tells them how much time is left on their mute, otherwise // they start at the beginning of the progression. - return this.props.isReply && this.state.status !== ComposeStatus.REJECTED_MUTE ? + return this.props.isReply && this.state.status === ComposeStatus.COMPOSE_DISALLOWED ? MuteModal.steps.MUTE_INFO : MuteModal.steps.COMMENT_ISSUE; } @@ -282,7 +287,15 @@ class ComposeComment extends React.Component { {(this.isMuted() && !(this.props.isReply && this.state.status !== ComposeStatus.REJECTED_MUTE)) ? ( -

+

+ +

{ expect(component.find('FlexRow.compose-error-row').exists()).toEqual(false); }); - test('Comment Status shows but compose box does not when mute expiration in the future ', () => { + test('Comment Status shows but compose box does not when you load the page and you are already muted', () => { const realDateNow = Date.now.bind(global.Date); global.Date.now = () => 0; const component = getComposeCommentWrapper({}); const commentInstance = component.instance(); - commentInstance.setState({muteExpiresAtMs: 100}); + commentInstance.setState({muteExpiresAtMs: 100, status: 'COMPOSE_DISALLOWED'}); component.update(); + // 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); @@ -236,7 +237,7 @@ describe('Compose Comment test', () => { const commentInstance = component.instance(); commentInstance.setState({ error: 'some error', - status: 'FLOOD' + status: 'REJECTED' }); component.update(); expect(component.find('FlexRow.compose-error-row').exists()).toEqual(true); @@ -338,7 +339,7 @@ describe('Compose Comment test', () => { expect(component.find('MuteModal').props().showFeedback).toBe(true); commentInstance.setState({ - status: 'REJECTED_MUTE', + status: 'COMPOSE_DISALLOWED', error: 'isMute', showWarning: true, muteOpen: true @@ -392,7 +393,7 @@ describe('Compose Comment test', () => { offenses: [offense] }; const commentInstance = getComposeCommentWrapper({}).instance(); - expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(true); + expect(commentInstance.shouldShowMuteModal(muteStatus, true)).toBe(true); global.Date.now = realDateNow; }); @@ -413,7 +414,7 @@ describe('Compose Comment test', () => { offenses: offenses }; const commentInstance = getComposeCommentWrapper({}).instance(); - expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(false); + expect(commentInstance.shouldShowMuteModal(muteStatus, true)).toBe(false); global.Date.now = realDateNow; }); @@ -435,7 +436,25 @@ describe('Compose Comment test', () => { showWarning: true }; const commentInstance = getComposeCommentWrapper({}).instance(); - expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(true); + expect(commentInstance.shouldShowMuteModal(muteStatus, true)).toBe(true); + global.Date.now = realDateNow; + }); + + test('shouldShowMuteModal is false when the user is already muted, even when only 1 recent offesnse ', () => { + const realDateNow = Date.now.bind(global.Date); + global.Date.now = () => 0; + // Since Date.now mocked to 0 above, we just need a small number to make + // it look like it was created < 2 minutes ago. + const offense = { + expiresAt: '1000', + createdAt: '-60' // ~1 ago min given shouldShowMuteModal's conversions, + }; + const muteStatus = { + offenses: [offense] + }; + const justMuted = false; + const commentInstance = getComposeCommentWrapper({}).instance(); + expect(commentInstance.shouldShowMuteModal(muteStatus, justMuted)).toBe(false); global.Date.now = realDateNow; }); @@ -455,7 +474,7 @@ describe('Compose Comment test', () => { test('getMuteModalStartStep: A reply click when already muted ', () => { const commentInstance = getComposeCommentWrapper({isReply: true}).instance(); commentInstance.setState({ - status: 'EDITING' + status: 'COMPOSE_DISALLOWED' }); expect(commentInstance.getMuteModalStartStep()).toBe(1); });