summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/compatibility/test/node/components/__snapshots__
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/inspector/compatibility/test/node/components/__snapshots__')
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-CompatibilityApp.test.js.snap84
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Footer.test.js.snap36
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueItem.test.js.snap348
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssueList.test.js.snap29
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-IssuePane.test.js.snap41
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeItem.test.js.snap21
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodeList.test.js.snap45
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-NodePane.test.js.snap67
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-Settings.test.js.snap367
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserItem.test.js.snap30
-rw-r--r--devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-UnsupportedBrowserList.test.js.snap118
11 files changed, 1186 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>
+`;