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:
Milorad FIlipović
2023-07-19 16:51:49 +02:00
committed by GitHub
parent 250175d066
commit c3455a4ad8
46 changed files with 173 additions and 118 deletions

View File

@@ -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');
});
});

View File

@@ -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');
});
});

View File

@@ -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>
<!---->
<!---->

View File

@@ -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>

View File

@@ -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>

View File

@@ -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\\">