test: Adds tests to dnd controls

[michael-s-molina]

SUMMARY

Adds tests to dnd controls.

@kgabryje We are auditing the codebase of Explore searching for components that don’t have sufficient test coverage (at least 80%). We are using Codecov reports to find the components. From what I understood this feature is still in POC mode, right? Anyway, I added some test files here to help with the test coverage and serve as a base for more complete tests. Can you please review it?

PS: DndMetricSelect.test.tsx has only one test. After we add typescript support to DndMetricSelect props we should complement this.

TEST PLAN

1 - Execute all drag and drop tests.
2 - All tests should pass.

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #13650 (fb3e759) into master (9156f08) will increase coverage by 0.31%.
The diff coverage is 100.00%.

❗ Current head fb3e759 differs from pull request most recent head d2526b7. Consider uploading reports for the commit d2526b7 to get more accurate results

@@            Coverage Diff             @@
##           master   #13650      +/-   ##
==========================================
+ Coverage   77.83%   78.14%   +0.31%     
==========================================
  Files         934      934              
  Lines       47320    47320              
  Branches     5913     5929      +16     
==========================================
+ Hits        36831    36980     +149     
+ Misses      10346    10197     -149     
  Partials      143      143              

Flag	Coverage Δ
cypress	56.03% <0.00%> (ø)
javascript	65.31% <100.00%> (+0.68%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...ponents/controls/DndColumnSelectControl/Option.tsx	100.00% <ø> (ø)
...ontrols/DndColumnSelectControl/DndColumnSelect.tsx	58.06% <100.00%> (+35.48%)	⬆️
...ontrols/DndColumnSelectControl/DndFilterSelect.tsx	45.38% <100.00%> (+36.15%)	⬆️
...ontrols/DndColumnSelectControl/DndMetricSelect.tsx	43.65% <100.00%> (+33.33%)	⬆️
.../controls/DndColumnSelectControl/OptionWrapper.tsx	84.84% <100.00%> (ø)
...set-frontend/src/dashboard/util/getDropPosition.js	90.90% <0.00%> (ø)
...ntrols/MetricControl/AdhocMetricPopoverTrigger.tsx	95.00% <0.00%> (+1.66%)	⬆️
...ntrols/FilterControl/AdhocFilterPopoverTrigger.tsx	72.00% <0.00%> (+4.00%)	⬆️
...ols/DndColumnSelectControl/utils/optionSelector.ts	34.48% <0.00%> (+31.03%)	⬆️
... and 5 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9156f08...d2526b7. Read the comment docs.

[junlincc]

@michael-s-molina Thanks for adding test to dnd, this feature is completed for phase 1 poc and is still evolving rapidly. there's no harm adding test though. 🙏 @kgabryje please review with a grey check mark, hopefully it turns green in days. 😉

[kgabryje]

1 nit, other than that LGTM!
In the future we can also try to test drag and drop functionality itself as react-dnd library provides tools for testing: https://react-dnd.github.io/react-dnd/docs/testing

[pkdotson]

LGTM!

[rusackas]

Not sure exactly sure what the implications/risks may be of removing this, if any.

[michael-s-molina]

I checked when I removed it 😉. Nice observation though!

export const DragContainer = styled.div`
  margin-bottom: ${({ theme }) => theme.gridUnit}px;
  :last-child {
    margin-bottom: 0;
  }
`;

[rusackas]

LGTM!