test(dataPrivacyRulesPanelSelectorField): Added tests (#18073)

jest.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   verbose: false,
   collectCoverageFrom: [
-    'tests/js/spec/**/*.{js,jsx}',
+    'tests/js/spec/**/*.{js,jsx,tsx}',
     'src/sentry/static/sentry/app/**/*.{js,jsx,ts,tsx}',
   ],
   coverageReporters: ['html', 'lcov', 'cobertura'],
@@ -24,7 +24,7 @@ module.exports = {
     'jest-canvas-mock',
   ],
   setupFilesAfterEnv: ['<rootDir>/tests/js/setupFramework.js'],
-  testMatch: ['<rootDir>/tests/js/**/*(*.)@(spec|test).js?(x)'],
+  testMatch: ['<rootDir>/tests/js/**/*(*.)@(spec|test).(js|ts)?(x)'],
   testPathIgnorePatterns: ['<rootDir>/tests/sentry/lang/javascript/'],
   unmockedModulePathPatterns: [
     '<rootDir>/node_modules/react',

src/sentry/static/sentry/app/views/settings/components/dataPrivacyRulesPanel/dataPrivacyRulesPanelSelectorField.tsx

@@ -247,7 +247,10 @@ class DataPrivacyRulesPanelSelectorField extends React.Component<Props, State> {
           disabled={disabled}
         />
         {showSuggestions && suggestions.length > 0 && (
-          <SuggestionsWrapper ref={this.suggestionList}>
+          <SuggestionsWrapper
+            ref={this.suggestionList}
+            data-test-id="panelSelectorField-suggestions"
+          >
             {suggestions.map((suggestion, index) => (
               <SuggestionItem
                 key={suggestion.value}

tests/js/sentry-test/fixtures/userFeedback.js

@@ -1,7 +1,9 @@
 import {Group} from './group';
 import {Event} from './event';
+import {User} from './user';
 
 export function UserFeedback(params = {}) {
+  const event = Event();
   return {
     id: '123',
     name: 'Lyn',
@@ -9,7 +11,9 @@ export function UserFeedback(params = {}) {
     comments: 'Something bad happened',
     dateCreated: '2018-12-20T00:00:00.000Z',
     issue: Group(),
-    event: Event(),
+    eventID: event.id,
+    event,
+    user: User(),
     ...params,
   };
 }

tests/js/spec/views/settings/components/dataPrivacyRulesPanel/__snapshots__/dataPrivacyRulesPanelSelectorField.spec.tsx.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataPrivacyRulesPanelSelectorField default render 1`] = `
+<DataPrivacyRulesPanelSelectorField
+  onChange={[MockFunction]}
+  value="$string"
+>
+  <Wrapper>
+    <div
+      className="css-8p5quz-Wrapper e1e07je00"
+    >
+      <StyledTextField
+        autoComplete="off"
+        disabled={false}
+        hideErrorMessage={false}
+        name="from"
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="ex. strings, numbers, custom"
+        required={false}
+        value="$string"
+      >
+        <TextField
+          autoComplete="off"
+          className="css-16uh7iz-StyledTextField e1e07je01"
+          disabled={false}
+          hideErrorMessage={false}
+          name="from"
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          placeholder="ex. strings, numbers, custom"
+          required={false}
+          value="$string"
+        >
+          <div
+            className="css-16uh7iz-StyledTextField e1e07je01 control-group"
+          >
+            <div
+              className="controls"
+            >
+              <input
+                autoComplete="off"
+                className="form-control"
+                disabled={false}
+                id="id-from"
+                name="from"
+                onChange={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                placeholder="ex. strings, numbers, custom"
+                required={false}
+                type="text"
+                value="$string"
+              />
+            </div>
+          </div>
+        </TextField>
+      </StyledTextField>
+    </div>
+  </Wrapper>
+</DataPrivacyRulesPanelSelectorField>
+`;

tests/js/spec/views/settings/components/dataPrivacyRulesPanel/dataPrivacyRulesPanelSelectorField.spec.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+
+import DataPrivacyRulesPanelSelectorField from 'app/views/settings/components/dataPrivacyRulesPanel/dataPrivacyRulesPanelSelectorField';
+import {
+  binaryOperatorSuggestions,
+  unaryOperatorSuggestions,
+} from 'app/views/settings/components/dataPrivacyRulesPanel/dataPrivacyRulesPanelSelectorFieldTypes';
+import {mountWithTheme} from 'sentry-test/enzyme';
+
+function renderComponent({
+  value = '$string',
+  onChange = jest.fn(),
+  ...props
+}: Partial<DataPrivacyRulesPanelSelectorField['props']>) {
+  return mountWithTheme(
+    <DataPrivacyRulesPanelSelectorField onChange={onChange} value={value} {...props} />
+  );
+}
+
+describe('DataPrivacyRulesPanelSelectorField', () => {
+  it('default render', () => {
+    const wrapper = renderComponent({});
+    expect(wrapper.find('input').prop('value')).toBe('$string');
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('display initialSelectors if input empty and focused', () => {
+    const wrapper = renderComponent({value: ''});
+    wrapper.find('input').simulate('focus');
+    const suggestions = wrapper
+      .find('[data-test-id="panelSelectorField-suggestions"]')
+      .hostNodes()
+      .children();
+
+    // [...valueSuggestions, ...unaryOperatorSuggestions].length === 16
+    expect(suggestions).toHaveLength(16);
+  });
+
+  it('display binaryOperatorSuggestions if penultimateFieldValue has type string', () => {
+    const wrapper = renderComponent({value: 'foo '});
+    wrapper.find('input').simulate('focus');
+    const suggestions = wrapper
+      .find('[data-test-id="panelSelectorField-suggestions"]')
+      .hostNodes()
+      .children();
+
+    // binaryOperatorSuggestions.length === 2
+    expect(suggestions).toHaveLength(2);
+    // &&
+    expect(suggestions.at(0).text()).toEqual(binaryOperatorSuggestions[0].value);
+    // ||
+    expect(suggestions.at(1).text()).toEqual(binaryOperatorSuggestions[1].value);
+  });
+
+  it('display initialSelectors if penultimateFieldValue has type binary', () => {
+    const wrapper = renderComponent({value: 'foo && '});
+    wrapper.find('input').simulate('focus');
+    const suggestions = wrapper
+      .find('[data-test-id="panelSelectorField-suggestions"]')
+      .hostNodes()
+      .children();
+
+    // initialSelectors.length === 16
+    expect(suggestions).toHaveLength(16);
+    // !
+    expect(suggestions.at(15).text()).toEqual(unaryOperatorSuggestions[0].value);
+  });
+
+  it('display binaryOperatorSuggestions if penultimateFieldValue has type value', () => {
+    const wrapper = renderComponent({value: 'foo && $string '});
+    wrapper.find('input').simulate('focus');
+    const suggestions = wrapper
+      .find('[data-test-id="panelSelectorField-suggestions"]')
+      .hostNodes()
+      .children();
+
+    // binaryOperatorSuggestions.length === 2
+    expect(suggestions).toHaveLength(2);
+    // &&
+    expect(suggestions.at(0).text()).toEqual(binaryOperatorSuggestions[0].value);
+    // ||
+    expect(suggestions.at(1).text()).toEqual(binaryOperatorSuggestions[1].value);
+  });
+
+  it('display binaryOperatorSuggestions if penultimateFieldValue is of typeof Array', () => {
+    const wrapper = renderComponent({value: 'foo && !$string '});
+    wrapper.find('input').simulate('focus');
+    const suggestions = wrapper
+      .find('[data-test-id="panelSelectorField-suggestions"]')
+      .hostNodes()
+      .children();
+
+    // binaryOperatorSuggestions.length === 2
+    expect(suggestions).toHaveLength(2);
+    // &&
+    expect(suggestions.at(0).text()).toEqual(binaryOperatorSuggestions[0].value);
+    // ||
+    expect(suggestions.at(1).text()).toEqual(binaryOperatorSuggestions[1].value);
+  });
+
+  it('display valueSuggestions if penultimateFieldValue has type unary', () => {
+    const wrapper = renderComponent({value: 'foo && !'});
+    wrapper.find('input').simulate('focus');
+    const suggestions = wrapper
+      .find('[data-test-id="panelSelectorField-suggestions"]')
+      .hostNodes()
+      .children();
+
+    // valueSuggestions.length === 15
+    expect(suggestions).toHaveLength(15);
+    // $string
+    expect(suggestions.at(0).text()).toEqual('$string(Any string value)');
+  });
+
+  it('click on a suggestion should be possible', () => {
+    const handleOnChange = jest.fn();
+    const wrapper = renderComponent({value: 'foo && ', onChange: handleOnChange});
+
+    // makes showSuggestions === true
+    wrapper.find('input').simulate('focus');
+
+    const suggestions = wrapper
+      .find('[data-test-id="panelSelectorField-suggestions"]')
+      .hostNodes()
+      .children();
+
+    suggestions.at(1).simulate('click');
+    expect(wrapper.state().fieldValues[2].value).toBe('$number');
+  });
+
+  it('suggestions keyDown and keyUp should work', () => {
+    const handleOnChange = jest.fn();
+    Element.prototype.scrollIntoView = jest.fn();
+    const wrapper = renderComponent({value: 'foo ', onChange: handleOnChange});
+    const input = wrapper.find('input');
+
+    // makes showSuggestions === true
+    input.simulate('focus');
+
+    const suggestions = wrapper
+      .find('[data-test-id="panelSelectorField-suggestions"]')
+      .hostNodes()
+      .children();
+
+    expect(suggestions).toHaveLength(2);
+
+    expect(suggestions.at(0).prop('active')).toBe(true);
+
+    input.simulate('keyDown', {keyCode: 40});
+    expect(wrapper.state().activeSuggestion).toBe(1);
+    input.simulate('keyDown', {keyCode: 13});
+    expect(wrapper.state().activeSuggestion).toBe(0);
+    expect(wrapper.state().fieldValues[1].value).toBe('||');
+
+    expect(handleOnChange).toHaveBeenCalledWith('foo ||');
+
+    input.simulate('change', {target: {value: 'foo || '}});
+    input
+      .simulate('keyDown', {keyCode: 40})
+      .simulate('keyDown', {keyCode: 40})
+      .simulate('keyDown', {keyCode: 38});
+    expect(wrapper.state().activeSuggestion).toBe(1);
+  });
+});

tests/js/spec/views/userFeedback/index.spec.tsx → tests/js/spec/views/userFeedback/index.spec.jsx

@@ -44,7 +44,9 @@ describe('OrganizationUserFeedback', function() {
       params: {
         orgId: organization.slug,
       },
+      finishProfile: jest.fn(),
     };
+
     const wrapper = mountWithTheme(
       <OrganizationUserFeedback {...params} />,
       routerContext

tsconfig.json

@@ -33,11 +33,12 @@
     "outDir": "src/sentry/static/sentry/dist",
     "paths": {
       "app/*": ["src/sentry/static/sentry/app/*"],
+      "sentry-test/*": ["tests/js/sentry-test/*"],
       "@emotion/styled": ["src/sentry/static/sentry/app/styled.tsx"],
       "@original-emotion/*": ["node_modules/@emotion/*"]
     },
     "plugins": [{"name": "typescript-styled-plugin"}]
   },
-  "include": ["src"],
+  "include": ["src", "tests"],
   "exclude": ["node_modules"]
 }