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

Update review app dropdown button padding

See merge request gitlab-org/gitlab!61302

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue

 <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 ReviewAppLink from '../review_app_link.vue';
 
@@ -9,6 +16,7 @@ export default {
     GlButtonGroup,
     GlDropdown,
     GlDropdownItem,
+    GlIcon,
     GlLink,
     GlSearchBoxByType,
     ReviewAppLink,
@@ -71,7 +79,14 @@ export default {
         size="small"
         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-dropdown-item
           v-for="change in filteredChanges"

changelogs/unreleased/review-app-button-styles.yml

+---
+title: Remove extra padding and margin from merge request widget review app dropdown
+  chevron
+merge_request: 61302
+author:
+type: fixed

spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js

-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 ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
 import { deploymentMockData } from './deployment_mock_data';
@@ -11,14 +12,14 @@ const appButtonText = {
 describe('Deployment View App button', () => {
   let wrapper;
 
-  const factory = (options = {}) => {
-    wrapper = mount(DeploymentViewButton, {
+  const createComponent = (options = {}) => {
+    wrapper = mountExtended(DeploymentViewButton, {
       ...options,
     });
   };
 
   beforeEach(() => {
-    factory({
+    createComponent({
       propsData: {
         deployment: deploymentMockData,
         appButtonText,
@@ -30,15 +31,21 @@ describe('Deployment View App button', () => {
     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', () => {
     it('renders text as passed', () => {
-      expect(wrapper.find(ReviewAppLink).text()).toContain(appButtonText.text);
+      expect(findReviewAppLink().props().display.text).toBe(appButtonText.text);
     });
   });
 
   describe('without changes', () => {
     beforeEach(() => {
-      factory({
+      createComponent({
         propsData: {
           deployment: { ...deploymentMockData, changes: null },
           appButtonText,
@@ -47,13 +54,13 @@ describe('Deployment View App button', () => {
     });
 
     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', () => {
     beforeEach(() => {
-      factory({
+      createComponent({
         propsData: {
           deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] },
           appButtonText,
@@ -62,21 +69,20 @@ describe('Deployment View App button', () => {
     });
 
     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', () => {
       const expectedUrl = deploymentMockData.changes[0].external_url;
-      const deployUrl = wrapper.find('.js-deploy-url');
 
-      expect(deployUrl.attributes().href).not.toBeNull();
-      expect(deployUrl.attributes().href).toEqual(expectedUrl);
+      expect(findReviewAppLink().attributes('href')).toBe(expectedUrl);
     });
   });
 
   describe('with multiple changes', () => {
     beforeEach(() => {
-      factory({
+      createComponent({
         propsData: {
           deployment: deploymentMockData,
           appButtonText,
@@ -85,18 +91,18 @@ describe('Deployment View App button', () => {
     });
 
     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', () => {
-      const allUrls = wrapper.findAll('.js-deploy-url-menu-item').wrappers;
+      const allUrls = findDeployUrlMenuItems().wrappers;
       const expectedUrls = deploymentMockData.changes.map((change) => change.external_url);
 
       expectedUrls.forEach((expectedUrl, idx) => {
         const deployUrl = allUrls[idx];
 
-        expect(deployUrl.attributes().href).not.toBeNull();
-        expect(deployUrl.attributes().href).toEqual(expectedUrl);
+        expect(deployUrl.attributes('href')).toBe(expectedUrl);
       });
     });
   });