diff options
Diffstat (limited to 'spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js')
-rw-r--r-- | spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js b/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js new file mode 100644 index 00000000000..eb6e3711e2e --- /dev/null +++ b/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js @@ -0,0 +1,109 @@ +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'; + +const appButtonText = { + text: 'View app', + tooltip: 'View the latest successful deployment to this environment', +}; + +describe('Deployment View App button', () => { + let wrapper; + + const createComponent = (options = {}) => { + wrapper = mountExtended(DeploymentViewButton, { + ...options, + }); + }; + + beforeEach(() => { + createComponent({ + propsData: { + deployment: deploymentMockData, + appButtonText, + }, + }); + }); + + afterEach(() => { + 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(findReviewAppLink().props().display.text).toBe(appButtonText.text); + }); + }); + + describe('without changes', () => { + beforeEach(() => { + createComponent({ + propsData: { + deployment: { ...deploymentMockData, changes: null }, + appButtonText, + }, + }); + }); + + it('renders the link to the review app without dropdown', () => { + expect(findMrWigdetDeploymentDropdown().exists()).toBe(false); + }); + }); + + describe('with a single change', () => { + beforeEach(() => { + createComponent({ + propsData: { + deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] }, + appButtonText, + }, + }); + }); + + it('renders the link to the review app without dropdown', () => { + 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; + + expect(findReviewAppLink().attributes('href')).toBe(expectedUrl); + }); + }); + + describe('with multiple changes', () => { + beforeEach(() => { + createComponent({ + propsData: { + deployment: deploymentMockData, + appButtonText, + }, + }); + }); + + it('renders the link to the review app with dropdown', () => { + expect(findMrWigdetDeploymentDropdown().exists()).toBe(true); + expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(true); + }); + + it('renders all the links to the review apps', () => { + 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')).toBe(expectedUrl); + }); + }); + }); +}); |