feat(editor): Removing ph-no-capture class from some elements (#6674)
* feat(editor): Remove `.ph-no-capture` class from some of the fields * ✔️ Updating test snapshots * ⚡ Redacting expressions preview in credentials form * 🔧 Disable posthog input masking * 🚨 Testing PostHog iFrame settings * Reverting iframe test * ⚡ Hiding API key in PostHog recordings * ✅ Added tests for redacted values * ✔️ Updating checkbox snapshots after label component update * ✔️ Updating test snapshots in editor-ui * 👕 Fix lint errors
This commit is contained in:
committed by
GitHub
parent
250175d066
commit
c3455a4ad8
@@ -0,0 +1,51 @@
|
||||
import { PiniaVuePlugin } from 'pinia';
|
||||
import { render } from '@testing-library/vue';
|
||||
import { merge } from 'lodash-es';
|
||||
|
||||
import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
|
||||
import { STORES } from '@/constants';
|
||||
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import CopyInput from '@/components/CopyInput.vue';
|
||||
|
||||
const DEFAULT_SETUP = {
|
||||
pinia: createTestingPinia({
|
||||
initialState: {
|
||||
[STORES.SETTINGS]: {
|
||||
settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
|
||||
},
|
||||
},
|
||||
}),
|
||||
props: {
|
||||
copyButtonText: 'Click to copy',
|
||||
label: 'Copy Input test',
|
||||
},
|
||||
};
|
||||
|
||||
const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
|
||||
render(CopyInput, merge(DEFAULT_SETUP, renderOptions), (vue) => {
|
||||
vue.use(PiniaVuePlugin);
|
||||
});
|
||||
|
||||
describe('BannerStack', () => {
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('should render default configuration', async () => {
|
||||
const { getByTestId } = renderComponent();
|
||||
expect(getByTestId('input-label')).toHaveTextContent('Copy Input test');
|
||||
expect(getByTestId('copy-input')).toHaveTextContent('Click to copy');
|
||||
});
|
||||
|
||||
it('should render redacted version', async () => {
|
||||
const { container, getByTestId } = renderComponent(
|
||||
merge(DEFAULT_SETUP, {
|
||||
props: {
|
||||
redactValue: true,
|
||||
},
|
||||
}),
|
||||
);
|
||||
expect(getByTestId('copy-input')).toHaveClass('ph-no-capture');
|
||||
});
|
||||
});
|
||||
@@ -65,17 +65,4 @@ describe('RunDataJson.vue', () => {
|
||||
expect(screen.getByText('null')).toBeInTheDocument();
|
||||
expect(screen.queryByText('undefined')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('sets ph-no-capture class correctly', () => {
|
||||
render(RunDataJson, DEFAULT_SETUP);
|
||||
|
||||
expect(screen.getByText('"list"')).not.toHaveClass('ph-no-capture');
|
||||
expect(screen.getByText('"record"')).not.toHaveClass('ph-no-capture');
|
||||
expect(screen.getByText('"myStringNumber"')).not.toHaveClass('ph-no-capture');
|
||||
|
||||
expect(screen.getByText('123')).toHaveClass('ph-no-capture');
|
||||
expect(screen.getByText('"456"')).toHaveClass('ph-no-capture');
|
||||
expect(screen.getByText('"abc"')).toHaveClass('ph-no-capture');
|
||||
expect(screen.getByText('null')).toHaveClass('ph-no-capture');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -21,7 +21,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
|
||||
<div>
|
||||
<div class=\\"grid\\">
|
||||
<div class=\\"\\">
|
||||
<div class=\\"container\\" data-test-id=\\"companyType\\"><label for=\\"companyType\\" class=\\"n8n-input-label inputLabel heading medium\\">
|
||||
<div data-test-id=\\"companyType\\" class=\\"container\\"><label for=\\"companyType\\" class=\\"n8n-input-label inputLabel heading medium\\">
|
||||
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> What best describes your company? <!----></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
@@ -71,7 +71,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"\\">
|
||||
<div class=\\"container\\" data-test-id=\\"role\\"><label for=\\"role\\" class=\\"n8n-input-label inputLabel heading medium\\">
|
||||
<div data-test-id=\\"role\\" class=\\"container\\"><label for=\\"role\\" class=\\"n8n-input-label inputLabel heading medium\\">
|
||||
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> Which role best describes you? <!----></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
@@ -123,7 +123,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"\\">
|
||||
<div class=\\"container\\" data-test-id=\\"automationBeneficiary\\"><label for=\\"automationBeneficiary\\" class=\\"n8n-input-label inputLabel heading medium\\">
|
||||
<div data-test-id=\\"automationBeneficiary\\" class=\\"container\\"><label for=\\"automationBeneficiary\\" class=\\"n8n-input-label inputLabel heading medium\\">
|
||||
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> Who will your automations mainly be for? <!----></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
@@ -169,7 +169,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"\\">
|
||||
<div class=\\"container\\" data-test-id=\\"companySize\\"><label for=\\"companySize\\" class=\\"n8n-input-label inputLabel heading medium\\">
|
||||
<div data-test-id=\\"companySize\\" class=\\"container\\"><label for=\\"companySize\\" class=\\"n8n-input-label inputLabel heading medium\\">
|
||||
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How big is your company? <!----></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
@@ -218,7 +218,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"\\">
|
||||
<div class=\\"container\\" data-test-id=\\"reportedSource\\"><label for=\\"reportedSource\\" class=\\"n8n-input-label inputLabel heading medium\\">
|
||||
<div data-test-id=\\"reportedSource\\" class=\\"container\\"><label for=\\"reportedSource\\" class=\\"n8n-input-label inputLabel heading medium\\">
|
||||
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How did you hear about n8n? <!----></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
|
||||
@@ -138,7 +138,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
|
||||
class="vjs-value vjs-value-number"
|
||||
>
|
||||
<span
|
||||
class="ph-no-capture mappable"
|
||||
class="mappable"
|
||||
data-depth="3"
|
||||
data-name="list[0]"
|
||||
data-path="[0].list[0]"
|
||||
@@ -180,7 +180,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
|
||||
class="vjs-value vjs-value-number"
|
||||
>
|
||||
<span
|
||||
class="ph-no-capture mappable"
|
||||
class="mappable"
|
||||
data-depth="3"
|
||||
data-name="list[1]"
|
||||
data-path="[0].list[1]"
|
||||
@@ -222,7 +222,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
|
||||
class="vjs-value vjs-value-number"
|
||||
>
|
||||
<span
|
||||
class="ph-no-capture mappable"
|
||||
class="mappable"
|
||||
data-depth="3"
|
||||
data-name="list[2]"
|
||||
data-path="[0].list[2]"
|
||||
@@ -351,9 +351,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
|
||||
<span
|
||||
class="vjs-value vjs-value-string"
|
||||
>
|
||||
<span
|
||||
class="ph-no-capture"
|
||||
>
|
||||
<span>
|
||||
"Joe"
|
||||
</span>
|
||||
</span>
|
||||
@@ -429,9 +427,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
|
||||
<span
|
||||
class="vjs-value vjs-value-number"
|
||||
>
|
||||
<span
|
||||
class="ph-no-capture"
|
||||
>
|
||||
<span>
|
||||
123
|
||||
</span>
|
||||
</span>
|
||||
@@ -479,9 +475,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
|
||||
<span
|
||||
class="vjs-value vjs-value-string"
|
||||
>
|
||||
<span
|
||||
class="ph-no-capture"
|
||||
>
|
||||
<span>
|
||||
"456"
|
||||
</span>
|
||||
</span>
|
||||
@@ -529,9 +523,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
|
||||
<span
|
||||
class="vjs-value vjs-value-string"
|
||||
>
|
||||
<span
|
||||
class="ph-no-capture"
|
||||
>
|
||||
<span>
|
||||
"abc"
|
||||
</span>
|
||||
</span>
|
||||
@@ -579,9 +571,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
|
||||
<span
|
||||
class="vjs-value vjs-value-null"
|
||||
>
|
||||
<span
|
||||
class="ph-no-capture"
|
||||
>
|
||||
<span>
|
||||
null
|
||||
</span>
|
||||
</span>
|
||||
@@ -629,9 +619,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
|
||||
<span
|
||||
class="vjs-value vjs-value-undefined"
|
||||
>
|
||||
<span
|
||||
class="ph-no-capture"
|
||||
>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -52,7 +52,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ph-no-capture text"
|
||||
class="text"
|
||||
>
|
||||
John
|
||||
</span>
|
||||
@@ -90,7 +90,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ph-no-capture text"
|
||||
class="text"
|
||||
>
|
||||
22
|
||||
</span>
|
||||
@@ -176,7 +176,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ph-no-capture text"
|
||||
class="text"
|
||||
>
|
||||
surfing
|
||||
</span>
|
||||
@@ -216,7 +216,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ph-no-capture text"
|
||||
class="text"
|
||||
>
|
||||
traveling
|
||||
</span>
|
||||
@@ -458,7 +458,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ph-no-capture text"
|
||||
class="text"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
@@ -498,7 +498,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ph-no-capture text"
|
||||
class="text"
|
||||
>
|
||||
ignore
|
||||
</span>
|
||||
|
||||
@@ -32,7 +32,7 @@ exports[`VariablesRow > should show key and value inputs in edit mode 1`] = `
|
||||
"<tr data-test-id=\\"variables-row\\" class=\\"variablesRow\\">
|
||||
<td class=\\"variables-key-column\\">
|
||||
<div>
|
||||
<div class=\\"container\\" data-test-id=\\"variable-row-key-input\\">
|
||||
<div data-test-id=\\"variable-row-key-input\\" class=\\"container\\">
|
||||
<!---->
|
||||
<div class=\\"\\">
|
||||
<div class=\\"el-input el-input--large n8n-input\\">
|
||||
@@ -49,7 +49,7 @@ exports[`VariablesRow > should show key and value inputs in edit mode 1`] = `
|
||||
</td>
|
||||
<td class=\\"variables-value-column\\">
|
||||
<div>
|
||||
<div class=\\"container\\" data-test-id=\\"variable-row-value-input\\">
|
||||
<div data-test-id=\\"variable-row-value-input\\" class=\\"container\\">
|
||||
<!---->
|
||||
<div class=\\"\\">
|
||||
<div class=\\"el-input el-input--large n8n-input\\">
|
||||
|
||||
Reference in New Issue
Block a user