Commit de98357a authored by Jacques Erasmus's avatar Jacques Erasmus

Merge branch 'review-app-button-styles' into 'master'

Update review app dropdown button padding

See merge request gitlab-org/gitlab!61302
parents 28d2bf68 9010faa5
<script> <script>
import { GlButtonGroup, GlDropdown, GlDropdownItem, GlLink, GlSearchBoxByType } from '@gitlab/ui'; import {
GlButtonGroup,
GlDropdown,
GlDropdownItem,
GlIcon,
GlLink,
GlSearchBoxByType,
} from '@gitlab/ui';
import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
import ReviewAppLink from '../review_app_link.vue'; import ReviewAppLink from '../review_app_link.vue';
...@@ -9,6 +16,7 @@ export default { ...@@ -9,6 +16,7 @@ export default {
GlButtonGroup, GlButtonGroup,
GlDropdown, GlDropdown,
GlDropdownItem, GlDropdownItem,
GlIcon,
GlLink, GlLink,
GlSearchBoxByType, GlSearchBoxByType,
ReviewAppLink, ReviewAppLink,
...@@ -71,7 +79,14 @@ export default { ...@@ -71,7 +79,14 @@ export default {
size="small" size="small"
css-class="deploy-link js-deploy-url inline" css-class="deploy-link js-deploy-url inline"
/> />
<gl-dropdown size="small" class="js-mr-wigdet-deployment-dropdown"> <gl-dropdown toggle-class="gl-px-2!" size="small" class="js-mr-wigdet-deployment-dropdown">
<template #button-content>
<gl-icon
class="dropdown-chevron gl-mx-0!"
name="chevron-down"
data-testid="mr-wigdet-deployment-dropdown-icon"
/>
</template>
<gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus /> <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus />
<gl-dropdown-item <gl-dropdown-item
v-for="change in filteredChanges" v-for="change in filteredChanges"
......
---
title: Remove extra padding and margin from merge request widget review app dropdown
chevron
merge_request: 61302
author:
type: fixed
import { mount } from '@vue/test-utils'; import { GlDropdown, GlLink } from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import DeploymentViewButton from '~/vue_merge_request_widget/components/deployment/deployment_view_button.vue'; import DeploymentViewButton from '~/vue_merge_request_widget/components/deployment/deployment_view_button.vue';
import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue'; import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
import { deploymentMockData } from './deployment_mock_data'; import { deploymentMockData } from './deployment_mock_data';
...@@ -11,14 +12,14 @@ const appButtonText = { ...@@ -11,14 +12,14 @@ const appButtonText = {
describe('Deployment View App button', () => { describe('Deployment View App button', () => {
let wrapper; let wrapper;
const factory = (options = {}) => { const createComponent = (options = {}) => {
wrapper = mount(DeploymentViewButton, { wrapper = mountExtended(DeploymentViewButton, {
...options, ...options,
}); });
}; };
beforeEach(() => { beforeEach(() => {
factory({ createComponent({
propsData: { propsData: {
deployment: deploymentMockData, deployment: deploymentMockData,
appButtonText, appButtonText,
...@@ -30,15 +31,21 @@ describe('Deployment View App button', () => { ...@@ -30,15 +31,21 @@ describe('Deployment View App button', () => {
wrapper.destroy(); wrapper.destroy();
}); });
const findReviewAppLink = () => wrapper.findComponent(ReviewAppLink);
const findMrWigdetDeploymentDropdown = () => wrapper.findComponent(GlDropdown);
const findMrWigdetDeploymentDropdownIcon = () =>
wrapper.findByTestId('mr-wigdet-deployment-dropdown-icon');
const findDeployUrlMenuItems = () => wrapper.findAllComponents(GlLink);
describe('text', () => { describe('text', () => {
it('renders text as passed', () => { it('renders text as passed', () => {
expect(wrapper.find(ReviewAppLink).text()).toContain(appButtonText.text); expect(findReviewAppLink().props().display.text).toBe(appButtonText.text);
}); });
}); });
describe('without changes', () => { describe('without changes', () => {
beforeEach(() => { beforeEach(() => {
factory({ createComponent({
propsData: { propsData: {
deployment: { ...deploymentMockData, changes: null }, deployment: { ...deploymentMockData, changes: null },
appButtonText, appButtonText,
...@@ -47,13 +54,13 @@ describe('Deployment View App button', () => { ...@@ -47,13 +54,13 @@ describe('Deployment View App button', () => {
}); });
it('renders the link to the review app without dropdown', () => { it('renders the link to the review app without dropdown', () => {
expect(wrapper.find('.js-mr-wigdet-deployment-dropdown').exists()).toBe(false); expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
}); });
}); });
describe('with a single change', () => { describe('with a single change', () => {
beforeEach(() => { beforeEach(() => {
factory({ createComponent({
propsData: { propsData: {
deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] }, deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] },
appButtonText, appButtonText,
...@@ -62,21 +69,20 @@ describe('Deployment View App button', () => { ...@@ -62,21 +69,20 @@ describe('Deployment View App button', () => {
}); });
it('renders the link to the review app without dropdown', () => { it('renders the link to the review app without dropdown', () => {
expect(wrapper.find('.js-mr-wigdet-deployment-dropdown').exists()).toBe(false); expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(false);
}); });
it('renders the link to the review app linked to to the first change', () => { it('renders the link to the review app linked to to the first change', () => {
const expectedUrl = deploymentMockData.changes[0].external_url; const expectedUrl = deploymentMockData.changes[0].external_url;
const deployUrl = wrapper.find('.js-deploy-url');
expect(deployUrl.attributes().href).not.toBeNull(); expect(findReviewAppLink().attributes('href')).toBe(expectedUrl);
expect(deployUrl.attributes().href).toEqual(expectedUrl);
}); });
}); });
describe('with multiple changes', () => { describe('with multiple changes', () => {
beforeEach(() => { beforeEach(() => {
factory({ createComponent({
propsData: { propsData: {
deployment: deploymentMockData, deployment: deploymentMockData,
appButtonText, appButtonText,
...@@ -85,18 +91,18 @@ describe('Deployment View App button', () => { ...@@ -85,18 +91,18 @@ describe('Deployment View App button', () => {
}); });
it('renders the link to the review app with dropdown', () => { it('renders the link to the review app with dropdown', () => {
expect(wrapper.find('.js-mr-wigdet-deployment-dropdown').exists()).toBe(true); expect(findMrWigdetDeploymentDropdown().exists()).toBe(true);
expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(true);
}); });
it('renders all the links to the review apps', () => { it('renders all the links to the review apps', () => {
const allUrls = wrapper.findAll('.js-deploy-url-menu-item').wrappers; const allUrls = findDeployUrlMenuItems().wrappers;
const expectedUrls = deploymentMockData.changes.map((change) => change.external_url); const expectedUrls = deploymentMockData.changes.map((change) => change.external_url);
expectedUrls.forEach((expectedUrl, idx) => { expectedUrls.forEach((expectedUrl, idx) => {
const deployUrl = allUrls[idx]; const deployUrl = allUrls[idx];
expect(deployUrl.attributes().href).not.toBeNull(); expect(deployUrl.attributes('href')).toBe(expectedUrl);
expect(deployUrl.attributes().href).toEqual(expectedUrl);
}); });
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment