123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- import sortBy from 'lodash/sortBy';
- import {mountGlobalModal} from 'sentry-test/modal';
- import {openModal} from 'sentry/actionCreators/modal';
- import {convertRelayPiiConfig} from 'sentry/views/settings/components/dataScrubbing/convertRelayPiiConfig';
- import Edit from 'sentry/views/settings/components/dataScrubbing/modals/edit';
- import submitRules from 'sentry/views/settings/components/dataScrubbing/submitRules';
- import {MethodType, RuleType} from 'sentry/views/settings/components/dataScrubbing/types';
- import {
- getMethodLabel,
- getRuleLabel,
- valueSuggestions,
- } from 'sentry/views/settings/components/dataScrubbing/utils';
- const relayPiiConfig = TestStubs.DataScrubbingRelayPiiConfig();
- const stringRelayPiiConfig = JSON.stringify(relayPiiConfig);
- const organizationSlug = 'sentry';
- const convertedRules = convertRelayPiiConfig(stringRelayPiiConfig);
- const rules = convertedRules;
- const rule = rules[2];
- const successfullySaved = jest.fn();
- const projectId = 'foo';
- const endpoint = `/projects/${organizationSlug}/${projectId}/`;
- const api = new MockApiClient();
- jest.mock('sentry/views/settings/components/dataScrubbing/submitRules');
- async function renderComponent() {
- const modal = await mountGlobalModal();
- openModal(modalProps => (
- <Edit
- {...modalProps}
- projectId={projectId}
- savedRules={rules}
- api={api}
- endpoint={endpoint}
- orgSlug={organizationSlug}
- onSubmitSuccess={successfullySaved}
- rule={rule}
- />
- ));
- await tick();
- modal.update();
- return modal;
- }
- describe('Edit Modal', () => {
- it('open Edit Rule Modal', async () => {
- const wrapper = await renderComponent();
- expect(wrapper.find('Header').text()).toEqual('Edit an advanced data scrubbing rule');
- const fieldGroup = wrapper.find('FieldGroup');
- expect(fieldGroup).toHaveLength(2);
- // Method Field
- const methodGroup = fieldGroup.at(0).find('Field');
- const methodField = methodGroup.at(0);
- expect(methodField.find('FieldLabel').text()).toEqual('Method');
- const methodFieldHelp = 'What to do';
- expect(methodField.find('QuestionTooltip').prop('title')).toEqual(methodFieldHelp);
- expect(methodField.find('Tooltip').prop('title')).toEqual(methodFieldHelp);
- const methodFieldSelect = methodField.find('SelectField');
- expect(methodFieldSelect.exists()).toBe(true);
- const methodFieldSelectProps = methodFieldSelect.props();
- expect(methodFieldSelectProps.value).toEqual(MethodType.REPLACE);
- const methodFieldSelectOptions = sortBy(Object.values(MethodType)).map(value => ({
- ...getMethodLabel(value),
- value,
- }));
- expect(methodFieldSelectProps.options).toEqual(methodFieldSelectOptions);
- // Placeholder Field
- const placeholderField = methodGroup.at(1);
- expect(placeholderField.find('FieldLabel').text()).toEqual(
- 'Custom Placeholder (Optional)'
- );
- const placeholderFieldHelp = 'It will replace the default placeholder [Filtered]';
- expect(placeholderField.find('QuestionTooltip').prop('title')).toEqual(
- placeholderFieldHelp
- );
- expect(placeholderField.find('Tooltip').prop('title')).toEqual(placeholderFieldHelp);
- if (rule.method === MethodType.REPLACE) {
- const placeholderInput = placeholderField.find('input');
- expect(placeholderInput.prop('value')).toEqual(rule.placeholder);
- }
- // Type Field
- const typeGroup = fieldGroup.at(1).find('Field');
- const typeField = typeGroup.at(0);
- expect(typeField.find('FieldLabel').text()).toEqual('Data Type');
- const typeFieldHelp =
- 'What to look for. Use an existing pattern or define your own using regular expressions.';
- expect(typeField.find('QuestionTooltip').prop('title')).toEqual(typeFieldHelp);
- expect(typeField.find('Tooltip').prop('title')).toEqual(typeFieldHelp);
- const typeFieldSelect = typeField.find('SelectField');
- expect(typeFieldSelect.exists()).toBe(true);
- const typeFieldSelectProps = typeFieldSelect.props();
- expect(typeFieldSelectProps.value).toEqual(RuleType.PATTERN);
- const typeFieldSelectOptions = sortBy(Object.values(RuleType)).map(value => ({
- label: getRuleLabel(value),
- value,
- }));
- expect(typeFieldSelectProps.options).toEqual(typeFieldSelectOptions);
- // Regex matches Field
- const regexField = typeGroup.at(1);
- expect(regexField.find('FieldLabel').text()).toEqual('Regex matches');
- const regexFieldHelp = 'Custom regular expression (see documentation)';
- expect(regexField.find('QuestionTooltip').prop('title')).toEqual(regexFieldHelp);
- expect(regexField.find('Tooltip').prop('title')).toEqual(regexFieldHelp);
- if (rule.type === RuleType.PATTERN) {
- const regexFieldInput = regexField.find('input');
- expect(regexFieldInput.prop('value')).toEqual(rule.pattern);
- }
- // Event ID
- expect(wrapper.find('Toggle').text()).toEqual('Use event ID for auto-completion');
- // Source Field
- const sourceGroup = wrapper.find('SourceGroup');
- expect(sourceGroup.exists()).toBe(true);
- expect(sourceGroup.find('EventIdField')).toHaveLength(0);
- const sourceField = sourceGroup.find('Field');
- expect(sourceField.find('FieldLabel').text()).toEqual('Source');
- const sourceFieldHelp =
- 'Where to look. In the simplest case this can be an attribute name.';
- expect(sourceField.find('QuestionTooltip').prop('title')).toEqual(sourceFieldHelp);
- expect(sourceField.find('Tooltip').prop('title')).toEqual(sourceFieldHelp);
- const sourceFieldInput = sourceField.find('input');
- expect(sourceFieldInput.prop('value')).toEqual(rule.source);
- // Close Modal
- const cancelButton = wrapper.find('[aria-label="Cancel"]').hostNodes();
- expect(cancelButton.exists()).toBe(true);
- cancelButton.simulate('click');
- await tick();
- wrapper.update();
- expect(wrapper.find('GlobalModal[visible=true]').exists()).toBe(false);
- });
- it('edit Rule Modal', async () => {
- const wrapper = await renderComponent();
- // Method Field
- const methodField = wrapper.find('[data-test-id="method-field"]');
- const methodFieldInput = methodField.find('input').at(0);
- methodFieldInput.simulate('keyDown', {key: 'ArrowDown'});
- const methodFieldMenuOptions = wrapper.find(
- '[data-test-id="method-field"] MenuList Option'
- );
- const maskOption = methodFieldMenuOptions.at(1);
- maskOption.simulate('click');
- // Placeholder Field should be now hidden
- const placeholderField = wrapper.find('[data-test-id="placeholder-field"]');
- expect(placeholderField).toHaveLength(0);
- // Type Field
- const typeField = wrapper.find('[data-test-id="type-field"]');
- const typeFieldInput = typeField.find('input').at(0);
- typeFieldInput.simulate('keyDown', {key: 'ArrowDown'});
- const typeFieldMenuOptions = wrapper.find(
- '[data-test-id="type-field"] MenuList Option'
- );
- const anythingOption = typeFieldMenuOptions.at(0);
- anythingOption.simulate('click');
- // Regex Field should be now hidden
- const regexField = wrapper.find('[data-test-id="regex-field"]');
- expect(regexField).toHaveLength(0);
- // Source Field
- const sourceField = wrapper.find('[data-test-id="source-field"]');
- const sourceFieldInput = sourceField.find('input');
- sourceFieldInput.simulate('change', {target: {value: valueSuggestions[2].value}});
- // Save rule
- const saveButton = wrapper.find('[aria-label="Save Rule"]').hostNodes();
- expect(saveButton.exists()).toBe(true);
- saveButton.simulate('click');
- expect(submitRules).toHaveBeenCalled();
- expect(submitRules).toHaveBeenCalledWith(api, endpoint, [
- {
- id: 0,
- method: 'replace',
- type: 'password',
- source: 'password',
- placeholder: 'Scrubbed',
- },
- {id: 1, method: 'mask', type: 'creditcard', source: '$message'},
- {
- id: 2,
- method: 'mask',
- pattern: '',
- placeholder: '',
- type: 'anything',
- source: '$error.value',
- },
- ]);
- });
- });
|