Note
Once you've run through the testing on your browser of choice please have a play around on each of the other supported browsers, on just boost theme and in an RTL language.
You don't need to repeat all of the data entry, the main goal is to confirm that the styling of each of the widgets is consistent across the browsers and languages.
Testing the Messaging UI
Pre-requisites.
- A site with multiple users (50+).
- A site with multiple courses, each course containing enrolled users as students (50+).
- A main user you will be using for testing that is enrolled in a course as a student, who has no existing messages or contacts.
Test 1 - Searching and adding contacts.
- Log in as the your main user and click on the user menu and then 'Messages'.
- Confirm you see 'No messages'.
- Click on the 'Contacts' tab.
- Confirm you see 'No contacts'.
- Perform a search that will return nothing (eg 'asdzxce1412414').
- Confirm you see 'No results'.
- Perform a search that will return multiple users and courses (eg. 'a' which may be in many users' names).
- Confirm there are only 'Courses' and 'Non-contacts' displayed.
- Click on a non-contact.
- Click on their name at the top.
- Click on 'Add contact'.
- Click on the 'Contacts' tab.
- Confirm the user is display there.
- Perform a search that will return multiple users and courses (eg. 'a' which may be in many users' names).
- Confirm there are now 'Contacts', 'Courses' and 'Non-contacts' displayed.
- Click on a 'Course' name'.
- Confirm you are shown a list of users in that course.
- Scroll down the list and confirm it infinitely loads.
- Perform another search and confirm it only shows users in the course matching your search.
- Click on a user and add them as a contact.
- Click on the 'Contacts' tab.
- Confirm you now have two contacts shown.
- Perform a few more detailed searches and confirm the results are correct.
Test 2 - Sending a message to a contact.
- Log in as the your main user and click on the user menu and then 'Messages'.
- Click on the 'Contacts' tab.
- Click on one of the 'Contacts' you added in the earlier test.
- Click on 'View messages'.
- Send them a message.
- Ensure you are now on the 'Messages' tab and can see the message you sent.
- Send them another 49 messages.
- Refresh the page.
- Ensure you are shown the latest messages in the convo and are taken to the bottom of the messaging window.
- Scroll up and confirm the messages are infinitely loaded and are in the right order.
- Log in as the user you sent the messages to and confirm in the 'Messaging' icon at the top of the page you can see that there are unread messages.
- Click to view the message, ensure it is no longer marked as unread.
- Send a reply to your main user.
- Now, log in as another completely different user and send the main user a message as well (use the search to find the user).
- Log in as your main user and confirm you are notified that there are unread messages.
- Click on the user menu and then 'Messages'.
- Confirm the most recent conversation is loaded.
- Confirm the other conversation is marked as unread.
- Click on that and confirm it is marked as read as well.
- Now, send 50 people messages using the search functionality. (or you can use this script to bulk generate them - add to your wwwroot and visit the page with <yoursite>/script.php?sm=1, may want to alter the code before visiting this).
- Confirm on the messages tab you can infinitely scroll through the conversations.
Test 3 - Searching messages
- Log in as the your main user and click on the user menu and then 'Messages'.
- Perform a search that will return nothing (eg 'asdzxce1412414').
- Confirm you see 'No results'.
- Perform a search on the messages and confirm it works as expected (Messages sent from yourself should show the string 'You:' and others shouldn't).
Test 4 - Deleting messages
- Log in as the your main user and click on the user menu and then 'Messages'.
- Click on 'Edit' in the top right of the conversation you are viewing.
- Confirm that you can click on messages to highlight them.
- Select a few random messages (ensure to include the last one).
- Click on 'Delete selected messages'
- Confirm they are removed.
- Confirm the message shown in the 'Messages' panel is updated to show the last message that was not deleted.
- Refresh the page and revisit the conversation and confirm they are still no longer present.
- Log in as the user who is on the receiving end of the messages.
- Confirm the messages are not deleted for him.
Test 5 - Deleting all messages
- Log in as the your main user and click on the user menu and then 'Messages'.
- Click on 'Edit' in the top right.
- Click on 'Delete all'.
- Confirm a dialogue confirmation appears.
- Click 'No' and confirm it disappears and you are back to normal.
- Click on 'Delete all'.
- Confirm a dialogue confirmation appears.
- Click 'Yes' and confirm it disappears and the conversation is no longer listed.
- Refresh the page and confirm the conversation is still no longer present.
- Log in as the user who is on the receiving end of the messages.
- Confirm the conversation is not deleted for them.
Test 6 - Responsive view
- Log in as the your main user and click on the user menu and then 'Messages'.
- Shrink the screen size so you only see the list of conversations.
- Click on a conversation and confirm it transitions to the conversation.
- Click on '< Messages' and confirm you are taken back to the original screen.
- Click on the 'Contacts' tab.
- Confirm you only see a list of contacts.
- Click on a contact and confirm it transitions to the profile page.
- Click on '< Contacts' and confirm you are taken back to the original screen.
Test 7 - Play around
Test this using boost on all supported browsers
- Now that you are familiar with the messaging UI please repeat the above steps (not necessary to perform the actions), we basically want to confirm that the appearance is consistent among all browsers.
- Have a play around and explore.
Test 8 - Accessibility.
- Confirm keyboard navigation works as you would expect.
- Confirm that it is accessible for a sceenreader.
A couple of ways I've found to generate a notifications
- Add a submission to an assignment (I generally use online text). This should result in an immediate notifications.
- Modify a submission to an assignment, This should result in an immediate notification.
- Grade an assignment as a teacher. This requires cron to be run in order to generate the notification.
- See the attached "create_notifications.php" script which will generate 20 notifications to user with id 3 from user with id 2. These are just junk data notifications to be used to test the infinite scrolling. Please generate real notifications (see above) for the other testing.
Notification preferences
The notification preferences page allows a user to customise which types of notifications they would like to get from Moodle and how they would like to receive them.
You can access the notification preference page in two ways:
- Click the notification popover in the nav bar > click the cog
- user menu > preferences > notification preferences
All modifications made on the preferences page should be saved via ajax.
To test:
- The Disabling all notifications setting will stop moodle from notifying the user of all notifications that occurs while it is enabled. Those notifications are never shown to the user, even after notifications are enabled again. Once notifications are enabled again the user should be notified as normal.
- Disabling online notifications for a particular notification type will stop the user from receiving those notifications while they are logged in to Moodle (or within 5 minutes of them logging out, I think). They should receive those notifications as normal while they are logged in however.
- Disabling offline notifications should behave opposite to the above.
- Disabling both online and offline should result in no notifications of that type being received by the user at all.
- Disabling/enabling notifications will not change any previously received data. If the user has previously received a notification of a given type then they will still see it even if that notification has since been disabled. The settings on affect future notifications.
- You should be able to configure some of the notification processors directly. The processors that are configurable (e.g. email) should appear as a link and have a cog next to their name. Clicking it should open a modal with configuration options. Not all processors as configurable (e.g. Web).
- As an admin you are able to lock/disallow certain notifications for the entire site. These can be configured here: site admin > plugins > message outputs > default message outputs. These notifications should be displayed as "Locked" and "Disallowed" respectively and are not modifiable by the user on their preferences page.
- A processor that is enabled at the site but requires some user configuration before it can work should appear on the preferences page with a little warning sign next to it and all notifications marked as "disabled". You should able able to configure it by clicking on the processor name and filling out the configuration in the dialog. You can test this by setting up something like Jabber as an admin on site admin > plugins > message outputs > manage message outputs.
- The page should work at different browser resolutions.
- The page should be accessible with a screen reader.
Message preferences
This page allows the user to configure any settings relating to messages.
It currently only allows the user to prevent non-contacts from messages them and to configure how they would like to be notified about messages.
Note: The "web" process (e.g. the popovers in the nav bar) can no be disabled for messaging.
You can access the message preference page in two ways:
- Click the message popover in the nav bar > click the cog
- user menu > preferences > message preferences
To test:
- All form elements are saved via ajax
- Should behave similarly to the notification preferences page.
Notification popover
The notification popover is the little bell that appears in the nav bar. It tells the user of any new notifications they've received, according to the rules they've configured on their notification preferences page. This is designed to only provide a summarised version of the notification with more detail provided on the full notifications page.
Note: The popover doesn't currently poll the server for new notifications. You'll need to reload the page in order to see any new notifications.
To test:
- The notification count badge when the popover is closed should accurately represent the number of unread notifications.
- When the menu is open it should list all notifications from newest to oldest. Unread notifications should be styled differently.
- The notification list should infinitely scroll (it loads the notifications in chunks of 20).
- Clicking a notification should take you to the resource the notification was concerning (e.g. the relevant assignment or what ever).
- Clicking an unread notification should mark it as read
- Clicking "view more" on a notification should take you to the notifications page and load the full notification information. It should also mark that notification as read.
- The popover should be keyboard navigable:
- When the menu is closed and the toggle has focus then "down" should open the menu
- When the menu is open:
- up/down should step through the notifications
- home/end should jump to the start and finish of the visible list
- escape should close the menu and return focus to the toggle
- Clicking the "mark all as read" button should mark all notification as read
- At resolutions less than 480px wide (e.g. mobiles) the open popover should take up the full screen.
- The popover should be screen reader accessible
- The popover should not appear if you're not logged in or if you're a guest user.
Notifications page
This page is to display the notifications in more detail, with the popover providing the summarised view. It looks similar to the messages page and shows the complete list of notifications on the left and a full detailed view of the selected notification on the right panel.
To test:
- The notifications appear in order of newest to oldest in the left panel
- Selecting a notification should show you the full notification detail in the right panel including the subject, body and a link to the relevant resource at the bottom (the "Go to: <blah>" link)
- The notification list is infinitely scrollable (loaded in batches of 20 notifications).
- Clicking on an unread notification should mark it as read and should also decrement the unread notification count in the notification popover (and also remove the unread styling of the notification in the popover).
- Screen resolution less than 980px wide should cause responsive styling to kick in.
Messages popover
The notification popover is the little message bubble that appears in the nav bar. It tells the user of any new messages they've received, according to the rules they've configured on their messages preferences page.
Note: The popover doesn't currently poll the server for new notifications. You'll need to reload the page in order to see any new messages.
To test:
- The messages count badge when the popover is closed should accurately represent the number of unread conversations the user has, not the number of unread messages. That means if the user has 20 unread messages from user 2, it will only show as a 1 in the popover badge (e.g. they have one unread conversation).
- When the menu is open it should list all conversations from newest to oldest.
- Unread conversations should be styled differently and should have a badge that indicates the number of unread messages within that unread conversation (in the example above it would have "20" in it).
- The conversations list should infinitely scroll (it loads the conversations in chunks of 20).
- Clicking a conversation should take you to the full conversation on the messages page.
- Clicking an unread message should mark it as read
- The popover should be keyboard navigable (same as the notification popover):
- Clicking the "mark all as read" button should mark all messages as read
- At resolutions less than 480px wide (e.g. mobiles) the open popover should take up the full screen.
- The popover should be screen reader accessible
- The popover should not appear if you're not logged in or if you're a guest user.