chore: adds tests

microsoft · Apr 17, 2024 · 02b97c9 · 02b97c9
1 parent ce09d7b
commit 02b97c9
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/packages/react-components/react-tag-picker-preview/src/components/TagPicker/TagPicker.cy.tsx b/packages/react-components/react-tag-picker-preview/src/components/TagPicker/TagPicker.cy.tsx
@@ -1,3 +1,4 @@
+import 'cypress-real-events';
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';
@@ -219,14 +220,26 @@ describe('TagPicker', () => {
         cy.get('[data-testid="tag-picker-input"]').focus().realPress(['Shift', 'Tab']);
         cy.get(`[data-testid="tag--${options[options.length - 1]}"]`).should('be.focused');
       });
-      it('should navigate circularly between tags with Arrow key press', () => {
+      it('should not navigate circularly between tags with Arrow key press', () => {
         mount(<TagPickerControlled defaultSelectedOptions={options} />);
         cy.get(`[data-testid="tag--${options[0]}"]`).focus().realPress('ArrowRight');
         cy.get(`[data-testid="tag--${options[1]}"]`).should('be.focused').realPress('ArrowDown');
         cy.get(`[data-testid="tag--${options[2]}"]`).should('be.focused').realPress('ArrowLeft');
         cy.get(`[data-testid="tag--${options[1]}"]`).should('be.focused').realPress('ArrowUp');
         cy.get(`[data-testid="tag--${options[0]}"]`).should('be.focused').realPress('ArrowUp');
-        cy.get(`[data-testid="tag--${options[options.length - 1]}"]`).should('be.focused');
+        cy.get(`[data-testid="tag--${options[0]}"]`).should('be.focused');
+        cy.get(`[data-testid="tag--${options[options.length - 1]}"]`)
+          .focus()
+          .realPress('ArrowRight');
+        cy.get(`[data-testid="tag--${options[0]}"]`).should('not.be.focused');
+      });
+      it('should navigate from tags to input and back with Arrow key press', () => {
+        mount(<TagPickerControlled defaultSelectedOptions={options} />);
+        cy.get(`[data-testid="tag-picker-input"]`).focus().realPress('ArrowLeft');
+        cy.get(`[data-testid="tag--${options[options.length - 1]}"]`)
+          .should('be.focused')
+          .realPress('ArrowRight');
+        cy.get(`[data-testid="tag-picker-input"]`).should('be.focused');
       });
       it('should memorize last focused tag while switching focus between tags and input', () => {
         mount(<TagPickerControlled defaultSelectedOptions={options} />);