Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for E2E added #81

Open
wants to merge 2 commits into
base: front-end
Choose a base branch
from
Open

Support for E2E added #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3421af
Merge branch 'main' into front-end
rltoSD Jun 8, 2022
1baf3d4
src/front-end/__tests__: support for E2E added
rltoSD Jun 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 151 additions & 70 deletions src/front-end/__tests__/EndToEnd.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,132 +1,213 @@
// Puppeteer
jest.setTimeout(35000);
​
​/* eslint-disable */

describe('Basic user flow for SPA ', () => {

jest.setTimeout(35000);
beforeAll(async () => {
await page.goto('http://localhost:8080/login');
await page.waitForTimeout(1000);
});


// Test 1
it('Test1: Initial Home Page - Check Home Page', async () => {
// Remember to change this after deploy
expect(page.url()).toBe("http://localhost:8080/login/");
expect(page.url()).toBe("http://localhost:8080/login");

});

// Test 2
it('Create New User Fails', async () => {

// check that alert shows & url

page.on('dialog', async dialog => {
await dialog.accept();
});
await page.click('input#login-form-create');
await page.click('input#email-field');
await page.type('input#email-field','test10');
await page.click('input#login-form-create');
await page.click('input#password-field');
await page.click('input#login-form-create');
expect(page.url()).toBe("http://localhost:8080/login/");

// Test 2A
it('Create New User Fails with Empty Email and Empty Password', async () => {
// check that alert shows & url
await page.click('input#input-email');
await page.click('button#btn-create');
expect(page.url()).toBe("http://localhost:8080/login");
});

​
// Test 2B
it('Create New User Fails with Empty Password', async () => {
// check that alert shows & url
await page.click('input#input-email');
await page.type('input#input-email','test10');
await page.click('input#input-password');
await page.click('button#btn-create');
expect(page.url()).toBe("http://localhost:8080/login");
});
​
// Test 2C
it('Create New User Fails with Empty Email', async () => {
// check that alert shows & url
await page.click('input#input-email',{clickCount: 3});
await page.keyboard.press('Backspace');
await page.type('input#input-password', '123ABC');
await page.click('button#btn-create');
expect(page.url()).toBe("http://localhost:8080/login");
});
​
// Test 3
it('Log in fail', async () => {
// fill in fields, click login, check link
//await page.waitForSelector('email-field');
await page.click('input#email-field', {clickCount:3});
await page.type('input#email-field','test10');
await page.click('input#password-field',{clickCount:3});
await page.type('input#password-field','qwer3');
await page.click("input#login-form-submit");
await page.waitForTimeout(5000);
expect(page.url()).toBe("http://localhost:8080/login/");
await page.click('input#input-email', {clickCount:3});
await page.keyboard.press('Backspace');
await page.type('input#input-email','test10');
await page.click('input#input-password',{clickCount:3});
await page.keyboard.press('Backspace');
await page.type('input#input-password','fail');
await page.click("button#btn-login");
// --> add expect error message
await page.waitForTimeout(3000);
expect(page.url()).toBe("http://localhost:8080/login");
});



// Test 4
​
// Test 3B
it('Create New User with existing fail', async () => {
// check that alert shows & url
await page.click('button#btn-create');
await page.click('input#input-email', { clickCount: 3 });
await page.keyboard.press('Backspace');
await page.type('input#input-email', 'test16');
await page.click('input#input-password', { clickCount: 3 });
await page.keyboard.press('Backspace');
await page.type('input#input-password','qwer3');
await page.click('button#btn-create');
await page.waitForTimeout(3000);
expect(page.url()).toBe("http://localhost:8080/login");
});
​
// Test 3C
it('Log in', async () => {
// check that alert shows & url
// fill in fields, click login, check link
await page.click('input#email-field', { clickCount: 3 });
await page.type('input#email-field', 'test13');
await page.click('input#password-field', { clickCount: 3 });
await page.type('input#password-field', 'qwert');
await page.click("input#login-form-submit");
await page.waitForNavigation();
await page.click('input#input-email', { clickCount: 3 });
await page.keyboard.press('Backspace');
await page.type('input#input-email', 'test13');
await page.click('input#input-password', { clickCount: 3 });
await page.keyboard.press('Backspace');
await page.type('input#input-password', 'qwer3');
await page.click("button#btn-login");
await page.waitForTimeout(3000);
expect(page.url()).toBe("http://localhost:8080/");
});
// Test 4 log out from my account
it('Log out', async () => {
// fill in fields, click login, check link
const userbutton = await page.evaluateHandle(`document.querySelector("#sidebar > nav-bar").shadowRoot.querySelector("#user")`);
await userbutton.evaluate(e => e.click());
const logoutbutton = await page.evaluateHandle(`document.querySelector("#settings-panel-generated-0 > general-settings-panel").shadowRoot.querySelector("#logout")`);
await logoutbutton.evaluate(e => e.click());
await page.waitForTimeout(3000);
expect(page.url()).toBe("http://localhost:8080/login");
}, 10000);



// Test 5
it('log in', async () => {
// fill in fields, click login, check link
await page.click('input#input-email', { clickCount: 3 });
await page.keyboard.press('Backspace');
await page.type('input#input-email', 'test13');
await page.click('input#input-password', { clickCount: 3 });
await page.keyboard.press('Backspace');
await page.type('input#input-password', 'qwer3');
await page.click("button#btn-login");
await page.waitForTimeout(3000);
expect(page.url()).toBe("http://localhost:8080/");
}, 10000);
​
//Test 5
it('testing opening the settings menu by clicking the user button', async () => {
const userButton = await page.evaluateHandle(`document.querySelector("#sidebar > nav-bar").shadowRoot.querySelector("#user")`);
await userButton.evaluate(e => e.click());

​
//press user button
const settingsMenu = await page.$('settings-menu');

​
const settingsMenuHidden = await settingsMenu.evaluate(e => e.getAttribute('aria-hidden'));
expect(settingsMenuHidden).toBe("false");
}, 10000);

​
//currenty fails due to themes not complete
it('testing changing themes', async () => {
//pressing theme tab
const themeTab = await page.evaluateHandle(`document.querySelector("#settings-tab-generated-1")`);
await themeTab.evaluate(e => e.click());

​
//checking background color
const darkThemeButton = await page.evaluateHandle(`document.querySelector("#settings-panel-generated-1 > theme-panel").shadowRoot.querySelector("#theme > label:nth-child(1)")`);
const lightThemeButton = await page.evaluateHandle(`document.querySelector("#settings-panel-generated-1 > theme-panel").shadowRoot.querySelector("#theme > label:nth-child(2)")`);

​
// start on dark theme
await darkThemeButton.evaluate(e => e.click());
//check the background color
const firstBackgroundColor = await page.$eval(":root", root => getComputedStyle(root).backgroundColor);
console.log(firstBackgroundColor);

​
// switch to light theme
await lightThemeButton.evaluate(e => e.click());
const lightBackgroundColor = await page.$eval(":root", root => getComputedStyle(root).backgroundColor);
console.log("first " + firstBackgroundColor);
console.log("light " + lightBackgroundColor);
expect(lightBackgroundColor).not.toBe(firstBackgroundColor);

let pass = true;
if(lightBackgroundColor === firstBackgroundColor){
pass = false;
}
// go back to dark theme
await darkThemeButton.evaluate(e => e.click());
const secondDarkBackgroundColor = await page.$eval(":root", root => getComputedStyle(root).backgroundColor);
console.log(secondDarkBackgroundColor, secondDarkBackgroundColor == firstBackgroundColor);
expect(secondDarkBackgroundColor).toBe(firstBackgroundColor);
if(secondDarkBackgroundColor !== firstBackgroundColor){
pass = false;
}
expect(pass).toBe(true);
}, 10000);

it('test closing the settings menu', async() => {
const userButton = await page.evaluateHandle(`document.querySelector("#sidebar > nav-bar").shadowRoot.querySelector("#user")`);
await userButton.evaluate(e => e.click());

​
//press user button
const settingsMenu = await page.$('settings-menu');

​
const settingsMenuHidden = await settingsMenu.evaluate(e => e.getAttribute('aria-hidden'));
expect(settingsMenuHidden).toBe("true");
}, 10000);
​
it('test new button triggers dropdown', async() =>{
const newButton = await page.evaluateHandle(`document.querySelector("#topbar > page-header").shadowRoot.querySelector("button.new-button")`);
await newButton.evaluate(e => e.click());
const dropdown = await page.evaluateHandle(`document.querySelector("#adderDropdown > inline-dropdown").shadowRoot.querySelector("#myDropdown")`);
const classes = await dropdown.evaluate(e => e.classList);
expect(classes[1]).toBe("show");
}, 10000);

it('testing logout button', async () => {
// open the settings menu
const userButton = await page.evaluateHandle(`document.querySelector("#sidebar > nav-bar").shadowRoot.querySelector("#user")`);
await userButton.evaluate(e => e.click());

//press user button
const settingsMenu = await page.$('settings-menu');

const settingsMenuHidden = await settingsMenu.evaluate(e => e.getAttribute('aria-hidden'));
expect(settingsMenuHidden).toBe("true");

const logoutButton = await page.evaluateHandle(`document.querySelector("#settings-panel-generated-0 > general-settings-panel").shadowRoot.querySelector("#logout")`);
await logoutButton.evaluate(e => e.click());
await page.waitForNavigation();
expect(page.url()).toBe('http://localhost:8080/login/');
​
it('test new future log in dropdown', async() =>{
const futurelogButton = await page.evaluateHandle(`document.querySelector("#adderDropdown > inline-dropdown").shadowRoot.querySelector("li")`);
await futurelogButton.evaluate(e => e.click());
const creationMenu = await page.evaluateHandle(`document.querySelector("#creationMenu > creation-menu").shadowRoot.querySelector("#popup")`);
const style = await creationMenu.evaluate(e => e.style.display);
expect(style).toBe("block");
}, 10000);
/**
* Wanted to test making futurelog with no input but theres an issue with handling dialog popup
it('test creating future log with no input', async() =>{
await page.on("dialog", (dialog) => {
console.log("Dialog is up...");
delay(1000);
console.log("Accepted...");
dialog.accept();
delay(1000);
});

const futureFrom = await page.evaluateHandle(`document.querySelector("#creationMenu > creation-menu").shadowRoot.querySelector("#futureFrom")`);
await futureFrom.evaluate(e => e.innerText ="Wed Jun 01 2022");
const createButton= await page.evaluateHandle(`document.querySelector("#creationMenu > creation-menu").shadowRoot.querySelector("#createButton")`);
await page.evaluate(`window.confirm = () => true`)
await createButton.evaluate(e => e.click());
await page.waitForTimeout(3000);
const creationMenu = await page.evaluateHandle(`document.querySelector("#creationMenu > creation-menu").shadowRoot.querySelector("#popup")`);
const style = await creationMenu.evaluate(e => e.style.display);
expect(style).toBe("block");
}, 10000);
});
*/
​
});
​/* eslint-enable */
66 changes: 63 additions & 3 deletions src/front-end/components/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ button {
padding: 0 9px;
border-radius: 6px;
margin-left: auto;
margin-right: 5px;
margin-bottom: 15px;
cursor: pointer;
}
Expand Down Expand Up @@ -76,7 +77,8 @@ h1 {
display: flex;
justify-content: flex-end;
margin-bottom: 17px;
margin-left: 5px;
margin-left: auto;
margin-right: 0;
}

.search-box input {
Expand All @@ -97,7 +99,7 @@ h1 {
transition: 150ms;
opacity: 90%;
}
.search-box:hover > input{
.search-box:hover > .search-input{
display: inline-block;
border-radius: 5px;
width: 260px;
Expand All @@ -109,7 +111,7 @@ h1 {
outline:none;
}

input:focus{
.search-input:focus{
display: inline-block;
border-radius: 5px;
width: 260px;
Expand All @@ -125,6 +127,64 @@ h1 {
margin-top: 15px;
opacity: 60%;
}

.search_bar {
display: flex;
align-items: center;
margin: 15px 0 17px 10px;
padding: 0 5px;
border-radius: 5px;
box-shadow: 1px 1px 9px 0 var(--card-shadow);
border-color: var(--card-shadow);
border-width: 2px;
width: calc(36.6% - 95px);
border-style: solid;
opacity: 60%;
}

.search_bar img {
display: inline-block;

opacity: 50%;
height: 21px;

vertical-align: middle;

filter: var(--icon-filter);
}

.search_bar input{

background-color: rgba(0, 0, 0, 0);
color: var(--normal-font-color);
font-size: 20px;
opacity: 90%;
height: 42px;
text-align: left;
width: calc(100% - 7px);
border: solid;
border-radius: 5px;
border-color: rgba(0, 0, 0, 0);
outline: none;
}

/* Fade in for search bar */
.search_bar:hover img {
opacity: 50%;
transition: opacity 150ms;
}

.search_bar:hover {
transition: 150ms;
opacity: 90%;

}

.search_bar input:focus .search_bar{
transition: 150ms;
opacity: 90%;
}

#header_back{
margin-left: 0;
margin-right: 5px;
Expand Down
Loading