[AC-113] create cypress test

.env

@@ -1,4 +1,3 @@
 NEXT_PUBLIC_CLIENT_BASE_URL=https://uat.a-comosus.link
 NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://api.uat.a-comosus.link/graphql/
-NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LcYqNcgAAAAAEVUbCZb4cvf919b48U9Ux-Mz_cv
-
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

.env.development

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_GRAPHQL_ENDPOINT=http://localhost:3100/graphql/
+GRAPHQL_ENDPOINT=http://localhost:3100/graphql/

cypress.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'cypress';
 
 export default defineConfig({
   projectId: '21s6cy',
+  chromeWebSecurity: false,
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here

cypress/e2e/auth/login.cy.js → cypress/e2e/auth/auth.cy.js

@@ -1,14 +1,14 @@
 /// <reference types='cypress' />
 
-describe('Login Feature', function () {
+describe('Auth Feature', function () {
   beforeEach(() => {
-    cy.visit('http://localhost:3000/login');
     cy.fixture('auth').then((data) => {
       this.authData = data;
     });
   });
 
   it('displays two input field by default', () => {
+    cy.visit('http://localhost:3000/login');
     cy.get('form').within(() => {
       cy.get('input').should('have.length', 2);
     });
@@ -17,12 +17,23 @@ describe('Login Feature', function () {
   it('navigate user to admin panel when logged in', () => {
     const { username, password } = this.authData;
     cy.login(username.valid, password.valid);
-    cy.url().should('contains', '/admin');
   });
 
   it('display error message when entered incorrect credential', () => {
     const { username, password } = this.authData;
     cy.login(username.invalid, password.invalid);
     cy.get('[data-test-id="login.error"]').should('be.visible');
   });
+
+  it('Signup Feature', () => {
+    const { username, email, password } = this.authData;
+    cy.signup(username.valid, email.valid, password.valid);
+    cy.get('[data-testid="checkbox"]').click();
+    cy.get('[data-testid="register"]').click();
+    cy.get('[data-testid="display-name"]').type('KevinLu');
+    cy.get('[data-testid="continue-btn"]').click();
+    cy.get(':nth-child(2) > .css-13qzv8t').click();
+    cy.recaptcha();
+    cy.get('[data-testid="recaptcha-continue-btn"]').click();
+  });
 });

cypress/fixtures/auth.json

@@ -1,6 +1,10 @@
 {
   "username": {
-    "valid": "norris-wu",
+    "valid": "tester",
+    "invalid": "invalid"
+  },
+  "email": {
+    "valid": "tester@gmail.com",
     "invalid": "invalid"
   },
   "password": {

cypress/support/commands.ts

@@ -19,6 +19,31 @@ Cypress.Commands.add('login', (username: string, password: string) => {
   });
 });
 
+Cypress.Commands.add(
+  'signup',
+  (username: string, email: string, password: string) => {
+    cy.visit('http://localhost:3000/sign-up');
+    cy.get('form').within(() => {
+      const randomStr = (Math.random() + 1).toString(36).substring(7);
+      cy.get('[id="username"]').type(`KevinLu${randomStr}`);
+      cy.get('[id="email"]').type(`turnkevin${randomStr}@gmail.com`);
+      cy.get('[id="password"]').type('admin123');
+    });
+  },
+);
+
+Cypress.Commands.add('recaptcha', () => {
+  cy.get('iframe')
+    .first()
+    .its('0.contentDocument.body')
+    .should('not.be.undefined')
+    .and('not.be.empty')
+    .then(cy.wrap)
+    .find('#recaptcha-anchor')
+    .should('be.visible')
+    .click();
+});
+
 // -- This is a child command --
 // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
 //

src/modules/auth/SignUpForm/Policy.tsx

@@ -17,7 +17,7 @@ export default function Policy({ name, control }: PolicyProps) {
       render={({ field, fieldState: { invalid, error } }) => (
         <FormControl id={name} isInvalid={invalid}>
           <HStack alignItems="flex-start">
-            <Checkbox mt="4px" {...field} />
+            <Checkbox mt="4px" {...field} data-testid="checkbox" />
             <Text>{t('sign-up.policy.description')}</Text>
           </HStack>
           {error && (

src/modules/auth/SignUpForm/SignUpForm.tsx

@@ -103,7 +103,12 @@ export default function SignUpForm({
               testId="sign-up.error"
               error={t('sign-up.error.user-exist')}
             />
-            <Button variantType="accent" type="submit" isLoading={isLoading}>
+            <Button
+              variantType="accent"
+              type="submit"
+              isLoading={isLoading}
+              data-testid="register"
+            >
               {t('sign-up.button')}
             </Button>
           </VStack>

src/modules/onboarding/OnboardingForm/OnboardingForm.DisplayName.tsx

@@ -20,6 +20,7 @@ export default function DisplayName({ name, control }: DisplayNameProps) {
         control={control}
         placeholder={t('display-name.placeholder')}
         borderRadius={15}
+        data-testid="display-name"
       />
     </VStack>
   );

src/modules/onboarding/OnboardingForm/OnboardingForm.tsx

@@ -68,6 +68,7 @@ export default function OnboardingForm({
               _.isNil(getFieldState('displayName').error) &&
                 toggleIsDisplayNameFilled();
             }}
+            data-testid="continue-btn"
           >
             {t('continue')}
           </Button>
@@ -92,6 +93,7 @@ export default function OnboardingForm({
               isDisabled={!isValid}
               isLoading={isOnboarding}
               type="submit"
+              data-testid="recaptcha-continue-btn"
             >
               {t('continue')}
             </Button>