add: cypress tests

ahmednooor · Feb 3, 2024 · 2741679 · 2741679
1 parent 6fbba74
commit 2741679
Show file tree

Hide file tree

Showing 9 changed files with 1,035 additions and 802 deletions.
diff --git a/.github/workflows/verify-pr-build.yaml → .github/workflows/verify-pull-request.yaml b/.github/workflows/verify-pr-build.yaml → .github/workflows/verify-pull-request.yaml
@@ -29,4 +29,4 @@ jobs:
           echo API_PASSWORD=${{ secrets.API_PASSWORD }} >> ./shared/sdk/.env
 
       - run: npx nx format:check
-      - run: npx nx affected -t lint,test,build --parallel=3
+      - run: npx nx affected -t lint,test,build,build-storybook,e2e --parallel=3
diff --git a/apps/asdf-e2e/.env.sample b/apps/asdf-e2e/.env.sample
@@ -0,0 +1,4 @@
+# for Api tests
+# https://dummyjson.com/docs/auth
+API_USERNAME=...
+API_PASSWORD=...
diff --git a/apps/asdf-e2e/cypress.config.ts b/apps/asdf-e2e/cypress.config.ts
@@ -2,7 +2,14 @@ import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 import { defineConfig } from 'cypress';
 
+const USERNAME = process.env.API_USERNAME;
+const PASSWORD = process.env.API_PASSWORD;
+
 export default defineConfig({
+  env: {
+    USERNAME,
+    PASSWORD,
+  },
   e2e: {
     ...nxE2EPreset(__filename, { cypressDir: 'src', bundler: 'vite' }),
     baseUrl: 'http://localhost:4200',

diff --git a/apps/asdf-e2e/src/e2e/app.cy.ts b/apps/asdf-e2e/src/e2e/app.cy.ts
@@ -1,13 +1,100 @@
-import { getGreeting } from '../support/app.po';
-
 describe('asdf-e2e', () => {
   beforeEach(() => cy.visit('/'));
 
-  it('should display welcome message', () => {
-    // Custom command example, see `../support/commands.ts` file
-    cy.login('[email protected]', 'myPassword');
+  it('should verify sequential (paginated) loading of posts', () => {
+    cy.visit('/');
+
+    cy.intercept('GET', 'https://dummyjson.com/posts?limit=50&skip=0').as(
+      'getPosts1Till50'
+    );
+    cy.intercept('GET', 'https://dummyjson.com/posts?limit=50&skip=50').as(
+      'getPosts51Till100'
+    );
+    cy.intercept('GET', 'https://dummyjson.com/posts?limit=50&skip=100').as(
+      'getPosts101Till150'
+    );
+    cy.intercept('GET', 'https://dummyjson.com/posts?limit=50&skip=150').as(
+      'getPosts151Till200'
+    );
+
+    cy.wait('@getPosts1Till50').its('response.statusCode').should('eq', 200);
+    cy.get('[data-testid="posts-container"]').should('exist');
+    cy.get('[data-testid="posts-container"]')
+      .children('article')
+      .should('have.length', 50);
+
+    cy.get('[data-testid="posts-container"]').children('button').click();
+
+    cy.wait('@getPosts51Till100').its('response.statusCode').should('eq', 200);
+    cy.get('[data-testid="posts-container"]').should('exist');
+    cy.get('[data-testid="posts-container"]')
+      .children('article')
+      .should('have.length', 100);
+
+    cy.get('[data-testid="posts-container"]').children('button').click();
+
+    cy.wait('@getPosts101Till150').its('response.statusCode').should('eq', 200);
+    cy.get('[data-testid="posts-container"]').should('exist');
+    cy.get('[data-testid="posts-container"]')
+      .children('article')
+      .should('have.length', 150);
+
+    cy.get('[data-testid="posts-container"]').children('button').click();
+
+    cy.wait('@getPosts151Till200').its('response.statusCode').should('eq', 200);
+    cy.get('[data-testid="posts-container"]').should('exist');
+    cy.get('[data-testid="posts-container"]')
+      .children('p')
+      .should('have.text', 'All posts have been fetched.');
+  });
+
+  it('should login the user', () => {
+    cy.login(
+      Cypress.env('USERNAME') || "Cypress.env('USERNAME') is undefined",
+      Cypress.env('PASSWORD') || "Cypress.env('PASSWORD') is undefined"
+    );
+  });
+
+  it('should verify user info after login', () => {
+    cy.visit('/');
+    cy.login(
+      Cypress.env('USERNAME') || "Cypress.env('USERNAME') is undefined",
+      Cypress.env('PASSWORD') || "Cypress.env('PASSWORD') is undefined"
+    );
+    cy.visit('/user');
 
-    // Function helper example, see `../support/app.po.ts` file
-    getGreeting().contains(/Welcome/);
+    cy.get('[data-testid="user-info-container"]').should('exist');
+    cy.get('[data-testid="user-info-container"]').should(
+      'include.text',
+      '"id": 15'
+    );
+    cy.get('[data-testid="user-info-container"]').should(
+      'include.text',
+      '"username": "kminchelle"'
+    );
+    cy.get('[data-testid="user-info-container"]').should(
+      'include.text',
+      '"email": "[email protected]"'
+    );
+    cy.get('[data-testid="user-info-container"]').should(
+      'include.text',
+      '"firstName": "Jeanne"'
+    );
+    cy.get('[data-testid="user-info-container"]').should(
+      'include.text',
+      '"lastName": "Halvorson"'
+    );
+    cy.get('[data-testid="user-info-container"]').should(
+      'include.text',
+      '"gender": "female"'
+    );
+    cy.get('[data-testid="user-info-container"]').should(
+      'include.text',
+      '"image": "https://robohash.org/Jeanne.png?set=set4"'
+    );
+    cy.get('[data-testid="user-info-container"]').should(
+      'include.text',
+      '"token": "*****"'
+    );
   });
 });
diff --git a/apps/asdf-e2e/src/support/commands.ts b/apps/asdf-e2e/src/support/commands.ts
@@ -14,13 +14,25 @@
 declare namespace Cypress {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Chainable<Subject> {
-    login(email: string, password: string): void;
+    login(username: string, password: string): void;
   }
 }
 
 // -- This is a parent command --
-Cypress.Commands.add('login', (email, password) => {
-  console.log('Custom command example: Login', email, password);
+Cypress.Commands.add('login', (username, password) => {
+  cy.visit('/login');
+
+  cy.get('input[name="username"]').clear();
+  cy.get('input[name="username"]').type(username);
+  cy.get('input[name="password"]').clear();
+  cy.get('input[name="password"]').type(password);
+
+  cy.intercept('POST', 'https://dummyjson.com/auth/login').as('loginRequest');
+  cy.get('button[type="submit"]').click();
+
+  cy.wait('@loginRequest').its('response.statusCode').should('eq', 200);
+
+  cy.url().should('eq', 'http://localhost:4200/');
 });
 //
 // -- This is a child command --

diff --git a/apps/asdf/src/pages/Posts/Posts.tsx b/apps/asdf/src/pages/Posts/Posts.tsx
@@ -34,7 +34,7 @@ export const Posts: React.FC = () => {
   if (error) return <p>Something went wrong...</p>;
 
   return (
-    <div className={styles['posts-container']}>
+    <div className={styles['posts-container']} data-testid="posts-container">
       {posts.map((post) => (
         <Post
           key={post.id}

diff --git a/apps/asdf/src/pages/User/User.tsx b/apps/asdf/src/pages/User/User.tsx
@@ -5,11 +5,12 @@ import { UserProps } from './types';
 
 export const User: React.FC<UserProps> = () => {
   const { api } = useContext(ApiContext);
+  const user = { ...api?.getUser(), token: '*****' };
 
   if (api === null) return <p>Loading...</p>;
 
   return (
-    <div className={styles['user-page']}>
+    <div className={styles['user-page']} data-testid="user-info-container">
       <pre
         style={{
           wordWrap: 'break-word',
@@ -23,7 +24,7 @@ export const User: React.FC<UserProps> = () => {
       >
         <code>
           <br />
-          {JSON.stringify(api.getUser(), null, 4)}
+          {JSON.stringify(user, null, 4)}
           <br />
           <br />
         </code>

diff --git a/shared/sdk/package.json b/shared/sdk/package.json
@@ -5,6 +5,6 @@
   "main": "./index.cjs",
   "module": "./index.js",
   "dependencies": {
-    "dotenv": "16.3.1"
+    "dotenv": "16.3.2"
   }
 }