clarity-js 0.7.69 → 0.8.0

package/test/core.test.ts

@@ -1,139 +1,139 @@
-import { assert } from 'chai';
-import { Browser, Page } from 'playwright';
-import { changes, clicks, inputs, launch, markup, node, text } from './helper';
-import { decode } from "clarity-decode";
-
-let browser: Browser;
-let page: Page;
-
-describe('Core Tests', () => {
-    before(async () => {
-        browser = await launch();
-    });
-
-    beforeEach(async () => {
-        page = await browser.newPage();
-        await page.goto('about:blank');
-    });
-
-    afterEach(async () => {
-        await page.close();
-    });
-
-    after(async () => {
-        await browser.close();
-        browser = null;
-    });
-
-    it('should mask sensitive content by default', async () => {
-        let encoded: string[] = await markup(page, "core.html");
-        let decoded = encoded.map(x => decode(x));
-        let heading = text(decoded, "one");
-        let address = text(decoded, "two");
-        let email = node(decoded, "attributes.id", "eml");
-        let password = node(decoded, "attributes.id", "pwd");
-        let search = node(decoded, "attributes.id", "search");
-        let card = node(decoded, "attributes.id", "cardnum");
-        let option = text(decoded, "option1");
-        let textarea = text(decoded, "textarea");
-        let click = clicks(decoded)[0];
-        let input = inputs(decoded)[0];
-        let group = changes(decoded);
-        
-        // Non-sensitive fields continue to pass through with sensitive bits masked off
-        assert.equal(heading, "Thanks for your order #▫▪▪▫▫▫▪▪");
-
-        // Sensitive fields, including input fields, are randomized and masked
-        assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
-        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
-        assert.equal(password.attributes.value, "••••");
-        assert.equal(search.attributes.value, "••••• •••• ••••");
-        assert.equal(card.attributes.value, "•••••");
-        assert.equal(textarea, "••••• •••••");
-        assert.equal(option, "• •••••");
-
-        // Clicked text and input value should be consistent with uber masking configuration
-        assert.equal(click.data.text, "Hello ▪▪▪▫▪");
-        assert.equal(input.data.value, "••••• •••• •••• ••••");
-        assert.equal(group.length, 2);
-        // Search change - we should captured mangled input and hash
-        assert.equal(group[0].data.type, "search");
-        assert.equal(group[0].data.value, "••••• •••• •••• ••••");
-        assert.equal(group[0].data.checksum, "4y7m6");
-        // Password change - we should capture placholder value and empty hash
-        assert.equal(group[1].data.type, "password");
-        assert.equal(group[1].data.value, "••••");
-        assert.equal(group[1].data.checksum, "");
-    });
-
-    it('should mask all text in strict mode', async () => {
-        let encoded: string[] = await markup(page, "core.html", { content: false });
-        let decoded = encoded.map(x => decode(x));
-        let heading = text(decoded, "one");
-        let address = text(decoded, "two");
-        let email = node(decoded, "attributes.id", "eml");
-        let password = node(decoded, "attributes.id", "pwd");
-        let search = node(decoded, "attributes.id", "search");
-        let card = node(decoded, "attributes.id", "cardnum");
-        let click = clicks(decoded)[0];
-        let input = inputs(decoded)[0];
-        let option = text(decoded, "option1");
-
-        // All fields are randomized and masked
-        assert.equal(heading, "• ••••• ••••• ••••• ••••• •••••");
-        assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
-        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
-        assert.equal(password.attributes.value, "••••");
-        assert.equal(search.attributes.value, "••••• •••• ••••");
-        assert.equal(card.attributes.value, "•••••");
-        assert.equal(option, "• •••••");
-
-        // Clicked text and input value should also be masked in strict mode
-        assert.equal(click.data.text, "••••• •••• ••••");
-        assert.equal(input.data.value, "••••• •••• •••• ••••");
-    });
-
-    it('should unmask non-sensitive text in relaxed mode', async () => {
-        let encoded: string[] = await markup(page, "core.html", { unmask: ["body"] });
-        let decoded = encoded.map(x => decode(x));
-        let heading = text(decoded, "one");
-        let address = text(decoded, "two");
-        let email = node(decoded, "attributes.id", "eml");
-        let password = node(decoded, "attributes.id", "pwd");
-        let search = node(decoded, "attributes.id", "search");
-        let card = node(decoded, "attributes.id", "cardnum");
-        let click = clicks(decoded)[0];
-        let input = inputs(decoded)[0];
-        let option = text(decoded, "option1");
-
-        // Text flows through unmasked for non-sensitive fields, with exception of input fields
-        assert.equal(heading, "Thanks for your order #2AB700GH");
-        assert.equal(address, "1 Microsoft Way, Redmond, WA - 98052");
-        assert.equal(search.attributes.value, "••••• •••• ••••");
-        assert.equal(option, "• •••••");
-
-        // Sensitive fields are still masked
-        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
-        assert.equal(password.attributes.value, "••••");
-        assert.equal(card.attributes.value, "•••••");
-
-        // Clicked text comes through unmasked in relaxed mode but input is still masked
-        assert.equal(click.data.text, "Hello Wor1d");
-        assert.equal(input.data.value, "••••• •••• •••• ••••");
-    });
-
-    it('should respect mask config even in relaxed mode', async () => {
-        let encoded: string[] = await markup(page, "core.html", { mask: ["#mask"], unmask: ["body"] });
-        let decoded = encoded.map(x => decode(x));
-        let subtree = text(decoded, "child");
-        let click = clicks(decoded)[0];
-        let input = inputs(decoded)[0];
-        
-        // Masked sub-trees continue to stay masked
-        assert.equal(subtree, "••••• •••••");
-
-        // Clicked text is masked due to masked configuration and input value is also masked
-        assert.equal(click.data.text, "••••• •••• ••••");
-        assert.equal(input.data.value, "••••• •••• •••• ••••");
-    });
-});
+import { assert } from 'chai';
+import { Browser, Page } from 'playwright';
+import { changes, clicks, inputs, launch, markup, node, text } from './helper';
+import { decode } from "clarity-decode";
+
+let browser: Browser;
+let page: Page;
+
+describe('Core Tests', () => {
+    before(async () => {
+        browser = await launch();
+    });
+
+    beforeEach(async () => {
+        page = await browser.newPage();
+        await page.goto('about:blank');
+    });
+
+    afterEach(async () => {
+        await page.close();
+    });
+
+    after(async () => {
+        await browser.close();
+        browser = null;
+    });
+
+    it('should mask sensitive content by default', async () => {
+        let encoded: string[] = await markup(page, "core.html");
+        let decoded = encoded.map(x => decode(x));
+        let heading = text(decoded, "one");
+        let address = text(decoded, "two");
+        let email = node(decoded, "attributes.id", "eml");
+        let password = node(decoded, "attributes.id", "pwd");
+        let search = node(decoded, "attributes.id", "search");
+        let card = node(decoded, "attributes.id", "cardnum");
+        let option = text(decoded, "option1");
+        let textarea = text(decoded, "textarea");
+        let click = clicks(decoded)[0];
+        let input = inputs(decoded)[0];
+        let group = changes(decoded);
+        
+        // Non-sensitive fields continue to pass through with sensitive bits masked off
+        assert.equal(heading, "Thanks for your order #▫▪▪▫▫▫▪▪");
+
+        // Sensitive fields, including input fields, are randomized and masked
+        assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
+        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
+        assert.equal(password.attributes.value, "••••");
+        assert.equal(search.attributes.value, "••••• •••• ••••");
+        assert.equal(card.attributes.value, "•••••");
+        assert.equal(textarea, "••••• •••••");
+        assert.equal(option, "• •••••");
+
+        // Clicked text and input value should be consistent with uber masking configuration
+        assert.equal(click.data.text, "Hello ▪▪▪▫▪");
+        assert.equal(input.data.value, "••••• •••• •••• ••••");
+        assert.equal(group.length, 2);
+        // Search change - we should captured mangled input and hash
+        assert.equal(group[0].data.type, "search");
+        assert.equal(group[0].data.value, "••••• •••• •••• ••••");
+        assert.equal(group[0].data.checksum, "4y7m6");
+        // Password change - we should capture placholder value and empty hash
+        assert.equal(group[1].data.type, "password");
+        assert.equal(group[1].data.value, "••••");
+        assert.equal(group[1].data.checksum, "");
+    });
+
+    it('should mask all text in strict mode', async () => {
+        let encoded: string[] = await markup(page, "core.html", { content: false });
+        let decoded = encoded.map(x => decode(x));
+        let heading = text(decoded, "one");
+        let address = text(decoded, "two");
+        let email = node(decoded, "attributes.id", "eml");
+        let password = node(decoded, "attributes.id", "pwd");
+        let search = node(decoded, "attributes.id", "search");
+        let card = node(decoded, "attributes.id", "cardnum");
+        let click = clicks(decoded)[0];
+        let input = inputs(decoded)[0];
+        let option = text(decoded, "option1");
+
+        // All fields are randomized and masked
+        assert.equal(heading, "• ••••• ••••• ••••• ••••• •••••");
+        assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
+        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
+        assert.equal(password.attributes.value, "••••");
+        assert.equal(search.attributes.value, "••••• •••• ••••");
+        assert.equal(card.attributes.value, "•••••");
+        assert.equal(option, "• •••••");
+
+        // Clicked text and input value should also be masked in strict mode
+        assert.equal(click.data.text, "••••• •••• ••••");
+        assert.equal(input.data.value, "••••• •••• •••• ••••");
+    });
+
+    it('should unmask non-sensitive text in relaxed mode', async () => {
+        let encoded: string[] = await markup(page, "core.html", { unmask: ["body"] });
+        let decoded = encoded.map(x => decode(x));
+        let heading = text(decoded, "one");
+        let address = text(decoded, "two");
+        let email = node(decoded, "attributes.id", "eml");
+        let password = node(decoded, "attributes.id", "pwd");
+        let search = node(decoded, "attributes.id", "search");
+        let card = node(decoded, "attributes.id", "cardnum");
+        let click = clicks(decoded)[0];
+        let input = inputs(decoded)[0];
+        let option = text(decoded, "option1");
+
+        // Text flows through unmasked for non-sensitive fields, with exception of input fields
+        assert.equal(heading, "Thanks for your order #2AB700GH");
+        assert.equal(address, "1 Microsoft Way, Redmond, WA - 98052");
+        assert.equal(search.attributes.value, "••••• •••• ••••");
+        assert.equal(option, "• •••••");
+
+        // Sensitive fields are still masked
+        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
+        assert.equal(password.attributes.value, "••••");
+        assert.equal(card.attributes.value, "•••••");
+
+        // Clicked text comes through unmasked in relaxed mode but input is still masked
+        assert.equal(click.data.text, "Hello Wor1d");
+        assert.equal(input.data.value, "••••• •••• •••• ••••");
+    });
+
+    it('should respect mask config even in relaxed mode', async () => {
+        let encoded: string[] = await markup(page, "core.html", { mask: ["#mask"], unmask: ["body"] });
+        let decoded = encoded.map(x => decode(x));
+        let subtree = text(decoded, "child");
+        let click = clicks(decoded)[0];
+        let input = inputs(decoded)[0];
+        
+        // Masked sub-trees continue to stay masked
+        assert.equal(subtree, "••••• •••••");
+
+        // Clicked text is masked due to masked configuration and input value is also masked
+        assert.equal(click.data.text, "••••• •••• ••••");
+        assert.equal(input.data.value, "••••• •••• •••• ••••");
+    });
+});

package/test/helper.ts

@@ -1,162 +1,162 @@
-import { Core, Data, decode, Interaction, Layout } from "clarity-decode";
-import * as fs from 'fs';
-import * as url from 'url';
-import * as path from 'path';
-import { Browser, Page, chromium } from 'playwright';
-
-export async function launch(): Promise<Browser> {
-    return chromium.launch({ headless: true, args: ['--no-sandbox'] });
-}
-
-export async function markup(page: Page, file: string, override: Core.Config = null): Promise<string[]> {
-    const htmlPath = path.resolve(__dirname, `./html/${file}`);
-    const htmlFileUrl = url.pathToFileURL(htmlPath).toString();
-    const html = fs.readFileSync(htmlPath, 'utf8');
-    await Promise.all([
-        page.goto(htmlFileUrl),
-        page.waitForNavigation()
-    ]);
-    await page.setContent(html.replace("</body>", `
-        <script>
-          window.payloads = [];
-          ${fs.readFileSync(path.resolve(__dirname, `../build/clarity.min.js`), 'utf8')};
-          clarity("start", ${config(override)});
-        </script>
-        </body>
-    `));
-    await page.hover("#two");
-    await page.click("#child");
-    await page.locator('#search').fill('');
-    await page.locator('#search').type('query with numb3rs');
-    await page.locator('#pwd').type('p1ssw0rd');
-    await page.locator('#eml').fill('');
-    await page.locator('#eml').type('hello@world.com');
-    await page.waitForFunction("payloads && payloads.length > 2");
-    return await page.evaluate('payloads');
-}
-
-export function clicks(decoded: Data.DecodedPayload[]): Interaction.ClickEvent[] {
-    let output: Interaction.ClickEvent[] = [];
-    for (let i = decoded.length - 1; i >= 0; i--) {
-        if (decoded[i].click) {
-            for (let j = 0; j < decoded[i].click.length;j++)
-            {
-                output.push(decoded[i].click[j]);
-            }
-        }
-    }
-    return output;
-}
-
-export function inputs(decoded: Data.DecodedPayload[]): Interaction.InputEvent[] {
-    let output: Interaction.InputEvent[] = [];
-    for (let i = decoded.length - 1; i >= 0; i--) {
-        if (decoded[i].input) {
-            for (let j = 0; j < decoded[i].input.length;j++)
-            {
-                output.push(decoded[i].input[j]);
-            }
-        }
-    }
-    return output;
-}
-
-export function changes(decoded: Data.DecodedPayload[]): Interaction.ChangeEvent[] {
-    let output: Interaction.ChangeEvent[] = [];
-    for (let i = decoded.length - 1; i >= 0; i--) {
-        if (decoded[i].change) {
-            for (let j = 0; j < decoded[i].change.length;j++)
-            {
-                output.push(decoded[i].change[j]);
-            }
-        }
-    }
-    return output;
-}
-
-export function node(decoded: Data.DecodedPayload[], key: string, value: string | number, tag: string = null): Layout.DomData {
-    let sub = null;
-
-    // Exploding nested keys into key and sub key
-    if (key.indexOf(".") > 0) {
-        const parts = key.split(".");
-        if (parts.length === 2) {
-            key = parts[0];
-            sub = parts[1];
-        }
-    }
-
-    // Walking over the decoded payload to find the right match
-    for (let i = decoded.length - 1; i >= 0; i--) {
-        if (decoded[i].dom) {
-            for (let j = 0; j < decoded[i].dom.length; j++) {
-                if (decoded[i].dom[j].data) {
-                    for (let k = 0; k < decoded[i].dom[j].data.length; k++) {
-                        let d = decoded[i].dom[j].data[k];
-                        if ((sub && d[key] && d[key][sub] === value) ||
-                            (d[key] && d[key] === value)) {
-                                if ((tag && d.tag === tag) || tag === null) {
-                                    return d;
-                                }
-                        }
-                    }
-                }
-            }
-        }
-    }
-    return null;
-}
-
-export function text(decoded: Data.DecodedPayload[], id: string): string {
-    let parent = node(decoded, "attributes.id", id);
-    if (parent) {
-        let child = node(decoded, "parent", parent.id, "*T");
-        if (child && child.value) {
-            return child.value;
-        }
-    }
-    return null;
-}
-
-
-function config(override: Core.Config): string {
-    const settings = {
-        delay: 100,
-        content: true,
-        fraud: [],
-        regions: [],
-        mask: [],
-        unmask: [],
-        upload: payload => { window["payloads"].push(payload); window["clarity"]("upgrade", "test"); }
-    }
-
-    // Process overrides
-    if (override){
-        for (let key of Object.keys(override)) {
-            settings[key] = override[key];
-        }
-    }
-
-    // Serialize configuration
-    let output = "";
-    for (let key of Object.keys(settings)) {
-        switch (key) {
-            case "upload":
-                output += `${JSON.stringify(key)}: ${settings[key].toString()},`;
-                break;
-            case "projectId":
-            case "mask":
-            case "unmask":
-            case "regions":
-            case "cookies":
-            case "fraud":
-                output += `${JSON.stringify(key)}: ${JSON.stringify(settings[key])},`;
-                break;
-            default:
-                output += `${JSON.stringify(key)}: ${settings[key]},`;
-                break;
-        }
-    }
-    output += `"projectId": "test"`;
-    return "{" + output + "}";
-}
+import { Core, Data, decode, Interaction, Layout } from "clarity-decode";
+import * as fs from 'fs';
+import * as url from 'url';
+import * as path from 'path';
+import { Browser, Page, chromium } from 'playwright';
+
+export async function launch(): Promise<Browser> {
+    return chromium.launch({ headless: true, args: ['--no-sandbox'] });
+}
+
+export async function markup(page: Page, file: string, override: Core.Config = null): Promise<string[]> {
+    const htmlPath = path.resolve(__dirname, `./html/${file}`);
+    const htmlFileUrl = url.pathToFileURL(htmlPath).toString();
+    const html = fs.readFileSync(htmlPath, 'utf8');
+    await Promise.all([
+        page.goto(htmlFileUrl),
+        page.waitForNavigation()
+    ]);
+    await page.setContent(html.replace("</body>", `
+        <script>
+          window.payloads = [];
+          ${fs.readFileSync(path.resolve(__dirname, `../build/clarity.min.js`), 'utf8')};
+          clarity("start", ${config(override)});
+        </script>
+        </body>
+    `));
+    await page.hover("#two");
+    await page.click("#child");
+    await page.locator('#search').fill('');
+    await page.locator('#search').type('query with numb3rs');
+    await page.locator('#pwd').type('p1ssw0rd');
+    await page.locator('#eml').fill('');
+    await page.locator('#eml').type('hello@world.com');
+    await page.waitForFunction("payloads && payloads.length > 2");
+    return await page.evaluate('payloads');
+}
+
+export function clicks(decoded: Data.DecodedPayload[]): Interaction.ClickEvent[] {
+    let output: Interaction.ClickEvent[] = [];
+    for (let i = decoded.length - 1; i >= 0; i--) {
+        if (decoded[i].click) {
+            for (let j = 0; j < decoded[i].click.length;j++)
+            {
+                output.push(decoded[i].click[j]);
+            }
+        }
+    }
+    return output;
+}
+
+export function inputs(decoded: Data.DecodedPayload[]): Interaction.InputEvent[] {
+    let output: Interaction.InputEvent[] = [];
+    for (let i = decoded.length - 1; i >= 0; i--) {
+        if (decoded[i].input) {
+            for (let j = 0; j < decoded[i].input.length;j++)
+            {
+                output.push(decoded[i].input[j]);
+            }
+        }
+    }
+    return output;
+}
+
+export function changes(decoded: Data.DecodedPayload[]): Interaction.ChangeEvent[] {
+    let output: Interaction.ChangeEvent[] = [];
+    for (let i = decoded.length - 1; i >= 0; i--) {
+        if (decoded[i].change) {
+            for (let j = 0; j < decoded[i].change.length;j++)
+            {
+                output.push(decoded[i].change[j]);
+            }
+        }
+    }
+    return output;
+}
+
+export function node(decoded: Data.DecodedPayload[], key: string, value: string | number, tag: string = null): Layout.DomData {
+    let sub = null;
+
+    // Exploding nested keys into key and sub key
+    if (key.indexOf(".") > 0) {
+        const parts = key.split(".");
+        if (parts.length === 2) {
+            key = parts[0];
+            sub = parts[1];
+        }
+    }
+
+    // Walking over the decoded payload to find the right match
+    for (let i = decoded.length - 1; i >= 0; i--) {
+        if (decoded[i].dom) {
+            for (let j = 0; j < decoded[i].dom.length; j++) {
+                if (decoded[i].dom[j].data) {
+                    for (let k = 0; k < decoded[i].dom[j].data.length; k++) {
+                        let d = decoded[i].dom[j].data[k];
+                        if ((sub && d[key] && d[key][sub] === value) ||
+                            (d[key] && d[key] === value)) {
+                                if ((tag && d.tag === tag) || tag === null) {
+                                    return d;
+                                }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return null;
+}
+
+export function text(decoded: Data.DecodedPayload[], id: string): string {
+    let parent = node(decoded, "attributes.id", id);
+    if (parent) {
+        let child = node(decoded, "parent", parent.id, "*T");
+        if (child && child.value) {
+            return child.value;
+        }
+    }
+    return null;
+}
+
+
+function config(override: Core.Config): string {
+    const settings = {
+        delay: 100,
+        content: true,
+        fraud: [],
+        regions: [],
+        mask: [],
+        unmask: [],
+        upload: payload => { window["payloads"].push(payload); window["clarity"]("upgrade", "test"); }
+    }
+
+    // Process overrides
+    if (override){
+        for (let key of Object.keys(override)) {
+            settings[key] = override[key];
+        }
+    }
+
+    // Serialize configuration
+    let output = "";
+    for (let key of Object.keys(settings)) {
+        switch (key) {
+            case "upload":
+                output += `${JSON.stringify(key)}: ${settings[key].toString()},`;
+                break;
+            case "projectId":
+            case "mask":
+            case "unmask":
+            case "regions":
+            case "cookies":
+            case "fraud":
+                output += `${JSON.stringify(key)}: ${JSON.stringify(settings[key])},`;
+                break;
+            default:
+                output += `${JSON.stringify(key)}: ${settings[key]},`;
+                break;
+        }
+    }
+    output += `"projectId": "test"`;
+    return "{" + output + "}";
+}