Merge pull request #96 from Sitecore/e2e-outcome-page

Two new e2e tests & seperate Components and E2E test into their own GitHub actions.

.github/workflows/main.yml → .github/workflows/component.yml

@@ -1,4 +1,4 @@
-name: Run Cypress Tests
+name: Run Cypress Component Tests
 
 on: [workflow_dispatch, push]
 

.github/workflows/e2e.yml

@@ -0,0 +1,23 @@
+name: Run Cypress E2E Tests
+
+on: [workflow_dispatch, push]
+
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v3
+        with:
+          project: ./
+          browser: chrome
+          build: yarn build
+          start: yarn start
+          wait-on: "http://localhost:3000"
+        env:
+          SITECORE_CH1_ENDPOINT_URL: ${{ secrets.SITECORE_CH1_ENDPOINT_URL }}
+          SITECORE_CH1_CLIENT_KEY: ${{ secrets.SITECORE_CH1_CLIENT_KEY }}

cypress/e2e/OutcomeFlow/outcome.cy.ts

@@ -9,7 +9,6 @@ describe('Outcome Page', () => {
     cy.get('[value="nosecuredpages"]').click();
     cy.get('[value="search-no"]').click();
     cy.get('[value="scs"]').click();
-    cy.get('.css-18udl74').click();
     cy.get('[value="vuejs"]').click();
     cy.get('.css-gmuwbf > .chakra-button').click();
     cy.get('[value="yesexperienceedge"]').click();
@@ -18,7 +17,43 @@ describe('Outcome Page', () => {
     cy.get('ul#required-products').should('exist').find('li').should('have.length', 1);
     cy.get('ul#required-products li').eq(0).should('contain', 'XM Cloud');
   });
-});
-
-
 
+  it('multiple required products', () => {
+    cy.visit('/');
+    cy.get(':nth-child(1) > .chakra-stack > .chakra-button').click();
+    cy.get(':nth-child(11) > .chakra-button').click();
+    cy.get('.css-1izj7gt > :nth-child(2)').click();
+    cy.get('.chakra-container > :nth-child(3) > .chakra-button').click();
+    cy.get('[value="xp"]').click();
+    cy.get('[value="sessionpersonalization"]').click();
+    cy.get('[value="identityresolution"]').click();
+    cy.get('[value="customxdbfacets"]').click();
+    cy.get('[value="exm"]').click();
+    cy.get('[value="forms"]').click();
+    cy.get('[value="customanalyticsdashboards"]').click();
+    cy.get('[value="externaldatasystems"]').click();
+    cy.get('[value="historicalpersonalization"]').click();
+    cy.get('[value="patterncards"]').click();
+    cy.get('[value="customrules"]').click();
+    cy.get('[value="marketingautomation"]').click();
+    cy.get('[value="captureadditionalevents"]').click();
+    cy.get('.css-gmuwbf > .chakra-button').click();
+    cy.get('[value="securityloginrequired"]').click();
+    cy.get('[value="historicalpersonalize90"]').click();
+    cy.get('[value="search-index"]').click();
+    cy.get('[value="unicorn"]').click();
+    // cy.get('.css-18udl74').click();
+    // cy.get('.css-e3ognv').click();
+    cy.get('[value="netcore"]').click();
+    cy.get('.css-gmuwbf > .chakra-button').click();
+    cy.get('[value="noexperienceedge"]').click();
+    cy.wait(5000);
+    cy.get('.chakra-modal__close-btn').click();
+    cy.get('ul#required-products').should('exist').find('li').should('have.length', 5);
+    cy.get('ul#required-products li').eq(0).should('contain', 'XM Cloud');
+    cy.get('ul#required-products li').eq(1).should('contain', 'Search');
+    cy.get('ul#required-products li').eq(2).should('contain', 'Personalize');
+    cy.get('ul#required-products li').eq(3).should('contain', 'CDP');
+    cy.get('ul#required-products li').eq(4).should('contain', 'Send');
+  });
+});

cypress/e2e/Themes/theme.cy.ts

@@ -0,0 +1,11 @@
+const backgroundImageFileName = "182bc6d196aa465cbf9b614ff2883eb4"
+
+describe('Theme switcher', () => {
+  it('Choosing Fantasy theme should change background and buttons', () => {
+    cy.visit('/');
+    cy.get('.css-uvp8xs > :nth-child(2) > .chakra-stack > .chakra-button').click();
+    cy.get('div#backgroundImage').should('have.css', 'background-image').and('include', backgroundImageFileName); 
+    cy.get('[value="Bard"]').should('have.css', 'background-image').and('include', "/fantasy/button-default.svg"); 
+
+  })
+})

src/components/ui/Layout/SingleColumnLayout.tsx

@@ -34,6 +34,7 @@ export const SingleColumnLayout: FC<SingleColumnLayoutProps> = ({
         backgroundRepeat="no-repeat"
         paddingX={4}
         paddingBottom="140px"
+        id="backgroundImage"
       >
         <Navigation
           showProgressBar={showProgressBar}

src/components/ui/PersonaList/PersonaList.tsx

@@ -26,6 +26,7 @@ export const PersonaList: FC<PersonaListProps> = ({ personas, toggledButtonId, h
                 <Button
                   isActive={isToggled}
                   key={p.id}
+                  value={p.name}
                   style={{ flex: 1 }}
                   onClick={() => {
                     handlePersonaChange(p.id);