Skip to content

Commit

Permalink
Adding more tests (#31)
Browse files Browse the repository at this point in the history
test: adding tests for all settings and create common test methods in cypress
  • Loading branch information
TetrisIQ authored Feb 19, 2022
1 parent 9d814af commit 5b1aa00
Show file tree
Hide file tree
Showing 11 changed files with 247 additions and 168 deletions.
46 changes: 46 additions & 0 deletions cypress/integration/comments.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/// <reference types="cypress" />

const title = "Test Title"
const location = "Test Location";
const note = "Test Note"
const options = ["Option 1", "Option 2", "Option 3"]
const user = "Cypress Test User";
const comment = "Cypress writing comments and so on :)"

describe('Create Poll - with Settings', () => {
beforeEach(() => {
cy.visit('http://localhost:3000');
cy.get('button').contains("Create Poll").click();
cy.fillCreatePollPage1(title, location, note);
cy.fillCreatePollPage2(options);
cy.get("form").submit();
cy.fillCreatePollPage4(user);
cy.firstNotificationHeaderContainsText("Poll Created").click()

})

it('Write a comment - basic', () => {
// write comment
cy.get('.mb-2 > .bg-gray-100').clear().type(comment)
// Post comment
cy.get('.-mr-1 > .bg-white').click();
cy.firstNotificationHeaderContainsText("Poll updated").click();
// Validate the result
cy.get(".my-2").should("contain.text", comment);
cy.reload();
cy.get(".my-2").should("contain.text", comment);
})
it('Write a comment - change name', () => {
// write comment
cy.get("form").find("input").parent().find("span").click()
cy.get("form").find("input").first().clear().type("Anon " + user)
cy.get('.mb-2 > .bg-gray-100').clear().type(comment)
// Post comment
cy.get('.-mr-1 > .bg-white').click();
cy.firstNotificationHeaderContainsText("Poll updated").click();
// Validate the result
cy.get(".my-2").should("contain.text", "Anon " + user);
cy.reload();
cy.get(".my-2").should("contain.text", "Anon " + user);
})
})
149 changes: 26 additions & 123 deletions cypress/integration/create-poll/createPoll.spec.js
Original file line number Diff line number Diff line change
@@ -1,128 +1,34 @@
/// <reference types="cypress" />

const title = "Test Title"
const location = "Test Location";
const note = "Test Note"
const options = ["Option 1", "Option 2", "Option 3"]
const user = "Cypress Test User";

describe('Create Poll', () => {
describe('Create Poll - Basic validation', () => {
beforeEach(() => {
cy.visit('http://localhost:3000')
})

it('Create poll - Ok', () => {
const title = "Test Title"
const text = "Test Location";
const note = "Test Note"
const options = ["Option 1", "Option 2", "Option 3"]
const user = "Cypress Test User";
// Click on create Poll button in header
cy.get('.container > .inline-flex').click()
// Type title
cy.get(':nth-child(2) > .relative > .rounded-md').type(title)
// Type location
cy.get(':nth-child(3) > .relative > .rounded-md').type(text)
// Type note
cy.get(':nth-child(4) > .relative > .rounded-md').type(note)
// Click continue
cy.get('.pt-4 > button').click()
//fill first Option
cy.get(':nth-child(3) > .relative > .rounded-md').type(options[0])
//fill Second Option
cy.get(':nth-child(4) > .relative > .rounded-md').type(options[1])
//fill third Option
cy.get(':nth-child(5) > .relative > .rounded-md').type(options[2])
// click on last element so it's presen
cy.get(':nth-child(5) > .relative > .rounded-md').click()

// Click continue
cy.get('.pt-4 > button').click()
// Click continue
cy.get('.pt-4 > button').click()
//Type name
cy.get(':nth-child(2) > .relative > .rounded-md').clear().type(user)
// Click finish
cy.get('.pt-4 > button').click()
//Click Option 2
cy.get('tbody tr:nth-child(3) > td:nth-child(3)').click()
//Click update
cy.get('.py-4 > .inline-flex').click()
// write Comment
cy.get('.mb-2 > .bg-gray-100').clear().type("Cypress writing comments and so on :)")
// Post comment
cy.get('.-mr-1 > .bg-white').click()

// Validate the result
cy.get('.py-4 > .text-xl').should("contain.text", "Test Title")


cy.get(':nth-child(1) > .text-left > span').should("contain.text", text)

cy.get(':nth-child(2) > .text-left > span').should("contain.text", note)

cy.get('thead > tr > :nth-child(2)').should("contain.text", options[0])
cy.get('thead > tr > :nth-child(3)').should("contain.text", options[1])
cy.get('thead > tr > :nth-child(4)').should("contain.text", options[2])
cy.reload()
cy.get(':nth-child(3) > .gb-gray-200 > svg').should('have.css', 'fill').and('eq', 'rgb(34, 197, 94)')

})


it('Create poll - YNINB', () => {
const title = "Test Title"
const text = "Test Location";
const note = "Test Note"
const options = ["Option 1", "Option 2", "Option 3"]
const user = "Cypress Test User";
// Click on create Poll button in header
cy.get('.container > .inline-flex').click()
// Type title
cy.get(':nth-child(2) > .relative > .rounded-md').type(title)
// Type location
cy.get(':nth-child(3) > .relative > .rounded-md').type(text)
// Type note
cy.get(':nth-child(4) > .relative > .rounded-md').type(note)
// Click continue
cy.get('.pt-4 > button').click()
//fill first Option
cy.get(':nth-child(3) > .relative > .rounded-md').type(options[0])
//fill Second Option
cy.get(':nth-child(4) > .relative > .rounded-md').type(options[1])
//fill third Option
cy.get(':nth-child(5) > .relative > .rounded-md').type(options[2])
// click on last element so it's presen
cy.get(':nth-child(5) > .relative > .rounded-md').click()

// Click continue
cy.get('.pt-4 > button').click()
// Click If needed Be (The first input in Settings
cy.get('form input').eq(0).click()

// Click continue
cy.get('.pt-4 > button').click()
//Type name
cy.get(':nth-child(2) > .relative > .rounded-md').clear().type(user)
// Click finish
cy.get('.pt-4 > button').click()
//Click Option 2
cy.get('tbody tr:nth-child(3) > td:nth-child(3)').click()
//CLick Option 1 twice
cy.get('tbody tr:nth-child(3) > td:nth-child(2)').click()
cy.get('tbody tr:nth-child(3) > td:nth-child(2)').click()
//Click update
cy.get('.py-4 > .inline-flex').click()

// Validate the result
cy.get('.py-4 > .text-xl').should("contain.text", "Test Title")


cy.get(':nth-child(1) > .text-left > span').should("contain.text", text)

cy.get(':nth-child(2) > .text-left > span').should("contain.text", note)

cy.get('thead > tr > :nth-child(2)').should("contain.text", options[0])
cy.get('thead > tr > :nth-child(3)').should("contain.text", options[1])
cy.get('thead > tr > :nth-child(4)').should("contain.text", options[2])
cy.reload()
cy.get(':nth-child(3) > .gb-gray-200 > svg').should('have.css', 'fill').and('eq', 'rgb(34, 197, 94)')
cy.get(':nth-child(2) > .gb-gray-200 > svg').should('have.css', 'fill').and('eq', 'rgb(234, 179, 8)')
cy.get('button').contains("Create Poll").click();
cy.fillCreatePollPage1(title, location, note);
cy.fillCreatePollPage2(options);
cy.get("form").submit();
cy.fillCreatePollPage4(user);
cy.firstNotificationHeaderContainsText("Poll Created").click();
cy.clickOnOption(1, 1)
cy.clickOnOption(1, 2)
cy.clickOnOption(1, 3)
cy.checkOption(1, 1, "yes")
cy.checkOption(1, 2, "yes")
cy.checkOption(1, 3, "yes")
cy.updatePoll();
cy.reload();
cy.checkOption(1, 1, "yes")
cy.checkOption(1, 2, "yes")
cy.checkOption(1, 3, "yes")

})

Expand All @@ -134,15 +40,12 @@ describe('Create Poll', () => {
cy.get('.py-4 > .text-xl').should("contain.text", "Create new Poll")
});


it('Create poll - without Options', () => {
cy.get("button").contains("Create Poll").click()
cy.get("form").find("input").eq(0).type("Test Title");
cy.get("form").find("input").eq(1).type("Test Location");
cy.get("form").find("input").eq(2).type("Test Note");
cy.get("form").find("button").click()
cy.fillCreatePollPage1(title, location, note)
cy.get("form").submit()
// Check if notification contains red svg
cy.get("#notificationArea > div").first().find("svg").should("have.css", "fill").and('eq', 'rgb(239, 68, 68)')
cy.firstNotificationHeaderContainsText("Cannot continue").click()
})

})
96 changes: 96 additions & 0 deletions cypress/integration/create-poll/withSettings.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/// <reference types="cypress" />

import dayjs from "dayjs";

const title = "Test Title"
const location = "Test Location";
const note = "Test Note"
const options = ["Option 1", "Option 2", "Option 3"]
const user = "Cypress Test User";

describe('Create Poll - with Settings', () => {
beforeEach(() => {
cy.visit('http://localhost:3000')
})

it('Yes, No, If Needed be', () => {

// Click on create Poll button in header
cy.get('button').contains("Create Poll").click();
cy.fillCreatePollPage1(title, location, note);
cy.fillCreatePollPage2(options);

// click on YNINB
cy.get("form").find("input").eq(0).click();
cy.wait(1000) // Wait for animation
cy.get("form").submit();
cy.fillCreatePollPage4(user);

// View Poll Page
// Click one time on the first element
cy.clickOnOption(1, 1);
// CLick Twice on the second
cy.clickOnOption(1, 2);
cy.clickOnOption(1, 2);
// Validate the output
cy.checkOption(1, 1, "yes");
cy.checkOption(1, 2, "ifNeededBe");
cy.checkOption(1, 3, "no");
// update the Poll
cy.updatePoll();
cy.reload();
// Validate again after reload
cy.checkOption(1, 1, "yes");
cy.checkOption(1, 2, "ifNeededBe");
cy.checkOption(1, 3, "no");

})
it('Deadline', () => {
// Click on create Poll button in header
cy.get('button').contains("Create Poll").click();
cy.fillCreatePollPage1(title, location, note);
cy.fillCreatePollPage2(options);

cy.get("form").find("input").eq(3).click();
cy.get("form button").contains("Choose Date").click()
// click next day?
cy.get(".month-dates").find(".day").eq(6).click()
// click Continue
cy.get(".contents").find("button").contains("Continue").click()
cy.get("form").submit();
cy.fillCreatePollPage4(user);
cy.firstNotificationHeaderContainsText("Poll").click();
cy.clickOnOption(1, 2);
cy.checkOption(1, 2, "yes")
cy.updatePoll();
cy.clock(dayjs().add(2, "day").toDate())
cy.get(".grid").find("div").should("contain.text", "is over");
})

it('Vote Limit - 1', () => {
// Click on create Poll button in header
cy.get('button').contains("Create Poll").click();
cy.fillCreatePollPage1(title, location, note);
cy.fillCreatePollPage2(options);

cy.get("form").find("input").eq(2).click();
cy.wait(1000) // Wait for animation
cy.get("form").submit();
cy.fillCreatePollPage4(user);

// View Poll Page
// Click one time on the first element
cy.clickOnOption(1, 1);
cy.clickOnOption(1, 2);
cy.firstNotificationHeaderContainsText("Poll Created").click();
// should show notification "Cannot update Poll"
cy.updatePoll();
cy.firstNotificationHeaderContainsText("Cannot update Poll").click()
// fix poll (click on Option 1)
cy.clickOnOption(1, 1);
cy.updatePoll();
cy.firstNotificationHeaderContainsText("Poll updated").click()
});

})

53 changes: 53 additions & 0 deletions cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,56 @@
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

Cypress.Commands.add('fillCreatePollPage1', (title, location, note) => {
cy.get("form").find("input").eq(0).type(title);
cy.get("form").find("input").eq(1).type(location);
cy.get("form").find("input").eq(2).type(note);
cy.get("form").submit();
})

Cypress.Commands.add('fillCreatePollPage2', (options) => {
let key = 0;
for (let optionsKey in options) {
cy.get("form").find("input").eq(key).type(options[key])
key++;
}
cy.get("form").submit();
})

Cypress.Commands.add('fillCreatePollPage4', (name) => {
cy.get("form").find("input").clear().type(name);
cy.get("form").submit();
})

Cypress.Commands.add('clickOnOption', (row, col) => {
cy.get(`tbody tr:nth-child(${row + 2}) > td:nth-child(${col + 1})`).click()
})

Cypress.Commands.add('checkOption', (row, col, result = "yes" | "no" | "ifNeededBe") => {
switch (result) {
case "yes":
cy.get(`tbody tr:nth-child(${row + 2}) > td:nth-child(${col + 1}) > .gb-gray-200 > svg`).should('have.css', 'fill').and('eq', 'rgb(34, 197, 94)')
return;
case "no":
cy.get(`tbody tr:nth-child(${row + 2}) > td:nth-child(${col + 1}) > .gb-gray-200 > svg`).should('have.css', 'fill').and('eq', 'rgb(220, 38, 38)')
return;
case "ifNeededBe":
cy.get(`tbody tr:nth-child(${row + 2}) > td:nth-child(${col + 1}) > .gb-gray-200 > svg`).should('have.css', 'fill').and('eq', 'rgb(234, 179, 8)')
return;
}
cy.get("body").should("not.exist") // must fail No valid enum
})
Cypress.Commands.add('updatePoll', () => {
cy.get("button").contains("Update").click()
});

Cypress.Commands.add('firstNotificationHeaderContainsText', (text = 1) => {
return cy.get("#notificationArea > div > div > div > div > div").should("contain.text", text)

});





2 changes: 1 addition & 1 deletion cypress/support/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'
import './commands.js'

// Alternatively you can use CommonJS syntax:
// require('./commands')
Binary file added src/assets/Integration.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 7 additions & 2 deletions src/lib/Header.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,13 @@
<nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700 flex flex-wrap items-center text-base justify-center">
<button on:click={() => open(Features)} class="mr-5 dark:hover:text-white hover:text-gray-900">Features</button>
<button on:click={() => open(Integrations)} class="mr-5 dark:hover:text-white hover:text-gray-900">Integrations</button>
<button on:click={() => open(Resources)} class="mr-5 dark:hover:text-white hover:text-gray-900">Resources</button>
<button on:click={() => open(Contact)} class="mr-5 dark:hover:text-white hover:text-gray-900">Contact</button>
<!-- <button on:click={() => open(Resources)} class="mr-5 dark:hover:text-white hover:text-gray-900">Resources</button>-->
<!-- <button on:click={() => open(Contact)} class="mr-5 dark:hover:text-white hover:text-gray-900">Contact</button>-->
<button on:click={() => window.open("https://github.com/tetrisiq/poll-dapp", "_blank")} class="flex mr-5 dark:hover:text-white hover:text-gray-900">GitHub
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="inline my-auto ml-1" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</button>
</nav>
<ToggleDarkMode/>
<button on:click={() => open(CreateNewPoll)} class="inline-flex items-center dark:bg-gray-800 bg-gray-100 border-0 py-1 px-3 focus:outline-none dark:hover:bg-gray-700 hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
Expand Down
Loading

0 comments on commit 5b1aa00

Please sign in to comment.