unit test Notifications.tsx (#7468)

Signed-off-by: Kerry Archibald <kerrya@element.io>

Author: Kerry

src/components/views/settings/Notifications.tsx

@@ -148,7 +148,6 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
 
     private async refreshRules(): Promise<Partial<IState>> {
         const ruleSets = await MatrixClientPeg.get().getPushRules();
-
         const categories = {
             [RuleId.Master]: RuleClass.Master,
 
@@ -182,6 +181,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
         for (const k in ruleSets.global) {
             // noinspection JSUnfilteredForInLoop
             const kind = k as PushRuleKind;
+
             for (const r of ruleSets.global[kind]) {
                 const rule: IAnnotatedPushRule = Object.assign(r, { kind });
                 const category = categories[rule.rule_id] ?? RuleClass.Other;
@@ -471,6 +471,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
 
     private renderTopSection() {
         const masterSwitch = <LabelledToggleSwitch
+            data-test-id='notif-master-switch'
             value={!this.isInhibited}
             label={_t("Enable for this account")}
             onChange={this.onMasterRuleChanged}
@@ -484,6 +485,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
 
         const emailSwitches = (this.state.threepids || []).filter(t => t.medium === ThreepidMedium.Email)
             .map(e => <LabelledToggleSwitch
+                data-test-id='notif-email-switch'
                 key={e.address}
                 value={this.state.pushers.some(p => p.kind === "email" && p.pushkey === e.address)}
                 label={_t("Enable email notifications for %(email)s", { email: e.address })}
@@ -495,20 +497,23 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
             { masterSwitch }
 
             <LabelledToggleSwitch
+                data-test-id='notif-setting-notificationsEnabled'
                 value={SettingsStore.getValue("notificationsEnabled")}
                 onChange={this.onDesktopNotificationsChanged}
                 label={_t('Enable desktop notifications for this session')}
                 disabled={this.state.phase === Phase.Persisting}
             />
 
             <LabelledToggleSwitch
+                data-test-id='notif-setting-notificationBodyEnabled'
                 value={SettingsStore.getValue("notificationBodyEnabled")}
                 onChange={this.onDesktopShowBodyChanged}
                 label={_t('Show message in desktop notification')}
                 disabled={this.state.phase === Phase.Persisting}
             />
 
             <LabelledToggleSwitch
+                data-test-id='notif-setting-audioNotificationsEnabled'
                 value={SettingsStore.getValue("audioNotificationsEnabled")}
                 onChange={this.onAudioNotificationsChanged}
                 label={_t('Enable audible notifications for this session')}
@@ -559,17 +564,27 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
             />;
         }
 
+        const VectorStateToLabel = {
+            [VectorState.On]: _t('On'),
+            [VectorState.Off]: _t('Off'),
+            [VectorState.Loud]: _t('Noisy'),
+        };
+
         const makeRadio = (r: IVectorPushRule, s: VectorState) => (
             <StyledRadioButton
                 key={r.ruleId}
                 name={r.ruleId}
                 checked={r.vectorState === s}
                 onChange={this.onRadioChecked.bind(this, r, s)}
                 disabled={this.state.phase === Phase.Persisting}
+                aria-label={VectorStateToLabel[s]}
             />
         );
 
-        const rows = this.state.vectorPushRules[category].map(r => <tr key={category + r.ruleId}>
+        const rows = this.state.vectorPushRules[category].map(r => <tr
+            data-test-id={category + r.ruleId}
+            key={category + r.ruleId}
+        >
             <td>{ r.description }</td>
             <td>{ makeRadio(r, VectorState.Off) }</td>
             <td>{ makeRadio(r, VectorState.On) }</td>
@@ -592,13 +607,13 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
         }
 
         return <>
-            <table className='mx_UserNotifSettings_pushRulesTable'>
+            <table data-test-id={`notif-section-${category}`} className='mx_UserNotifSettings_pushRulesTable'>
                 <thead>
                     <tr>
                         <th>{ sectionName }</th>
-                        <th>{ _t("Off") }</th>
-                        <th>{ _t("On") }</th>
-                        <th>{ _t("Noisy") }</th>
+                        <th>{ VectorStateToLabel[VectorState.Off] }</th>
+                        <th>{ VectorStateToLabel[VectorState.On] }</th>
+                        <th>{ VectorStateToLabel[VectorState.Loud] }</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -635,7 +650,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
             // Ends up default centered
             return <Spinner />;
         } else if (this.state.phase === Phase.Error) {
-            return <p>{ _t("There was an error loading your notification settings.") }</p>;
+            return <p data-test-id='error-message'>{ _t("There was an error loading your notification settings.") }</p>;
         }
 
         return <div className='mx_UserNotifSettings'>

src/i18n/strings/en_EN.json

@@ -1276,11 +1276,11 @@
     "Clear notifications": "Clear notifications",
     "Keyword": "Keyword",
     "New keyword": "New keyword",
-    "Global": "Global",
-    "Mentions & keywords": "Mentions & keywords",
-    "Off": "Off",
     "On": "On",
+    "Off": "Off",
     "Noisy": "Noisy",
+    "Global": "Global",
+    "Mentions & keywords": "Mentions & keywords",
     "Notification targets": "Notification targets",
     "There was an error loading your notification settings.": "There was an error loading your notification settings.",
     "Failed to save your profile": "Failed to save your profile",