Add Screener test for Chat for V2 themes (#18946)

* Add Screener test for Chat for V2 themes * Fix message selector
microsoft · Jul 15, 2021 · d939413 · d939413
1 parent f5120ce
commit d939413
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 7 deletions.
diff --git a/.../fluentui/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts b/.../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/...rc/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.steps.ts b/...rc/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
@@ -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/...es/fluentui/docs/src/examples/components/Chat/Types/ChatExampleCompact.shorthand.steps.ts b/...es/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/...es/fluentui/docs/src/examples/components/Chat/Types/ChatExampleDetails.shorthand.steps.ts b/...es/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/...uentui/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts b/...uentui/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
@@ -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[];