Rafatk/test run

README.md

@@ -1,6 +1,4 @@
-## OpenSpace SDET Takehome Coding Challenge
-
-This challenge is a part of the hiring process at OpenSpace for the Software Development Engineer in Test position. 
+This challenge is a part of the hiring process For QA. 
 
 ![cypress](https://i.imgur.com/1oavJOB.png)
 
@@ -47,3 +45,6 @@ You can focus on simple, fundamental functionality or more advanced props usage,
 
 We prefer you implement your tests in TypeScript, but we also welcome submissions in javascript.
 Just implement your tests in `cypress/integration/DateRangePicker.spec.js`
+
+
+Credits to https://github.com/openspacelabs/sdet-cypress-coding-challenge

cypress.json

@@ -1,3 +1,5 @@
 {
-  "baseUrl": "http://localhost:3000"
+  "video": false,
+  "baseUrl": "http://localhost:3000",
+  "watchForFileChanges": false
 }

cypress/integration/DateRangePicker.spec.ts

@@ -1,6 +1,64 @@
+import { MuiTextField, MonthLabel } from '../test data/TestData.js';
+
+import dayjs = require('dayjs');
+
+let now = dayjs()
+let NextDay = now.add(1,'Day')
+let PrevDay= now.subtract(1,'Day')
+let NextMonth = now.add(1,'M')
+let NextMonth2 = now.add(2,'M')
+let FutureDate = now.add(5,'Days')
+
 describe('DateRangePicker', () => {
-  it('should render', () => {
+
+  before(function () {
     cy.visit('/');
-    cy.get('.DateRangeSelect').should('be.visible');
   });
+
+  it('should dispaly the calendar', () => {
+    cy.get(MuiTextField).first().type(now.format('MM/DD/YYYY')).type('{enter}');
+    cy.get(MonthLabel)
+      .should('contain',now.format('MMMM YYYY') )
+      .and('contain', NextDay.format('MMMM'));
+  });
+
+  it('should allow users to select an old date range', () => {
+    cy.reload()
+    cy.get(MuiTextField)
+      .first()
+      .click()
+    cy.get(`[aria-label="${PrevDay.format('MMM D, YYYY')}"]`).click();
+    cy.get(`[aria-label="${FutureDate.format('MMM D, YYYY')}"]`).click();
+    cy.checkDatesFields(`[value="${PrevDay.format('M/DD/YYYY')}"]`,`[value="${FutureDate.format('M/DD/YYYY')}"]`);
+  });
+
+  it('should allow users to navigate between the months', () => {
+    cy.reload()
+    cy.get(MuiTextField)
+      .first()
+      .click()
+   // cy.get('[data-testid="ArrowRightIcon"]').eq(1).click();
+    cy.get(MonthLabel)
+      .should('contain', now.format('MMMM YYYY'))
+      .and('contain', NextMonth.format('MMMM YYYY')); // format('MMM D, YYYY')
+
+    cy.get('[data-testid="ArrowRightIcon"]').eq(1).click();
+    cy.get(MonthLabel)
+      .should('contain', NextMonth2.format('MMMM YYYY'))
+      .and('contain', NextMonth.format('MMMM YYYY')); 
+  });
+
+  it('should allow users select date range and verify that date is visible in input fields', () => {
+    cy.reload()
+    cy.get(MuiTextField).first().type(now.format('MM/DD/YYYY'));
+    cy.get(`[aria-label="${now.format('MMM D, YYYY')}"]`).click()
+   // cy.get(MuiTextField).last().type(FutureDate.format('MM/DD/YYYY'));
+    cy.get(`[aria-label="${FutureDate.format('MMM D, YYYY')}"]`).click()
+
+    // cy.get('[aria-label="Jan 7, 2023"]').eq(0).click();
+    // cy.get('[aria-label="Jan 14, 2023"]').click();
+    // cy.checkDatesFields('[value="01/07/2023"]', '[value="01/14/2023"]');
+    cy.checkDatesFields(`[value="${now.format('M/DD/YYYY')}"]`,`[value="${FutureDate.format('M/DD/YYYY')}"]`);
+  });
+
 });

cypress/support/commands.js

@@ -23,3 +23,9 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('checkDatesFields', (BeginDate, EndDate) => {
+    cy.get(BeginDate);
+    cy.get(EndDate);
+  });
+

cypress/support/index.ts

@@ -0,0 +1,10 @@
+import './commands';
+/// <reference types="cypress" />
+
+declare global {
+  namespace Cypress {
+    interface Chainable<Subject = any> {
+      checkDatesFields(BeginDate: string, EndDate: string): Chainable<Element>;
+    }
+  }
+}

cypress/test data/TestData.js

@@ -0,0 +1,4 @@
+export const MuiTextField =
+  '[class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"]';
+export const MonthLabel =
+  '[class="MuiTypography-root MuiTypography-subtitle1 css-10wpov9-MuiTypography-root"]';