Skip to content

Commit

Permalink
Update DiscussionThreadContainer to use Mocked Provider
Browse files Browse the repository at this point in the history 
fixes VICE-2113
flag=react_discussions_post

Test Plan:
- Specs Pass

Change-Id: Ic9a64ce5a64236932d853043fc2f2728b5068983
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/275150
Tested-by: Service Cloud Jenkins <[email protected]>
Reviewed-by: Chawn Neal <[email protected]>
QA-Review: Chawn Neal <[email protected]>
Product-Review: Chawn Neal <[email protected]>
  • Loading branch information
@mlemon-instructure
mlemon-instructure committed Oct 5, 2021
1 parent 1e8f11d commit 16b4058
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 79 deletions.
6 changes: 4 additions & 2 deletions ui/features/discussion_topics_post/graphql/Mocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,8 @@ export const updateDiscussionEntryParticipantMock = ({
discussionEntryId = '1',
read = null,
rating = null,
forcedReadState = null
forcedReadState = null,
shouldError = false
} = {}) => [
{
request: {
Expand Down Expand Up @@ -252,7 +253,8 @@ export const updateDiscussionEntryParticipantMock = ({
__typename: 'UpdateDiscussionEntryParticipantPayload'
}
}
}
},
...(shouldError && {error: new Error('graphql error')})
}
]

Expand Down
135 changes: 58 additions & 77 deletions ...st/react/containers/DiscussionThreadContainer/__tests__/DiscussionThreadContainer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,25 @@
*/

import {AlertManagerContext} from '@canvas/alerts/react/AlertManager'
import {ApolloProvider} from 'react-apollo'
import {Discussion} from '../../../../graphql/Discussion'
import {DiscussionEntry} from '../../../../graphql/DiscussionEntry'
import {DiscussionEntryPermissions} from '../../../../graphql/DiscussionEntryPermissions'
import {DiscussionPermissions} from '../../../../graphql/DiscussionPermissions'
import {DiscussionThreadContainer} from '../DiscussionThreadContainer'
import {fireEvent, render} from '@testing-library/react'
import {getSpeedGraderUrl} from '../../../utils'
import {handlers} from '../../../../graphql/mswHandlers'
import {mswClient} from '../../../../../../shared/msw/mswClient'
import {mswServer} from '../../../../../../shared/msw/mswServer'
import {MockedProvider} from '@apollo/react-testing'
import React from 'react'
import {waitFor} from '@testing-library/dom'
import {graphql} from 'msw'
import {updateDiscussionEntryParticipantMock} from '../../../../graphql/Mocks'
import {User} from '../../../../graphql/User'
import {waitFor} from '@testing-library/dom'

jest.mock('../../../utils', () => ({
...jest.requireActual('../../../utils'),
responsiveQuerySizes: () => ({desktop: {maxWidth: '1024px'}})
}))

describe('DiscussionThreadContainer', () => {
const server = mswServer(handlers)
const onFailureStub = jest.fn()
const onSuccessStub = jest.fn()
const openMock = jest.fn()
Expand All @@ -60,25 +56,14 @@ describe('DiscussionThreadContainer', () => {
removeListener: jest.fn()
}
})

// eslint-disable-next-line no-undef
fetchMock.dontMock()
server.listen()
})

afterEach(() => {
server.resetHandlers()
onFailureStub.mockClear()
onSuccessStub.mockClear()
openMock.mockClear()
})

afterAll(() => {
server.close()
// eslint-disable-next-line no-undef
fetchMock.enableMocks()
})

const defaultProps = ({
discussionEntryOverrides = {},
discussionOverrides = {},
Expand All @@ -89,15 +74,15 @@ describe('DiscussionThreadContainer', () => {
...propOverrides
})

const setup = props => {
const setup = (props, mocks) => {
return render(
<ApolloProvider client={mswClient}>
<MockedProvider mocks={mocks}>
<AlertManagerContext.Provider
value={{setOnFailure: onFailureStub, setOnSuccess: onSuccessStub}}
>
<DiscussionThreadContainer {...props} />
</AlertManagerContext.Provider>
</ApolloProvider>
</MockedProvider>
)
}

Expand All @@ -112,53 +97,58 @@ describe('DiscussionThreadContainer', () => {
discussionEntryOverrides: {permissions: DiscussionEntryPermissions.mock({reply: false})}
})
)
expect(queryByTestId('threading-toolbar-reply')).toBeFalsy()
expect(queryByTestId('threading-toolbar-reply')).not.toBeInTheDocument()
})

it('should render reply button if reply permission is true', () => {
const {queryByTestId} = setup(defaultProps())
expect(queryByTestId('threading-toolbar-reply')).toBeTruthy()
expect(queryByTestId('threading-toolbar-reply')).toBeInTheDocument()
})

describe('delete permission', () => {
it('removed when false', async () => {
const new_prop = defaultProps()
new_prop.discussionEntry.permissions.delete = false
const {getByTestId, queryAllByText} = setup(new_prop)
const props = defaultProps()
props.discussionEntry.permissions.delete = false
const {getByTestId, queryAllByText} = setup(props)
fireEvent.click(getByTestId('thread-actions-menu'))

expect(queryAllByText('Delete').length).toBe(0)
})

it('present when true', async () => {
const {getByTestId, queryAllByText} = setup(defaultProps())
const {getByTestId, getByText} = setup(defaultProps())
fireEvent.click(getByTestId('thread-actions-menu'))

const deletes = queryAllByText('Delete')
expect(deletes.length).toBe(1)
expect(getByText('Delete')).toBeInTheDocument()
})
})

describe('Roles', () => {
it('does not display author role if not the author', async () => {
const {queryByTestId} = setup(defaultProps())
expect(queryByTestId('pill-Author')).toBeFalsy()
expect(queryByTestId('pill-Author')).not.toBeInTheDocument()
})

it('displays author role if the post is from the author', async () => {
const new_prop = defaultProps({
const props = defaultProps({
discussionOverrides: {author: User.mock({_id: '3', displayName: 'Charles Xavier'})},
discussionEntryOverrides: {author: User.mock({_id: '3', displayName: 'Charles Xavier'})}
})
const {queryByTestId} = setup(new_prop)
const {queryByTestId} = setup(props)

expect(queryByTestId('pill-Author')).toBeTruthy()
expect(queryByTestId('pill-Author')).toBeInTheDocument()
})
})

describe('read state', () => {
it('indicates the update to the user', async () => {
const {getByTestId} = setup(defaultProps())
const {getByTestId} = setup(
defaultProps(),
updateDiscussionEntryParticipantMock({
read: false,
forcedReadState: true
})
)

fireEvent.click(getByTestId('thread-actions-menu'))
fireEvent.click(getByTestId('markAsUnread'))
Expand All @@ -170,22 +160,15 @@ describe('DiscussionThreadContainer', () => {
})

describe('error handling', () => {
beforeEach(() => {
server.use(
graphql.mutation('UpdateDiscussionEntryParticipant', (req, res, ctx) => {
return res.once(
ctx.errors([
{
message: 'foobar'
}
])
)
it('indicates the failure to the user', async () => {
const {getByTestId} = setup(
defaultProps(),
updateDiscussionEntryParticipantMock({
read: false,
forcedReadState: true,
shouldError: true
})
)
})

it('indicates the failure to the user', async () => {
const {getByTestId} = setup(defaultProps())

fireEvent.click(getByTestId('thread-actions-menu'))
fireEvent.click(getByTestId('markAsUnread'))
Expand All @@ -200,7 +183,12 @@ describe('DiscussionThreadContainer', () => {

describe('ratings', () => {
it('indicates the update to the user', async () => {
const {getByTestId} = setup(defaultProps())
const {getByTestId} = setup(
defaultProps(),
updateDiscussionEntryParticipantMock({
rating: 'liked'
})
)

fireEvent.click(getByTestId('like-button'))

Expand All @@ -211,22 +199,14 @@ describe('DiscussionThreadContainer', () => {
})

describe('error handling', () => {
beforeEach(() => {
server.use(
graphql.mutation('UpdateDiscussionEntryParticipant', (req, res, ctx) => {
return res.once(
ctx.errors([
{
message: 'foobar'
}
])
)
it('indicates the failure to the user', async () => {
const {getByTestId} = setup(
defaultProps(),
updateDiscussionEntryParticipantMock({
rating: 'liked',
shouldError: true
})
)
})

it('indicates the failure to the user', async () => {
const {getByTestId} = setup(defaultProps())

fireEvent.click(getByTestId('like-button'))

Expand Down Expand Up @@ -290,7 +270,7 @@ describe('DiscussionThreadContainer', () => {
}
})
)
expect(container.getByTestId('is-unread')).toBeTruthy()
expect(container.getByTestId('is-unread')).toBeInTheDocument()
})

it('root is unread and child reply is unread', () => {
Expand All @@ -299,8 +279,9 @@ describe('DiscussionThreadContainer', () => {
discussionEntryOverrides: {entryParticipant: {read: false, rating: false}}
})
)
expect(container.getByTestId('is-unread')).toBeTruthy()
expect(container.getByTestId('is-unread')).toBeInTheDocument()
})

it('root is unread and child is read', () => {
const container = setup(
defaultProps({
Expand All @@ -314,7 +295,7 @@ describe('DiscussionThreadContainer', () => {
}
})
)
expect(container.getByTestId('is-unread')).toBeTruthy()
expect(container.getByTestId('is-unread')).toBeInTheDocument()
})
})

Expand All @@ -332,44 +313,44 @@ describe('DiscussionThreadContainer', () => {
}
})
)
expect(container.queryByTestId('is-unread')).toBeNull()
expect(container.queryByTestId('is-unread')).not.toBeInTheDocument()
})
})
})

describe('Expand-Button', () => {
it('should render expand when nested replies are present', () => {
const {getByTestId} = setup(defaultProps())
expect(getByTestId('expand-button')).toBeTruthy()
expect(getByTestId('expand-button')).toBeInTheDocument()
})

it('should expand replies when expand button is clicked', () => {
const {getByTestId} = setup(defaultProps())
fireEvent.click(getByTestId('expand-button'))
expect(getByTestId('collapse-replies')).toBeTruthy()
expect(getByTestId('collapse-replies')).toBeInTheDocument()
})

it('should collapse replies when expand button is clicked', async () => {
it('should collapse replies when expand button is clicked', () => {
const {getByTestId, queryByTestId} = setup(defaultProps())
fireEvent.click(getByTestId('expand-button'))
expect(getByTestId('collapse-replies')).toBeTruthy()
expect(getByTestId('collapse-replies')).toBeInTheDocument()

fireEvent.click(getByTestId('expand-button'))

expect(queryByTestId('collapse-replies')).toBeNull()
expect(queryByTestId('collapse-replies')).not.toBeInTheDocument()
})

it('should collapse replies when collapse button is clicked', () => {
const {getByTestId, queryByTestId} = setup(defaultProps())
fireEvent.click(getByTestId('expand-button'))
expect(getByTestId('collapse-replies')).toBeTruthy()
expect(getByTestId('collapse-replies')).toBeInTheDocument()

fireEvent.click(getByTestId('collapse-replies'))

expect(queryByTestId('collapse-replies')).toBeNull()
expect(queryByTestId('collapse-replies')).not.toBeInTheDocument()
})

it('pluralizes reply message correctly when there is only a single reply', async () => {
it('pluralizes reply message correctly when there is only a single reply', () => {
const {getAllByText} = setup(
defaultProps({
discussionEntryOverrides: {
Expand All @@ -384,7 +365,7 @@ describe('DiscussionThreadContainer', () => {
expect(getAllByText('1 reply, 1 unread').length).toBe(2)
})

it('pluralizes replies message correctly when there are multiple replies', async () => {
it('pluralizes replies message correctly when there are multiple replies', () => {
const {getAllByText} = setup(
defaultProps({
discussionEntryOverrides: {rootEntryParticipantCounts: {unreadCount: 1, repliesCount: 2}}
Expand All @@ -393,7 +374,7 @@ describe('DiscussionThreadContainer', () => {
expect(getAllByText('2 replies, 1 unread')).toBeTruthy()
})

it('does not display unread count if it is 0', async () => {
it('does not display unread count if it is 0', () => {
const {queryAllByText} = setup(
defaultProps({
discussionEntryOverrides: {rootEntryParticipantCounts: {unreadCount: 0, repliesCount: 2}}
Expand Down

0 comments on commit 16b4058

Please sign in to comment.