tests: add initial test suite for `CoreMenu` #11934

EshaanAgg · 2024-03-03T19:44:20Z

Summary

Adds the complete tests for CoreMenuDivider
The CoreMenuOption component has two major parts:
- Toggle component which controls where the subroutes are to be rendered or not
- The subroutes
  In this PR, I add the complete test suite for the former, and plan to add the one for later in the next PR for easier reviews
Added a validator for the subRoutes props based on the usage of the same in the component

Testing checklist

Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
Critical user journeys are covered by Gherkin stories
Critical and brittle code paths are covered by unit tests

PR process

PR has the correct target branch and milestone
PR has 'needs review' or 'work-in-progress' label
If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
If this is an important user-facing change, PR or related issue has a 'changelog' label
If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

Automated test coverage is satisfactory
PR is fully functional
PR has been tested for accessibility regressions
External dependency files were updated if necessary (yarn and pip)
Documentation is updated
Contributor is in AUTHORS.md

github-actions · 2024-03-03T20:13:33Z

Build Artifacts

Asset type	Download link
PEX file	kolibri-.pex
Windows Installer (EXE)	kolibri-0.16.1.dev0+git.20240408193310-unsigned.exe
Debian Package	kolibri_0.16.1.dev0+git.20240408193310-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.1.dev0+git.20240408193310-0.4.0.dmg
Android Package (APK)	kolibri-0.16.1.dev0+git.20240408193310-0.1.0-debug.apk
TAR file	kolibri-0.16.1.dev0+git.20240408193310.tar.gz
WHL file	kolibri-0.16.1.dev0+git.20240408193310-py2.py3-none-any.whl

AlexVelezLl

Thanks @EshaanAgg! You are making great progress towards using vue-testing library in Kolibri!! I left just a couple of comments and considerations :).

kolibri/core/assets/src/views/CoreMenu/__tests__/CoreMenuOption.spec.js

kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue

kolibri/core/assets/src/views/CoreMenu/__tests__/CoreMenuOption.spec.js

EshaanAgg · 2024-03-31T14:53:20Z

Hi! I'm so sorry. It seems like this the updates on the PR just completely got lost in my inbox. Would work on addressing the review. Thanks a lot @AlexVelezLl!

packages/kolibri-tools/package.json

yarn.lock

AlexVelezLl

Thank you for all your patience! @EshaanAgg Promise that now these will be last comments about things that I had not noticed before. After this we should be ready to go =).

AlexVelezLl · 2024-04-08T18:14:20Z

kolibri/core/assets/src/views/CoreMenu/__tests__/CoreMenuOption.spec.js

+        const menuItem = screen.getByRole('menuitem');
+
+        // Clicking should show the subroutes
+        await fireEvent.click(menuItem);


Im sorry I havent noticed this before, until now I thought we were using the user-event library 😅, but I think Its worth getting used to preferring the userEvent library instead of fireEvent, as it is the recommended way for the most use cases, so we can replace all these clicks and keydowns methods of fireEvent with the userEvent.click or userEvent.type methods.

Hey! Nice catch. I have updated all the instances of fireEvent.click with userEvent.click as instructed. The userEvent library does not provide a method to simulate a keyDown event with respect to a particular element, as we require in the case of menuitem and the Enter key. I tried using the .keyboard and .type methods, but they didn't seem to trigger the desired effects. Is there any way that I'm missing?

(Just for the reference) It seems that with userEvent.type was not working because before typing on the element, it internally clicks on the element to have the focus. And as we have the handler also on the click element, it was calling the function twice, so visibleSubMenu=!visibleSubMenu called twice ends in the sub menu not being visible. So its ok to keep the fireEvent here.

Ahh got it! Thanks so much for the explanation!

AlexVelezLl · 2024-04-08T18:18:52Z

kolibri/core/assets/src/views/CoreMenu/__tests__/CoreMenuOption.spec.js

+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
+import CoreMenuOption from '../CoreMenuOption.vue';
+import '@testing-library/jest-dom';


I think we can now remove this import, as we already have it in the jest setup.js file.

I tried that, but it didn't work. Removing the import for userEvent started giving a linting error, as well as an error when running the test suite (saying that userEvent is not defined).

Oh I was talking about the import '@testing-library/jest-dom'; 😅 but it seems that you already deleted it 🤗

AlexVelezLl

Thanks for your work here @EshaanAgg! LGTM!!

EshaanAgg added 3 commits March 2, 2024 23:28

feat: init the test suite for the CoreMenu items

43bbdce

feat: add more test cases for user interaction in CoreMenuOption

b9eba5c

add validator

4a3a416

github-actions bot added DEV: frontend SIZE: medium labels Mar 3, 2024

MisRob requested a review from AlexVelezLl March 12, 2024 11:22

AlexVelezLl self-assigned this Mar 13, 2024

AlexVelezLl reviewed Mar 13, 2024

View reviewed changes

EshaanAgg added 2 commits April 1, 2024 00:47

address review

77048d3

add user event and fix tests

664ad48

github-actions bot added DEV: tools Internal tooling for development SIZE: very large labels Apr 4, 2024

EshaanAgg added 3 commits April 4, 2024 15:06

merge upstream

8c4e71a

fix dependencies

158c622

add rewire package

a27828e

AlexVelezLl reviewed Apr 4, 2024

View reviewed changes

packages/kolibri-tools/package.json Outdated Show resolved Hide resolved

AlexVelezLl reviewed Apr 4, 2024

View reviewed changes

yarn.lock Outdated Show resolved Hide resolved

EshaanAgg added 3 commits April 5, 2024 00:56

revert yarn.lock

2d99cac

update yarn.lock

d84059c

merge upstream

e27f110

AlexVelezLl reviewed Apr 8, 2024

View reviewed changes

make use of userEvent

0893d58

AlexVelezLl approved these changes Apr 8, 2024

View reviewed changes

AlexVelezLl merged commit d6d78fd into learningequality:develop Apr 8, 2024
31 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

tests: add initial test suite for `CoreMenu` #11934

tests: add initial test suite for `CoreMenu` #11934

EshaanAgg commented Mar 3, 2024

github-actions bot commented Mar 3, 2024 •

edited

Loading

AlexVelezLl left a comment

EshaanAgg commented Mar 31, 2024

AlexVelezLl left a comment

AlexVelezLl Apr 8, 2024

EshaanAgg Apr 8, 2024 •

edited

Loading

AlexVelezLl Apr 8, 2024

EshaanAgg Apr 8, 2024

AlexVelezLl Apr 8, 2024

EshaanAgg Apr 8, 2024

AlexVelezLl Apr 8, 2024

AlexVelezLl left a comment

tests: add initial test suite for CoreMenu #11934

tests: add initial test suite for CoreMenu #11934

Conversation

EshaanAgg commented Mar 3, 2024

Summary

Testing checklist

PR process

Reviewer checklist

github-actions bot commented Mar 3, 2024 • edited Loading

Build Artifacts

AlexVelezLl left a comment

Choose a reason for hiding this comment

EshaanAgg commented Mar 31, 2024

AlexVelezLl left a comment

Choose a reason for hiding this comment

AlexVelezLl Apr 8, 2024

Choose a reason for hiding this comment

EshaanAgg Apr 8, 2024 • edited Loading

Choose a reason for hiding this comment

AlexVelezLl Apr 8, 2024

Choose a reason for hiding this comment

EshaanAgg Apr 8, 2024

Choose a reason for hiding this comment

AlexVelezLl Apr 8, 2024

Choose a reason for hiding this comment

EshaanAgg Apr 8, 2024

Choose a reason for hiding this comment

AlexVelezLl Apr 8, 2024

Choose a reason for hiding this comment

AlexVelezLl left a comment

Choose a reason for hiding this comment

tests: add initial test suite for `CoreMenu` #11934

tests: add initial test suite for `CoreMenu` #11934

github-actions bot commented Mar 3, 2024 •

edited

Loading

EshaanAgg Apr 8, 2024 •

edited

Loading