Meet the team e2e test (chaynHQ#1090)

* Add checkImage and checkLink commands

* Add data-testid and fix hydratation issues due to nested p

* Create fixture with team member data

* Create meet the team tests

* Simplify checkLink command assuming anchor always work

* Remove first as it is not required

* Remove paragraph prop after feedback

components/storyblok/StoryblokTeamMemberCard.tsx

@@ -75,6 +75,7 @@ const StoryblokTeamMemberCard = (props: StoryblokTeamMemberCardProps) => {
 
   return (
     <Card
+      data-testid="TeamMemberCard"
       sx={cardStyle}
       {...storyblokEditable({
         _uid,
@@ -127,7 +128,7 @@ const StoryblokTeamMemberCard = (props: StoryblokTeamMemberCardProps) => {
       </CardActionArea>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent sx={collapseContentStyle}>
-          <Typography variant="body2" mb={0} paragraph>
+          <Typography variant="body2" mb={0} component={'div'}>
             {render(bio, RichTextOptions)}
           </Typography>
         </CardContent>

cypress/fixtures/meet-the-team.json

@@ -0,0 +1,72 @@
+{
+  "core": [
+    {
+      "name": "Hera Hussain",
+      "title": "Founder and CEO of Chayn",
+      "languages": "English, Urdu, Punjabi",
+      "image": {
+        "alt": "hera2",
+        "src": "hera2"
+      },
+      "description": "Hera Hussain is the founder and CEO of Chayn. She has years of experience supporting survivors. She’s our Safeguarding Lead. Hera was raised in Pakistan and came to the UK to study Psychology and Economics. Hera was on the Forbes 30 Under 30 and MIT Technology Review’s Innovators Under 35 list, and was awarded the British Empire Medal by the Queen.",
+      "closed": false
+    },
+    {
+      "name": "Francesca Jarvis",
+      "title": "Survivor Services Lead",
+      "languages": "English",
+      "image": {
+        "alt": "Picture of Francesca",
+        "src": "img-20220609-wa0009"
+      },
+      "description": "Francesca grew up in the UK and lives in London. Before joining Chayn as the Survivor Services Lead for our Bloom project, Francesca worked in frontline support services for survivors of sexual violence and youth work. She has a lot of experience supporting survivors around and through the criminal legal system, managing teams of frontline workers, and developing ways of working.",
+      "closed": false
+    },
+    {
+      "name": "Carolina Cal",
+      "title": "Survivor Services Facilitator",
+      "languages": "English, Portuguese, Spanish",
+      "image": {
+        "alt": "Carolina is a white women with long brown hair wearing a black top with leaves on it. She stands in front of a large green bush that fills the entire frame.",
+        "src": "carolina-headshot"
+      },
+      "description": "Carolina is from São Paulo in Brazil. She worked for Latin American Women’s Rights organisations in community engagement before joining Chayn and has extensive experience in facilitating wellbeing activities and engaging migrant women in conversations surrounding notions of migration, identity, gendered violence & intersectionality. Carolina has a MA in Applied Theatre from Central School of Speech & Drama and is passionate about using the arts to co-create social change with women from the Global Majority.",
+      "closed": false
+    },
+    {
+      "name": "Abbie Tshola",
+      "title": "Survivor Services Administrator",
+      "languages": "English, French",
+      "image": {
+        "alt": "Abbie is a Black woman taking a selfie. She is wearing a black top and has black hair. She is standing in front of a brick wall with a clock on it.",
+        "src": "abbie-headshot"
+      },
+      "description": "Abbie is from London, UK. Having recently graduated from the London School of Economics with an MSc Political Sociology degree, Abbie has considerable experience researching higher education through a decolonial and black feminist lens and has advocated for policies that improves the experience of marginalised students. Abbie also enjoys exploring UX Design and is currently building a portfolio which centres black feminist values in digital spaces.",
+      "closed": false
+    },
+    {
+      "name": "Nooreen Khan",
+      "title": "Community and culture lead",
+      "languages": "English, Bengali, Arabic",
+      "image": {
+        "alt": "Picture of Nooreen",
+        "src": "nooreen"
+      },
+      "description": "Nooreen Khan is a Bangladeshi who grew up in Abu Dhabi, UAE and now lives in Edmonton, Canada. She is a gender-based violence expert with a background in public health. One of the longest members of Chayn, Nooreen joined the team in 2016 as a volunteer and now is the Community and Culture Lead, responsible for managing the team’s wellbeing, supporting operations, and facilitating Bloom courses.",
+      "closed": false
+    }
+  ],
+  "supporting": [
+    {
+      "name": "Paz Romero",
+      "title": "Bloom video presenter, chat team",
+      "languages": "English, Spanish",
+      "image": {
+        "alt": "Picture of Paz",
+        "src": "paz2"
+      },
+      "description": "Paz Romero is a Latina, queer woman from Rio de la Plata. She was born south of Buenos Aires, Argentina and she’s a grassroots activist for women and sexual diversities rights. She coordinated a regional feminist organization; she’s a translator, proofreader, QC and project manager. Paz has provided us a lot of project support at Chayn, facilitated some of our Spanish-language Bloom videos, and is one of our 1-2-1 chat facilitators.",
+      "closed": true
+    }
+  ]
+}

cypress/integration/meet-the-team.cy.tsx

@@ -0,0 +1,112 @@
+const MEET_THE_TEAM_PAGE_URL = '/meet-the-team';
+
+describe('Meet the team page should', () => {
+  before(() => {
+    cy.cleanUpTestState();
+  });
+
+  it('be reachable from the home page', () => {
+    cy.visit('/');
+    cy.get('a[qa-id="meet-team-menu-button"]').first().click({ force: true });
+    cy.url().should('contain', MEET_THE_TEAM_PAGE_URL);
+  });
+
+  describe('display', () => {
+    type CheckCardProps = {
+      name: string;
+      title: string;
+      languages: string;
+      image: { alt: string; src: string };
+      description: string;
+      closed?: boolean;
+    };
+    const checkCard = ({ name, title, languages, image, description, closed }: CheckCardProps) => {
+      const expandIconTag = 'svg[data-testid="KeyboardArrowDownIcon"]';
+      const cardContainer = cy
+        .get(`div[data-testid="TeamMemberCard"]:has(img[alt="${image.alt}"])`)
+        .first();
+      cardContainer.within(() => {
+        cy.get('h3').should('contain', name);
+        cy.get('p').should('contain', title);
+        cy.get('svg[data-testid="LanguageIcon"]').should('exist');
+        cy.get('p').should('contain', languages);
+        cy.checkImage(image.alt, image.src);
+        if (closed) {
+          cy.get(expandIconTag).should('exist');
+          cy.root().click();
+          cy.get(expandIconTag).should('exist');
+        } else {
+          cy.get(expandIconTag).should('not.exist');
+        }
+        cy.get('p').should('contain', description);
+      });
+    };
+    beforeEach(() => {
+      cy.visit(MEET_THE_TEAM_PAGE_URL);
+    });
+    it('team description section', () => {
+      cy.get('h1').should('contain', 'Our Bloom team');
+      cy.get('p').should(
+        'contain',
+        'Our team comes from all corners of the world. We deeply care about the experiences of survivors and the many ways in which our identity affects our experience of trauma, as many of us, are survivors ourselves',
+      );
+      cy.checkImage(
+        'Illustration of the outline of a persons face from a side profile, with a flower beside the face.',
+        'team_member',
+      );
+    });
+    it('core team section', () => {
+      cy.get('h2').should('contain', 'Core team');
+      cy.fixture('meet-the-team').then((data: { core: CheckCardProps[] }) => {
+        data.core.forEach((coreMember) => {
+          checkCard(coreMember);
+        });
+      });
+    });
+    it('our volunteers/therapists section', () => {
+      cy.checkImage('leaves with a rose bloom', 'leaf_mix_bloom');
+      cy.get('h3').should('contain', 'Our volunteers');
+      cy.get('p').should(
+        'contain',
+        'Chayn began as a volunteer-run network of survivors and allies that wanted to create a feminist space online for information, solidarity and healing. Our volunteers continue to play an important part in informing, reviewing and designing our services.',
+      );
+      cy.checkImage('leaves with fire', 'leaf_mix_fire');
+      cy.get('h3').should('contain', 'Our therapists');
+      cy.get('p').should(
+        'contain',
+        'We co-create our courses with a network of certified therapists who practice a trauma-informed and feminist approach. They are based all across the world, and speak many languages.',
+      );
+    });
+    it('supporting team section', () => {
+      cy.get('h2').should('contain', 'Supporting team');
+      cy.get('p').should(
+        'contain',
+        'Our wider team has helped us edit, write, and record our course videos, and some of them also provide support over 1-1 chat. They bring with them a wealth of knowledge and life experience, and have been trained by Chayn. You may even come across someone who is based in the same place as you!',
+      );
+      cy.fixture('meet-the-team').then((data: { supporting: CheckCardProps[] }) => {
+        data.supporting.forEach((supportingMember) => {
+          checkCard(supportingMember);
+        });
+      });
+    });
+    it('our research and awards section', () => {
+      cy.checkImage('Illustration of cycle, representing change.', 'change');
+      cy.get('h2').should('contain', 'Our research and awards');
+      cy.get('p').should(
+        'contain',
+        'Chayn has the honour of receiving many awards for its innovative work.',
+      );
+      cy.get('p').should('contain', 'Bloom has received the following awards:');
+      cy.get('p').should('contain', '2022 Anthem Awards - Silver 2022');
+      cy.get('p').should('contain', 'CogX Global Goals - Good Health and Well-Being Award');
+      cy.get('p').should('contain', 'You can see the full list of awards ');
+      cy.get('h3').should('contain', 'Our therapists');
+      cy.get('svg[data-testid="OpenInNewIcon"]').should('exist');
+      cy.checkLink('https://www.chayn.co/about', 'here');
+
+      cy.get('h2').should('contain', 'Funded by');
+      cy.checkImage('The National Lottery Community Fund logo', 'tnlc-logo');
+      cy.checkImage('Comic Relief logo', 'comic-relief-logo');
+    });
+  });
+});

cypress/support/commands.js

@@ -195,6 +195,18 @@ Cypress.Commands.add('visitFrenchPage', (url) => {
   });
 });
 
+Cypress.Commands.add('checkImage', (alt, subSrc) => {
+  const image = cy.get(`img[alt="${alt}"]`);
+  image.should('exist');
+  image.should('have.attr', 'src').should('include', subSrc);
+});
+
+Cypress.Commands.add('checkLink', (href, text) => {
+  const link = cy.get(`a[href="${href}"]`);
+  link.should('exist');
+  link.should('contain', text);
+});
+
 // CUSTOM COMMANDS THAT NEED FIREBASE ACCESS
 const fbConfig = {
   apiKey: Cypress.env('NEXT_PUBLIC_FIREBASE_API_KEY'),

cypress/support/index.d.ts

@@ -38,5 +38,7 @@ declare namespace Cypress {
     visitSpanishPage(url: string): Chainable<Element>;
     visitFrenchPage(url: string): Chainable<Element>;
     visitHindiPage(url: string): Chainable<Element>;
+    checkImage(alt: string, subSrc: string): Chainable<Element>;
+    checkLink(href: string, text: string): Chainable<Element>;
   }
 }