|
2 | 2 | * @jest-environment jsdom |
3 | 3 | */ |
4 | 4 | import { JSDOM } from "jsdom" |
5 | | -import { getNlsConfiguration, nlsConfigElementId } from "../../../src/browser/pages/vscode" |
| 5 | +import { |
| 6 | + getNlsConfiguration, |
| 7 | + nlsConfigElementId, |
| 8 | + setBodyBackgroundToThemeBackgroundColor, |
| 9 | +} from "../../../src/browser/pages/vscode" |
6 | 10 |
|
7 | 11 | describe("vscode", () => { |
8 | 12 | describe("getNlsConfiguration", () => { |
@@ -58,4 +62,117 @@ describe("vscode", () => { |
58 | 62 | document.body.removeChild(mockElement) |
59 | 63 | }) |
60 | 64 | }) |
| 65 | + describe("setBodyBackgroundToThemeBackgroundColor", () => { |
| 66 | + beforeEach(() => { |
| 67 | + // We need to set the url in the JSDOM constructor |
| 68 | + // to prevent this error "SecurityError: localStorage is not available for opaque origins" |
| 69 | + // See: https://github.com/jsdom/jsdom/issues/2304#issuecomment-622314949 |
| 70 | + const { window } = new JSDOM("", { url: "http://localhost" }) |
| 71 | + global.document = window.document |
| 72 | + global.localStorage = window.localStorage |
| 73 | + }) |
| 74 | + it("should return null", () => { |
| 75 | + const test = { |
| 76 | + colorMap: { |
| 77 | + [`editor.background`]: "#ff3270", |
| 78 | + }, |
| 79 | + } |
| 80 | + localStorage.setItem("colorThemeData", JSON.stringify(test)) |
| 81 | + |
| 82 | + expect(setBodyBackgroundToThemeBackgroundColor(document, localStorage)).toBeNull() |
| 83 | + |
| 84 | + localStorage.removeItem("colorThemeData") |
| 85 | + }) |
| 86 | + it("should throw an error if Document is undefined", () => { |
| 87 | + const errorMsgPrefix = "[vscode]" |
| 88 | + const errorMessage = `${errorMsgPrefix} Could not set body background to theme background color. Document is undefined.` |
| 89 | + |
| 90 | + expect(() => { |
| 91 | + // @ts-expect-error We need to test when document is undefined |
| 92 | + setBodyBackgroundToThemeBackgroundColor(undefined, localStorage) |
| 93 | + }).toThrowError(errorMessage) |
| 94 | + }) |
| 95 | + it("should throw an error if localStorage is undefined", () => { |
| 96 | + const errorMsgPrefix = "[vscode]" |
| 97 | + const errorMessage = `${errorMsgPrefix} Could not set body background to theme background color. localStorage is undefined.` |
| 98 | + |
| 99 | + expect(() => { |
| 100 | + // @ts-expect-error We need to test when localStorage is undefined |
| 101 | + setBodyBackgroundToThemeBackgroundColor(document, undefined) |
| 102 | + }).toThrowError(errorMessage) |
| 103 | + }) |
| 104 | + it("should throw an error if it can't find colorThemeData in localStorage", () => { |
| 105 | + const errorMsgPrefix = "[vscode]" |
| 106 | + const errorMessage = `${errorMsgPrefix} Could not set body background to theme background color. Could not find colorThemeData in localStorage.` |
| 107 | + |
| 108 | + expect(() => { |
| 109 | + setBodyBackgroundToThemeBackgroundColor(document, localStorage) |
| 110 | + }).toThrowError(errorMessage) |
| 111 | + }) |
| 112 | + it("should throw an error if there is an error parsing colorThemeData from localStorage", () => { |
| 113 | + const errorMsgPrefix = "[vscode]" |
| 114 | + const errorMessage = `${errorMsgPrefix} Could not set body background to theme background color. Could not parse colorThemeData from localStorage.` |
| 115 | + |
| 116 | + localStorage.setItem( |
| 117 | + "colorThemeData", |
| 118 | + '{"id":"vs-dark max-SS-Cyberpunk-themes-cyberpunk-umbra-color-theme-json","label":"Activate UMBRA protocol","settingsId":"Activate "errorForeground":"#ff3270","foreground":"#ffffff","sideBarTitle.foreground":"#bbbbbb"},"watch\\":::false}', |
| 119 | + ) |
| 120 | + |
| 121 | + expect(() => { |
| 122 | + setBodyBackgroundToThemeBackgroundColor(document, localStorage) |
| 123 | + }).toThrowError(errorMessage) |
| 124 | + |
| 125 | + localStorage.removeItem("colorThemeData") |
| 126 | + }) |
| 127 | + it("should throw an error if there is no colorMap property", () => { |
| 128 | + const errorMsgPrefix = "[vscode]" |
| 129 | + const errorMessage = `${errorMsgPrefix} Could not set body background to theme background color. colorThemeData is missing colorMap.` |
| 130 | + |
| 131 | + const test = { |
| 132 | + id: "hey-joe", |
| 133 | + } |
| 134 | + localStorage.setItem("colorThemeData", JSON.stringify(test)) |
| 135 | + |
| 136 | + expect(() => { |
| 137 | + setBodyBackgroundToThemeBackgroundColor(document, localStorage) |
| 138 | + }).toThrowError(errorMessage) |
| 139 | + |
| 140 | + localStorage.removeItem("colorThemeData") |
| 141 | + }) |
| 142 | + it("should throw an error if there is no editor.background color", () => { |
| 143 | + const errorMsgPrefix = "[vscode]" |
| 144 | + const errorMessage = `${errorMsgPrefix} Could not set body background to theme background color. colorThemeData.colorMap["editor.background"] is undefined.` |
| 145 | + |
| 146 | + const test = { |
| 147 | + id: "hey-joe", |
| 148 | + colorMap: { |
| 149 | + editor: "#fff", |
| 150 | + }, |
| 151 | + } |
| 152 | + localStorage.setItem("colorThemeData", JSON.stringify(test)) |
| 153 | + |
| 154 | + expect(() => { |
| 155 | + setBodyBackgroundToThemeBackgroundColor(document, localStorage) |
| 156 | + }).toThrowError(errorMessage) |
| 157 | + |
| 158 | + localStorage.removeItem("colorThemeData") |
| 159 | + }) |
| 160 | + it("should set the body background to the editor background color", () => { |
| 161 | + const test = { |
| 162 | + colorMap: { |
| 163 | + [`editor.background`]: "#ff3270", |
| 164 | + }, |
| 165 | + } |
| 166 | + localStorage.setItem("colorThemeData", JSON.stringify(test)) |
| 167 | + |
| 168 | + setBodyBackgroundToThemeBackgroundColor(document, localStorage) |
| 169 | + |
| 170 | + // When the body.style.backgroundColor is set using hex |
| 171 | + // it is converted to rgb |
| 172 | + // which is why we use that in the assertion |
| 173 | + expect(document.body.style.backgroundColor).toBe("rgb(255, 50, 112)") |
| 174 | + |
| 175 | + localStorage.removeItem("colorThemeData") |
| 176 | + }) |
| 177 | + }) |
61 | 178 | }) |
0 commit comments