-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
889bb44
commit 14b107f
Showing
7 changed files
with
202 additions
and
31 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
packages/react-components/react-tag-picker-preview/cypress.config.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { baseConfig } from '@fluentui/scripts-cypress'; | ||
|
|
||
| export default baseConfig; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
154 changes: 154 additions & 0 deletions
154
packages/react-components/react-tag-picker-preview/src/components/TagPicker/TagPicker.cy.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| /// <reference types="cypress" /> | ||
| /// <reference types="cypress-real-events" /> | ||
|
|
||
| import * as React from 'react'; | ||
| import { mount as mountBase } from '@cypress/react'; | ||
| import { FluentProvider } from '@fluentui/react-provider'; | ||
| import { teamsLightTheme } from '@fluentui/react-theme'; | ||
| import { TagPickerProps } from './TagPicker.types'; | ||
| import { TagPicker } from './TagPicker'; | ||
| import { TagPickerControl } from '../TagPickerControl/TagPickerControl'; | ||
| import { TagPickerGroup } from '../TagPickerGroup/TagPickerGroup'; | ||
| import { Tag } from '@fluentui/react-tags'; | ||
| import { TagPickerInput } from '../TagPickerInput/TagPickerInput'; | ||
| import { TagPickerList } from '../TagPickerList/TagPickerList'; | ||
| import { TagPickerOption } from '../TagPickerOption/TagPickerOption'; | ||
| import { Avatar } from '@fluentui/react-avatar'; | ||
| import { Button } from '@fluentui/react-button'; | ||
|
|
||
| const mount = (element: JSX.Element) => { | ||
| mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>); | ||
| }; | ||
|
|
||
| const options = [ | ||
| 'John Doe', | ||
| 'Jane Doe', | ||
| 'Max Mustermann', | ||
| 'Erika Mustermann', | ||
| 'Pierre Dupont', | ||
| 'Amelie Dupont', | ||
| 'Mario Rossi', | ||
| 'Maria Rossi', | ||
| ]; | ||
|
|
||
| const TagPickerControlled = ({ open, defaultOpen }: Pick<TagPickerProps, 'open' | 'defaultOpen'>) => { | ||
| const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]); | ||
| const onOptionSelect: TagPickerProps['onOptionSelect'] = (e, data) => { | ||
| setSelectedOptions(data.selectedOptions); | ||
| }; | ||
| const handleAllClear: React.MouseEventHandler = event => { | ||
| setSelectedOptions([]); | ||
| }; | ||
|
|
||
| return ( | ||
| <div style={{ maxWidth: 400 }}> | ||
| <TagPicker | ||
| onOptionSelect={onOptionSelect} | ||
| selectedOptions={selectedOptions} | ||
| open={open} | ||
| defaultOpen={defaultOpen} | ||
| > | ||
| <TagPickerControl | ||
| expandIcon={{ 'data-testid': 'tag-picker-control__expandIcon' } as {}} | ||
| data-testid="tag-picker-control" | ||
| secondaryAction={ | ||
| <Button | ||
| data-testid="tag-picker-control__secondaryAction" | ||
| appearance="transparent" | ||
| size="small" | ||
| shape="rounded" | ||
| onClick={handleAllClear} | ||
| > | ||
| All Clear | ||
| </Button> | ||
| } | ||
| > | ||
| <TagPickerGroup> | ||
| {selectedOptions.map(option => ( | ||
| <Tag | ||
| data-testid={`tag:${option}`} | ||
| key={option} | ||
| shape="rounded" | ||
| media={<Avatar name={option} color="colorful" />} | ||
| value={option} | ||
| > | ||
| {option} | ||
| </Tag> | ||
| ))} | ||
| </TagPickerGroup> | ||
| <TagPickerInput data-testid="tag-picker-input" /> | ||
| </TagPickerControl> | ||
| <TagPickerList data-testid="tag-picker-list"> | ||
| {options | ||
| .filter(option => !selectedOptions.includes(option)) | ||
| .map(option => ( | ||
| <TagPickerOption | ||
| data-testid={`tag-picker-option:${option}`} | ||
| secondaryContent="Microsoft FTE" | ||
| media={<Avatar name={option} color="colorful" />} | ||
| value={option} | ||
| key={option} | ||
| > | ||
| {option} | ||
| </TagPickerOption> | ||
| ))} | ||
| </TagPickerList> | ||
| </TagPicker> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| describe('TagPicker', () => { | ||
| it('should render a closed listbox', () => { | ||
| mount(<TagPickerControlled />); | ||
| cy.get('[data-testid="tag-picker-control"]').should('exist'); | ||
| cy.get('[data-testid="tag-picker-list"]').should('not.exist'); | ||
| }); | ||
| it('should render an opened listbox', () => { | ||
| mount(<TagPickerControlled open />); | ||
| cy.get('[data-testid="tag-picker-control"]').should('exist'); | ||
| cy.get('[data-testid="tag-picker-list"]').should('be.visible'); | ||
| }); | ||
| describe('Mouse navigation', () => { | ||
| it('should open/close a listbox once trigger is clicked', () => { | ||
| mount(<TagPickerControlled />); | ||
| cy.get('[data-testid="tag-picker-list"]').should('not.exist'); | ||
| cy.get('[data-testid="tag-picker-input"]').realClick(); | ||
| cy.get('[data-testid="tag-picker-list"]').should('be.visible'); | ||
| cy.get('[data-testid="tag-picker-input"]').should('be.focused'); | ||
| cy.get('[data-testid="tag-picker-input"]').realClick(); | ||
| cy.get('[data-testid="tag-picker-list"]').should('not.be.visible'); | ||
| }); | ||
| it('should open/close a listbox once expandIcon is clicked', () => { | ||
| mount(<TagPickerControlled />); | ||
| cy.get('[data-testid="tag-picker-list"]').should('not.exist'); | ||
| cy.get('[data-testid="tag-picker-control__expandIcon"]').realClick(); | ||
| cy.get('[data-testid="tag-picker-list"]').should('be.visible'); | ||
| cy.get('[data-testid="tag-picker-input"]').should('be.focused'); | ||
| cy.get('[data-testid="tag-picker-control__expandIcon"]').realClick(); | ||
| cy.get('[data-testid="tag-picker-list"]').should('not.be.visible'); | ||
| }); | ||
| it('should select a tag on option click', () => { | ||
| mount(<TagPickerControlled defaultOpen />); | ||
| cy.get('[data-testid="tag-picker-list"]').should('be.visible'); | ||
| cy.get(`[data-testid="tag-picker-option:${options[0]}"]`).should('exist').realClick(); | ||
| cy.get('[data-testid="tag-picker-list"]').should('not.be.visible'); | ||
| cy.get(`[data-testid="tag:${options[0]}"]`).should('exist'); | ||
| cy.get('[data-testid="tag-picker-input"]').should('be.focused'); | ||
| }); | ||
| it('should dismiss a tag on tag click', () => { | ||
| mount(<TagPickerControlled defaultOpen />); | ||
| cy.get(`[data-testid="tag-picker-option:${options[0]}"]`).realClick(); | ||
| cy.get(`[data-testid="tag:${options[0]}"]`).should('exist').realClick().should('not.exist'); | ||
| cy.get('[data-testid="tag-picker-input"]').should('be.focused'); | ||
| }); | ||
| it('should dismiss a tag on clear all click', () => { | ||
| mount(<TagPickerControlled defaultOpen />); | ||
| cy.get(`[data-testid="tag-picker-option:${options[0]}"]`).realClick(); | ||
| cy.get(`[data-testid="tag:${options[0]}"]`).should('exist').realClick(); | ||
| cy.get('[data-testid="tag-picker-input"]').should('be.focused'); | ||
| cy.get('[data-testid="tag-picker-control__secondaryAction"]').should('exist').realClick(); | ||
| cy.get(`[data-testid="tag:${options[0]}"]`).should('not.exist'); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
packages/react-components/react-tag-picker-preview/tsconfig.cy.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "extends": "./tsconfig.json", | ||
| "compilerOptions": { | ||
| "isolatedModules": false, | ||
| "types": ["node", "cypress", "cypress-storybook/cypress", "cypress-real-events"], | ||
| "lib": ["ES2019", "dom"] | ||
| }, | ||
| "include": ["**/*.cy.ts", "**/*.cy.tsx"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -20,6 +20,9 @@ | |
| }, | ||
| { | ||
| "path": "./.storybook/tsconfig.json" | ||
| }, | ||
| { | ||
| "path": "./tsconfig.cy.json" | ||
| } | ||
| ] | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters