diff options
Diffstat (limited to 'devtools/client/inspector/compatibility/test/node/components')
22 files changed, 1849 insertions, 0 deletions
diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-CompatibilityApp.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-CompatibilityApp.test.js.snap new file mode 100644 index 0000000000..64839057c7 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-CompatibilityApp.test.js.snap @@ -0,0 +1,84 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CompatibilityApp component renders with settings 1`] = ` +<section + className="compatibility-app theme-sidebar inspector-tabpanel" +> + <div + className="compatibility-app__container compatibility-app__container-hidden" + > + <Accordion + className="compatibility-app__main" + items={ + Array [ + Object { + "component": <IssuePane + issues={Array []} + />, + "header": "compatibility-selected-element-header", + "id": "compatibility-app--selected-element-pane", + "opened": true, + }, + Object { + "component": Array [ + <IssuePane + dispatch={[Function]} + issues={Array []} + />, + null, + ], + "header": "compatibility-all-elements-header", + "id": "compatibility-app--all-elements-pane", + "opened": true, + }, + ] + } + /> + <Connect(Footer) + className="compatibility-app__footer" + /> + </div> + <Connect(Settings) /> +</section> +`; + +exports[`CompatibilityApp component renders zero issues 1`] = ` +<section + className="compatibility-app theme-sidebar inspector-tabpanel" +> + <div + className="compatibility-app__container" + > + <Accordion + className="compatibility-app__main" + items={ + Array [ + Object { + "component": <IssuePane + issues={Array []} + />, + "header": "compatibility-selected-element-header", + "id": "compatibility-app--selected-element-pane", + "opened": true, + }, + Object { + "component": Array [ + <IssuePane + dispatch={[Function]} + issues={Array []} + />, + null, + ], + "header": "compatibility-all-elements-header", + "id": "compatibility-app--all-elements-pane", + "opened": true, + }, + ] + } + /> + <Connect(Footer) + className="compatibility-app__footer" + /> + </div> +</section> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Footer.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Footer.test.js.snap new file mode 100644 index 0000000000..62be938dd7 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Footer.test.js.snap @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Footer component renders 1`] = ` +<footer + className="compatibility-footer" +> + <Localized + attrs={ + Object { + "title": true, + } + } + id="compatibility-settings-button-title" + > + <button + className="compatibility-footer__button" + onClick={[Function]} + title="compatibility-settings-button-title" + > + <img + className="compatibility-footer__icon" + src="chrome://devtools/skin/images/settings.svg" + /> + <Localized + id="compatibility-settings-button-label" + > + <label + className="compatibility-footer__label" + > + compatibility-settings-button-label + </label> + </Localized> + </button> + </Localized> +</footer> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueItem.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueItem.test.js.snap new file mode 100644 index 0000000000..3d219629e9 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueItem.test.js.snap @@ -0,0 +1,348 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`IssueItem component renders a deprecated issue of CSS property 1`] = ` +<li + className="compatibility-issue-item compatibility-issue-item--deprecated" + key="test-property" +> + <div + className="compatibility-issue-item__description" + > + <a + className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link" + href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + onClick={[Function]} + title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + > + test-property + </a> + <Localized + id="compatibility-issue-deprecated" + > + <span + className="compatibility-issue-item__causes" + > + compatibility-issue-deprecated + </span> + </Localized> + </div> +</li> +`; + +exports[`IssueItem component renders a prefixNeeded issue of CSS property 1`] = ` +<li + className="compatibility-issue-item" + key="test-property" +> + <div + className="compatibility-issue-item__description" + > + <a + className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link" + href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + onClick={[Function]} + title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + > + test-property + </a> + <Localized + id="compatibility-issue-prefixneeded" + > + <span + className="compatibility-issue-item__causes" + > + compatibility-issue-prefixneeded + </span> + </Localized> + </div> + <ul + className="compatibility-issue-item__aliases" + > + <li + className="compatibility-issue-item__alias" + key="test-alias-1" + > + test-alias-1 + </li> + <li + className="compatibility-issue-item__alias" + key="test-alias-2" + > + test-alias-2 + </li> + </ul> +</li> +`; + +exports[`IssueItem component renders an experimental issue of CSS property 1`] = ` +<li + className="compatibility-issue-item compatibility-issue-item--experimental" + key="test-property" +> + <div + className="compatibility-issue-item__description" + > + <a + className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link" + href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + onClick={[Function]} + title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + > + test-property + </a> + <Localized + id="compatibility-issue-experimental" + > + <span + className="compatibility-issue-item__causes" + > + compatibility-issue-experimental + </span> + </Localized> + </div> +</li> +`; + +exports[`IssueItem component renders an issue which has deprecated and experimental 1`] = ` +<li + className="compatibility-issue-item compatibility-issue-item--deprecated compatibility-issue-item--experimental" + key="test-property" +> + <div + className="compatibility-issue-item__description" + > + <a + className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link" + href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + onClick={[Function]} + title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + > + test-property + </a> + <Localized + id="compatibility-issue-deprecated-experimental" + > + <span + className="compatibility-issue-item__causes" + > + compatibility-issue-deprecated-experimental + </span> + </Localized> + </div> + <ul + className="compatibility-issue-item__aliases" + > + <li + className="compatibility-issue-item__alias" + key="test-alias-1" + > + test-alias-1 + </li> + <li + className="compatibility-issue-item__alias" + key="test-alias-2" + > + test-alias-2 + </li> + </ul> +</li> +`; + +exports[`IssueItem component renders an issue which has deprecated and prefixNeeded 1`] = ` +<li + className="compatibility-issue-item compatibility-issue-item--deprecated" + key="test-property" +> + <div + className="compatibility-issue-item__description" + > + <a + className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link" + href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + onClick={[Function]} + title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + > + test-property + </a> + <Localized + id="compatibility-issue-deprecated-prefixneeded" + > + <span + className="compatibility-issue-item__causes" + > + compatibility-issue-deprecated-prefixneeded + </span> + </Localized> + </div> + <ul + className="compatibility-issue-item__aliases" + > + <li + className="compatibility-issue-item__alias" + key="test-alias-1" + > + test-alias-1 + </li> + <li + className="compatibility-issue-item__alias" + key="test-alias-2" + > + test-alias-2 + </li> + </ul> +</li> +`; + +exports[`IssueItem component renders an issue which has deprecated, experimental and prefixNeeded 1`] = ` +<li + className="compatibility-issue-item compatibility-issue-item--deprecated compatibility-issue-item--experimental" + key="test-property" +> + <div + className="compatibility-issue-item__description" + > + <a + className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link" + href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + onClick={[Function]} + title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + > + test-property + </a> + <Localized + id="compatibility-issue-deprecated-experimental-prefixneeded" + > + <span + className="compatibility-issue-item__causes" + > + compatibility-issue-deprecated-experimental-prefixneeded + </span> + </Localized> + </div> + <ul + className="compatibility-issue-item__aliases" + > + <li + className="compatibility-issue-item__alias" + key="test-alias-1" + > + test-alias-1 + </li> + <li + className="compatibility-issue-item__alias" + key="test-alias-2" + > + test-alias-2 + </li> + </ul> +</li> +`; + +exports[`IssueItem component renders an issue which has experimental and prefixNeeded 1`] = ` +<li + className="compatibility-issue-item compatibility-issue-item--experimental" + key="test-property" +> + <div + className="compatibility-issue-item__description" + > + <a + className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link" + href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + onClick={[Function]} + title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + > + test-property + </a> + <Localized + id="compatibility-issue-experimental-prefixneeded" + > + <span + className="compatibility-issue-item__causes" + > + compatibility-issue-experimental-prefixneeded + </span> + </Localized> + </div> + <ul + className="compatibility-issue-item__aliases" + > + <li + className="compatibility-issue-item__alias" + key="test-alias-1" + > + test-alias-1 + </li> + <li + className="compatibility-issue-item__alias" + key="test-alias-2" + > + test-alias-2 + </li> + </ul> +</li> +`; + +exports[`IssueItem component renders an issue which has nodes that caused this issue 1`] = ` +<li + className="compatibility-issue-item" + key="test-property" +> + <div + className="compatibility-issue-item__description" + > + <a + className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link" + href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + onClick={[Function]} + title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + > + test-property + </a> + </div> + <NodePane + nodes={ + Array [ + Object { + "actorID": "test-actor", + "attributes": Array [], + "nodeName": "test-element", + "nodeType": 1, + }, + ] + } + /> +</li> +`; + +exports[`IssueItem component renders an unsupported issue of CSS property 1`] = ` +<li + className="compatibility-issue-item compatibility-issue-item--unsupported" + key="test-property" +> + <div + className="compatibility-issue-item__description" + > + <a + className="compatibility-issue-item__property devtools-monospace compatibility-issue-item__mdn-link" + href="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + onClick={[Function]} + title="test-url?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default" + > + test-property + </a> + <UnsupportedBrowserList + browsers={ + Array [ + Object { + "id": "firefox", + "name": "Firefox", + "status": "nightly", + "version": "70", + }, + ] + } + /> + </div> +</li> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueList.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueList.test.js.snap new file mode 100644 index 0000000000..e89f2e721e --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueList.test.js.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`IssueList component renders some issues 1`] = ` +<ul + className="compatibility-issue-list" +> + <IssueItem + deprecated={false} + experimental={true} + property="border-block-color" + type="CSS_PROPERTY" + unsupportedBrowsers={Array []} + url="https://developer.mozilla.org/docs/Web/CSS/border-block-color" + /> + <IssueItem + aliases={ + Array [ + "user-modify", + ] + } + deprecated={true} + experimental={false} + property="user-modify" + type="CSS_PROPERTY_ALIASES" + unsupportedBrowsers={Array []} + url="https://developer.mozilla.org/docs/Web/CSS/user-modify" + /> +</ul> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssuePane.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssuePane.test.js.snap new file mode 100644 index 0000000000..579c1c1429 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssuePane.test.js.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`IssuePane component renders no issues 1`] = ` +<Localized + id="compatibility-no-issues-found" +> + <p + className="devtools-sidepanel-no-result" + > + compatibility-no-issues-found + </p> +</Localized> +`; + +exports[`IssuePane component renders some issues 1`] = ` +<IssueList + issues={ + Array [ + Object { + "deprecated": false, + "experimental": true, + "property": "border-block-color", + "type": "CSS_PROPERTY", + "unsupportedBrowsers": Array [], + "url": "https://developer.mozilla.org/docs/Web/CSS/border-block-color", + }, + Object { + "aliases": Array [ + "user-modify", + ], + "deprecated": true, + "experimental": false, + "property": "user-modify", + "type": "CSS_PROPERTY_ALIASES", + "unsupportedBrowsers": Array [], + "url": "https://developer.mozilla.org/docs/Web/CSS/user-modify", + }, + ] + } +/> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeItem.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeItem.test.js.snap new file mode 100644 index 0000000000..daf80ec227 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeItem.test.js.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NodeItem component renders a node 1`] = ` +<li + className="compatibility-node-item" +> + <span + className="objectBox objectBox-node clickable" + data-link-actor-id="test-actor" + onClick={[Function]} + onMouseOut={[Function]} + onMouseOver={[Function]} + > + <span + className="tag-name" + > + test-element + </span> + </span> +</li> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeList.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeList.test.js.snap new file mode 100644 index 0000000000..6e99ac9537 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeList.test.js.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NodeList component renders a node 1`] = ` +<ul + className="compatibility-node-list" +> + <NodeItem + node={ + Object { + "actorID": "test-actor", + "attributes": Array [], + "nodeName": "test-element", + "nodeType": 1, + } + } + /> +</ul> +`; + +exports[`NodeList component renders some nodes 1`] = ` +<ul + className="compatibility-node-list" +> + <NodeItem + node={ + Object { + "actorID": "test-actor-1", + "attributes": Array [], + "nodeName": "test-element-1", + "nodeType": 1, + } + } + /> + <NodeItem + node={ + Object { + "actorID": "test-actor-2", + "attributes": Array [], + "nodeName": "test-element-2", + "nodeType": 1, + } + } + /> +</ul> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodePane.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodePane.test.js.snap new file mode 100644 index 0000000000..2c2508703c --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodePane.test.js.snap @@ -0,0 +1,67 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NodePane component renders a node 1`] = ` +<details + className="compatibility-node-pane" + open={true} +> + <Localized + $number={1} + id="compatibility-issue-occurrences" + > + <summary + className="compatibility-node-pane__summary" + > + compatibility-issue-occurrences + </summary> + </Localized> + <NodeList + nodes={ + Array [ + Object { + "actorID": "test-actor", + "attributes": Array [], + "nodeName": "test-element", + "nodeType": 1, + }, + ] + } + /> +</details> +`; + +exports[`NodePane component renders some nodes 1`] = ` +<details + className="compatibility-node-pane" + open={false} +> + <Localized + $number={2} + id="compatibility-issue-occurrences" + > + <summary + className="compatibility-node-pane__summary" + > + compatibility-issue-occurrences + </summary> + </Localized> + <NodeList + nodes={ + Array [ + Object { + "actorID": "test-actor-1", + "attributes": Array [], + "nodeName": "test-element-1", + "nodeType": 1, + }, + Object { + "actorID": "test-actor-2", + "attributes": Array [], + "nodeName": "test-element-2", + "nodeType": 1, + }, + ] + } + /> +</details> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Settings.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Settings.test.js.snap new file mode 100644 index 0000000000..2f81b42dd6 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Settings.test.js.snap @@ -0,0 +1,367 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Settings component renders default browsers with a selected browsers 1`] = ` +<section + className="compatibility-settings" +> + <header + className="compatibility-settings__header" + > + <Localized + id="compatibility-settings-header" + > + <label + className="compatibility-settings__header-label" + > + compatibility-settings-header + </label> + </Localized> + <Localized + attrs={ + Object { + "title": true, + } + } + id="compatibility-close-settings-button" + > + <button + className="compatibility-settings__header-button" + onClick={[Function]} + title="compatibility-close-settings-button" + > + <img + className="compatibility-settings__header-icon" + src="chrome://devtools/skin/images/close.svg" + /> + </button> + </Localized> + </header> + <section + className="compatibility-settings__target-browsers" + > + <Localized + id="compatibility-target-browsers-header" + > + <header + className="compatibility-settings__target-browsers-header" + > + compatibility-target-browsers-header + </header> + </Localized> + <ul + className="compatibility-settings__target-browsers-list" + > + <li + className="compatibility-settings__target-browsers-item" + > + <input + checked={false} + data-id="firefox" + data-status="nightly" + id="firefox-nightly" + onChange={[Function]} + type="checkbox" + /> + <label + className="compatibility-settings__target-browsers-item-label" + htmlFor="firefox-nightly" + > + <BrowserIcon + id="firefox" + title="Firefox nightly" + /> + Firefox nightly (78) + </label> + </li> + <li + className="compatibility-settings__target-browsers-item" + > + <input + checked={true} + data-id="firefox" + data-status="beta" + id="firefox-beta" + onChange={[Function]} + type="checkbox" + /> + <label + className="compatibility-settings__target-browsers-item-label" + htmlFor="firefox-beta" + > + <BrowserIcon + id="firefox" + title="Firefox beta" + /> + Firefox beta (77) + </label> + </li> + <li + className="compatibility-settings__target-browsers-item" + > + <input + checked={false} + data-id="firefox" + data-status="current" + id="firefox-current" + onChange={[Function]} + type="checkbox" + /> + <label + className="compatibility-settings__target-browsers-item-label" + htmlFor="firefox-current" + > + <BrowserIcon + id="firefox" + title="Firefox current" + /> + Firefox current (76) + </label> + </li> + </ul> + </section> +</section> +`; + +exports[`Settings component renders default browsers with full selected browsers 1`] = ` +<section + className="compatibility-settings" +> + <header + className="compatibility-settings__header" + > + <Localized + id="compatibility-settings-header" + > + <label + className="compatibility-settings__header-label" + > + compatibility-settings-header + </label> + </Localized> + <Localized + attrs={ + Object { + "title": true, + } + } + id="compatibility-close-settings-button" + > + <button + className="compatibility-settings__header-button" + onClick={[Function]} + title="compatibility-close-settings-button" + > + <img + className="compatibility-settings__header-icon" + src="chrome://devtools/skin/images/close.svg" + /> + </button> + </Localized> + </header> + <section + className="compatibility-settings__target-browsers" + > + <Localized + id="compatibility-target-browsers-header" + > + <header + className="compatibility-settings__target-browsers-header" + > + compatibility-target-browsers-header + </header> + </Localized> + <ul + className="compatibility-settings__target-browsers-list" + > + <li + className="compatibility-settings__target-browsers-item" + > + <input + checked={true} + data-id="firefox" + data-status="nightly" + id="firefox-nightly" + onChange={[Function]} + type="checkbox" + /> + <label + className="compatibility-settings__target-browsers-item-label" + htmlFor="firefox-nightly" + > + <BrowserIcon + id="firefox" + title="Firefox nightly" + /> + Firefox nightly (78) + </label> + </li> + <li + className="compatibility-settings__target-browsers-item" + > + <input + checked={true} + data-id="firefox" + data-status="beta" + id="firefox-beta" + onChange={[Function]} + type="checkbox" + /> + <label + className="compatibility-settings__target-browsers-item-label" + htmlFor="firefox-beta" + > + <BrowserIcon + id="firefox" + title="Firefox beta" + /> + Firefox beta (77) + </label> + </li> + <li + className="compatibility-settings__target-browsers-item" + > + <input + checked={true} + data-id="firefox" + data-status="current" + id="firefox-current" + onChange={[Function]} + type="checkbox" + /> + <label + className="compatibility-settings__target-browsers-item-label" + htmlFor="firefox-current" + > + <BrowserIcon + id="firefox" + title="Firefox current" + /> + Firefox current (76) + </label> + </li> + </ul> + </section> +</section> +`; + +exports[`Settings component renders default browsers with no selected browsers 1`] = ` +<section + className="compatibility-settings" +> + <header + className="compatibility-settings__header" + > + <Localized + id="compatibility-settings-header" + > + <label + className="compatibility-settings__header-label" + > + compatibility-settings-header + </label> + </Localized> + <Localized + attrs={ + Object { + "title": true, + } + } + id="compatibility-close-settings-button" + > + <button + className="compatibility-settings__header-button" + onClick={[Function]} + title="compatibility-close-settings-button" + > + <img + className="compatibility-settings__header-icon" + src="chrome://devtools/skin/images/close.svg" + /> + </button> + </Localized> + </header> + <section + className="compatibility-settings__target-browsers" + > + <Localized + id="compatibility-target-browsers-header" + > + <header + className="compatibility-settings__target-browsers-header" + > + compatibility-target-browsers-header + </header> + </Localized> + <ul + className="compatibility-settings__target-browsers-list" + > + <li + className="compatibility-settings__target-browsers-item" + > + <input + checked={false} + data-id="firefox" + data-status="nightly" + id="firefox-nightly" + onChange={[Function]} + type="checkbox" + /> + <label + className="compatibility-settings__target-browsers-item-label" + htmlFor="firefox-nightly" + > + <BrowserIcon + id="firefox" + title="Firefox nightly" + /> + Firefox nightly (78) + </label> + </li> + <li + className="compatibility-settings__target-browsers-item" + > + <input + checked={false} + data-id="firefox" + data-status="beta" + id="firefox-beta" + onChange={[Function]} + type="checkbox" + /> + <label + className="compatibility-settings__target-browsers-item-label" + htmlFor="firefox-beta" + > + <BrowserIcon + id="firefox" + title="Firefox beta" + /> + Firefox beta (77) + </label> + </li> + <li + className="compatibility-settings__target-browsers-item" + > + <input + checked={false} + data-id="firefox" + data-status="current" + id="firefox-current" + onChange={[Function]} + type="checkbox" + /> + <label + className="compatibility-settings__target-browsers-item-label" + htmlFor="firefox-current" + > + <BrowserIcon + id="firefox" + title="Firefox current" + /> + Firefox current (76) + </label> + </li> + </ul> + </section> +</section> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserItem.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserItem.test.js.snap new file mode 100644 index 0000000000..38cc5f96bc --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserItem.test.js.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`UnsupportedBrowserItem component renders the browser 1`] = ` +<Localized + $browsers="Firefox 113 (current) +Firefox 114 (beta) +Firefox 115 (release)" + attrs={ + Object { + "title": true, + } + } + id="compatibility-issue-browsers-list" +> + <li + className="compatibility-browser" + data-browser-id="firefox" + > + <BrowserIcon + id="firefox" + name="Firefox" + /> + <span + className="compatibility-browser-version" + > + 113 + </span> + </li> +</Localized> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserList.test.js.snap b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserList.test.js.snap new file mode 100644 index 0000000000..82b5fc573a --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserList.test.js.snap @@ -0,0 +1,118 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`UnsupportedBrowserList component does not show ESR version if newer version is not supported 1`] = ` +<ul + className="compatibility-unsupported-browser-list" +> + <UnsupportedBrowserItem + id="firefox" + key="firefox" + name="Firefox" + unsupportedVersions={ + Array [ + Object { + "status": "esr", + "version": "102", + }, + Object { + "status": "current", + "version": "112", + }, + ] + } + version="112" + /> +</ul> +`; + +exports[`UnsupportedBrowserList component renders the browsers 1`] = ` +<ul + className="compatibility-unsupported-browser-list" +> + <UnsupportedBrowserItem + id="firefox" + key="firefox" + name="Firefox" + unsupportedVersions={ + Array [ + Object { + "status": "beta", + "version": "69", + }, + Object { + "status": "nightly", + "version": "70", + }, + ] + } + version="69" + /> + <UnsupportedBrowserItem + id="test-browser" + key="test-browser" + name="Test Browser" + unsupportedVersions={ + Array [ + Object { + "status": undefined, + "version": "1", + }, + Object { + "status": undefined, + "version": "2", + }, + ] + } + version="1" + /> + <UnsupportedBrowserItem + id="sample-browser" + key="sample-browser" + name="Sample Browser" + unsupportedVersions={ + Array [ + Object { + "status": undefined, + "version": "100", + }, + ] + } + version="100" + /> +</ul> +`; + +exports[`UnsupportedBrowserList component shows ESR version if newer version is supported 1`] = ` +<ul + className="compatibility-unsupported-browser-list" +> + <UnsupportedBrowserItem + id="firefox" + key="firefox" + name="Firefox" + unsupportedVersions={ + Array [ + Object { + "status": "esr", + "version": "102", + }, + ] + } + version="102" + /> + <UnsupportedBrowserItem + id="test-browser" + key="test-browser" + name="Test Browser" + unsupportedVersions={ + Array [ + Object { + "status": undefined, + "version": "1", + }, + ] + } + version="1" + /> +</ul> +`; diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-CompatibilityApp.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-CompatibilityApp.test.js new file mode 100644 index 0000000000..2b9da316cf --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-CompatibilityApp.test.js @@ -0,0 +1,54 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the CompatibilityApp component. + */ + +const { shallow } = require("enzyme"); +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + thunk, +} = require("resource://devtools/client/shared/redux/middleware/thunk.js"); +const configureStore = require("redux-mock-store").default; + +const CompatibilityApp = createFactory( + require("resource://devtools/client/inspector/compatibility/components/CompatibilityApp.js") +); + +describe("CompatibilityApp component", () => { + it("renders zero issues", () => { + const mockStore = configureStore([thunk()]); + const store = mockStore({ + compatibility: { + selectedNodeIssues: [], + topLevelTargetIssues: [], + }, + }); + + const withLocalizationWrapper = shallow(CompatibilityApp({ store })); + const connectWrapper = withLocalizationWrapper.dive(); + const targetComponent = connectWrapper.dive(); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders with settings", () => { + const mockStore = configureStore([thunk()]); + const store = mockStore({ + compatibility: { + isSettingsVisibile: true, + selectedNodeIssues: [], + topLevelTargetIssues: [], + }, + }); + + const withLocalizationWrapper = shallow(CompatibilityApp({ store })); + const connectWrapper = withLocalizationWrapper.dive(); + const targetComponent = connectWrapper.dive(); + expect(targetComponent).toMatchSnapshot(); + }); +}); diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Footer.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Footer.test.js new file mode 100644 index 0000000000..c217915a63 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Footer.test.js @@ -0,0 +1,29 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the Footer component. + */ + +const { shallow } = require("enzyme"); +const React = require("react"); +const { + thunk, +} = require("resource://devtools/client/shared/redux/middleware/thunk.js"); +const configureStore = require("redux-mock-store").default; + +const Footer = React.createFactory( + require("resource://devtools/client/inspector/compatibility/components/Footer.js") +); + +describe("Footer component", () => { + it("renders", () => { + const mockStore = configureStore([thunk()]); + const store = mockStore({}); + const connectWrapper = shallow(Footer({ store })); + const targetComponent = connectWrapper.dive(); + expect(targetComponent).toMatchSnapshot(); + }); +}); diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueItem.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueItem.test.js new file mode 100644 index 0000000000..caec522e17 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueItem.test.js @@ -0,0 +1,167 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the IssueItem component. + */ + +const { shallow } = require("enzyme"); +const React = require("react"); + +const { + COMPATIBILITY_ISSUE_TYPE, +} = require("resource://devtools/shared/constants.js"); +const IssueItem = React.createFactory( + require("resource://devtools/client/inspector/compatibility/components/IssueItem.js") +); + +describe("IssueItem component", () => { + it("renders an unsupported issue of CSS property", () => { + const targetComponent = shallow( + IssueItem({ + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "test-property", + url: "test-url", + deprecated: false, + experimental: false, + prefixNeeded: false, + unsupportedBrowsers: [ + { id: "firefox", name: "Firefox", version: "70", status: "nightly" }, + ], + }) + ); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders a deprecated issue of CSS property", () => { + const targetComponent = shallow( + IssueItem({ + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "test-property", + url: "test-url", + deprecated: true, + experimental: false, + prefixNeeded: false, + unsupportedBrowsers: [], + }) + ); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders an experimental issue of CSS property", () => { + const targetComponent = shallow( + IssueItem({ + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "test-property", + url: "test-url", + deprecated: false, + experimental: true, + prefixNeeded: false, + unsupportedBrowsers: [], + }) + ); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders a prefixNeeded issue of CSS property", () => { + const targetComponent = shallow( + IssueItem({ + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "test-property", + url: "test-url", + aliases: ["test-alias-1", "test-alias-2"], + deprecated: false, + experimental: false, + prefixNeeded: true, + unsupportedBrowsers: [], + }) + ); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders an issue which has deprecated and experimental", () => { + const targetComponent = shallow( + IssueItem({ + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "test-property", + url: "test-url", + aliases: ["test-alias-1", "test-alias-2"], + deprecated: true, + experimental: true, + prefixNeeded: false, + unsupportedBrowsers: [], + }) + ); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders an issue which has deprecated and prefixNeeded", () => { + const targetComponent = shallow( + IssueItem({ + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "test-property", + url: "test-url", + aliases: ["test-alias-1", "test-alias-2"], + deprecated: true, + experimental: false, + prefixNeeded: true, + unsupportedBrowsers: [], + }) + ); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders an issue which has experimental and prefixNeeded", () => { + const targetComponent = shallow( + IssueItem({ + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "test-property", + url: "test-url", + aliases: ["test-alias-1", "test-alias-2"], + deprecated: false, + experimental: true, + prefixNeeded: true, + unsupportedBrowsers: [], + }) + ); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders an issue which has deprecated, experimental and prefixNeeded", () => { + const targetComponent = shallow( + IssueItem({ + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "test-property", + url: "test-url", + aliases: ["test-alias-1", "test-alias-2"], + deprecated: true, + experimental: true, + prefixNeeded: true, + unsupportedBrowsers: [], + }) + ); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders an issue which has nodes that caused this issue", () => { + const targetComponent = shallow( + IssueItem({ + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "test-property", + url: "test-url", + unsupportedBrowsers: [], + nodes: [ + { + actorID: "test-actor", + attributes: [], + nodeName: "test-element", + nodeType: 1, + }, + ], + }) + ); + expect(targetComponent).toMatchSnapshot(); + }); +}); diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueList.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueList.test.js new file mode 100644 index 0000000000..91431771b9 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueList.test.js @@ -0,0 +1,47 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the IssueList component. + */ + +const { shallow } = require("enzyme"); +const React = require("react"); + +const { + COMPATIBILITY_ISSUE_TYPE, +} = require("resource://devtools/shared/constants.js"); +const IssueList = React.createFactory( + require("resource://devtools/client/inspector/compatibility/components/IssueList.js") +); + +describe("IssueList component", () => { + it("renders some issues", () => { + const list = shallow( + IssueList({ + issues: [ + { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "border-block-color", + url: "https://developer.mozilla.org/docs/Web/CSS/border-block-color", + deprecated: false, + experimental: true, + unsupportedBrowsers: [], + }, + { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES, + property: "user-modify", + url: "https://developer.mozilla.org/docs/Web/CSS/user-modify", + aliases: ["user-modify"], + deprecated: true, + experimental: false, + unsupportedBrowsers: [], + }, + ], + }) + ); + expect(list).toMatchSnapshot(); + }); +}); diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssuePane.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssuePane.test.js new file mode 100644 index 0000000000..0885cdf183 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssuePane.test.js @@ -0,0 +1,52 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the IssuePane component. + */ + +const { shallow } = require("enzyme"); +const React = require("react"); + +const { + COMPATIBILITY_ISSUE_TYPE, +} = require("resource://devtools/shared/constants.js"); +const IssuePane = React.createFactory( + require("resource://devtools/client/inspector/compatibility/components/IssuePane.js") +); + +describe("IssuePane component", () => { + it("renders no issues", () => { + const targetComponent = shallow(IssuePane({ issues: [] })); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders some issues", () => { + const targetComponent = shallow( + IssuePane({ + issues: [ + { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "border-block-color", + url: "https://developer.mozilla.org/docs/Web/CSS/border-block-color", + deprecated: false, + experimental: true, + unsupportedBrowsers: [], + }, + { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES, + property: "user-modify", + url: "https://developer.mozilla.org/docs/Web/CSS/user-modify", + aliases: ["user-modify"], + deprecated: true, + experimental: false, + unsupportedBrowsers: [], + }, + ], + }) + ); + expect(targetComponent).toMatchSnapshot(); + }); +}); diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeItem.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeItem.test.js new file mode 100644 index 0000000000..8e4f0b7a72 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeItem.test.js @@ -0,0 +1,31 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the NodeItem component. + */ + +const { shallow } = require("enzyme"); +const React = require("react"); + +const NodeItem = React.createFactory( + require("resource://devtools/client/inspector/compatibility/components/NodeItem.js") +); + +describe("NodeItem component", () => { + it("renders a node", () => { + const pane = shallow( + NodeItem({ + node: { + actorID: "test-actor", + attributes: [], + nodeName: "test-element", + nodeType: 1, + }, + }) + ); + expect(pane).toMatchSnapshot(); + }); +}); diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeList.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeList.test.js new file mode 100644 index 0000000000..b9ede9a6fd --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodeList.test.js @@ -0,0 +1,57 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the NodeList component. + */ + +const { shallow } = require("enzyme"); +const React = require("react"); + +const NodeList = React.createFactory( + require("resource://devtools/client/inspector/compatibility/components/NodeList.js") +); + +describe("NodeList component", () => { + it("renders a node", () => { + const pane = shallow( + NodeList({ + nodes: [ + { + actorID: "test-actor", + attributes: [], + nodeName: "test-element", + nodeType: 1, + }, + ], + }) + ); + expect(pane).toMatchSnapshot(); + }); +}); + +describe("NodeList component", () => { + it("renders some nodes", () => { + const pane = shallow( + NodeList({ + nodes: [ + { + actorID: "test-actor-1", + attributes: [], + nodeName: "test-element-1", + nodeType: 1, + }, + { + actorID: "test-actor-2", + attributes: [], + nodeName: "test-element-2", + nodeType: 1, + }, + ], + }) + ); + expect(pane).toMatchSnapshot(); + }); +}); diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodePane.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodePane.test.js new file mode 100644 index 0000000000..a9a996eb33 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-NodePane.test.js @@ -0,0 +1,57 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the NodePane component. + */ + +const { shallow } = require("enzyme"); +const React = require("react"); + +const NodePane = React.createFactory( + require("resource://devtools/client/inspector/compatibility/components/NodePane.js") +); + +describe("NodePane component", () => { + it("renders a node", () => { + const pane = shallow( + NodePane({ + nodes: [ + { + actorID: "test-actor", + attributes: [], + nodeName: "test-element", + nodeType: 1, + }, + ], + }) + ); + expect(pane).toMatchSnapshot(); + }); +}); + +describe("NodePane component", () => { + it("renders some nodes", () => { + const pane = shallow( + NodePane({ + nodes: [ + { + actorID: "test-actor-1", + attributes: [], + nodeName: "test-element-1", + nodeType: 1, + }, + { + actorID: "test-actor-2", + attributes: [], + nodeName: "test-element-2", + nodeType: 1, + }, + ], + }) + ); + expect(pane).toMatchSnapshot(); + }); +}); diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Settings.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Settings.test.js new file mode 100644 index 0000000000..57db4cba67 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-Settings.test.js @@ -0,0 +1,71 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the Settings component. + */ + +const { shallow } = require("enzyme"); +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + thunk, +} = require("resource://devtools/client/shared/redux/middleware/thunk.js"); +const configureStore = require("redux-mock-store").default; + +const Settings = createFactory( + require("resource://devtools/client/inspector/compatibility/components/Settings.js") +); + +const DEFAULT_BROWSERS = [ + { id: "firefox", name: "Firefox", status: "nightly", version: "78" }, + { id: "firefox", name: "Firefox", status: "beta", version: "77" }, + { id: "firefox", name: "Firefox", status: "current", version: "76" }, +]; + +describe("Settings component", () => { + it("renders default browsers with no selected browsers", () => { + const mockStore = configureStore([thunk()]); + const store = mockStore({ + compatibility: { + defaultTargetBrowsers: DEFAULT_BROWSERS, + targetBrowsers: [], + }, + }); + + const connectWrapper = shallow(Settings({ store })); + const targetComponent = connectWrapper.dive(); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders default browsers with a selected browsers", () => { + const mockStore = configureStore([thunk()]); + const store = mockStore({ + compatibility: { + defaultTargetBrowsers: DEFAULT_BROWSERS, + targetBrowsers: [DEFAULT_BROWSERS[1]], + }, + }); + + const connectWrapper = shallow(Settings({ store })); + const targetComponent = connectWrapper.dive(); + expect(targetComponent).toMatchSnapshot(); + }); + + it("renders default browsers with full selected browsers", () => { + const mockStore = configureStore([thunk()]); + const store = mockStore({ + compatibility: { + defaultTargetBrowsers: DEFAULT_BROWSERS, + targetBrowsers: DEFAULT_BROWSERS, + }, + }); + + const connectWrapper = shallow(Settings({ store })); + const targetComponent = connectWrapper.dive(); + expect(targetComponent).toMatchSnapshot(); + }); +}); diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserItem.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserItem.test.js new file mode 100644 index 0000000000..1ffd023fb9 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserItem.test.js @@ -0,0 +1,42 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the UnsupportedBrowserItem component. + */ + +const { shallow } = require("enzyme"); +const React = require("react"); + +const BrowserItem = React.createFactory( + require("resource://devtools/client/inspector/compatibility/components/UnsupportedBrowserItem.js") +); + +describe("UnsupportedBrowserItem component", () => { + it("renders the browser", () => { + const item = shallow( + BrowserItem({ + id: "firefox", + name: "Firefox", + version: "113", + unsupportedVersions: [ + { + status: "current", + version: "113", + }, + { + status: "beta", + version: "114", + }, + { + status: "release", + version: "115", + }, + ], + }) + ); + expect(item).toMatchSnapshot(); + }); +}); diff --git a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserList.test.js b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserList.test.js new file mode 100644 index 0000000000..ca18480638 --- /dev/null +++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-UnsupportedBrowserList.test.js @@ -0,0 +1,56 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Unit tests for the BrowserList component. + */ + +const { shallow } = require("enzyme"); +const React = require("react"); + +const UnsupportedBrowserList = React.createFactory( + require("resource://devtools/client/inspector/compatibility/components/UnsupportedBrowserList.js") +); + +describe("UnsupportedBrowserList component", () => { + it("renders the browsers", () => { + const list = shallow( + UnsupportedBrowserList({ + browsers: [ + { id: "firefox", name: "Firefox", version: "69", status: "beta" }, + { id: "firefox", name: "Firefox", version: "70", status: "nightly" }, + { id: "test-browser", name: "Test Browser", version: "1" }, + { id: "test-browser", name: "Test Browser", version: "2" }, + { id: "sample-browser", name: "Sample Browser", version: "100" }, + ], + }) + ); + expect(list).toMatchSnapshot(); + }); + + it("does not show ESR version if newer version is not supported", () => { + const list = shallow( + UnsupportedBrowserList({ + browsers: [ + { id: "firefox", name: "Firefox", version: "102", status: "esr" }, + { id: "firefox", name: "Firefox", version: "112", status: "current" }, + ], + }) + ); + expect(list).toMatchSnapshot(); + }); + + it("shows ESR version if newer version is supported", () => { + const list = shallow( + UnsupportedBrowserList({ + browsers: [ + { id: "firefox", name: "Firefox", version: "102", status: "esr" }, + { id: "test-browser", name: "Test Browser", version: "1" }, + ], + }) + ); + expect(list).toMatchSnapshot(); + }); +}); |