diff options
Diffstat (limited to 'devtools/client/accessibility/test/node/components')
30 files changed, 1784 insertions, 0 deletions
diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-prefs.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-prefs.test.js.snap new file mode 100644 index 0000000000..eea9c7ece4 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-prefs.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AccessibilityPrefs component: prefs checked 1`] = `"<button class=\\"devtools-button badge toolbar-menu-button prefs\\" title=\\"Configure preferences\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-prefs-menu\\"></button>"`; + +exports[`AccessibilityPrefs component: prefs not set by default 1`] = `"<button class=\\"devtools-button badge toolbar-menu-button prefs\\" title=\\"Configure preferences\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-prefs-menu\\"></button>"`; + +exports[`AccessibilityPrefs component: toggle pref 1`] = `"<button class=\\"devtools-button badge toolbar-menu-button prefs\\" title=\\"Configure preferences\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-prefs-menu\\"></button>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-row-value.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-row-value.test.js.snap new file mode 100644 index 0000000000..e35558e016 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-row-value.test.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AccessibilityRowValue component: basic render 1`] = `"<span role=\\"presentation\\"><span class=\\"objectBox objectBox-undefined\\">undefined</span></span>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-tree-filter.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-tree-filter.test.js.snap new file mode 100644 index 0000000000..8d54471f0b --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/accessibility-tree-filter.test.js.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AccessibilityTreeFilter component: audit all filter filtered auditing 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">All Issues</button></div>"`; + +exports[`AccessibilityTreeFilter component: audit all filter not filtered auditing 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`; + +exports[`AccessibilityTreeFilter component: audit filter not filtered 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`; + +exports[`AccessibilityTreeFilter component: audit filters filtered 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">All Issues</button></div>"`; + +exports[`AccessibilityTreeFilter component: audit other filter filtered auditing 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">Contrast</button></div>"`; + +exports[`AccessibilityTreeFilter component: audit other filter not filtered auditing 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 2`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 3`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 4`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">All Issues</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 5`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">Keyboard, Text Labels</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 6`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">Keyboard, Text Labels</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 7`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">Keyboard, Text Labels</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 8`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">All Issues</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 9`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 10`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 11`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`; + +exports[`AccessibilityTreeFilter component: render filters after state changes 12`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">Text Labels</button></div>"`; + +exports[`AccessibilityTreeFilter component: toggle filter 1`] = `"<div role=\\"group\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">Check for issues:</span><button class=\\"devtools-button badge toolbar-menu-button filters\\" aria-expanded=\\"false\\" aria-haspopup=\\"menu\\" aria-controls=\\"accessibility-tree-filters-menu\\">None</button></div>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/audit-controller.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/audit-controller.test.js.snap new file mode 100644 index 0000000000..b510bd22d3 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/audit-controller.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AuditController component: accessible with checks 1`] = `"<span class=\\"child\\" checks=\\"[object Object]\\"></span>"`; + +exports[`AuditController component: accessible without checks 1`] = `"<span></span>"`; + +exports[`AuditController component: dead accessible actor 1`] = `"<span></span>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/audit-filter.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/audit-filter.test.js.snap new file mode 100644 index 0000000000..32564ff6d7 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/audit-filter.test.js.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AuditController component: audit filter filtered contrast checks fail 1`] = `"<span></span>"`; + +exports[`AuditController component: audit filter filtered contrast checks fail range 1`] = `"<span></span>"`; + +exports[`AuditController component: audit filter filtered contrast checks success 1`] = `""`; + +exports[`AuditController component: audit filter filtered no checks 1`] = `""`; + +exports[`AuditController component: audit filter filtered unknown checks 1`] = `""`; + +exports[`AuditController component: audit filter not filtered 1`] = `"<span></span>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/audit-progress-overlay.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/audit-progress-overlay.test.js.snap new file mode 100644 index 0000000000..8ae235d352 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/audit-progress-overlay.test.js.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AuditProgressOverlay component: render auditing finishing up 1`] = `"<span id=\\"audit-progress-container\\" role=\\"progressbar\\" aria-valuetext=\\"Finishing up…\\">Finishing up…</span>"`; + +exports[`AuditProgressOverlay component: render auditing initializing 1`] = `"<span id=\\"audit-progress-container\\" role=\\"progressbar\\" aria-valuetext=\\"Initializing…\\">Initializing…</span>"`; + +exports[`AuditProgressOverlay component: render auditing progress 1`] = `"<span id=\\"audit-progress-container\\">Checking 5 nodes<progress max=\\"100\\" value=\\"0\\" class=\\"audit-progress-progressbar\\" aria-labelledby=\\"audit-progress-container\\"></progress></span>"`; + +exports[`AuditProgressOverlay component: render auditing progress 2`] = `"<span id=\\"audit-progress-container\\">Checking 5 nodes<progress max=\\"100\\" value=\\"50\\" class=\\"audit-progress-progressbar\\" aria-labelledby=\\"audit-progress-container\\"></progress></span>"`; + +exports[`AuditProgressOverlay component: render auditing progress 3`] = `"<span id=\\"audit-progress-container\\">Checking 5 nodes<progress max=\\"100\\" value=\\"75\\" class=\\"audit-progress-progressbar\\" aria-labelledby=\\"audit-progress-container\\"></progress></span>"`; + +exports[`AuditProgressOverlay component: render not auditing 1`] = `""`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/badge.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/badge.test.js.snap new file mode 100644 index 0000000000..324c72105b --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/badge.test.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Badge component: basic render 1`] = `"<span class=\\"audit-badge badge\\" title=\\"Does not meet WCAG standards for accessible text.\\" aria-label=\\"Contrast\\">Contrast</span>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/badges.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/badges.test.js.snap new file mode 100644 index 0000000000..5065d172d0 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/badges.test.js.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Badges component: contrast ratio fail range render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"Accessibility checks\\"><span class=\\"audit-badge badge\\" data-score=\\"FAIL\\" title=\\"Does not meet WCAG standards for accessible text.\\" aria-label=\\"contrast warning\\">contrast</span></span>"`; + +exports[`Badges component: contrast ratio fail render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"Accessibility checks\\"><span class=\\"audit-badge badge\\" data-score=\\"FAIL\\" title=\\"Does not meet WCAG standards for accessible text.\\" aria-label=\\"contrast warning\\">contrast</span></span>"`; + +exports[`Badges component: contrast ratio success render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"Accessibility checks\\"></span>"`; + +exports[`Badges component: empty checks render 1`] = `""`; + +exports[`Badges component: no props render 1`] = `""`; + +exports[`Badges component: null checks render 1`] = `""`; + +exports[`Badges component: unsupported checks render 1`] = `""`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/check.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/check.test.js.snap new file mode 100644 index 0000000000..06d9cb60c5 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/check.test.js.snap @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Check component: basic render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; + +exports[`Check component: basic render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/contrast-badge.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/contrast-badge.test.js.snap new file mode 100644 index 0000000000..f24c7a92ab --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/contrast-badge.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ContrastBadge component: error render 1`] = `null`; + +exports[`ContrastBadge component: fail render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"FAIL\\" title=\\"Does not meet WCAG standards for accessible text.\\" aria-label=\\"contrast warning\\">contrast</span>"`; + +exports[`ContrastBadge component: success large text render 1`] = `null`; + +exports[`ContrastBadge component: success range render 1`] = `null`; + +exports[`ContrastBadge component: success render 1`] = `null`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/display-tabbing-order.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/display-tabbing-order.test.js.snap new file mode 100644 index 0000000000..d7e8c1ebdb --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/display-tabbing-order.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DisplayTabbingOrder component: default render 1`] = `"<label class=\\"accessibility-tabbing-order devtools-checkbox-label devtools-ellipsis-text\\" for=\\"devtools-display-tabbing-order-checkbox\\" title=\\"Show tabbing order of elements and their tabbing index.\\"><input id=\\"devtools-display-tabbing-order-checkbox\\" class=\\"devtools-checkbox\\" type=\\"checkbox\\">Show Tabbing Order</label>"`; + +exports[`DisplayTabbingOrder component: displaying tabbing order render/update 1`] = `"<label class=\\"accessibility-tabbing-order devtools-checkbox-label devtools-ellipsis-text\\" for=\\"devtools-display-tabbing-order-checkbox\\" title=\\"Show tabbing order of elements and their tabbing index.\\"><input id=\\"devtools-display-tabbing-order-checkbox\\" class=\\"devtools-checkbox\\" type=\\"checkbox\\">Show Tabbing Order</label>"`; + +exports[`DisplayTabbingOrder component: displaying tabbing order render/update 2`] = `"<label class=\\"accessibility-tabbing-order devtools-checkbox-label devtools-ellipsis-text\\" for=\\"devtools-display-tabbing-order-checkbox\\" title=\\"Show tabbing order of elements and their tabbing index.\\"><input id=\\"devtools-display-tabbing-order-checkbox\\" class=\\"devtools-checkbox\\" type=\\"checkbox\\">Show Tabbing Order</label>"`; + +exports[`DisplayTabbingOrder component: toggle tabbing order overlay 1`] = `"<label class=\\"accessibility-tabbing-order devtools-checkbox-label devtools-ellipsis-text\\" for=\\"devtools-display-tabbing-order-checkbox\\" title=\\"Show tabbing order of elements and their tabbing index.\\"><input id=\\"devtools-display-tabbing-order-checkbox\\" class=\\"devtools-checkbox\\" type=\\"checkbox\\">Show Tabbing Order</label>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-badge.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-badge.test.js.snap new file mode 100644 index 0000000000..f1d9bc5c76 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-badge.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`KeyboardBadge component: error render 1`] = `null`; + +exports[`KeyboardBadge component: fail render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"FAIL\\" title=\\"Does not meet WCAG standards for keyboard accessibility.\\" aria-label=\\"keyboard\\">keyboard</span>"`; + +exports[`KeyboardBadge component: warning render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"WARNING\\" title=\\"Does not meet WCAG standards for keyboard accessibility.\\" aria-label=\\"keyboard\\">keyboard</span>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-check.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-check.test.js.snap new file mode 100644 index 0000000000..60b66cc6dc --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/keyboard-check.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`KeyboardCheck component: FAIL render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; + +exports[`KeyboardCheck component: FAIL render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; + +exports[`KeyboardCheck component: WARNING render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; + +exports[`KeyboardCheck component: WARNING render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/text-label-badge.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/text-label-badge.test.js.snap new file mode 100644 index 0000000000..4f43a73a62 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/text-label-badge.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TextLabelBadge component: best practices render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"BEST_PRACTICES\\" title=\\"Does not meet WCAG standards for text alternative.\\" aria-label=\\"text label\\">text label</span>"`; + +exports[`TextLabelBadge component: error render 1`] = `null`; + +exports[`TextLabelBadge component: fail render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"FAIL\\" title=\\"Does not meet WCAG standards for text alternative.\\" aria-label=\\"text label\\">text label</span>"`; + +exports[`TextLabelBadge component: warning render 1`] = `"<span class=\\"audit-badge badge\\" data-score=\\"WARNING\\" title=\\"Does not meet WCAG standards for text alternative.\\" aria-label=\\"text label\\">text label</span>"`; diff --git a/devtools/client/accessibility/test/node/components/__snapshots__/text-label-check.test.js.snap b/devtools/client/accessibility/test/node/components/__snapshots__/text-label-check.test.js.snap new file mode 100644 index 0000000000..7a5735f3e0 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/__snapshots__/text-label-check.test.js.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TextLabelCheck component: BEST_PRACTICES render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/info.svg\\" data-score=\\"BEST_PRACTICES\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; + +exports[`TextLabelCheck component: BEST_PRACTICES render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/info.svg\\" data-score=\\"BEST_PRACTICES\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; + +exports[`TextLabelCheck component: FAIL render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; + +exports[`TextLabelCheck component: FAIL render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" data-score=\\"FAIL\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; + +exports[`TextLabelCheck component: WARNING render 1`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; + +exports[`TextLabelCheck component: WARNING render 2`] = `"<div role=\\"presentation\\" tabindex=\\"-1\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" tabindex=\\"-1\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" data-score=\\"WARNING\\" class=\\"icon\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`; diff --git a/devtools/client/accessibility/test/node/components/accessibility-prefs.test.js b/devtools/client/accessibility/test/node/components/accessibility-prefs.test.js new file mode 100644 index 0000000000..efd247d789 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/accessibility-prefs.test.js @@ -0,0 +1,107 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); + +const MenuButton = require("resource://devtools/client/shared/components/menu/MenuButton.js"); +const ConnectedAccessibilityPrefsClass = require("resource://devtools/client/accessibility/components/AccessibilityPrefs.js"); +const AccessibilityPrefsClass = + ConnectedAccessibilityPrefsClass.WrappedComponent; +const AccessibilityPrefs = createFactory(ConnectedAccessibilityPrefsClass); +const { + checkMenuItem, + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const { + PREFS, +} = require("resource://devtools/client/accessibility/constants.js"); + +function checkTogglePrefCheckbox(wrapper, pref) { + const prefsInstance = wrapper.find(AccessibilityPrefsClass).instance(); + prefsInstance.togglePref = jest.fn(); + pref instanceof Node ? pref.click() : pref.simulate("click"); + expect(prefsInstance.togglePref.mock.calls.length).toBe(1); +} + +function getMenuItems(wrapper, selector) { + const menuButton = wrapper.find(MenuButton); + // Focusing on the menu button will trigger rendering of the HTMLTooltip with + // the menu list. + menuButton.childAt(0).getDOMNode().focus(); + + return menuButton + .instance() + .tooltip.panel.querySelectorAll(`.menuitem ${selector}`); +} + +function checkPrefsState(wrapper, expected) { + const prefs = getMenuItems(wrapper, ".pref"); + for (let i = 0; i < prefs.length; i++) { + checkMenuItem(prefs[i], { + checked: expected.prefs[i].active, + label: expected.prefs[i].text, + }); + } + checkMenuItem(getMenuItems(wrapper, ".help")[0], { + role: "link", + label: "Documentation…", + }); +} + +describe("AccessibilityPrefs component:", () => { + it("prefs not set by default", () => { + const store = setupStore(); + const wrapper = mount( + Provider({ store }, AccessibilityPrefs({ toolboxDoc: document })) + ); + const accPrefs = wrapper.find(AccessibilityPrefsClass); + const menuButton = accPrefs.childAt(0); + + expect(wrapper.html()).toMatchSnapshot(); + expect(accPrefs.children().length).toBe(1); + expect(menuButton.is(MenuButton)).toBe(true); + + checkPrefsState(wrapper, { + prefs: [{ active: false, text: "Scroll into view" }], + }); + }); + + it("prefs checked", () => { + const store = setupStore({ + preloadedState: { + ui: { + [PREFS.SCROLL_INTO_VIEW]: true, + }, + }, + }); + const wrapper = mount( + Provider({ store }, AccessibilityPrefs({ toolboxDoc: document })) + ); + expect(wrapper.html()).toMatchSnapshot(); + checkPrefsState(wrapper, { + prefs: [{ active: true, text: "Scroll into view" }], + }); + }); + + it("toggle pref", () => { + const store = setupStore(); + const wrapper = mount( + Provider({ store }, AccessibilityPrefs({ toolboxDoc: document })) + ); + + expect(wrapper.html()).toMatchSnapshot(); + for (const pref of getMenuItems(wrapper, ".pref")) { + checkTogglePrefCheckbox(wrapper, pref); + } + }); +}); diff --git a/devtools/client/accessibility/test/node/components/accessibility-row-value.test.js b/devtools/client/accessibility/test/node/components/accessibility-row-value.test.js new file mode 100644 index 0000000000..5e73f0f18f --- /dev/null +++ b/devtools/client/accessibility/test/node/components/accessibility-row-value.test.js @@ -0,0 +1,56 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); +const { + mockAccessible, + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const Badges = require("resource://devtools/client/accessibility/components/Badges.js"); +const { + REPS: { Rep }, +} = require("resource://devtools/client/shared/components/reps/index.js"); +const AuditController = require("resource://devtools/client/accessibility/components/AuditController.js"); + +const AccessibilityRowValueClass = require("resource://devtools/client/accessibility/components/AccessibilityRowValue.js"); +const AccessibilityRowValue = createFactory(AccessibilityRowValueClass); + +describe("AccessibilityRowValue component:", () => { + it("basic render", () => { + const store = setupStore({ + preloadedState: { ui: { supports: {} } }, + }); + const wrapper = mount( + Provider( + { store }, + AccessibilityRowValue({ + member: { object: mockAccessible() }, + }) + ) + ); + + expect(wrapper.html()).toMatchSnapshot(); + const rowValue = wrapper.find(AccessibilityRowValueClass); + expect(rowValue.children().length).toBe(1); + const container = rowValue.childAt(0); + expect(container.type()).toBe("span"); + expect(container.prop("role")).toBe("presentation"); + expect(container.children().length).toBe(2); + expect(container.childAt(0).type()).toBe(Rep); + const controller = container.childAt(1); + expect(controller.type()).toBe(AuditController); + expect(controller.children().length).toBe(1); + expect(controller.childAt(0).type()).toBe(Badges); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/accessibility-tree-filter.test.js b/devtools/client/accessibility/test/node/components/accessibility-tree-filter.test.js new file mode 100644 index 0000000000..af37a8318d --- /dev/null +++ b/devtools/client/accessibility/test/node/components/accessibility-tree-filter.test.js @@ -0,0 +1,437 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); + +const MenuButton = require("resource://devtools/client/shared/components/menu/MenuButton.js"); +const ConnectedAccessibilityTreeFilterClass = require("resource://devtools/client/accessibility/components/AccessibilityTreeFilter.js"); +const AccessibilityTreeFilterClass = + ConnectedAccessibilityTreeFilterClass.WrappedComponent; +const AccessibilityTreeFilter = createFactory( + ConnectedAccessibilityTreeFilterClass +); +const { + checkMenuItem, + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const { + AUDIT, + AUDITING, + FILTERS, + FILTER_TOGGLE, +} = require("resource://devtools/client/accessibility/constants.js"); + +function checkToggleFilterCheckbox(wrapper, filter) { + const filterInstance = wrapper.find(AccessibilityTreeFilterClass).instance(); + filterInstance.toggleFilter = jest.fn(); + filter.click(); + expect(filterInstance.toggleFilter.mock.calls.length).toBe(1); +} + +function getMenuItems(wrapper, selector) { + const menuButton = wrapper.find(MenuButton); + // Focusing on the menu button will trigger rendering of the HTMLTooltip with + // the menu list. + menuButton.childAt(0).getDOMNode().focus(); + + return menuButton + .instance() + .tooltip.panel.querySelectorAll(`.menuitem ${selector}`); +} + +function checkFiltersState(wrapper, expected) { + const filters = getMenuItems(wrapper, ".filter"); + for (let i = 0; i < filters.length; i++) { + checkMenuItem(filters[i], { + checked: expected.filters[i].active, + label: expected.filters[i].text, + disabled: expected.filters[i].disabled, + }); + } +} + +describe("AccessibilityTreeFilter component:", () => { + it("audit filter not filtered", () => { + const store = setupStore(); + const wrapper = mount( + Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document })) + ); + const accTreeFilter = wrapper.find(AccessibilityTreeFilterClass); + const toolbar = accTreeFilter.childAt(0); + + expect(wrapper.html()).toMatchSnapshot(); + expect(accTreeFilter.children().length).toBe(1); + expect(toolbar.is("div")).toBe(true); + expect(toolbar.prop("role")).toBe("group"); + + checkFiltersState(wrapper, { + filters: [ + { active: true, disabled: false, text: "None" }, + { active: false, disabled: false, text: "All Issues" }, + { + active: false, + disabled: false, + text: "Contrast", + }, + { + active: false, + disabled: false, + text: "Keyboard", + }, + { + active: false, + disabled: false, + text: "Text Labels", + }, + ], + }); + }); + + it("audit filters filtered", () => { + const store = setupStore({ + preloadedState: { + audit: { + filters: { + [FILTERS.ALL]: true, + [FILTERS.CONTRAST]: true, + [FILTERS.KEYBOARD]: true, + [FILTERS.TEXT_LABEL]: true, + }, + auditing: [], + }, + }, + }); + const wrapper = mount( + Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document })) + ); + expect(wrapper.html()).toMatchSnapshot(); + checkFiltersState(wrapper, { + filters: [ + { active: false, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + ], + }); + }); + + it("audit all filter not filtered auditing", () => { + const store = setupStore({ + preloadedState: { + audit: { + filters: { + [FILTERS.ALL]: false, + }, + auditing: [FILTERS.ALL], + }, + }, + }); + const wrapper = mount( + Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document })) + ); + expect(wrapper.html()).toMatchSnapshot(); + checkFiltersState(wrapper, { + filters: [ + { active: true, disabled: false, text: "None" }, + { active: false, disabled: true, text: "All Issues" }, + ], + }); + }); + + it("audit other filter not filtered auditing", () => { + const store = setupStore({ + preloadedState: { + audit: { + filters: { + [FILTERS.ALL]: false, + [FILTERS.CONTRAST]: false, + [FILTERS.KEYBOARD]: false, + [FILTERS.TEXT_LABEL]: false, + }, + auditing: [FILTERS.CONTRAST], + }, + }, + }); + const wrapper = mount( + Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document })) + ); + expect(wrapper.html()).toMatchSnapshot(); + checkFiltersState(wrapper, { + filters: [ + { active: true, disabled: true }, + { active: false, disabled: false }, + { active: false, disabled: true }, + { active: false, disabled: false }, + { active: false, disabled: false }, + ], + }); + }); + + it("audit all filter filtered auditing", () => { + const store = setupStore({ + preloadedState: { + audit: { + filters: { + [FILTERS.ALL]: true, + }, + auditing: [FILTERS.ALL], + }, + }, + }); + const wrapper = mount( + Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document })) + ); + const filters = getMenuItems(wrapper, ".filter"); + expect(wrapper.html()).toMatchSnapshot(); + checkMenuItem(filters[1], { checked: true, disabled: true }); + }); + + it("audit other filter filtered auditing", () => { + const store = setupStore({ + preloadedState: { + audit: { + filters: { + [FILTERS.ALL]: false, + [FILTERS.CONTRAST]: true, + [FILTERS.KEYBOARD]: false, + [FILTERS.TEXT_LABEL]: false, + }, + auditing: [FILTERS.CONTRAST], + }, + }, + }); + const wrapper = mount( + Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document })) + ); + expect(wrapper.html()).toMatchSnapshot(); + checkFiltersState(wrapper, { + filters: [ + { active: false, disabled: true }, + { active: false, disabled: false }, + { active: true, disabled: true }, + { active: false, disabled: false }, + { active: false, disabled: false }, + ], + }); + }); + + it("toggle filter", () => { + const store = setupStore(); + const wrapper = mount( + Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document })) + ); + const filters = getMenuItems(wrapper, ".filter"); + + expect(wrapper.html()).toMatchSnapshot(); + for (const filter of filters) { + checkToggleFilterCheckbox(wrapper, filter); + } + }); + + it("render filters after state changes", () => { + const store = setupStore(); + const wrapper = mount( + Provider({ store }, AccessibilityTreeFilter({ toolboxDoc: document })) + ); + const tests = [ + { + expected: { + filters: [ + { active: true, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + ], + }, + }, + { + action: { + type: AUDITING, + auditing: Object.values(FILTERS), + }, + expected: { + filters: [ + { active: true, disabled: true }, + { active: false, disabled: true }, + { active: false, disabled: true }, + { active: false, disabled: true }, + { active: false, disabled: true }, + ], + }, + }, + { + action: { + type: AUDIT, + response: [], + }, + expected: { + filters: [ + { active: true, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + ], + }, + }, + { + action: { + type: FILTER_TOGGLE, + filter: FILTERS.ALL, + }, + expected: { + filters: [ + { active: false, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + ], + }, + }, + { + action: { + type: FILTER_TOGGLE, + filter: FILTERS.CONTRAST, + }, + expected: { + filters: [ + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + ], + }, + }, + { + action: { + type: AUDITING, + auditing: [FILTERS.CONTRAST], + }, + expected: { + filters: [ + { active: false, disabled: true }, + { active: false, disabled: false }, + { active: false, disabled: true }, + { active: true, disabled: false }, + { active: true, disabled: false }, + ], + }, + }, + { + action: { + type: AUDIT, + response: [], + }, + expected: { + filters: [ + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + ], + }, + }, + { + action: { + type: FILTER_TOGGLE, + filter: FILTERS.CONTRAST, + }, + expected: { + filters: [ + { active: false, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + { active: true, disabled: false }, + ], + }, + }, + { + action: { + type: FILTER_TOGGLE, + filter: FILTERS.NONE, + }, + expected: { + filters: [ + { active: true, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + ], + }, + }, + { + action: { + type: AUDITING, + auditing: [FILTERS.TEXT_LABEL], + }, + expected: { + filters: [ + { active: true, disabled: true }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: true }, + ], + }, + }, + { + action: { + type: AUDIT, + response: [], + }, + expected: { + filters: [ + { active: true, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + ], + }, + }, + { + action: { + type: FILTER_TOGGLE, + filter: FILTERS.TEXT_LABEL, + }, + expected: { + filters: [ + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: false, disabled: false }, + { active: true, disabled: false }, + ], + }, + }, + ]; + + for (const test of tests) { + const { action, expected } = test; + if (action) { + store.dispatch(action); + wrapper.update(); + } + + expect(wrapper.html()).toMatchSnapshot(); + checkFiltersState(wrapper, expected); + } + }); +}); diff --git a/devtools/client/accessibility/test/node/components/audit-controller.test.js b/devtools/client/accessibility/test/node/components/audit-controller.test.js new file mode 100644 index 0000000000..ad8ba3ee2b --- /dev/null +++ b/devtools/client/accessibility/test/node/components/audit-controller.test.js @@ -0,0 +1,91 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + span, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const AuditController = createFactory( + require("resource://devtools/client/accessibility/components/AuditController.js") +); +const { + mockAccessible, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +describe("AuditController component:", () => { + it("dead accessible actor", () => { + const accessibleFront = mockAccessible(); + const wrapper = mount( + AuditController( + { + accessibleFront, + }, + span() + ) + ); + + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.find("span").length).toBe(1); + expect(wrapper.find("span").first().props()).toMatchObject({ + checks: undefined, + }); + + const instance = wrapper.instance(); + expect(accessibleFront.on.mock.calls.length).toBe(1); + expect(accessibleFront.off.mock.calls.length).toBe(1); + expect(accessibleFront.on.mock.calls[0]).toEqual([ + "audited", + instance.onAudited, + ]); + expect(accessibleFront.off.mock.calls[0]).toEqual([ + "audited", + instance.onAudited, + ]); + }); + + it("accessible without checks", () => { + const accessibleFront = mockAccessible({ + actorID: "1", + }); + const wrapper = mount( + AuditController( + { + accessibleFront, + }, + span() + ) + ); + + expect(wrapper.html()).toMatchSnapshot(); + expect(accessibleFront.audit.mock.calls.length).toBe(1); + expect(accessibleFront.on.mock.calls.length).toBe(1); + expect(accessibleFront.off.mock.calls.length).toBe(0); + }); + + it("accessible with checks", () => { + const checks = { foo: "bar" }; + const accessibleFront = mockAccessible({ + actorID: "1", + checks, + }); + const wrapper = mount( + AuditController( + { + accessibleFront, + }, + span({ className: "child" }) + ) + ); + + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.state("checks")).toMatchObject(checks); + expect(wrapper.find(".child").prop("checks")).toMatchObject(checks); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/audit-filter.test.js b/devtools/client/accessibility/test/node/components/audit-filter.test.js new file mode 100644 index 0000000000..a38efa12ae --- /dev/null +++ b/devtools/client/accessibility/test/node/components/audit-filter.test.js @@ -0,0 +1,153 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + span, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); + +const ConnectedAuditFilterClass = require("resource://devtools/client/accessibility/components/AuditFilter.js"); +const AuditFilterClass = ConnectedAuditFilterClass.WrappedComponent; +const AuditFilter = createFactory(ConnectedAuditFilterClass); +const { + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); +const { + FILTERS, +} = require("resource://devtools/client/accessibility/constants.js"); + +const { + accessibility: { SCORES }, +} = require("resource://devtools/shared/constants.js"); + +describe("AuditController component:", () => { + it("audit filter not filtered", () => { + const store = setupStore(); + + const wrapper = mount(Provider({ store }, AuditFilter({}, span()))); + expect(wrapper.html()).toMatchSnapshot(); + + const filter = wrapper.find(AuditFilterClass); + expect(filter.children().length).toBe(1); + expect(filter.childAt(0).is("span")).toBe(true); + }); + + it("audit filter filtered no checks", () => { + const store = setupStore({ + preloadedState: { audit: { filters: { [FILTERS.CONTRAST]: true } } }, + }); + + const wrapper = mount(Provider({ store }, AuditFilter({}, span()))); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("audit filter filtered unknown checks", () => { + const store = setupStore({ + preloadedState: { audit: { filters: { tbd: true } } }, + }); + + const wrapper = mount(Provider({ store }, AuditFilter({}, span()))); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("audit filter filtered contrast checks success", () => { + const store = setupStore({ + preloadedState: { audit: { filters: { [FILTERS.CONTRAST]: true } } }, + }); + + const wrapper = mount( + Provider( + { store }, + AuditFilter( + { + checks: { + CONTRAST: { + value: 5.11, + color: [255, 0, 0, 1], + backgroundColor: [255, 255, 255, 1], + isLargeText: false, + score: SCORES.AA, + }, + }, + }, + span() + ) + ) + ); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("audit filter filtered contrast checks fail", () => { + const store = setupStore({ + preloadedState: { audit: { filters: { [FILTERS.CONTRAST]: true } } }, + }); + + const CONTRAST = { + value: 3.1, + color: [255, 0, 0, 1], + backgroundColor: [255, 255, 255, 1], + isLargeText: false, + score: SCORES.FAIL, + }; + + const wrapper = mount( + Provider( + { store }, + AuditFilter( + { + checks: { CONTRAST }, + }, + span() + ) + ) + ); + expect(wrapper.html()).toMatchSnapshot(); + const filter = wrapper.find(AuditFilterClass); + expect(filter.children().length).toBe(1); + expect(filter.childAt(0).is("span")).toBe(true); + }); + + it("audit filter filtered contrast checks fail range", () => { + const store = setupStore({ + preloadedState: { audit: { filters: { [FILTERS.CONTRAST]: true } } }, + }); + + const CONTRAST = { + min: 1.19, + max: 1.39, + color: [128, 128, 128, 1], + backgroundColorMin: [219, 106, 116, 1], + backgroundColorMax: [156, 145, 211, 1], + isLargeText: false, + score: SCORES.FAIL, + }; + + const wrapper = mount( + Provider( + { store }, + AuditFilter( + { + checks: { CONTRAST }, + }, + span() + ) + ) + ); + expect(wrapper.html()).toMatchSnapshot(); + const filter = wrapper.find(AuditFilterClass); + expect(filter.children().length).toBe(1); + expect(filter.childAt(0).is("span")).toBe(true); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/audit-progress-overlay.test.js b/devtools/client/accessibility/test/node/components/audit-progress-overlay.test.js new file mode 100644 index 0000000000..797bbce1a1 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/audit-progress-overlay.test.js @@ -0,0 +1,126 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); +const { + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const { + accessibility: { AUDIT_TYPE }, +} = require("resource://devtools/shared/constants.js"); +const { + AUDIT_PROGRESS, +} = require("resource://devtools/client/accessibility/constants.js"); + +const ConnectedAuditProgressOverlayClass = require("resource://devtools/client/accessibility/components/AuditProgressOverlay.js"); +const AuditProgressOverlayClass = + ConnectedAuditProgressOverlayClass.WrappedComponent; +const AuditProgressOverlay = createFactory(ConnectedAuditProgressOverlayClass); + +function testTextProgressBar(store, expectedText) { + const wrapper = mount(Provider({ store }, AuditProgressOverlay())); + expect(wrapper.html()).toMatchSnapshot(); + + const overlay = wrapper.find(AuditProgressOverlayClass); + expect(overlay.children().length).toBe(1); + + const overlayText = overlay.childAt(0); + expect(overlayText.type()).toBe("span"); + expect(overlayText.prop("id")).toBe("audit-progress-container"); + expect(overlayText.prop("role")).toBe("progressbar"); + expect(overlayText.prop("aria-valuetext")).toBe(expectedText); + expect(overlayText.text()).toBe(expectedText); +} + +function testProgress(wrapper, percentage) { + const progress = wrapper.find("progress"); + expect(progress.prop("max")).toBe(100); + expect(progress.prop("value")).toBe(percentage); + expect(progress.hasClass("audit-progress-progressbar")).toBe(true); + expect(progress.prop("aria-labelledby")).toBe("audit-progress-container"); +} + +describe("AuditProgressOverlay component:", () => { + it("render not auditing", () => { + const store = setupStore(); + const wrapper = mount(Provider({ store }, AuditProgressOverlay())); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("render auditing initializing", () => { + const store = setupStore({ + preloadedState: { audit: { auditing: [AUDIT_TYPE.CONTRAST] } }, + }); + + testTextProgressBar(store, "Initializing…"); + }); + + it("render auditing progress", () => { + const store = setupStore({ + preloadedState: { + audit: { + auditing: [AUDIT_TYPE.CONTRAST], + progress: { total: 5, percentage: 0 }, + }, + }, + }); + + const wrapper = mount(Provider({ store }, AuditProgressOverlay())); + expect(wrapper.html()).toMatchSnapshot(); + + const overlay = wrapper.find(AuditProgressOverlayClass); + expect(overlay.children().length).toBe(1); + + const overlayContainer = overlay.childAt(0); + expect(overlayContainer.type()).toBe("span"); + expect(overlayContainer.prop("id")).toBe("audit-progress-container"); + expect(overlayContainer.children().length).toBe(1); + + expect(overlayContainer.text()).toBe("Checking 5 nodes"); + expect(overlayContainer.childAt(0).type()).toBe("progress"); + + testProgress(wrapper, 0); + + store.dispatch({ + type: AUDIT_PROGRESS, + progress: { total: 5, percentage: 50 }, + }); + wrapper.update(); + + expect(wrapper.html()).toMatchSnapshot(); + testProgress(wrapper, 50); + + store.dispatch({ + type: AUDIT_PROGRESS, + progress: { total: 5, percentage: 75 }, + }); + wrapper.update(); + + expect(wrapper.html()).toMatchSnapshot(); + testProgress(wrapper, 75); + }); + + it("render auditing finishing up", () => { + const store = setupStore({ + preloadedState: { + audit: { + auditing: [AUDIT_TYPE.CONTRAST], + progress: { total: 5, percentage: 100 }, + }, + }, + }); + + testTextProgressBar(store, "Finishing up…"); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/badge.test.js b/devtools/client/accessibility/test/node/components/badge.test.js new file mode 100644 index 0000000000..4285d1adb5 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/badge.test.js @@ -0,0 +1,42 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); +const { + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const BadgeClass = require("resource://devtools/client/accessibility/components/Badge.js"); +const Badge = createFactory(BadgeClass); + +describe("Badge component:", () => { + const label = "Contrast"; + const tooltip = "Does not meet WCAG standards for accessible text."; + const props = { label, tooltip }; + + it("basic render", () => { + const store = setupStore(); + const wrapper = mount(Provider({ store }, Badge(props))); + expect(wrapper.html()).toMatchSnapshot(); + + const badge = wrapper.find(BadgeClass); + expect(badge.children().length).toBe(1); + expect( + badge.find(`span[aria-label="${label}"][title="${tooltip}"]`) + ).toHaveLength(1); + + const badgeText = badge.childAt(0); + expect(badgeText.hasClass("audit-badge")).toBe(true); + expect(badgeText.hasClass("badge")).toBe(true); + expect(badgeText.text()).toBe(label); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/badges.test.js b/devtools/client/accessibility/test/node/components/badges.test.js new file mode 100644 index 0000000000..c98e4602ac --- /dev/null +++ b/devtools/client/accessibility/test/node/components/badges.test.js @@ -0,0 +1,114 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); +const { + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const Badge = require("resource://devtools/client/accessibility/components/Badge.js"); +const Badges = createFactory( + require("resource://devtools/client/accessibility/components/Badges.js") +); +const ContrastBadge = require("resource://devtools/client/accessibility/components/ContrastBadge.js"); + +const { + accessibility: { SCORES }, +} = require("resource://devtools/shared/constants.js"); + +describe("Badges component:", () => { + const store = setupStore(); + + it("no props render", () => { + const wrapper = mount(Provider({ store }, Badges())); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("null checks render", () => { + const wrapper = mount(Provider({ store }, Badges({ checks: null }))); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("empty checks render", () => { + const wrapper = mount(Provider({ store }, Badges({ checks: {} }))); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("unsupported checks render", () => { + const wrapper = mount(Provider({ store }, Badges({ checks: { tbd: {} } }))); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("contrast ratio success render", () => { + const wrapper = mount( + Provider( + { store }, + Badges({ + checks: { + CONTRAST: { + value: 5.11, + color: [255, 0, 0, 1], + backgroundColor: [255, 255, 255, 1], + isLargeText: false, + score: SCORES.AA, + }, + }, + }) + ) + ); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("contrast ratio fail render", () => { + const CONTRAST = { + value: 3.1, + color: [255, 0, 0, 1], + backgroundColor: [255, 255, 255, 1], + isLargeText: false, + score: SCORES.FAIL, + }; + const wrapper = mount( + Provider({ store }, Badges({ checks: { CONTRAST } })) + ); + + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.find(Badge).length).toBe(1); + expect(wrapper.find(ContrastBadge).length).toBe(1); + expect(wrapper.find(ContrastBadge).first().props()).toMatchObject(CONTRAST); + }); + + it("contrast ratio fail range render", () => { + const CONTRAST = { + min: 1.19, + max: 1.39, + color: [128, 128, 128, 1], + backgroundColorMin: [219, 106, 116, 1], + backgroundColorMax: [156, 145, 211, 1], + isLargeText: false, + score: SCORES.FAIL, + }; + const wrapper = mount( + Provider({ store }, Badges({ checks: { CONTRAST } })) + ); + + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.find(Badge).length).toBe(1); + expect(wrapper.find(ContrastBadge).length).toBe(1); + expect(wrapper.find(ContrastBadge).first().props()).toMatchObject(CONTRAST); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/check.test.js b/devtools/client/accessibility/test/node/components/check.test.js new file mode 100644 index 0000000000..ef024ea0ab --- /dev/null +++ b/devtools/client/accessibility/test/node/components/check.test.js @@ -0,0 +1,50 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const CheckClass = require("resource://devtools/client/accessibility/components/Check.js"); +const Check = createFactory(CheckClass); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const LocalizationProvider = createFactory(FluentReact.LocalizationProvider); + +const { + accessibility: { + AUDIT_TYPE: { TEXT_LABEL }, + ISSUE_TYPE: { + [TEXT_LABEL]: { AREA_NO_NAME_FROM_ALT }, + }, + SCORES: { FAIL }, + }, +} = require("resource://devtools/shared/constants.js"); + +const { + testCheck, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +describe("Check component:", () => { + const props = { + id: "accessibility-text-label-header", + issue: AREA_NO_NAME_FROM_ALT, + score: FAIL, + getAnnotation: jest.fn(), + }; + + it("basic render", () => { + const wrapper = mount(LocalizationProvider({ bundles: [] }, Check(props))); + expect(wrapper.html()).toMatchSnapshot(); + + testCheck(wrapper.childAt(0), { + issue: AREA_NO_NAME_FROM_ALT, + score: FAIL, + }); + expect(props.getAnnotation.mock.calls.length).toBe(1); + expect(props.getAnnotation.mock.calls[0]).toEqual([AREA_NO_NAME_FROM_ALT]); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/contrast-badge.test.js b/devtools/client/accessibility/test/node/components/contrast-badge.test.js new file mode 100644 index 0000000000..c96134b834 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/contrast-badge.test.js @@ -0,0 +1,96 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { shallow, mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); + +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); +const { + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const Badge = require("resource://devtools/client/accessibility/components/Badge.js"); +const ContrastBadgeClass = require("resource://devtools/client/accessibility/components/ContrastBadge.js"); +const ContrastBadge = createFactory(ContrastBadgeClass); + +const { + accessibility: { SCORES }, +} = require("resource://devtools/shared/constants.js"); + +describe("ContrastBadge component:", () => { + const store = setupStore(); + + it("error render", () => { + const wrapper = shallow(ContrastBadge({ error: true })); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("success render", () => { + const wrapper = shallow( + ContrastBadge({ + value: 5.11, + isLargeText: false, + score: SCORES.AA, + }) + ); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("success range render", () => { + const wrapper = shallow( + ContrastBadge({ + min: 5.11, + max: 6.25, + isLargeText: false, + score: SCORES.AA, + }) + ); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("success large text render", () => { + const wrapper = shallow( + ContrastBadge({ + value: 3.77, + isLargeText: true, + score: SCORES.AA, + }) + ); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("fail render", () => { + const wrapper = mount( + Provider( + { store }, + ContrastBadge({ + value: 3.77, + isLargeText: false, + score: SCORES.FAIL, + }) + ) + ); + + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.children().length).toBe(1); + const contrastBadge = wrapper.find(ContrastBadgeClass); + const badge = contrastBadge.childAt(0); + expect(badge.type()).toBe(Badge); + expect(badge.props()).toMatchObject({ + label: "contrast", + tooltip: "Does not meet WCAG standards for accessible text.", + }); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/display-tabbing-order.test.js b/devtools/client/accessibility/test/node/components/display-tabbing-order.test.js new file mode 100644 index 0000000000..65952a10e5 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/display-tabbing-order.test.js @@ -0,0 +1,91 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); +const { + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); +const { + UPDATE_DISPLAY_TABBING_ORDER, +} = require("resource://devtools/client/accessibility/constants.js"); + +const ConnectedDisplayTabbingOrderClass = require("resource://devtools/client/accessibility/components/DisplayTabbingOrder.js"); +const DisplayTabbingOrderClass = + ConnectedDisplayTabbingOrderClass.WrappedComponent; +const DisplayTabbingOrder = createFactory(ConnectedDisplayTabbingOrderClass); + +function testCheckbox(wrapper, expected) { + expect(wrapper.html()).toMatchSnapshot(); + const displayTabbingOrder = wrapper.find(DisplayTabbingOrderClass); + expect(displayTabbingOrder.children().length).toBe(1); + + // Label checks + const label = displayTabbingOrder.childAt(0); + expect(label.hasClass("accessibility-tabbing-order")).toBe(true); + expect(label.hasClass("devtools-checkbox-label")).toBe(true); + expect(label.prop("title")).toBe( + "Show tabbing order of elements and their tabbing index." + ); + expect(label.text()).toBe("Show Tabbing Order"); + expect(label.children().length).toBe(1); + + // Checkbox checks + const checkbox = label.childAt(0); + expect(checkbox.prop("checked")).toBe(expected.checked); + expect(checkbox.prop("disabled")).toBe(!!expected.disabled); +} + +describe("DisplayTabbingOrder component:", () => { + it("default render", () => { + const store = setupStore(); + const wrapper = mount(Provider({ store }, DisplayTabbingOrder())); + + testCheckbox(wrapper, { checked: false }); + }); + + it("toggle tabbing order overlay", () => { + const store = setupStore(); + const wrapper = mount(Provider({ store }, DisplayTabbingOrder())); + + expect(wrapper.html()).toMatchSnapshot(); + const displayTabbingOrderInstance = wrapper + .find(DisplayTabbingOrderClass) + .instance(); + displayTabbingOrderInstance.onChange = jest.fn(); + displayTabbingOrderInstance.forceUpdate(); + const checkbox = wrapper.find("input"); + checkbox.simulate("change"); + expect(displayTabbingOrderInstance.onChange.mock.calls.length).toBe(1); + }); + + it("displaying tabbing order render/update", () => { + const store = setupStore({ + preloadedState: { + ui: { + tabbingOrderDisplayed: true, + }, + }, + }); + const wrapper = mount(Provider({ store }, DisplayTabbingOrder())); + + testCheckbox(wrapper, { checked: true }); + + store.dispatch({ + type: UPDATE_DISPLAY_TABBING_ORDER, + tabbingOrderDisplayed: false, + }); + wrapper.update(); + + testCheckbox(wrapper, { checked: false }); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/keyboard-badge.test.js b/devtools/client/accessibility/test/node/components/keyboard-badge.test.js new file mode 100644 index 0000000000..ae462dd29e --- /dev/null +++ b/devtools/client/accessibility/test/node/components/keyboard-badge.test.js @@ -0,0 +1,73 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { shallow, mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); + +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); +const { + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const Badge = require("resource://devtools/client/accessibility/components/Badge.js"); +const KeyboardBadgeClass = require("resource://devtools/client/accessibility/components/KeyboardBadge.js"); +const KeyboardBadge = createFactory(KeyboardBadgeClass); +const { + accessibility: { SCORES }, +} = require("resource://devtools/shared/constants.js"); + +function testBadge(wrapper) { + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.children().length).toBe(1); + const keyboardBadge = wrapper.find(KeyboardBadgeClass); + const badge = keyboardBadge.childAt(0); + expect(badge.type()).toBe(Badge); + expect(badge.props()).toMatchObject({ + label: "keyboard", + tooltip: "Does not meet WCAG standards for keyboard accessibility.", + }); +} + +describe("KeyboardBadge component:", () => { + const store = setupStore(); + + it("error render", () => { + const wrapper = shallow(KeyboardBadge({ error: true })); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("fail render", () => { + const wrapper = mount( + Provider( + { store }, + KeyboardBadge({ + score: SCORES.FAIL, + }) + ) + ); + + testBadge(wrapper); + }); + + it("warning render", () => { + const wrapper = mount( + Provider( + { store }, + KeyboardBadge({ + score: SCORES.WARNING, + }) + ) + ); + + testBadge(wrapper); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/keyboard-check.test.js b/devtools/client/accessibility/test/node/components/keyboard-check.test.js new file mode 100644 index 0000000000..d0f16d0bb8 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/keyboard-check.test.js @@ -0,0 +1,47 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { mount } = require("enzyme"); +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const KeyboardCheckClass = require("resource://devtools/client/accessibility/components/KeyboardCheck.js"); +const KeyboardCheck = createFactory(KeyboardCheckClass); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const LocalizationProvider = createFactory(FluentReact.LocalizationProvider); + +const { + testCustomCheck, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const { + accessibility: { + AUDIT_TYPE: { KEYBOARD }, + ISSUE_TYPE: { + [KEYBOARD]: { INTERACTIVE_NO_ACTION, FOCUSABLE_NO_SEMANTICS }, + }, + SCORES: { FAIL, WARNING }, + }, +} = require("resource://devtools/shared/constants.js"); + +describe("KeyboardCheck component:", () => { + const testProps = [ + { score: FAIL, issue: INTERACTIVE_NO_ACTION }, + { score: WARNING, issue: FOCUSABLE_NO_SEMANTICS }, + ]; + + for (const props of testProps) { + it(`${props.score} render`, () => { + const wrapper = mount( + LocalizationProvider({ bundles: [] }, KeyboardCheck(props)) + ); + + const keyboardCheck = wrapper.find(KeyboardCheckClass); + testCustomCheck(keyboardCheck, props); + }); + } +}); diff --git a/devtools/client/accessibility/test/node/components/text-label-badge.test.js b/devtools/client/accessibility/test/node/components/text-label-badge.test.js new file mode 100644 index 0000000000..39510c0e92 --- /dev/null +++ b/devtools/client/accessibility/test/node/components/text-label-badge.test.js @@ -0,0 +1,86 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { shallow, mount } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); + +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); +const { + setupStore, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const Badge = require("resource://devtools/client/accessibility/components/Badge.js"); +const TextLabelBadgeClass = require("resource://devtools/client/accessibility/components/TextLabelBadge.js"); +const TextLabelBadge = createFactory(TextLabelBadgeClass); +const { + accessibility: { SCORES }, +} = require("resource://devtools/shared/constants.js"); + +function testBadge(wrapper) { + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.children().length).toBe(1); + const textLabelBadge = wrapper.find(TextLabelBadgeClass); + const badge = textLabelBadge.childAt(0); + expect(badge.type()).toBe(Badge); + expect(badge.props()).toMatchObject({ + label: "text label", + tooltip: "Does not meet WCAG standards for text alternative.", + }); +} + +describe("TextLabelBadge component:", () => { + const store = setupStore(); + + it("error render", () => { + const wrapper = shallow(TextLabelBadge({ error: true })); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.isEmptyRender()).toBe(true); + }); + + it("fail render", () => { + const wrapper = mount( + Provider( + { store }, + TextLabelBadge({ + score: SCORES.FAIL, + }) + ) + ); + + testBadge(wrapper); + }); + + it("warning render", () => { + const wrapper = mount( + Provider( + { store }, + TextLabelBadge({ + score: SCORES.WARNING, + }) + ) + ); + + testBadge(wrapper); + }); + + it("best practices render", () => { + const wrapper = mount( + Provider( + { store }, + TextLabelBadge({ + score: SCORES.BEST_PRACTICES, + }) + ) + ); + + testBadge(wrapper); + }); +}); diff --git a/devtools/client/accessibility/test/node/components/text-label-check.test.js b/devtools/client/accessibility/test/node/components/text-label-check.test.js new file mode 100644 index 0000000000..38a56ba3ce --- /dev/null +++ b/devtools/client/accessibility/test/node/components/text-label-check.test.js @@ -0,0 +1,52 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { mount } = require("enzyme"); +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const TextLabelCheckClass = require("resource://devtools/client/accessibility/components/TextLabelCheck.js"); +const TextLabelCheck = createFactory(TextLabelCheckClass); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const LocalizationProvider = createFactory(FluentReact.LocalizationProvider); + +const { + testCustomCheck, +} = require("resource://devtools/client/accessibility/test/node/helpers.js"); + +const { + accessibility: { + AUDIT_TYPE: { TEXT_LABEL }, + ISSUE_TYPE: { + [TEXT_LABEL]: { + AREA_NO_NAME_FROM_ALT, + DIALOG_NO_NAME, + FORM_NO_VISIBLE_NAME, + }, + }, + SCORES: { BEST_PRACTICES, FAIL, WARNING }, + }, +} = require("resource://devtools/shared/constants.js"); + +describe("TextLabelCheck component:", () => { + const testProps = [ + { issue: AREA_NO_NAME_FROM_ALT, score: FAIL }, + { issue: FORM_NO_VISIBLE_NAME, score: WARNING }, + { issue: DIALOG_NO_NAME, score: BEST_PRACTICES }, + ]; + + for (const props of testProps) { + it(`${props.score} render`, () => { + const wrapper = mount( + LocalizationProvider({ bundles: [] }, TextLabelCheck(props)) + ); + + const textLabelCheck = wrapper.find(TextLabelCheckClass); + testCustomCheck(textLabelCheck, props); + }); + } +}); |