diff options
Diffstat (limited to 'spec/frontend/profile/preferences')
4 files changed, 1100 insertions, 24 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); + }, + ); + }); + }); +}); diff --git a/spec/frontend/profile/preferences/components/integration_view_spec.js b/spec/frontend/profile/preferences/components/integration_view_spec.js index 6ab0c70298c..92c53b8c91b 100644 --- a/spec/frontend/profile/preferences/components/integration_view_spec.js +++ b/spec/frontend/profile/preferences/components/integration_view_spec.js @@ -1,5 +1,5 @@ -import { GlFormText } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; +import { GlFormGroup } from '@gitlab/ui'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import IntegrationView from '~/profile/preferences/components/integration_view.vue'; @@ -21,7 +21,7 @@ describe('IntegrationView component', () => { function createComponent(options = {}) { const { props = {}, provide = {} } = options; - return shallowMount(IntegrationView, { + return mountExtended(IntegrationView, { provide: { userFields, ...provide, @@ -33,28 +33,20 @@ describe('IntegrationView component', () => { }); } - function findCheckbox() { - return wrapper.find('[data-testid="profile-preferences-integration-checkbox"]'); - } - function findFormGroup() { - return wrapper.find('[data-testid="profile-preferences-integration-form-group"]'); - } - function findHiddenField() { - return wrapper.find('[data-testid="profile-preferences-integration-hidden-field"]'); - } - function findFormGroupLabel() { - return wrapper.find('[data-testid="profile-preferences-integration-form-group"] label'); - } + const findCheckbox = () => wrapper.findByLabelText(new RegExp(defaultProps.config.label)); + const findFormGroup = () => wrapper.findComponent(GlFormGroup); + const findHiddenField = () => + wrapper.findByTestId('profile-preferences-integration-hidden-field'); afterEach(() => { wrapper.destroy(); wrapper = null; }); - it('should render the title correctly', () => { + it('should render the form group legend correctly', () => { wrapper = createComponent(); - expect(wrapper.find('label.label-bold').text()).toBe('Foo'); + expect(wrapper.findByText(defaultProps.config.title).exists()).toBe(true); }); it('should render the form correctly', () => { @@ -106,13 +98,6 @@ describe('IntegrationView component', () => { it('should render the help text', () => { wrapper = createComponent(); - expect(wrapper.find(GlFormText).exists()).toBe(true); expect(wrapper.find(IntegrationHelpText).exists()).toBe(true); }); - - it('should render the label correctly', () => { - wrapper = createComponent(); - - expect(findFormGroupLabel().text()).toBe('Enable foo'); - }); }); |