Add latest changes from gitlab-org/gitlab@master

3 files changed, 1091 insertions, 0 deletions

diff --git a/spec/frontend/profile/preferences/components/__snapshots__/diffs_colors_preview_spec.js.snap b/spec/frontend/profile/preferences/components/__snapshots__/diffs_colors_preview_spec.js.snap
new file mode 100644
index 00000000000..3025a2f87ae
--- /dev/null
+++ b/spec/frontend/profile/preferences/components/__snapshots__/diffs_colors_preview_spec.js.snap
@@ -0,0 +1,915 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DiffsColorsPreview component renders diff colors preview 1`] = `
+<div
+  class="form-group"
+>
+  <label>
+    Preview
+  </label>
+   
+  <table
+    class="code"
+  >
+    <tbody>
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="1"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span>
+            <span
+              class="c1"
+            >
+              # 
+              <span
+                class="idiff deletion"
+              >
+                Removed
+              </span>
+               content
+            </span>
+          </span>
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="1"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span>
+            <span
+              class="c1"
+            >
+              # 
+              <span
+                class="idiff addition"
+              >
+                Added
+              </span>
+               content
+            </span>
+          </span>
+        </td>
+      </tr>
+       
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="2"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span>
+            <span
+              class="n"
+            >
+              v
+            </span>
+             
+            <span
+              class="o"
+            >
+              =
+            </span>
+             
+            <span
+              class="mi"
+            >
+              1
+            </span>
+          </span>
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="2"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span>
+            <span
+              class="n"
+            >
+              v
+            </span>
+             
+            <span
+              class="o"
+            >
+              =
+            </span>
+             
+            <span
+              class="mi"
+            >
+              1
+            </span>
+          </span>
+        </td>
+      </tr>
+       
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="3"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span>
+            <span
+              class="n"
+            >
+              s
+            </span>
+             
+            <span
+              class="o"
+            >
+              =
+            </span>
+             
+            <span
+              class="s"
+            >
+              "string"
+            </span>
+          </span>
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="3"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span>
+            <span
+              class="n"
+            >
+              s
+            </span>
+             
+            <span
+              class="o"
+            >
+              =
+            </span>
+             
+            <span
+              class="s"
+            >
+              "string"
+            </span>
+          </span>
+        </td>
+      </tr>
+       
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="4"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span />
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="4"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span />
+        </td>
+      </tr>
+       
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="5"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span>
+            <span
+              class="k"
+            >
+              for
+            </span>
+             
+            <span
+              class="n"
+            >
+              i
+            </span>
+             
+            <span
+              class="ow"
+            >
+              in
+            </span>
+             
+            <span
+              class="nb"
+            >
+              range
+            </span>
+            <span
+              class="p"
+            >
+              (
+            </span>
+            <span
+              class="o"
+            >
+              -
+            </span>
+            <span
+              class="mi"
+            >
+              10
+            </span>
+            <span
+              class="p"
+            >
+              ,
+            </span>
+             
+            <span
+              class="mi"
+            >
+              10
+            </span>
+            <span
+              class="p"
+            >
+              ):
+            </span>
+          </span>
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="5"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span>
+            <span
+              class="k"
+            >
+              for
+            </span>
+             
+            <span
+              class="n"
+            >
+              i
+            </span>
+             
+            <span
+              class="ow"
+            >
+              in
+            </span>
+             
+            <span
+              class="nb"
+            >
+              range
+            </span>
+            <span
+              class="p"
+            >
+              (
+            </span>
+            <span
+              class="o"
+            >
+              -
+            </span>
+            <span
+              class="mi"
+            >
+              10
+            </span>
+            <span
+              class="p"
+            >
+              ,
+            </span>
+             
+            <span
+              class="mi"
+            >
+              10
+            </span>
+            <span
+              class="p"
+            >
+              ):
+            </span>
+          </span>
+        </td>
+      </tr>
+       
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="6"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span>
+            <span>
+                  
+            </span>
+             
+            <span
+              class="k"
+            >
+              print
+            </span>
+            <span
+              class="p"
+            >
+              (
+            </span>
+            <span
+              class="n"
+            >
+              i
+            </span>
+             
+            <span
+              class="o"
+            >
+              +
+            </span>
+             
+            <span
+              class="mi"
+            >
+              1
+            </span>
+            <span
+              class="p"
+            >
+              )
+            </span>
+          </span>
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="6"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span>
+            <span>
+                  
+            </span>
+             
+            <span
+              class="k"
+            >
+              print
+            </span>
+            <span
+              class="p"
+            >
+              (
+            </span>
+            <span
+              class="n"
+            >
+              i
+            </span>
+             
+            <span
+              class="o"
+            >
+              +
+            </span>
+             
+            <span
+              class="mi"
+            >
+              1
+            </span>
+            <span
+              class="p"
+            >
+              )
+            </span>
+          </span>
+        </td>
+      </tr>
+       
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="7"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span />
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="7"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span />
+        </td>
+      </tr>
+       
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="8"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span>
+            <span
+              class="k"
+            >
+              class
+            </span>
+             
+            <span
+              class="nc"
+            >
+              LinkedList
+            </span>
+            <span
+              class="p"
+            >
+              (
+            </span>
+            <span
+              class="nb"
+            >
+              object
+            </span>
+            <span
+              class="p"
+            >
+              ):
+            </span>
+          </span>
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="8"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span>
+            <span
+              class="k"
+            >
+              class
+            </span>
+             
+            <span
+              class="nc"
+            >
+              LinkedList
+            </span>
+            <span
+              class="p"
+            >
+              (
+            </span>
+            <span
+              class="nb"
+            >
+              object
+            </span>
+            <span
+              class="p"
+            >
+              ):
+            </span>
+          </span>
+        </td>
+      </tr>
+       
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="9"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span>
+            <span>
+                  
+            </span>
+             
+            <span
+              class="k"
+            >
+              def
+            </span>
+             
+            <span
+              class="nf"
+            >
+              __init__
+            </span>
+            <span
+              class="p"
+            >
+              (
+            </span>
+            <span
+              class="bp"
+            >
+              self
+            </span>
+            <span
+              class="p"
+            >
+              ,
+            </span>
+             
+            <span
+              class="n"
+            >
+              x
+            </span>
+            <span
+              class="p"
+            >
+              ):
+            </span>
+          </span>
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="9"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span>
+            <span>
+                  
+            </span>
+             
+            <span
+              class="k"
+            >
+              def
+            </span>
+             
+            <span
+              class="nf"
+            >
+              __init__
+            </span>
+            <span
+              class="p"
+            >
+              (
+            </span>
+            <span
+              class="bp"
+            >
+              self
+            </span>
+            <span
+              class="p"
+            >
+              ,
+            </span>
+             
+            <span
+              class="n"
+            >
+              x
+            </span>
+            <span
+              class="p"
+            >
+              ):
+            </span>
+          </span>
+        </td>
+      </tr>
+       
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="10"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span>
+            <span>
+                      
+            </span>
+             
+            <span
+              class="bp"
+            >
+              self
+            </span>
+            <span
+              class="p"
+            >
+              .
+            </span>
+            <span
+              class="n"
+            >
+              val
+            </span>
+             
+            <span
+              class="o"
+            >
+              =
+            </span>
+             
+            <span
+              class="n"
+            >
+              x
+            </span>
+          </span>
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="10"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span>
+            <span>
+                      
+            </span>
+             
+            <span
+              class="bp"
+            >
+              self
+            </span>
+            <span
+              class="p"
+            >
+              .
+            </span>
+            <span
+              class="n"
+            >
+              val
+            </span>
+             
+            <span
+              class="o"
+            >
+              =
+            </span>
+             
+            <span
+              class="n"
+            >
+              x
+            </span>
+          </span>
+        </td>
+      </tr>
+       
+      <tr
+        class="line_holder parallel"
+      >
+        <td
+          class="old_line diff-line-num old"
+        >
+          <a
+            data-linenumber="11"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel left-side old"
+        >
+          <span>
+            <span>
+                      
+            </span>
+             
+            <span
+              class="bp"
+            >
+              self
+            </span>
+            <span
+              class="p"
+            >
+              .
+            </span>
+            <span
+              class="nb"
+            >
+              next
+            </span>
+             
+            <span
+              class="o"
+            >
+              =
+            </span>
+             
+            <span
+              class="bp"
+            >
+              None
+            </span>
+          </span>
+        </td>
+         
+        <td
+          class="new_line diff-line-num new"
+        >
+          <a
+            data-linenumber="11"
+          />
+        </td>
+         
+        <td
+          class="line_content parallel right-side new"
+        >
+          <span>
+            <span>
+                      
+            </span>
+             
+            <span
+              class="bp"
+            >
+              self
+            </span>
+            <span
+              class="p"
+            >
+              .
+            </span>
+            <span
+              class="nb"
+            >
+              next
+            </span>
+             
+            <span
+              class="o"
+            >
+              =
+            </span>
+             
+            <span
+              class="bp"
+            >
+              None
+            </span>
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
diff --git a/spec/frontend/profile/preferences/components/diffs_colors_preview_spec.js b/spec/frontend/profile/preferences/components/diffs_colors_preview_spec.js
new file mode 100644
index 00000000000..e60602ab336
--- /dev/null
+++ b/spec/frontend/profile/preferences/components/diffs_colors_preview_spec.js
@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import DiffsColorsPreview from '~/profile/preferences/components/diffs_colors_preview.vue';
+
+describe('DiffsColorsPreview component', () => {
+  let wrapper;
+
+  function createComponent() {
+    wrapper = shallowMount(DiffsColorsPreview);
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders diff colors preview', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/spec/frontend/profile/preferences/components/diffs_colors_spec.js b/spec/frontend/profile/preferences/components/diffs_colors_spec.js
new file mode 100644
index 00000000000..02f501a0b06
--- /dev/null
+++ b/spec/frontend/profile/preferences/components/diffs_colors_spec.js
@@ -0,0 +1,153 @@
+import { shallowMount } from '@vue/test-utils';
+import { s__ } from '~/locale';
+import ColorPicker from '~/vue_shared/components/color_picker/color_picker.vue';
+import DiffsColors from '~/profile/preferences/components/diffs_colors.vue';
+import DiffsColorsPreview from '~/profile/preferences/components/diffs_colors_preview.vue';
+import * as CssUtils from '~/lib/utils/css_utils';
+
+describe('DiffsColors component', () => {
+  let wrapper;
+
+  const defaultInjectedProps = {
+    addition: '#00ff00',
+    deletion: '#ff0000',
+  };
+
+  const initialSuggestedColors = {
+    '#d99530': s__('SuggestedColors|Orange'),
+    '#1f75cb': s__('SuggestedColors|Blue'),
+  };
+
+  const findColorPickers = () => wrapper.findAllComponents(ColorPicker);
+
+  function createComponent(provide = {}) {
+    wrapper = shallowMount(DiffsColors, {
+      provide: {
+        ...defaultInjectedProps,
+        ...provide,
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('mounts', () => {
+    createComponent();
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  describe('preview', () => {
+    it('should render preview', () => {
+      createComponent();
+
+      expect(wrapper.findComponent(DiffsColorsPreview).exists()).toBe(true);
+    });
+
+    it('should set preview classes', () => {
+      createComponent();
+
+      expect(wrapper.attributes('class')).toBe(
+        'diff-custom-addition-color diff-custom-deletion-color',
+      );
+    });
+
+    it.each([
+      [{ addition: null }, 'diff-custom-deletion-color'],
+      [{ deletion: null }, 'diff-custom-addition-color'],
+    ])('should not set preview class if color not set', (provide, expectedClass) => {
+      createComponent(provide);
+
+      expect(wrapper.attributes('class')).toBe(expectedClass);
+    });
+
+    it.each([
+      [{}, '--diff-deletion-color: rgba(255,0,0,0.2); --diff-addition-color: rgba(0,255,0,0.2);'],
+      [{ addition: null }, '--diff-deletion-color: rgba(255,0,0,0.2);'],
+      [{ deletion: null }, '--diff-addition-color: rgba(0,255,0,0.2);'],
+    ])('should set correct CSS variables', (provide, expectedStyle) => {
+      createComponent(provide);
+
+      expect(wrapper.attributes('style')).toBe(expectedStyle);
+    });
+  });
+
+  describe('color pickers', () => {
+    it('should render both color pickers', () => {
+      createComponent();
+
+      const colorPickers = findColorPickers();
+
+      expect(colorPickers.length).toBe(2);
+      expect(colorPickers.at(0).props()).toMatchObject({
+        label: s__('Preferences|Color for removed lines'),
+        value: '#ff0000',
+        state: true,
+      });
+      expect(colorPickers.at(1).props()).toMatchObject({
+        label: s__('Preferences|Color for added lines'),
+        value: '#00ff00',
+        state: true,
+      });
+    });
+
+    describe('suggested colors', () => {
+      const suggestedColors = () => findColorPickers().at(0).props('suggestedColors');
+
+      it('contains initial suggested colors', () => {
+        createComponent();
+
+        expect(suggestedColors()).toMatchObject(initialSuggestedColors);
+      });
+
+      it('contains default diff colors of theme', () => {
+        jest.spyOn(CssUtils, 'getCssVariable').mockImplementation((variable) => {
+          if (variable === '--default-diff-color-addition') return '#111111';
+          if (variable === '--default-diff-color-deletion') return '#222222';
+          return '#000000';
+        });
+
+        createComponent();
+
+        expect(suggestedColors()).toMatchObject({
+          '#111111': s__('SuggestedColors|Default addition color'),
+          '#222222': s__('SuggestedColors|Default removal color'),
+        });
+      });
+
+      it('contains current diff colors if set', () => {
+        createComponent();
+
+        expect(suggestedColors()).toMatchObject({
+          [defaultInjectedProps.addition]: s__('SuggestedColors|Current addition color'),
+          [defaultInjectedProps.deletion]: s__('SuggestedColors|Current removal color'),
+        });
+      });
+
+      it.each([
+        [
+          { addition: null },
+          s__('SuggestedColors|Current removal color'),
+          s__('SuggestedColors|Current addition color'),
+        ],
+        [
+          { deletion: null },
+          s__('SuggestedColors|Current addition color'),
+          s__('SuggestedColors|Current removal color'),
+        ],
+      ])(
+        'does not contain current diff color if not set %p',
+        (provide, expectedToContain, expectNotToContain) => {
+          createComponent(provide);
+
+          const suggestedColorsLabels = Object.values(suggestedColors());
+          expect(suggestedColorsLabels).toContain(expectedToContain);
+          expect(suggestedColorsLabels).not.toContain(expectNotToContain);
+        },
+      );
+    });
+  });
+});