From d93941315fd910542399afb3aa9cda08702bca74 Mon Sep 17 00:00:00 2001 From: Jan Pilzer Date: Thu, 15 Jul 2021 14:22:43 -0700 Subject: [PATCH] Add Screener test for Chat for V2 themes (#18946) * Add Screener test for Chat for V2 themes * Fix message selector --- .../Chat/Content/ChatExampleActions.shorthand.steps.ts | 2 +- ...atExampleReactionGroupMeReacting.shorthand.steps.ts | 2 +- .../Chat/Types/ChatExample.shorthand.steps.ts | 2 +- .../Chat/Types/ChatExampleCompact.shorthand.steps.ts | 10 +++++++++- .../Chat/Types/ChatExampleDetails.shorthand.steps.ts | 4 +++- .../Types/ChatMessageExampleBadge.shorthand.steps.ts | 4 +++- scripts/screener/screener.types.ts | 2 +- 7 files changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/fluentui/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts b/packages/fluentui/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts index 139712eda5f82..35555da9c3eeb 100644 --- a/packages/fluentui/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts +++ b/packages/fluentui/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts @@ -6,7 +6,7 @@ const selectors = { }; const config: ScreenerTestsConfig = { - themes: ['teams', 'teamsDark', 'teamsHighContrast'], + themes: ['teams', 'teamsDark', 'teamsHighContrast', 'teamsV2', 'teamsDarkV2'], steps: [ builder => builder.hover(selectors.message).snapshot('Hovers the first message'), builder => builder.click(selectors.message).snapshot('Focus the first message via mouse click'), diff --git a/packages/fluentui/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.steps.ts b/packages/fluentui/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.steps.ts index c5e34817128db..bec670a60e5d3 100644 --- a/packages/fluentui/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.steps.ts +++ b/packages/fluentui/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.steps.ts @@ -7,7 +7,7 @@ const selectors = { }; const config: ScreenerTestsConfig = { - themes: ['teams', 'teamsDark', 'teamsHighContrast'], + themes: ['teams', 'teamsDark', 'teamsHighContrast', 'teamsV2', 'teamsDarkV2'], steps: [ builder => builder.click(selectors.reaction).snapshot('Clicks the first reaction'), (builder, keys) => builder.keys(selectors.reaction, keys.tab).snapshot('Set focus on the second reaction'), diff --git a/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExample.shorthand.steps.ts b/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExample.shorthand.steps.ts index 1b363bbf65578..daf3b3f64ff13 100644 --- a/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExample.shorthand.steps.ts +++ b/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExample.shorthand.steps.ts @@ -6,7 +6,7 @@ const selectors = { }; const config: ScreenerTestsConfig = { - themes: ['teams', 'teamsDark', 'teamsHighContrast'], + themes: ['teams', 'teamsDark', 'teamsHighContrast', 'teamsV2', 'teamsDarkV2'], steps: [ (builder, keys) => builder.keys('body', keys.tab).snapshot('Focuses last message'), (builder, keys) => diff --git a/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExampleCompact.shorthand.steps.ts b/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExampleCompact.shorthand.steps.ts index 21dd51863be31..af650c0ba4e19 100644 --- a/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExampleCompact.shorthand.steps.ts +++ b/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExampleCompact.shorthand.steps.ts @@ -1,5 +1,13 @@ import { ScreenerTestsConfig } from '@fluentui/scripts/screener'; +import { chatMessageClassName } from '@fluentui/react-northstar'; -const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }; +const selectors = { + message: `.${chatMessageClassName}`, +}; + +const config: ScreenerTestsConfig = { + themes: ['teams', 'teamsDark', 'teamsHighContrast', 'teamsV2', 'teamsDarkV2'], + steps: [builder => builder.hover(selectors.message).snapshot('Mouse hover on first message')], +}; export default config; diff --git a/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExampleDetails.shorthand.steps.ts b/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExampleDetails.shorthand.steps.ts index 21dd51863be31..6e2a75d088527 100644 --- a/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExampleDetails.shorthand.steps.ts +++ b/packages/fluentui/docs/src/examples/components/Chat/Types/ChatExampleDetails.shorthand.steps.ts @@ -1,5 +1,7 @@ import { ScreenerTestsConfig } from '@fluentui/scripts/screener'; -const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }; +const config: ScreenerTestsConfig = { + themes: ['teams', 'teamsDark', 'teamsHighContrast', 'teamsV2', 'teamsDarkV2'], +}; export default config; diff --git a/packages/fluentui/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts b/packages/fluentui/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts index 21dd51863be31..6e2a75d088527 100644 --- a/packages/fluentui/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts +++ b/packages/fluentui/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts @@ -1,5 +1,7 @@ import { ScreenerTestsConfig } from '@fluentui/scripts/screener'; -const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }; +const config: ScreenerTestsConfig = { + themes: ['teams', 'teamsDark', 'teamsHighContrast', 'teamsV2', 'teamsDarkV2'], +}; export default config; diff --git a/scripts/screener/screener.types.ts b/scripts/screener/screener.types.ts index 1fc2535dfa782..ba4cf75cc9422 100644 --- a/scripts/screener/screener.types.ts +++ b/scripts/screener/screener.types.ts @@ -79,7 +79,7 @@ export interface ScreenerStepBuilder { } /** Keys of `themes` object exported from `@fluentui/react-northstar/src/index`. */ -export type ScreenerThemeName = 'teams' | 'teamsDark' | 'teamsHighContrast'; +export type ScreenerThemeName = 'teams' | 'teamsDark' | 'teamsHighContrast' | 'teamsV2' | 'teamsDarkV2'; export type ScreenerStep = (steps: ScreenerStepBuilder, keys: ScreenerRunnerKeys) => ScreenerStepBuilder; export type ScreenerSteps = ScreenerStep[];