Update basic test (test desktop and mobile resolution)

This commit is contained in:
Michael
2021-08-02 17:14:33 +02:00
parent a7eb41228b
commit cd0fcdbdc9
4 changed files with 50 additions and 18 deletions

View File

@@ -40,11 +40,15 @@ const Nav = (props) => {
)}
<Link href='/pricing'>
<a className='nav-btn'>Pricing</a>
<a className='nav-btn' id='pricingLink'>
Pricing
</a>
</Link>
<Link href='/contact'>
<a className='nav-btn'>Contact Us</a>
<a className='nav-btn' id='contactLink'>
Contact Us
</a>
</Link>
{props.user ? (
@@ -55,7 +59,9 @@ const Nav = (props) => {
</button>
) : (
<Link href='/auth'>
<a className='btn btn-primary btn-sm rounded-3xl font-body normal-case font-normal'>Login</a>
<a className='btn btn-primary btn-sm rounded-3xl font-body normal-case font-normal'>
Login
</a>
</Link>
)}
</div>
@@ -72,7 +78,7 @@ const Nav = (props) => {
<div className='hidden lg:flex text-center ml-auto'>{NavMenu}</div>
</div>
<div className='flex-none'>
<div className='dropdown dropdown-end'>
<div className='dropdown dropdown-end' data-cy="dropdown">
<div tabIndex='0' className='m-1 cursor-pointer lg:hidden'>
<Menu />
</div>

View File

@@ -119,8 +119,8 @@ const Pricing = () => {
</div>
</div>
)}
<div className='max-w-4xl mx-auto md:flex space-x-4 text-base-100'>
<div className='w-full md:w-1/3 md:max-w-none bg-base-content px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
<div className='max-w-4xl mx-auto md:flex space-x-4'>
<div className='w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
<div className='w-full flex-grow'>
<h2 className='text-center font-bold uppercase mb-4'>Personal</h2>
<h3 className='text-center font-bold text-4xl mb-5'>
@@ -159,7 +159,7 @@ const Pricing = () => {
</button>
</div>
</div>
<div className='w-full md:w-1/3 md:max-w-none bg-base-content px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
<div className='w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
<div className='w-full flex-grow'>
<h2 className='text-center font-bold uppercase mb-4'>Team</h2>
<h3 className='text-center font-bold text-4xl mb-5'>
@@ -208,7 +208,7 @@ const Pricing = () => {
</button>
</div>
</div>
<div className='w-full md:w-1/3 md:max-w-none bg-base-content px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
<div className='w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
<div className='w-full flex-grow'>
<h2 className='text-center font-bold uppercase mb-4'>Pro</h2>
<h3 className='text-center font-bold text-4xl mb-5'>

View File

@@ -1,3 +1,5 @@
{
"baseUrl": "http://localhost:3000"
"baseUrl": "http://localhost:3000",
"viewportWidth": 1280,
"viewportHeight": 800
}

View File

@@ -1,9 +1,33 @@
describe('Homepage Test', () => {
it('Visits the homepage', () => {
cy.visit('')
})
it('Visits the pricing page', () => {
cy.visit('/pricing')
})
})
describe("Basic Test", () => {
context("Desktop resolution", () => {
// run these tests as if in a desktop
// browser with a 720p monitor
it("Visits the homepage and nav links", () => {
cy.viewport(1280, 720);
cy.visit("");
cy.get("nav").contains("Pricing").click();
cy.url().should("include", "/pricing");
cy.get("nav").contains("Contact").click();
cy.url().should("include", "/contact");
});
});
context("Mobile resolution", () => {
// run these tests as if in a desktop
// browser with a 720p monitor
it("Visits the homepage and nav links", () => {
cy.viewport(680, 720);
cy.visit("");
cy.get("[data-cy=dropdown]").click();
cy.get("[data-cy=dropdown]").contains("Pricing").click();
cy.url().should("include", "/pricing");
cy.get("[data-cy=dropdown]").click();
cy.get("[data-cy=dropdown]").contains("Contact").click();
cy.url().should("include", "/contact");
});
});
});