Fix up component cypress tests

packages/react-components/react-carousel/library/cypress.config.ts

@@ -0,0 +1,3 @@
+import { baseConfig } from '@fluentui/scripts-cypress';
+
+export default baseConfig;

packages/react-components/react-carousel/library/package.json

@@ -21,7 +21,8 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "*",
-    "@fluentui/scripts-api-extractor": "*"
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
     "@fluentui/react-aria": "^9.13.8",

packages/react-components/react-carousel/library/src/components/Carousel/Carousel.cy.tsx

@@ -0,0 +1,78 @@
+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 type { CarouselProps } from './Carousel.types';
+import { CarouselNav } from '../CarouselNav/CarouselNav';
+import { CarouselNavButton } from '../CarouselNavButton/CarouselNavButton';
+import { CarouselNavContainer } from '../CarouselNavContainer/CarouselNavContainer';
+import { CarouselSlider } from '../CarouselSlider/CarouselSlider';
+import { CarouselViewport } from '../CarouselViewport/CarouselViewport';
+import { Carousel } from './Carousel';
+import { CarouselCard } from '../CarouselCard/CarouselCard';
+
+const mount = (element: JSX.Element) => {
+  mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);
+};
+
+const CarouselControlledIndexTest: React.FC<CarouselProps> = props => {
+  const [isVisible, setVisibility] = React.useState(false);
+  const [controlledIndex, setControlledIndex] = React.useState<number | undefined>(props.activeIndex);
+
+  return (
+    <Carousel
+      {...props}
+      activeIndex={controlledIndex}
+      onActiveIndexChange={(ev, data) => {
+        setControlledIndex(data.index);
+      }}
+    >
+      <CarouselViewport>
+        <CarouselSlider>
+          <CarouselCard>Card 1</CarouselCard>
+          <CarouselCard>Card 2</CarouselCard>
+          <CarouselCard>Card 3</CarouselCard>
+          {isVisible && <CarouselCard>Card 4</CarouselCard>}
+          {isVisible && <CarouselCard>Card 5</CarouselCard>}
+        </CarouselSlider>
+      </CarouselViewport>
+      <CarouselNavContainer>
+        <CarouselNav>{index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}</CarouselNav>
+      </CarouselNavContainer>
+      <button
+        className="addNewCardsButton"
+        onClick={() => {
+          // Add and set to new card
+          setVisibility(true);
+          setControlledIndex(4);
+        }}
+      >
+        {'Add cards'}
+      </button>
+    </Carousel>
+  );
+};
+CarouselControlledIndexTest.displayName = 'CarouselTest';
+
+describe('CarouselControlledIndexTest', () => {
+  it('Should render to initial value', () => {
+    const defaultActiveIndex = 1;
+    mount(<CarouselControlledIndexTest defaultActiveIndex={defaultActiveIndex} />);
+    const activeIndexNavButton = cy.get<HTMLElement>('.fui-CarouselNavButton').eq(defaultActiveIndex);
+    activeIndexNavButton.should('have.attr', 'aria-selected', 'true');
+  });
+
+  it('Should handle controlled index set to newly appended card', () => {
+    mount(<CarouselControlledIndexTest activeIndex={1} />);
+
+    const activeIndexNavButton = cy.get<HTMLElement>('.fui-CarouselNavButton').eq(1);
+    activeIndexNavButton.should('have.attr', 'aria-selected', 'true');
+    cy.then(() => {
+      const addNewCardsButton = cy.get<HTMLElement>('.addNewCardsButton');
+      addNewCardsButton.click();
+    }).then(() => {
+      const newCardIndexNavButton = cy.get<HTMLElement>('.fui-CarouselNavButton').eq(4);
+      newCardIndexNavButton.should('have.attr', 'aria-selected', 'true');
+    });
+  });
+});

packages/react-components/react-carousel/library/tsconfig.cy.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "types": ["node", "cypress", "cypress-real-events"],
+    "typeRoots": ["../../../../../node_modules", "../../../../../node_modules/@types"],
+    "lib": ["ES2019", "dom"]
+  },
+  "include": ["**/*.cy.ts", "**/*.cy.tsx"]
+}

packages/react-components/react-carousel/library/tsconfig.json

@@ -17,6 +17,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.cy.json"
     }
   ]
 }

packages/react-components/react-carousel/library/tsconfig.lib.json

@@ -16,7 +16,9 @@
     "**/*.test.ts",
     "**/*.test.tsx",
     "**/*.stories.ts",
-    "**/*.stories.tsx"
+    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
   ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }