Added a copy of design management app

This copy to be removed after feature flag removal
Copied unit tests for new app

- fixed an absolute path reference
Moved design management app

Moved unit tests for designs

- Copied all specs
- Fixed router spec
Fixed index spec

Fixed e2e spec for not available feature

Changed local query to provide/inject

Fixed issue_tabs feature spec

Fixed designs page spec

Fixed discussion spec

Fixed design index spec

Fixed spec for enabled FF

Updated permissions and upload spec

Fixed uploads spec

Updated snapshots for designs

Fixed specs for svg

Reverted change to smooth scrolling

Click on close design button in feature test

- add data-testid
- click on data-testid

Updated index snapshots

Removed unused meta info from route

Changed id to data-testid

app/assets/javascripts/design_management_new/components/design_destroyer.vue

@@ -13,13 +13,14 @@ export default {
       type: Array,
       required: true,
     },
+  },
+  inject: {
     projectPath: {
-      type: String,
-      required: true,
+      default: '',
     },
     iid: {
-      type: String,
-      required: true,
+      from: 'issueIid',
+      defaut: '',
     },
   },
   computed: {

app/assets/javascripts/design_management_new/components/design_notes/design_note.vue

@@ -60,7 +60,7 @@ export default {
   },
   mounted() {
     if (this.isNoteLinked) {
-      this.$refs.anchor.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
+      this.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
     }
   },
   methods: {
@@ -80,7 +80,7 @@ export default {
 </script>
 
 <template>
-  <timeline-entry-item :id="`note_${noteAnchorId}`" ref="anchor" class="design-note note-form">
+  <timeline-entry-item :id="`note_${noteAnchorId}`" class="design-note note-form">
     <user-avatar-link
       :link-href="author.webUrl"
       :img-src="author.avatarUrl"

app/assets/javascripts/design_management_new/components/toolbar/index.vue

@@ -6,7 +6,6 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
 import Pagination from './pagination.vue';
 import DeleteButton from '../delete_button.vue';
 import permissionsQuery from '../../graphql/queries/design_permissions.query.graphql';
-import appDataQuery from '../../graphql/queries/app_data.query.graphql';
 import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 
 export default {
@@ -55,19 +54,17 @@ export default {
       permissions: {
         createDesign: false,
       },
-      projectPath: '',
-      issueIid: null,
     };
   },
-  apollo: {
-    appData: {
-      query: appDataQuery,
-      manual: true,
-      result({ data: { projectPath, issueIid } }) {
-        this.projectPath = projectPath;
-        this.issueIid = issueIid;
-      },
+  inject: {
+    projectPath: {
+      default: '',
     },
+    issueIid: {
+      default: '',
+    },
+  },
+  apollo: {
     permissions: {
       query: permissionsQuery,
       variables() {
@@ -102,6 +99,7 @@ export default {
         query: $route.query,
       }"
       :aria-label="s__('DesignManagement|Go back to designs')"
+      data-testid="close-design"
       class="mr-3 text-plain d-flex justify-content-center align-items-center"
     >
       <icon :size="18" name="close" />

app/assets/javascripts/design_management_new/graphql/queries/app_data.query.graphql

-query projectFullPath {
-  projectPath @client
-  issueIid @client
-}

app/assets/javascripts/design_management_new/index.js

-import $ from 'jquery';
 import Vue from 'vue';
 import createRouter from './router';
 import App from './components/app.vue';
 import apolloProvider from './graphql';
-import getDesignListQuery from './graphql/queries/get_design_list.query.graphql';
-import { DESIGNS_ROUTE_NAME, ROOT_ROUTE_NAME } from './router/constants';
 
 export default () => {
   const el = document.querySelector('.js-design-management-new');
-  const badge = document.querySelector('.js-designs-count');
   const { issueIid, projectPath, issuePath } = el.dataset;
   const router = createRouter(issuePath);
 
-  $('.js-issue-tabs').on('shown.bs.tab', ({ target: { id } }) => {
-    if (id === 'designs' && router.currentRoute.name === ROOT_ROUTE_NAME) {
-      router.push({ name: DESIGNS_ROUTE_NAME });
-    } else if (id === 'discussion') {
-      router.push({ name: ROOT_ROUTE_NAME });
-    }
-  });
-
   apolloProvider.clients.defaultClient.cache.writeData({
     data: {
-      projectPath,
-      issueIid,
       activeDiscussion: {
         __typename: 'ActiveDiscussion',
         id: null,
@@ -32,25 +18,14 @@ export default () => {
     },
   });
 
-  apolloProvider.clients.defaultClient
-    .watchQuery({
-      query: getDesignListQuery,
-      variables: {
-        fullPath: projectPath,
-        iid: issueIid,
-        atVersion: null,
-      },
-    })
-    .subscribe(({ data }) => {
-      if (badge) {
-        badge.textContent = data.project.issue.designCollection.designs.edges.length;
-      }
-    });
-
   return new Vue({
     el,
     router,
     apolloProvider,
+    provide: {
+      projectPath,
+      issueIid,
+    },
     render(createElement) {
       return createElement(App);
     },

app/assets/javascripts/design_management_new/mixins/all_versions.js

 import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
-import appDataQuery from '../graphql/queries/app_data.query.graphql';
 import { findVersionId } from '../utils/design_management_utils';
 
 export default {
   apollo: {
-    appData: {
-      query: appDataQuery,
-      manual: true,
-      result({ data: { projectPath, issueIid } }) {
-        this.projectPath = projectPath;
-        this.issueIid = issueIid;
-      },
-    },
     allVersions: {
       query: getDesignListQuery,
       variables() {
@@ -24,6 +15,14 @@ export default {
       update: data => data.project.issue.designCollection.versions.edges,
     },
   },
+  inject: {
+    projectPath: {
+      default: '',
+    },
+    issueIid: {
+      default: '',
+    },
+  },
   computed: {
     hasValidVersion() {
       return (
@@ -55,8 +54,6 @@ export default {
   data() {
     return {
       allVersions: [],
-      projectPath: '',
-      issueIid: null,
     };
   },
 };

app/assets/javascripts/design_management_new/pages/design/index.vue

@@ -12,7 +12,6 @@ import DesignPresentation from '../../components/design_presentation.vue';
 import DesignReplyForm from '../../components/design_notes/design_reply_form.vue';
 import DesignSidebar from '../../components/design_sidebar.vue';
 import getDesignQuery from '../../graphql/queries/get_design.query.graphql';
-import appDataQuery from '../../graphql/queries/app_data.query.graphql';
 import createImageDiffNoteMutation from '../../graphql/mutations/create_image_diff_note.mutation.graphql';
 import updateImageDiffNoteMutation from '../../graphql/mutations/update_image_diff_note.mutation.graphql';
 import updateActiveDiscussionMutation from '../../graphql/mutations/update_active_discussion.mutation.graphql';
@@ -62,22 +61,12 @@ export default {
       design: {},
       comment: '',
       annotationCoordinates: null,
-      projectPath: '',
       errorMessage: '',
-      issueIid: '',
       scale: 1,
       resolvedDiscussionsExpanded: false,
     };
   },
   apollo: {
-    appData: {
-      query: appDataQuery,
-      manual: true,
-      result({ data: { projectPath, issueIid } }) {
-        this.projectPath = projectPath;
-        this.issueIid = issueIid;
-      },
-    },
     design: {
       query: getDesignQuery,
       // We want to see cached design version if we have one, and fetch newer version on the background to update discussions

app/assets/javascripts/design_management_new/pages/index.vue

@@ -259,7 +259,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div data-testid="designs-root">
     <header v-if="showToolbar" class="row-content-block border-top-0 p-2 d-flex">
       <div class="d-flex justify-content-between align-items-center w-100">
         <design-version-dropdown />
@@ -274,8 +274,6 @@ export default {
           <design-destroyer
             #default="{ mutate, loading }"
             :filenames="selectedDesigns"
-            :project-path="projectPath"
-            :iid="issueIid"
             @done="onDesignDelete"
             @error="onDesignDeleteError"
           >

app/assets/javascripts/design_management_new/router/constants.js

-export const ROOT_ROUTE_NAME = 'root';
 export const DESIGNS_ROUTE_NAME = 'designs';
 export const DESIGN_ROUTE_NAME = 'design';

app/assets/javascripts/design_management_new/router/index.js

-import $ from 'jquery';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import routes from './routes';
@@ -16,9 +15,7 @@ export default function createRouter(base) {
   });
   const pageEl = getPageLayoutElement();
 
-  router.beforeEach(({ meta: { el }, name }, _, next) => {
-    $(`#${el}`).tab('show');
-
+  router.beforeEach(({ name }, _, next) => {
     // apply a fullscreen layout style in Design View (a.k.a design detail)
     if (pageEl) {
       if (name === DESIGN_ROUTE_NAME) {

app/assets/javascripts/design_management_new/router/routes.js

 import Home from '../pages/index.vue';
 import DesignDetail from '../pages/design/index.vue';
-import { ROOT_ROUTE_NAME, DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from './constants';
+import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from './constants';
 
 export default [
   {
-    name: ROOT_ROUTE_NAME,
+    name: DESIGNS_ROUTE_NAME,
     path: '/',
     component: Home,
-    meta: {
-      el: 'discussion',
-    },
   },
   {
-    name: DESIGNS_ROUTE_NAME,
-    path: '/designs',
-    component: Home,
-    meta: {
-      el: 'designs',
-    },
-    children: [
+    name: DESIGN_ROUTE_NAME,
+    path: '/designs/:id',
+    component: DesignDetail,
+    beforeEnter(
       {
-        name: DESIGN_ROUTE_NAME,
-        path: ':id',
-        component: DesignDetail,
-        meta: {
-          el: 'designs',
-        },
-        beforeEnter(
-          {
-            params: { id },
-          },
-          from,
-          next,
-        ) {
-          if (typeof id === 'string') {
-            next();
-          }
-        },
-        props: ({ params: { id } }) => ({ id }),
+        params: { id },
       },
-    ],
+      from,
+      next,
+    ) {
+      if (typeof id === 'string') {
+        next();
+      }
+    },
+    props: ({ params: { id } }) => ({ id }),
   },
 ];

app/views/projects/issues/show.html.haml

@@ -77,6 +77,9 @@
     - if @issue.sentry_issue.present?
       #js-sentry-error-stack-trace{ data: error_details_data(@project, @issue.sentry_issue.sentry_issue_identifier) }
 
+    - if Feature.enabled?(:design_management_moved, @project)
+      = render 'projects/issues/design_management'
+
     = render_if_exists 'projects/issues/related_issues'
 
     #js-related-merge-requests{ data: { endpoint: expose_path(api_v4_projects_issues_related_merge_requests_path(id: @project.id, issue_iid: @issue.iid)), project_namespace: @project.namespace.path, project_path: @project.path } }
@@ -94,6 +97,9 @@
         #js-vue-discussion-filter{ data: { default_filter: current_user&.notes_filter_for(@issue), notes_filters: UserPreference.notes_filters.to_json } }
         = render 'new_branch' if show_new_branch_button?
 
-  = render 'projects/issues/tabs'
+  - if Feature.enabled?(:design_management_moved, @project)
+    = render 'projects/issues/discussion'
+  - else
+    = render 'projects/issues/tabs'
 
 = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @issue.assignees

ee/spec/features/issues/issues_tabs_spec.rb

@@ -10,6 +10,7 @@ RSpec.describe 'Issue page tabs', :js do
   describe 'discussions tab counter' do
     before do
       allow(Ability).to receive(:allowed?) { true }
+      stub_feature_flags(design_management_moved: false)
     end
 
     subject do

spec/features/projects/issues/design_management/user_links_to_designs_in_issue_spec.rb

@@ -27,10 +27,6 @@ RSpec.describe 'viewing issues with design references' do
     MD
   end
 
-  before do
-    stub_feature_flags(design_management_moved: false)
-  end
-
   def visit_page_with_design_references
     public_issue = create(:issue, project: public_project, description: description)
     visit project_issue_path(public_issue.project, public_issue)

spec/features/projects/issues/design_management/user_paginates_designs_spec.rb

@@ -8,34 +8,57 @@ RSpec.describe 'User paginates issue designs', :js do
   let(:project) { create(:project_empty_repo, :public) }
   let(:issue) { create(:issue, project: project) }
 
-  before do
-    enable_design_management
-    stub_feature_flags(design_management_moved: false)
+  context 'design_management_moved flag disabled' do
+    before do
+      stub_feature_flags(design_management_moved: false)
+      enable_design_management
 
-    create_list(:design, 2, :with_file, issue: issue)
+      create_list(:design, 2, :with_file, issue: issue)
+      visit project_issue_path(project, issue)
+      click_link 'Designs'
+      wait_for_requests
+      find('.js-design-list-item', match: :first).click
+    end
 
-    visit project_issue_path(project, issue)
+    it 'paginates to next design' do
+      expect(find('.js-previous-design')[:disabled]).to eq('true')
 
-    click_link 'Designs'
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content('1 of 2')
+      end
 
-    wait_for_requests
+      find('.js-next-design').click
 
-    find('.js-design-list-item', match: :first).click
-  end
+      expect(find('.js-previous-design')[:disabled]).not_to eq('true')
 
-  it 'paginates to next design' do
-    expect(find('.js-previous-design')[:disabled]).to eq('true')
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content('2 of 2')
+      end
+    end
+  end
 
-    page.within(find('.js-design-header')) do
-      expect(page).to have_content('1 of 2')
+  context 'design_management_moved flag enabled' do
+    before do
+      enable_design_management
+      create_list(:design, 2, :with_file, issue: issue)
+      visit project_issue_path(project, issue)
+      find('.js-design-list-item', match: :first).click
     end
 
-    find('.js-next-design').click
+    it 'paginates to next design' do
+      expect(find('.js-previous-design')[:disabled]).to eq('true')
+
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content('1 of 2')
+      end
+
+      find('.js-next-design').click
 
-    expect(find('.js-previous-design')[:disabled]).not_to eq('true')
+      expect(find('.js-previous-design')[:disabled]).not_to eq('true')
 
-    page.within(find('.js-design-header')) do
-      expect(page).to have_content('2 of 2')
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content('2 of 2')
+      end
     end
   end
 end

spec/features/projects/issues/design_management/user_permissions_upload_spec.rb

@@ -8,18 +8,32 @@ RSpec.describe 'User design permissions', :js do
   let(:project) { create(:project_empty_repo, :public) }
   let(:issue) { create(:issue, project: project) }
 
-  before do
-    enable_design_management
-    stub_feature_flags(design_management_moved: false)
+  context 'design_management_moved flag disabled' do
+    before do
+      enable_design_management
+      stub_feature_flags(design_management_moved: false)
 
-    visit project_issue_path(project, issue)
+      visit project_issue_path(project, issue)
 
-    click_link 'Designs'
+      click_link 'Designs'
 
-    wait_for_requests
+      wait_for_requests
+    end
+
+    it 'user does not have permissions to upload design' do
+      expect(page).not_to have_field('design_file')
+    end
   end
 
-  it 'user does not have permissions to upload design' do
-    expect(page).not_to have_field('design_file')
+  context 'design_management_moved flag enabled' do
+    before do
+      enable_design_management
+
+      visit project_issue_path(project, issue)
+    end
+
+    it 'user does not have permissions to upload design' do
+      expect(page).not_to have_field('design_file')
+    end
   end
 end

spec/features/projects/issues/design_management/user_uploads_designs_spec.rb

@@ -13,44 +13,81 @@ RSpec.describe 'User uploads new design', :js do
     sign_in(user)
   end
 
-  context "when the feature is available" do
-    before do
-      enable_design_management
-      stub_feature_flags(design_management_moved: false)
+  context 'design_management_moved flag disabled' do
+    context "when the feature is available" do
+      before do
+        enable_design_management
+        stub_feature_flags(design_management_moved: false)
 
-      visit project_issue_path(project, issue)
+        visit project_issue_path(project, issue)
 
-      click_link 'Designs'
+        click_link 'Designs'
 
-      wait_for_requests
-    end
+        wait_for_requests
+      end
+
+      it 'uploads designs' do
+        attach_file(:design_file, logo_fixture, make_visible: true)
 
-    it 'uploads designs' do
-      attach_file(:design_file, logo_fixture, make_visible: true)
+        expect(page).to have_selector('.js-design-list-item', count: 1)
 
-      expect(page).to have_selector('.js-design-list-item', count: 1)
+        within first('#designs-tab .js-design-list-item') do
+          expect(page).to have_content('dk.png')
+        end
 
-      within first('#designs-tab .js-design-list-item') do
-        expect(page).to have_content('dk.png')
+        attach_file(:design_file, gif_fixture, make_visible: true)
+
+        expect(page).to have_selector('.js-design-list-item', count: 2)
       end
+    end
 
-      attach_file(:design_file, gif_fixture, make_visible: true)
+    context 'when the feature is not available' do
+      before do
+        stub_feature_flags(design_management_moved: false)
+        visit project_issue_path(project, issue)
 
-      expect(page).to have_selector('.js-design-list-item', count: 2)
+        click_link 'Designs'
+
+        wait_for_requests
+      end
+
+      it 'shows the message about requirements' do
+        expect(page).to have_content("To enable design management, you'll need to meet the requirements.")
+      end
     end
   end
 
-  context 'when the feature is not available' do
-    before do
-      visit project_issue_path(project, issue)
+  context 'design_management_moved flag enabled' do
+    context "when the feature is available" do
+      before do
+        enable_design_management
 
-      click_link 'Designs'
+        visit project_issue_path(project, issue)
+      end
+
+      it 'uploads designs' do
+        attach_file(:design_file, logo_fixture, make_visible: true)
+
+        expect(page).to have_selector('.js-design-list-item', count: 1)
+
+        within first('[data-testid="designs-root"] .js-design-list-item') do
+          expect(page).to have_content('dk.png')
+        end
+
+        attach_file(:design_file, gif_fixture, make_visible: true)
 
-      wait_for_requests
+        expect(page).to have_selector('.js-design-list-item', count: 2)
+      end
     end
 
-    it 'shows the message about requirements' do
-      expect(page).to have_content("To enable design management, you'll need to meet the requirements.")
+    context 'when the feature is not available' do
+      before do
+        visit project_issue_path(project, issue)
+      end
+
+      it 'shows the message about requirements' do
+        expect(page).to have_content("To enable design management, you'll need to meet the requirements.")
+      end
     end
   end
 

spec/features/projects/issues/design_management/user_views_design_images_spec.rb

@@ -13,7 +13,6 @@ RSpec.describe 'Users views raw design image files' do
 
   before do
     enable_design_management
-    stub_feature_flags(design_management_moved: false)
   end
 
   it 'serves the latest design version when no ref is given' do

spec/features/projects/issues/design_management/user_views_design_spec.rb

@@ -9,22 +9,42 @@ RSpec.describe 'User views issue designs', :js do
   let_it_be(:issue) { create(:issue, project: project) }
   let_it_be(:design) { create(:design, :with_file, issue: issue) }
 
-  before do
-    enable_design_management
-    stub_feature_flags(design_management_moved: false)
+  context 'design_management_moved flag disabled' do
+    before do
+      enable_design_management
+      stub_feature_flags(design_management_moved: false)
 
-    visit project_issue_path(project, issue)
+      visit project_issue_path(project, issue)
 
-    click_link 'Designs'
+      click_link 'Designs'
+    end
+
+    it 'opens design detail' do
+      click_link design.filename
+
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content(design.filename)
+      end
+
+      expect(page).to have_selector('.js-design-image')
+    end
   end
 
-  it 'opens design detail' do
-    click_link design.filename
+  context 'design_management_moved flag enabled' do
+    before do
+      enable_design_management
 
-    page.within(find('.js-design-header')) do
-      expect(page).to have_content(design.filename)
+      visit project_issue_path(project, issue)
     end
 
-    expect(page).to have_selector('.js-design-image')
+    it 'opens design detail' do
+      click_link design.filename
+
+      page.within(find('.js-design-header')) do
+        expect(page).to have_content(design.filename)
+      end
+
+      expect(page).to have_selector('.js-design-image')
+    end
   end
 end

spec/features/projects/issues/design_management/user_views_designs_spec.rb

@@ -9,40 +9,78 @@ RSpec.describe 'User views issue designs', :js do
   let_it_be(:issue) { create(:issue, project: project) }
   let_it_be(:design) { create(:design, :with_file, issue: issue) }
 
-  before do
-    enable_design_management
-    stub_feature_flags(design_management_moved: false)
-  end
-
-  context 'navigates from the issue view' do
+  context 'design_management_moved flag disabled' do
     before do
-      visit project_issue_path(project, issue)
-      click_link 'Designs'
-      wait_for_requests
+      enable_design_management
+      stub_feature_flags(design_management_moved: false)
     end
 
-    it 'fetches list of designs' do
-      expect(page).to have_selector('.js-design-list-item', count: 1)
+    context 'navigates from the issue view' do
+      before do
+        visit project_issue_path(project, issue)
+        click_link 'Designs'
+        wait_for_requests
+      end
+
+      it 'fetches list of designs' do
+        expect(page).to have_selector('.js-design-list-item', count: 1)
+      end
     end
-  end
 
-  context 'navigates directly to the design collection view' do
-    before do
-      visit designs_project_issue_path(project, issue)
+    context 'navigates directly to the design collection view' do
+      before do
+        visit designs_project_issue_path(project, issue)
+      end
+
+      it 'expands the sidebar' do
+        expect(page).to have_selector('.layout-page.right-sidebar-expanded')
+      end
     end
 
-    it 'expands the sidebar' do
-      expect(page).to have_selector('.layout-page.right-sidebar-expanded')
+    context 'navigates directly to the individual design view' do
+      before do
+        visit designs_project_issue_path(project, issue, vueroute: design.filename)
+      end
+
+      it 'sees the design' do
+        expect(page).to have_selector('.js-design-detail')
+      end
     end
   end
 
-  context 'navigates directly to the individual design view' do
+  context 'design_management_moved flag enabled' do
     before do
-      visit designs_project_issue_path(project, issue, vueroute: design.filename)
+      enable_design_management
     end
 
-    it 'sees the design' do
-      expect(page).to have_selector('.js-design-detail')
+    context 'navigates from the issue view' do
+      before do
+        visit project_issue_path(project, issue)
+      end
+
+      it 'fetches list of designs' do
+        expect(page).to have_selector('.js-design-list-item', count: 1)
+      end
+    end
+
+    context 'navigates directly to the design collection view' do
+      before do
+        visit designs_project_issue_path(project, issue)
+      end
+
+      it 'expands the sidebar' do
+        expect(page).to have_selector('.layout-page.right-sidebar-expanded')
+      end
+    end
+
+    context 'navigates directly to the individual design view' do
+      before do
+        visit designs_project_issue_path(project, issue, vueroute: design.filename)
+      end
+
+      it 'sees the design' do
+        expect(page).to have_selector('.js-design-detail')
+      end
     end
   end
 end

spec/features/projects/issues/design_management/user_views_designs_with_svg_xss_spec.rb

@@ -12,7 +12,6 @@ RSpec.describe 'User views an SVG design that contains XSS', :js do
 
   before do
     enable_design_management
-    stub_feature_flags(design_management_moved: false)
 
     visit designs_project_issue_path(
       project,
@@ -30,6 +29,7 @@ RSpec.describe 'User views an SVG design that contains XSS', :js do
   end
 
   it 'displays the SVG' do
+    find("[data-testid='close-design']").click
     expect(page).to have_selector("img.design-img[alt='xss.svg']", count: 1, visible: false)
   end
 

spec/frontend/design_management_new/components/design_notes/design_discussion_spec.js

@@ -61,6 +61,10 @@ describe('Design discussions component', () => {
           ...data,
         };
       },
+      provide: {
+        projectPath: 'project-path',
+        issueIid: '1',
+      },
       mocks: {
         $apollo,
         $route: {

spec/frontend/design_management_new/components/toolbar/__snapshots__/index_spec.js.snap

@@ -7,6 +7,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
   <a
     aria-label="Go back to designs"
     class="mr-3 text-plain d-flex justify-content-center align-items-center"
+    data-testid="close-design"
   >
     <icon-stub
       name="close"

spec/frontend/design_management_new/pages/__snapshots__/index_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Design management index page designs does not render toolbar when there is no permission 1`] = `
-<div>
+<div
+  data-testid="designs-root"
+>
   <!---->
    
   <div
@@ -73,7 +75,9 @@ exports[`Design management index page designs does not render toolbar when there
 `;
 
 exports[`Design management index page designs renders designs list and header with upload button 1`] = `
-<div>
+<div
+  data-testid="designs-root"
+>
   <header
     class="row-content-block border-top-0 p-2 d-flex"
   >
@@ -188,7 +192,9 @@ exports[`Design management index page designs renders designs list and header wi
 `;
 
 exports[`Design management index page designs renders error 1`] = `
-<div>
+<div
+  data-testid="designs-root"
+>
   <!---->
    
   <div
@@ -216,7 +222,9 @@ exports[`Design management index page designs renders error 1`] = `
 `;
 
 exports[`Design management index page designs renders loading icon 1`] = `
-<div>
+<div
+  data-testid="designs-root"
+>
   <!---->
    
   <div
@@ -236,7 +244,9 @@ exports[`Design management index page designs renders loading icon 1`] = `
 `;
 
 exports[`Design management index page when has no designs renders empty text 1`] = `
-<div>
+<div
+  data-testid="designs-root"
+>
   <!---->
    
   <div

spec/frontend/design_management_new/pages/design/__snapshots__/index_spec.js.snap

@@ -10,7 +10,7 @@ exports[`Design management design index page renders design index 1`] = `
     <design-destroyer-stub
       filenames="test.jpg"
       iid="1"
-      projectpath=""
+      project-path="project-path"
     />
      
     <!---->
@@ -60,7 +60,7 @@ exports[`Design management design index page renders design index 1`] = `
       designid="test"
       discussion="[object Object]"
       discussionwithopenform=""
-      markdownpreviewpath="//preview_markdown?target_type=Issue"
+      markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
       noteableid="design-id"
     />
      
@@ -108,7 +108,7 @@ exports[`Design management design index page renders design index 1`] = `
         designid="test"
         discussion="[object Object]"
         discussionwithopenform=""
-        markdownpreviewpath="//preview_markdown?target_type=Issue"
+        markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
         noteableid="design-id"
       />
     </gl-collapse-stub>
@@ -140,7 +140,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
     <design-destroyer-stub
       filenames="test.jpg"
       iid="1"
-      projectpath=""
+      project-path="project-path"
     />
      
     <div

spec/frontend/design_management_new/pages/design/index_spec.js

@@ -95,9 +95,12 @@ describe('Design management design index page', () => {
         DesignSidebar,
         DesignReplyForm,
       },
+      provide: {
+        issueIid: '1',
+        projectPath: 'project-path',
+      },
       data() {
         return {
-          issueIid: '1',
           activeDiscussion: {
             id: null,
             source: null,
@@ -149,7 +152,7 @@ describe('Design management design index page', () => {
 
     expect(findSidebar().props()).toEqual({
       design,
-      markdownPreviewPath: '//preview_markdown?target_type=Issue',
+      markdownPreviewPath: '/project-path/preview_markdown?target_type=Issue',
       resolvedDiscussionsExpanded: false,
     });
   });

spec/frontend/design_management_new/pages/index_spec.js

@@ -92,19 +92,23 @@ describe('Design management index page', () => {
     };
 
     wrapper = shallowMount(Index, {
+      data() {
+        return {
+          designs,
+          allVersions,
+          permissions: {
+            createDesign,
+          },
+        };
+      },
       mocks: { $apollo },
       localVue,
       router,
       stubs: { DesignDestroyer, ApolloMutation, ...stubs },
       attachToDocument: true,
-    });
-
-    wrapper.setData({
-      designs,
-      allVersions,
-      issueIid: '1',
-      permissions: {
-        createDesign,
+      provide: {
+        projectPath: 'project-path',
+        issueIid: '1',
       },
     });
   }
@@ -117,9 +121,7 @@ describe('Design management index page', () => {
     it('renders loading icon', () => {
       createComponent({ loading: true });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      expect(wrapper.element).toMatchSnapshot();
     });
 
     it('renders error', () => {
@@ -135,25 +137,19 @@ describe('Design management index page', () => {
     it('renders a toolbar with buttons when there are designs', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findToolbar().exists()).toBe(true);
-      });
+      expect(findToolbar().exists()).toBe(true);
     });
 
     it('renders designs list and header with upload button', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      expect(wrapper.element).toMatchSnapshot();
     });
 
     it('does not render toolbar when there is no permission', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion], createDesign: false });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      expect(wrapper.element).toMatchSnapshot();
     });
   });
 
@@ -185,7 +181,7 @@ describe('Design management index page', () => {
         mutation: uploadDesignQuery,
         variables: {
           files: [{ name: 'test' }],
-          projectPath: '',
+          projectPath: 'project-path',
           iid: '1',
         },
         optimisticResponse: {
@@ -442,9 +438,9 @@ describe('Design management index page', () => {
     });
   });
 
-  it('on latest version when has no designs does not render toolbar buttons', () => {
+  it('on latest version when has no designs toolbar buttons are invisible', () => {
     createComponent({ designs: [], allVersions: [mockVersion] });
-    expect(findToolbar().exists()).toBe(false);
+    expect(findToolbar().classes()).toContain('d-none');
   });
 
   describe('on non-latest version', () => {
@@ -535,7 +531,7 @@ describe('Design management index page', () => {
     it('ensures fullscreen layout is not applied', () => {
       createComponent(true);
 
-      wrapper.vm.$router.push('/designs');
+      wrapper.vm.$router.push('/');
       expect(mockPageEl.classList.remove).toHaveBeenCalledTimes(1);
       expect(mockPageEl.classList.remove).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
     });

spec/frontend/design_management_new/router_spec.js

@@ -5,11 +5,7 @@ import App from '~/design_management_new/components/app.vue';
 import Designs from '~/design_management_new/pages/index.vue';
 import DesignDetail from '~/design_management_new/pages/design/index.vue';
 import createRouter from '~/design_management_new/router';
-import {
-  ROOT_ROUTE_NAME,
-  DESIGNS_ROUTE_NAME,
-  DESIGN_ROUTE_NAME,
-} from '~/design_management_new/router/constants';
+import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management_new/router/constants';
 import '~/commons/bootstrap';
 
 function factory(routeArg) {
@@ -49,7 +45,7 @@ describe('Design management router', () => {
     window.location.hash = '';
   });
 
-  describe.each([['/'], [{ name: ROOT_ROUTE_NAME }]])('root route', routeArg => {
+  describe.each([['/'], [{ name: DESIGNS_ROUTE_NAME }]])('root route', routeArg => {
     it('pushes home component', () => {
       const wrapper = factory(routeArg);
 
@@ -57,14 +53,6 @@ describe('Design management router', () => {
     });
   });
 
-  describe.each([['/designs'], [{ name: DESIGNS_ROUTE_NAME }]])('designs route', routeArg => {
-    it('pushes designs root component', () => {
-      const wrapper = factory(routeArg);
-
-      expect(wrapper.find(Designs).exists()).toBe(true);
-    });
-  });
-
   describe.each([['/designs/1'], [{ name: DESIGN_ROUTE_NAME, params: { id: '1' } }]])(
     'designs detail route',
     routeArg => {