Skip to content

Migrate DiffFileHeader tests to Jest

Illya Klymov requested to merge migrate-diff-file-header-tests into master

What does this MR do?

Refactors DiffFileHeader component tests to Jest and cleans up component

Following changes introduced to test suite:

  • Test refactored from Karma to Jest
  • Test now uses refs for accessing most of the components, instead of js- specific classes
  • Tests are reorganized to have proper semantics and describe expectations
Old tests structure 

  diff_file_header
    computed
      icon
        * returns the blob icon for files
        * returns the archive icon for submodules
      titleLink
        * returns the discussionPath for files
        * returns the submoduleTreeUrl for submodules
        * returns the submoduleLink for submodules without submoduleTreeUrl
        * sets the correct path to the discussion
      filePath
        * returns the filePath for files
        * appends the truncated blob id for submodules
      titleTag
        * returns a link tag if fileHash is set
        * returns a span tag if fileHash is not set
      isUsingLfs
        * returns true if file is stored in LFS
        * returns false if file is not stored externally
        * returns false if file is not stored in LFS
      collapseIcon
        * returns chevron-down if the diff is expanded
        * returns chevron-right if the diff is collapsed
      viewFileButtonText
        * contains the truncated content SHA
      viewReplacedFileButtonText
        * contains the truncated base SHA
    methods
      handleToggleFile
        * emits toggleFile if checkTarget is false
        * emits toggleFile if checkTarget is true and event target is header
        * does not emit toggleFile if checkTarget is true and event target is not header
      handleFileNameClick
        when file name links to other page
          * does not call preventDefault if submodule tree url exists
          * does not call preventDefault if submodule_link exists
          * does not call preventDefault if discussionPath exists
        scrolling to diff
          * calls scrollToElement with file content
          * element adds the content id to the window location
          * calls preventDefault when button does not link to other page
    template
      collapse toggle
        * is visible if collapsible is true
        * is hidden if collapsible is false
      * displays an file icon in the title
      file paths
        * displays the path of a added file
        * displays path for deleted file
        * displays old and new path if the file was renamed
      * displays a copy to clipboard button
      file mode
        * it displays old and new file mode if it changed
        * does not display the file mode if it has not changed
      LFS label
        * displays the LFS label for files stored in LFS
        * does not display the LFS label for files stored in repository
      edit button
        * should not render edit button if addMergeRequestButtons is not true
        * should show edit button when file is editable
        * should not show edit button when file is deleted
      addMergeRequestButtons
        view on environment button
          * displays link to external url
          * hides link if no external url
      handles toggle discussions
        * renders a disabled button when diff has no discussions
        with discussions
          * dispatches toggleFileDiscussionWrappers when user clicks on toggle discussions button
      file actions
        * should not render if diff file has a submodule
        * should not render if add merge request buttons is false
        with add merge request buttons enabled
          * should render if add merge request buttons is true and diff file does not have a submodule
          * should not render view replaced file button if no replaced view path is present
          * should render view replaced file button if replaced view path is present
          * should render correct file view button path
          * should not render external url view link if diff file has no external url
          * should render external url view link if diff file has external url
        without file blob
          * should not render toggle discussions button
          * should not render edit button
    expand full file button
      * does not render button
      * renders button
      * shows fully expanded text
      * shows expand text
      * renders loading icon
      * calls toggleFullDiff on click

New tests structure 

  DiffFileHeader component
    ✓ collapse toggle is visible if collapsible is true (21ms)
    ✓ collapse toggle is hidden if collapsible is false (6ms)
    ✓ collapse icon is chevron-down if expanded is true (5ms)
    ✓ collapse icon is chevron-right if expanded is false (4ms)
    ✓ when header is clicked emits toggleFile (9ms)
    ✓ when collapseIcon is clicked emits toggleFile (6ms)
    ✓ when other element in header is clicked does not emits toggleFile (8ms)
    ✓ displays a copy to clipboard button (5ms)
    for submodule
      ✓ prefers submodule_tree_url over submodule_link for href (5ms)
      ✓ uses submodule_link for href if submodule_tree_url does not exists (4ms)
      ✓ uses file_path + SHA as link text (4ms)
      ✓ does not render file actions (5ms)
    for any file
      ✓ when edit button emits showForkMessage event it is re-emitted (9ms)
      ✓ for mode_changed file mode displays mode changes (6ms)
      ✓ for not_diffable file mode does not display mode changes (5ms)
      ✓ for no_preview file mode does not display mode changes (4ms)
      ✓ for added file mode does not display mode changes (5ms)
      ✓ for deleted file mode does not display mode changes (4ms)
      ✓ for renamed file mode does not display mode changes (5ms)
      ✓ for text file mode does not display mode changes (6ms)
      ✓ for image file mode does not display mode changes (8ms)
      ✓ displays the LFS label for files stored in LFS (5ms)
      ✓ does not display the LFS label for files stored in repository (4ms)
      ✓ does not render view replaced file button if no replaced view path is present (5ms)
      ✓ uses discussionPath for link if it is defined (13ms)
      ✓ uses local anchor for link as last resort (13ms)
      when addMergeRequestButtons is false
        ✓ does not render file actions (4ms)
        ✓ does not render edit button (5ms)
      when addMergeRequestButtons is true
        ✓ shows edit button (9ms)
        without discussions
          ✓ renders a disabled toggle discussions button (7ms)
        with discussions
          ✓ dispatches toggleFileDiscussionWrappers when user clicks on toggle discussions button (10ms)
        view on environment button
          ✓ is displayed when external url is provided (10ms)
          ✓ is hidden by default (10ms)
        without file blob
          ✓ does not render toggle discussions button (14ms)
          ✓ does not render edit button (10ms)
        with file blob
          ✓ renders correct file view button (11ms)
      expand full file button
        when diff is fully expanded
          ✓ is not rendered (8ms)
        when diff is not fully expanded
          ✓ shows doc-expand when isShowingFullFile set to false (12ms)
          ✓ shows doc-changes when isShowingFullFile set to true (13ms)
          ✓ renders expand to full file button if not showing full file already (20ms)
          ✓ renders loading icon when loading full file (17ms)
          ✓ toggles full diff on click (17ms)
      when local anchor for link is clicked
        ✓ scrolls to target (10ms)
        ✓ updates anchor in URL (10ms)
    for new file
      ✓ displays the path (11ms)
    for deleted file
      ✓ displays the path (10ms)
      ✓ does not show edit button (10ms)
    for renamed file
      ✓ displays old and new path (10ms)
    for replaced file
      ✓ renders view replaced file button (15ms)

Following changes were made to component:

  • Removed unused blobForkSuggestion data variable
  • Removed unused computeds:
    • icon
    • titleTag
    • showExpandDiffToFullFileEnabled
  • Simplified handleToggleFile logic by applying it only to header with click.self and icon with click.stop
  • Removed wrong reference to handleToggle for icon
  • Removed unused js- classes which were used by tests:
    • js-title-wrapper
    • js-file-icon
    • js-btn-vue-toggle-comments
    • js-view-replaced-file
    • js-view-file-button
    • js-external-url

Does this MR meet the acceptance criteria?

Conformity

Closes #67073 (closed)

Edited by Illya Klymov

Merge request reports