diff --git a/client/out/extension.js b/client/out/extension.js index bb6fbe0..26a7fc6 100644 --- a/client/out/extension.js +++ b/client/out/extension.js @@ -58,6 +58,7 @@ async function activate(context) { exports.activate = activate; let score = 0; let dataLength = 0; +let scheme = []; class ColorsViewProvider { constructor(_extensionUri) { this._extensionUri = _extensionUri; @@ -94,6 +95,7 @@ class ColorsViewProvider { } if (status == "loaded") { score = receivedData.pop(); + scheme = receivedData.pop(); let messageArray = []; messageArray = receivedData.map(item => item.relatedInformation[0].message); let lineArray = []; @@ -126,6 +128,8 @@ class ColorsViewProvider { let htmlContent = fs.readFileSync(htmlFilePath, 'utf8'); const cssFilePath = path.join(__dirname, '..', 'src', 'templates', 'styles.css'); const cssContent = fs.readFileSync(cssFilePath, 'utf8'); + const hexs = scheme.map(color => color.hex).join("_"); + const textColors = scheme.map(color => color.textColor).join("_"); htmlContent = htmlContent .replace('{{score}}', score.toString()) .replace('{{dataLength}}', dataLength.toString()) @@ -134,7 +138,9 @@ class ColorsViewProvider { .replace('{{lineArray}}', linesString) .replace('{{stringArray}}', stringArray) .replace('{{styles}}', ``) - .replace('{{htmlChecked}}', htmlChecked); + .replace('{{htmlChecked}}', htmlChecked) + .replace('{{schemeHex}}', hexs) + .replace('{{schemeTextColors}}', textColors); return htmlContent; } else if (status == "loading") { diff --git a/client/out/test/base/cssIndexError.html b/client/out/test/base/cssIndexError.html new file mode 100644 index 0000000..51adaa7 --- /dev/null +++ b/client/out/test/base/cssIndexError.html @@ -0,0 +1,18 @@ + + + + + + Run JavaScript + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/cssIndexNoError.html b/client/out/test/base/cssIndexNoError.html new file mode 100644 index 0000000..7b069b2 --- /dev/null +++ b/client/out/test/base/cssIndexNoError.html @@ -0,0 +1,21 @@ + + + + + + Run JavaScript + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/externalCss.css b/client/out/test/base/externalCss.css new file mode 100644 index 0000000..2a7c5a9 --- /dev/null +++ b/client/out/test/base/externalCss.css @@ -0,0 +1,2 @@ +body {background-color: black;} +#para {color: white;} \ No newline at end of file diff --git a/client/out/test/base/externalCss1.css b/client/out/test/base/externalCss1.css new file mode 100644 index 0000000..61a80ad --- /dev/null +++ b/client/out/test/base/externalCss1.css @@ -0,0 +1 @@ +#para {color: white;} \ No newline at end of file diff --git a/client/out/test/base/indexAndSizeError.html b/client/out/test/base/indexAndSizeError.html new file mode 100644 index 0000000..8e82e97 --- /dev/null +++ b/client/out/test/base/indexAndSizeError.html @@ -0,0 +1,18 @@ + + + + + + Run JavaScript + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/indexAndSizeNoError.html b/client/out/test/base/indexAndSizeNoError.html new file mode 100644 index 0000000..1bf7e4e --- /dev/null +++ b/client/out/test/base/indexAndSizeNoError.html @@ -0,0 +1,18 @@ + + + + + + Run JavaScript + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/indexError.html b/client/out/test/base/indexError.html new file mode 100644 index 0000000..3db3b5c --- /dev/null +++ b/client/out/test/base/indexError.html @@ -0,0 +1,18 @@ + + + + + + Run JavaScript + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/indexErrorWithChildBg.html b/client/out/test/base/indexErrorWithChildBg.html new file mode 100644 index 0000000..58ca527 --- /dev/null +++ b/client/out/test/base/indexErrorWithChildBg.html @@ -0,0 +1,18 @@ + + + + + + Run JavaScript + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/indexNoError.html b/client/out/test/base/indexNoError.html new file mode 100644 index 0000000..3fd206f --- /dev/null +++ b/client/out/test/base/indexNoError.html @@ -0,0 +1,18 @@ + + + + + + Run JavaScript + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/indexNoErrorWithChildBg.html b/client/out/test/base/indexNoErrorWithChildBg.html new file mode 100644 index 0000000..6ed657d --- /dev/null +++ b/client/out/test/base/indexNoErrorWithChildBg.html @@ -0,0 +1,18 @@ + + + + + + Run JavaScript + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/multipleStylesheetError.html b/client/out/test/base/multipleStylesheetError.html new file mode 100644 index 0000000..b72081f --- /dev/null +++ b/client/out/test/base/multipleStylesheetError.html @@ -0,0 +1,15 @@ + + + + + + Run JavaScript + + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/multipleStylesheetNoError.html b/client/out/test/base/multipleStylesheetNoError.html new file mode 100644 index 0000000..7a4457e --- /dev/null +++ b/client/out/test/base/multipleStylesheetNoError.html @@ -0,0 +1,15 @@ + + + + + + Run JavaScript + + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/nestedIndexError.html b/client/out/test/base/nestedIndexError.html new file mode 100644 index 0000000..ca239dc --- /dev/null +++ b/client/out/test/base/nestedIndexError.html @@ -0,0 +1,20 @@ + + + + + + Run JavaScript + + + + +
+

Hello 1

+
+ + + \ No newline at end of file diff --git a/client/out/test/base/nestedIndexErrorWithChildBg.html b/client/out/test/base/nestedIndexErrorWithChildBg.html new file mode 100644 index 0000000..d8b4776 --- /dev/null +++ b/client/out/test/base/nestedIndexErrorWithChildBg.html @@ -0,0 +1,20 @@ + + + + + + Run JavaScript + + + + +
+

Hello 1

+
+ + + \ No newline at end of file diff --git a/client/out/test/base/nestedIndexErrorWithParentAndChildBg.html b/client/out/test/base/nestedIndexErrorWithParentAndChildBg.html new file mode 100644 index 0000000..5edd92c --- /dev/null +++ b/client/out/test/base/nestedIndexErrorWithParentAndChildBg.html @@ -0,0 +1,20 @@ + + + + + + Run JavaScript + + + + +
+

Hello 1

+
+ + + \ No newline at end of file diff --git a/client/out/test/base/nestedIndexErrorWithParentBg.html b/client/out/test/base/nestedIndexErrorWithParentBg.html new file mode 100644 index 0000000..be0cccb --- /dev/null +++ b/client/out/test/base/nestedIndexErrorWithParentBg.html @@ -0,0 +1,20 @@ + + + + + + Run JavaScript + + + + +
+

Hello 1

+
+ + + \ No newline at end of file diff --git a/client/out/test/base/nestedIndexNoError.html b/client/out/test/base/nestedIndexNoError.html new file mode 100644 index 0000000..aebd4b0 --- /dev/null +++ b/client/out/test/base/nestedIndexNoError.html @@ -0,0 +1,20 @@ + + + + + + Run JavaScript + + + + +
+

Hello 1

+
+ + + \ No newline at end of file diff --git a/client/out/test/base/nestedIndexNoErrorWithChildBg.html b/client/out/test/base/nestedIndexNoErrorWithChildBg.html new file mode 100644 index 0000000..b98ec2d --- /dev/null +++ b/client/out/test/base/nestedIndexNoErrorWithChildBg.html @@ -0,0 +1,20 @@ + + + + + + Run JavaScript + + + + +
+

Hello 1

+
+ + + \ No newline at end of file diff --git a/client/out/test/base/nestedIndexNoErrorWithParentAndChildBg.html b/client/out/test/base/nestedIndexNoErrorWithParentAndChildBg.html new file mode 100644 index 0000000..de76951 --- /dev/null +++ b/client/out/test/base/nestedIndexNoErrorWithParentAndChildBg.html @@ -0,0 +1,20 @@ + + + + + + Run JavaScript + + + + +
+

Hello 1

+
+ + + \ No newline at end of file diff --git a/client/out/test/base/nestedIndexNoErrorWithParentBg.html b/client/out/test/base/nestedIndexNoErrorWithParentBg.html new file mode 100644 index 0000000..b8772b6 --- /dev/null +++ b/client/out/test/base/nestedIndexNoErrorWithParentBg.html @@ -0,0 +1,20 @@ + + + + + + Run JavaScript + + + + +
+

Hello 1

+
+ + + \ No newline at end of file diff --git a/client/out/test/base/stylesheetError.html b/client/out/test/base/stylesheetError.html new file mode 100644 index 0000000..7d83ddb --- /dev/null +++ b/client/out/test/base/stylesheetError.html @@ -0,0 +1,14 @@ + + + + + + Run JavaScript + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/base/stylesheetNoError.html b/client/out/test/base/stylesheetNoError.html new file mode 100644 index 0000000..f6d10ab --- /dev/null +++ b/client/out/test/base/stylesheetNoError.html @@ -0,0 +1,14 @@ + + + + + + Run JavaScript + + + + +

Hello 1

+ + + \ No newline at end of file diff --git a/client/out/test/imageComparisonTest.html b/client/out/test/imageComparisonTest.html new file mode 100644 index 0000000..9157b46 --- /dev/null +++ b/client/out/test/imageComparisonTest.html @@ -0,0 +1,15 @@ + + + + + + Image testing + + +
+ Link: + File: + +
+ + \ No newline at end of file diff --git a/client/out/test/imageTest.js b/client/out/test/imageTest.js new file mode 100644 index 0000000..55f3d9c --- /dev/null +++ b/client/out/test/imageTest.js @@ -0,0 +1,62 @@ +const express = require('express') +const app = express() +const port = 3000 + +const path = require('path'); +require('dotenv').config({ path: path.resolve(__dirname, '../../../.env') }); +const suggestAltText = require("../../../server/out/helpers/img-caption"); +const bodyParser = require('body-parser'); + +app.use(express.json()) +app.use(bodyParser.urlencoded({extended:true})); +app.use(express.static(path.join(__dirname, 'images'))) // images to test are saved in the images folder + +app.post('/generate', async (req, res) => { + console.log(req.body) + const {link,file} = req.body + let caption, original + var fileType = [] + if (link != "") { + caption = await suggestAltText(link) + original = link + fileType = link.split(".") + } else { + caption = await suggestAltText(`${__dirname}/images/${file}`) + original = file + fileType = file.split(".") + } + + console.log(caption) + console.log(original) + const response = await fetch( + "https://router.huggingface.co/hf-inference/models/CompVis/stable-diffusion-v1-4", + { + headers: { + Authorization: process.env.BLIP_TOKEN, + "Content-Type": "application/json" + }, + method: "POST", + body: JSON.stringify(caption) + } + ) + const result = await response.blob() + + let ab = await result.arrayBuffer(); + const binary = Buffer.from(ab).toString("base64") + + res.writeHead(200, { + 'content-type': 'text/html' + }); + res.write(``) + res.write(``) + + res.end() +}) + +app.get('/', async (req, res) => { + res.sendFile(__dirname + "/imageComparisonTest.html") +}) + +app.listen(port, () => { + console.log(`Example app listening on port ${port}`) +}) \ No newline at end of file diff --git a/client/out/test/indexCheck.test.js b/client/out/test/indexCheck.test.js new file mode 100644 index 0000000..1138b44 --- /dev/null +++ b/client/out/test/indexCheck.test.js @@ -0,0 +1,353 @@ +// This is unit testing for the indexCheck function + + +// helper function for loading files +const { promises } = require("fs"); +async function loadHTML(file) { + try { + const htmlString = await promises.readFile(file, 'utf8'); + return htmlString; + } catch (error) { + console.error('Error reading the HTML file:', error); + } +} + +test('Index check - no errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/indexNoError.html'; + const html = await loadHTML(htmlFilePath); + + // Act + const data = await checkDocumentContrast(html); + + // Assert + expect(data).toStrictEqual([[]]); +}) + +test('Index check - errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/indexError.html'; + const html = await loadHTML(htmlFilePath); + + const string = "p style=\"color: #ff0000;\""; + + // Act + const data = await checkDocumentContrast(html); + + const actualString = html.substring(data[0].start, data[0].end); + + // Assert + expect(actualString).toBe(string); +}) + +test('Index check with child background - no errors ', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/indexNoErrorWithChildBg.html' + const html = await loadHTML(htmlFilePath); + + // Act + const data = await checkDocumentContrast(html); + + // Assert + expect(data).toStrictEqual([[]]); +}) + +test('Index check with child background - errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/indexErrorWithChildBg.html'; + const html = await loadHTML(htmlFilePath); + + const string = "p style=\"background-color: #ff0000; color: #ff0000;\""; + + // Act + const data = await checkDocumentContrast(html); + + const actualString = html.substring(data[0].start, data[0].end); + + // Assert + expect(actualString).toBe(string); +}) + +test('Nested index check - no errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/nestedIndexNoError.html'; + const html = await loadHTML(htmlFilePath); + + // Act + const data = await checkDocumentContrast(html); + + // Assert + expect(data).toStrictEqual([[]]); +}) + +test('Nested index check - errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/nestedIndexError.html'; + const html = await loadHTML(htmlFilePath); + + const string = "p style=\"color: #ff0000;\""; + + // Act + const data = await checkDocumentContrast(html); + + const actualString = html.substring(data[0].start, data[0].end); + + // Assert + expect(actualString).toBe(string); +}) + +test('Nested index check with child background - no errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/nestedIndexNoErrorWithChildBg.html'; + const html = await loadHTML(htmlFilePath); + + // Act + const data = await checkDocumentContrast(html); + + // Assert + expect(data).toStrictEqual([[]]); +}) + +test('Nested index check with child background - errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/nestedIndexErrorWithChildBg.html'; + const html = await loadHTML(htmlFilePath); + + const string = "p style=\"background-color: #ff0000; color: #ff0000;\""; + + // Act + const data = await checkDocumentContrast(html); + + const actualString = html.substring(data[0].start, data[0].end); + + // Assert + expect(actualString).toBe(string); +}) + +test('Nested index check with parent background colors - no errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/nestedIndexNoErrorWithParentBg.html'; + const html = await loadHTML(htmlFilePath); + + // Act + const data = await checkDocumentContrast(html); + + // Assert + expect(data).toStrictEqual([[]]); +}) + +test('Nested index check with parent background colors - errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/nestedIndexErrorWithParentBg.html'; + const html = await loadHTML(htmlFilePath); + + const string = "p style=\"color: #ff0000;\""; + + // Act + const data = await checkDocumentContrast(html); + + const actualString = html.substring(data[0].start, data[0].end) + + // Assert + expect(actualString).toBe(string) +}) + +test('Nested index check with parent background and child background - no errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/nestedIndexNoErrorWithParentAndChildBg.html'; + const html = await loadHTML(htmlFilePath); + + // Act + const data = await checkDocumentContrast(html); + + // Assert + expect(data).toStrictEqual([[]]); +}) + +test('Nested index check with parent background and child background - errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/nestedIndexErrorWithParentAndChildBg.html'; + const html = await loadHTML(htmlFilePath); + + const string = "p style=\"background-color: #ff0000; color: #ff0000;\""; + + // Act + const data = await checkDocumentContrast(html); + + const actualString = html.substring(data[0].start, data[0].end); + + // Assert + expect(actualString).toBe(string); +}) + +test ('CSS styling index check - no errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/cssIndexNoError.html'; + const html = await loadHTML(htmlFilePath); + + // Act + const data = await checkDocumentContrast(html); + + // Assert + expect(data).toStrictEqual([[]]); +}) + +test('CSS styling index check - errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/cssIndexError.html'; + const html = await loadHTML(htmlFilePath); + + const string = "p id=\"para\""; + + // Act + const data = await checkDocumentContrast(html); + + const actualString = html.substring(data[0].start, data[0].end); + + // Assert + expect(actualString).toBe(string); +}) + +test('Stylesheet index check - no errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/stylesheetNoError.html'; + const html = await loadHTML(htmlFilePath); + + // Act + const data = await checkDocumentContrast(html); + + // Assert + expect(data).toStrictEqual([[]]); +}) + +test('Stylesheet index check - errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/stylesheetError.html'; + const html = await loadHTML(htmlFilePath); + + const string = "p id=\"para\""; + + // Act + const data = await checkDocumentContrast(html); + // console.log(html) + const actualString = html.substring(data[0].start, data[0].end); + + // Assert + expect(actualString).toBe(string); +}) + +test('Multiple Stylesheet index check - no errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/multipleStylesheetNoError.html'; + const html = await loadHTML(htmlFilePath); + + // Act + const data = await checkDocumentContrast(html); + + // Assert + expect(data).toStrictEqual([[]]); +}) + +test('Multiple Stylesheet index check - errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/multipleStylesheetError.html'; + const html = await loadHTML(htmlFilePath); + + const string = "p id=\"para\""; + + // Act + const data = await checkDocumentContrast(html); + // console.log(html) + const actualString = html.substring(data[0].start, data[0].end); + + // Assert + expect(actualString).toBe(string); +}) + +test('Index and size check - no errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/indexAndSizeNoError.html'; + const html = await loadHTML(htmlFilePath); + + // Act + const data = await checkDocumentContrast(html); + + // Assert + expect(data).toStrictEqual([[]]); +}) + +test('Index and size check - errors', async () => { + // Arrange + const functionPath = "../../../server/out/helpers/color-contrast"; + const {checkDocumentContrast} = require(functionPath); + + const htmlFilePath = 'client/out/test/base/indexAndSizeError.html'; + const html = await loadHTML(htmlFilePath); + + const string = "p style=\"color: #ff0000; font-size: 1em;\""; + + // Act + const data = await checkDocumentContrast(html); + // console.log(html) + const actualString = html.substring(data[0].start, data[0].end); + + // Assert + expect(actualString).toBe(string); +}) \ No newline at end of file diff --git a/client/src/extension.ts b/client/src/extension.ts index 80bd3b7..f3faa6f 100644 --- a/client/src/extension.ts +++ b/client/src/extension.ts @@ -70,6 +70,7 @@ export async function activate(context: vscode.ExtensionContext) { let score = 0; let dataLength = 0; +let scheme = [] class ColorsViewProvider implements vscode.WebviewViewProvider { @@ -118,6 +119,8 @@ class ColorsViewProvider implements vscode.WebviewViewProvider { if (status == "loaded") { score = receivedData.pop(); + scheme = receivedData.pop() + let messageArray = []; messageArray = receivedData.map(item => item.relatedInformation[0].message); @@ -156,6 +159,9 @@ class ColorsViewProvider implements vscode.WebviewViewProvider { const cssFilePath = path.join(__dirname, '..', 'src', 'templates', 'styles.css'); const cssContent = fs.readFileSync(cssFilePath, 'utf8'); + const hexs = scheme.map(color => color.hex).join("_"); + const textColors = scheme.map(color => color.textColor).join("_") + htmlContent = htmlContent .replace('{{score}}', score.toString()) .replace('{{dataLength}}', dataLength.toString()) @@ -164,8 +170,11 @@ class ColorsViewProvider implements vscode.WebviewViewProvider { .replace('{{lineArray}}', linesString) .replace('{{stringArray}}', stringArray) .replace('{{styles}}', ``) - .replace('{{htmlChecked}}', htmlChecked); + .replace('{{htmlChecked}}', htmlChecked) + .replace('{{schemeHex}}', hexs) + .replace('{{schemeTextColors}}', textColors) + return htmlContent; } else if (status == "loading") { const htmlFilePath = path.join(__dirname, '..', 'src', 'templates', 'loading.html'); diff --git a/client/src/templates/styles.css b/client/src/templates/styles.css index 80b3960..b8acd2d 100644 --- a/client/src/templates/styles.css +++ b/client/src/templates/styles.css @@ -290,6 +290,14 @@ a:visited{ color: #FFFFFF; } +#colorSuggestions { + border-collapse: collapse; +} + +.colors { + padding: 10px +} + /* For the loading screen */ .loader { border: 5px solid #f3f3f3; diff --git a/client/src/templates/webview.html b/client/src/templates/webview.html index fc64392..6b6b3b0 100644 --- a/client/src/templates/webview.html +++ b/client/src/templates/webview.html @@ -114,6 +114,14 @@

Accessibility Insights
for {{htmlChecked}}

+
+

+

+ + +
+ +