Add basic specs and update translations

- Rewrite gitlab_slack_application_spec to follow
new style guide.
- Update strings for translation.

ee/app/assets/javascripts/integrations/gitlab_slack_application/components/gitlab_slack_application.vue

@@ -86,7 +86,7 @@ export default {
 
     <h1>{{ s__('SlackIntegration|GitLab for Slack') }}</h1>
 
-    <div class="gl-mt-6">
+    <div class="gl-mt-6" data-testid="gitlab-slack-content">
       <template v-if="isSignedIn">
         <template v-if="hasProjects">
           <p>
@@ -96,7 +96,7 @@ export default {
           <projects-dropdown
             :projects="projects"
             :selected-project="selectedProject"
-            @projectSelected="selectProject"
+            @project-selected="selectProject"
           />
 
           <div class="gl-display-flex gl-justify-content-end">
@@ -112,7 +112,7 @@ export default {
           </div>
         </template>
         <template v-else>
-          <p class="js-no-projects">{{ __("You don't have any projects available.") }}</p>
+          <p>{{ __("You don't have any projects available.") }}</p>
         </template>
       </template>
 

ee/spec/frontend/add_gitlab_slack_application/components/add_gitlab_slack_application_spec.js

-import Vue from 'vue';
-import addGitlabSlackApplication from 'ee/add_gitlab_slack_application/components/add_gitlab_slack_application.vue';
-import GitlabSlackService from 'ee/add_gitlab_slack_application/services/gitlab_slack_service';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import { redirectTo } from '~/lib/utils/url_utility';
-
-jest.mock('~/lib/utils/url_utility');
-
-describe('AddGitlabSlackApplication', () => {
-  const redirectLink = '//redirectLink';
-  const gitlabForSlackGifPath = '//gitlabForSlackGifPath';
-  const signInPath = '//signInPath';
-  const slackLinkPath = '//slackLinkPath';
-  const docsPath = '//docsPath';
-  const gitlabLogoPath = '//gitlabLogoPath';
-  const slackLogoPath = '//slackLogoPath';
-  const projects = [
-    {
-      id: 4,
-      name: 'test',
-    },
-    {
-      id: 6,
-      name: 'nope',
-    },
-  ];
-  const DEFAULT_PROPS = {
-    projects,
-    gitlabForSlackGifPath,
-    signInPath,
-    slackLinkPath,
-    docsPath,
-    gitlabLogoPath,
-    slackLogoPath,
-    isSignedIn: false,
-  };
-
-  const AddGitlabSlackApplication = Vue.extend(addGitlabSlackApplication);
-
-  it('opens popup when button is clicked', () => {
-    const vm = mountComponent(AddGitlabSlackApplication, DEFAULT_PROPS);
-
-    vm.$el.querySelector('.js-popup-button').click();
-
-    return vm.$nextTick().then(() => {
-      expect(vm.$el.querySelector('.js-popup')).toBeDefined();
-    });
-  });
-
-  it('hides popup when button is clicked', () => {
-    const vm = mountComponent(AddGitlabSlackApplication, DEFAULT_PROPS);
-
-    vm.popupOpen = true;
-
-    return vm
-      .$nextTick()
-      .then(() => vm.$el.querySelector('.js-popup-button').click())
-      .then(vm.$nextTick)
-      .then(() => {
-        expect(vm.$el.querySelector('.js-popup')).toBeNull();
-      });
-  });
-
-  it('popup has a project select when signed in', () => {
-    const vm = mountComponent(AddGitlabSlackApplication, {
-      ...DEFAULT_PROPS,
-      isSignedIn: true,
-    });
-
-    vm.popupOpen = true;
-
-    return vm.$nextTick().then(() => {
-      expect(vm.$el.querySelector('.js-project-select')).toBeDefined();
-    });
-  });
-
-  it('popup has a message when there is no projects', () => {
-    const vm = mountComponent(AddGitlabSlackApplication, {
-      ...DEFAULT_PROPS,
-      projects: [],
-      isSignedIn: true,
-    });
-
-    vm.popupOpen = true;
-
-    return vm.$nextTick().then(() => {
-      expect(vm.$el.querySelector('.js-no-projects').textContent).toMatch(
-        "You don't have any projects available.",
-      );
-    });
-  });
-
-  it('popup has a sign in link when logged out', () => {
-    const vm = mountComponent(AddGitlabSlackApplication, {
-      ...DEFAULT_PROPS,
-    });
-
-    vm.popupOpen = true;
-    vm.selectedProjectId = 4;
-
-    return vm.$nextTick().then(() => {
-      expect(vm.$el.querySelector('.js-gitlab-slack-sign-in-link').href).toMatch(
-        new RegExp(signInPath, 'i'),
-      );
-    });
-  });
-
-  it('redirects user to external link when submitted', () => {
-    const vm = mountComponent(AddGitlabSlackApplication, {
-      ...DEFAULT_PROPS,
-      isSignedIn: true,
-    });
-    const addToSlackPromise = Promise.resolve({ data: { add_to_slack_link: redirectLink } });
-
-    jest.spyOn(GitlabSlackService, 'addToSlack').mockReturnValue(addToSlackPromise);
-
-    vm.popupOpen = true;
-
-    return vm
-      .$nextTick()
-      .then(() => vm.$el.querySelector('.js-add-button').click())
-      .then(vm.$nextTick)
-      .then(addToSlackPromise)
-      .then(() => {
-        expect(redirectTo).toHaveBeenCalledWith(redirectLink);
-      });
-  });
-});

ee/spec/frontend/integrations/gitlab_slack_application/components/gitlab_slack_application_spec.js

+import { GlButton } from '@gitlab/ui';
+
+import GitlabSlackApplication from 'ee/integrations/gitlab_slack_application/components/gitlab_slack_application.vue';
+import { addProjectToSlack } from 'ee/integrations/gitlab_slack_application/api';
+import ProjectsDropdown from 'ee/integrations/gitlab_slack_application/components/projects_dropdown.vue';
+
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+
+import { redirectTo } from '~/lib/utils/url_utility';
+import { mockProjects } from '../mock_data';
+
+jest.mock('ee/integrations/gitlab_slack_application/api');
+jest.mock('~/lib/utils/url_utility');
+
+describe('GitlabSlackApplication', () => {
+  let wrapper;
+
+  const defaultProps = {
+    projects: [],
+    gitlabForSlackGifPath: '//gitlabForSlackGifPath',
+    signInPath: '//signInPath',
+    slackLinkPath: '//slackLinkPath',
+    docsPath: '//docsPath',
+    gitlabLogoPath: '//gitlabLogoPath',
+    slackLogoPath: '//slackLogoPath',
+    isSignedIn: true,
+  };
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMountExtended(GitlabSlackApplication, {
+      propsData: { ...defaultProps, ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGlButton = () => wrapper.findComponent(GlButton);
+  const findProjectsDropdown = () => wrapper.findComponent(ProjectsDropdown);
+  const findAppContent = () => wrapper.findByTestId('gitlab-slack-content');
+
+  describe('template', () => {
+    describe('when user is not signed in', () => {
+      it('renders "Sign in" button', () => {
+        createComponent({
+          props: { isSignedIn: false },
+        });
+
+        expect(findGlButton().attributes('href')).toBe(defaultProps.signInPath);
+      });
+    });
+
+    describe('when user is signed in', () => {
+      describe('user does not have any projects', () => {
+        it('renders empty text', () => {
+          createComponent();
+
+          expect(findAppContent().text()).toBe("You don't have any projects available.");
+        });
+      });
+
+      describe('user has projects', () => {
+        beforeEach(() => {
+          createComponent({
+            props: {
+              projects: mockProjects,
+            },
+          });
+        });
+
+        it('renders ProjectsDropdown', () => {
+          expect(findProjectsDropdown().props('projects')).toBe(mockProjects);
+        });
+
+        it('redirects to slackLinkPath when submitted', async () => {
+          const redirectLink = '//redirectLink';
+          const mockProject = mockProjects[1];
+          const addToSlackData = { data: { add_to_slack_link: redirectLink } };
+
+          addProjectToSlack.mockResolvedValue(addToSlackData);
+
+          findProjectsDropdown().vm.$emit('project-selected', mockProject);
+          await wrapper.vm.$nextTick();
+
+          expect(findProjectsDropdown().props('selectedProject')).toBe(mockProject);
+          expect(findGlButton().props('disabled')).toBe(false);
+
+          findGlButton().vm.$emit('click');
+
+          await waitForPromises();
+
+          expect(redirectTo).toHaveBeenCalledWith(redirectLink);
+        });
+      });
+    });
+  });
+});

ee/spec/frontend/integrations/gitlab_slack_application/mock_data.js

+export const mockProjects = [
+  {
+    id: 1,
+    name: 'Test',
+    avatar_url: 'avatar.jpg',
+    name_with_namespace: 'Test org / Test',
+  },
+  {
+    id: 2,
+    name: 'Shell',
+    avatar_url: 'avatar.jpg',
+    name_with_namespace: 'Test org / Shell',
+  },
+];

locale/gitlab.pot

@@ -1982,9 +1982,6 @@ msgstr ""
 msgid "Add CONTRIBUTING"
 msgstr ""
 
-msgid "Add GitLab to Slack"
-msgstr ""
-
 msgid "Add Jaeger URL"
 msgstr ""
 
@@ -2192,9 +2189,6 @@ msgstr ""
 msgid "Add text to the sign-in page. Markdown enabled."
 msgstr ""
 
-msgid "Add to Slack"
-msgstr ""
-
 msgid "Add to board"
 msgstr ""
 
@@ -16172,9 +16166,6 @@ msgstr ""
 msgid "GitLab export"
 msgstr ""
 
-msgid "GitLab for Slack"
-msgstr ""
-
 msgid "GitLab group: %{source_link}"
 msgstr ""
 
@@ -32044,9 +32035,6 @@ msgstr ""
 msgid "Select Git revision"
 msgstr ""
 
-msgid "Select GitLab project to link with your Slack team"
-msgstr ""
-
 msgid "Select Page"
 msgstr ""
 
@@ -33097,6 +33085,12 @@ msgstr ""
 msgid "Slack integration allows you to interact with GitLab via slash commands in a chat window."
 msgstr ""
 
+msgid "SlackIntegration|GitLab for Slack"
+msgstr ""
+
+msgid "SlackIntegration|Select a GitLab project to link with your Slack workspace."
+msgstr ""
+
 msgid "SlackIntegration|Sends notifications about project events to Slack channels."
 msgstr ""
 
@@ -37446,9 +37440,6 @@ msgstr ""
 msgid "Track time with quick actions"
 msgstr ""
 
-msgid "Track your GitLab projects with GitLab for Slack."
-msgstr ""
-
 msgid "Training mode"
 msgstr ""
 
@@ -42355,9 +42346,6 @@ msgstr ""
 msgid "locked by %{path_lock_user_name} %{created_at}"
 msgstr ""
 
-msgid "log in"
-msgstr ""
-
 msgid "manual"
 msgstr ""