TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into feature/next-js

Browse Source
This commit is contained in:
Aarni Halinen
2021-01-15 00:44:23 +02:00
parent 32b84b8a65 998680f282
commit ce644971a2
22 changed files with 3365 additions and 1841 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2 -1
View File
@@ -1,7 +1,8 @@
.vscode/
tests/jest/__coverage__/
tests/jest/**/*.jsx
tests/testcafe/screenshots
e2e-screenshots/
# dependencies
/node_modules
/.pnp
.gitlab-ci.yml
+2 -1
View File
@@ -58,8 +58,9 @@ test:e2e:
- NEXT_PUBLIC_API_URL=https://api.dev.sik.party/api npm run test:e2e
artifacts:
paths:
- tests/testcafe/screenshots
- e2e-screenshots
expire_in: 1 week
when: on_failure
publish:dev:
stage: publish
package-lock.json
Generated
+2934 -1774
View File
File diff suppressed because it is too large Load Diff
package.json
+4 -4
View File
@@ -30,12 +30,12 @@
"test": "npm run test:e2e:verbose",
"test:e2e": "npm-run-all -p -r start-prod test:e2e:testcafe",
"test:e2e:verbose": "npm-run-all -p -r start-prod test:e2e:testcafe:verbose",
"test:e2e:testcafe": "testcafe -S -s 'tests/testcafe/screenshots' --app-init-delay 2000 chrome:headless tests/testcafe",
"test:e2e:testcafe:verbose": "testcafe -S -s 'tests/testcafe/screenshots' --app-init-delay 2000 chrome tests/testcafe"
"test:e2e:testcafe": "testcafe -S -s 'e2e-screenshots' --app-init-delay 2000 chrome:headless tests/testcafe",
"test:e2e:testcafe:verbose": "testcafe -S -s 'e2e-screenshots' --app-init-delay 2000 chrome tests/testcafe"
},
"husky": {
"hooks": {
"pre-push": "npm-run-all -s lint build test"
"pre-push": "npm run lint"
}
},
"devDependencies": {
@@ -73,7 +73,7 @@
"stylelint-config-recommended": "3.0.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.10.0",
"testcafe": "1.6.1",
"testcafe": "1.10.1",
"testcafe-react-selectors": "2.1.0",
"typescript": "3.9.5",
"typescript-plugin-styled-components": "1.4.4"
src/components/Card.tsx
+8 -26
View File
@@ -14,14 +14,6 @@ interface WrappedCardProps {
buttonOnClick?: () => void;
}
interface CardProps {
title: string;
start_time: string;
text: string;
img: JSX.Element;
button: JSX.Element;
}
const StyledCard = styled.article`
color: ${colors.black};
margin: 1rem;
@@ -73,17 +65,7 @@ const StyledCard = styled.article`
}
`;
const Card: React.FC<CardProps> = ({ title, start_time, text, img, button }) => (
<StyledCard>
{img}
<p>{start_time}</p>
<h3>{title}</h3>
<p>{text}</p>
{button}
</StyledCard>
);
const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, imageAlt, start_time, buttonOnClick }) => {
const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, imageAlt, start_time, buttonOnClick, ...props }) => {
const options = {
day: "numeric",
month: "numeric",
@@ -105,13 +87,13 @@ const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, ima
);
return (
<Card
title={title}
start_time={datetime}
text={text}
img={img}
button={button}
/>
<StyledCard {...props}>
{img}
<p>{datetime}</p>
<h3>{title}</h3>
<p>{text}</p>
{button}
</StyledCard>
);
}
src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ class QuestionList extends React.Component<QuestionListProps, QuestionListState>
const { placeholder, innerRef } = this.props;
return (
<div ref={innerRef}>
<div ref={innerRef} data-e2e="admin-signup-question">
{this.renderQuestions()}
{placeholder}
</div>
src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, on
)}
</Droppable>
</DragDropContext>
<AddQuestionButton type="button" onClick={handleNewRowClick(questions)}>
<AddQuestionButton type="button" onClick={handleNewRowClick(questions)} data-e2e="admin-signup-new-question">
<img src={AddIcon} />
New Question
</AddQuestionButton>
src/models/Event.ts
+14
View File
@@ -92,6 +92,20 @@ export async function updateEvent(data): Promise<Event> {
}
}
export async function deleteEvent(id: number) {
try {
const resp = await axios.delete(`${URL}${id}`, {
headers: {
"Authorization": getAuthHeader()
},
});
return resp.data;
} catch (err) {
console.error(err);
throw err;
}
}
export const eventFetcher = (url: string, config?: AxiosRequestConfig) => axios.get(url, config).then(res => res.data);
export const generateFetchParams = (id = "", options: Options = {}) => {
src/models/Signup.ts
+1 -1
View File
@@ -60,7 +60,7 @@ export const getSignupUUID = async (id: number, uuid: string): Promise<Signup> =
}
}
export const deleteSignup = async (id: number): Promise<Signup> => {
export const deleteSignup = async (id: number) => {
try {
const resp = await axios.delete(`${url}${id}`, {
headers: {
src/models/SignupForm.ts
+14
View File
@@ -80,6 +80,20 @@ export async function updateForm(data): Promise<SignupForm> {
}
}
export async function deleteForm(id: number) {
try {
const resp = await axios.delete(`${URL}${id}`, {
headers: {
"Authorization": getAuthHeader()
},
});
return resp.data;
} catch (err) {
console.error(err);
throw err;
}
}
export const signupFormSendEmail = async (data, id): Promise<any> => {
try {
const resp = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/signupForm/${id}/sendemail/`, data, {
src/pages/admin/events/index.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ const AdminEventPage: NextPage= () => {
</Head>
<AdminListCommon>
<h1>Events</h1>
<AddLink text="Create event" to={`${URL}/create`} />
<AddLink text="Create event" to={`${URL}/create`} data-e2e="create-event" />
{renderData(events)}
</AdminListCommon>
</>
src/pages/admin/signups/index.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ const AdminSignupPage: NextPage = () => {
</Head>
<AdminListCommon>
<h1>Sign-up forms</h1>
<AddLink text="Create signup form" to={`${URL}/create`} />
<AddLink text="Create signup form" to={`${URL}/create`} data-e2e="create-signup" />
{renderData(forms)}
</AdminListCommon>
</>
src/views/FrontPage/FrontPageView.tsx
+1
View File
@@ -71,6 +71,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
link={`/events/${event.id}`}
image={event.image || event.tags[0].icon}
buttonOnClick={noop}
data-e2e="event-card"
/>
))}
<aside>
src/views/admin/AdminCreateCommon.tsx
+1 -1
View File
@@ -76,7 +76,7 @@ const AdminCreateCommon: React.FC<AdminCreateCommonProps> = ({
<Common>
<h1>{title}</h1>
{statusMessage && (
<SuccessMsg>{statusMessage}</SuccessMsg>
<SuccessMsg data-e2e="admin-form-status-message">{statusMessage}</SuccessMsg>
)}
<FormWrapper
schema={schema}
tests/testcafe/404.test.ts
+4 -7
View File
@@ -1,11 +1,8 @@
/**
* TestCafé test fixtures.
* This file is used by TestCafé to run end-to-end tests with chrome against the site.
* Tests are grouped into fixtures and fixtures into files.
*/
import { Selector } from "testcafe";
fixture`404 page renders and functions correctly`.page("http://localhost:3000/404");
import { Selector } from "testcafe";
import { getSiteRoot } from "./utils";
fixture`404 page renders and functions correctly`.page(`${getSiteRoot()}/404`);
test("Page contains the text 404", async t => {
/**
tests/testcafe/admin/create-event.test.ts
+88
View File
@@ -0,0 +1,88 @@
import { Selector } from "testcafe";
import { getSiteRoot, getPageUrl, generateTestForm, deleteEvent, deleteForm, doLogin, generateToken, getPostRequestLogger } from "../utils";
const LOGGER = getPostRequestLogger("events/");
fixture`Admin events`.page(`${getSiteRoot()}/admin/events`)
.requestHooks(LOGGER)
.before(async (ctx) => {
const token = await generateToken();
const form = await generateTestForm(token);
ctx.formId = form.id;
})
.after(async (ctx) => {
const token = await generateToken();
const eResp = await deleteEvent(ctx.eventId, token);
await deleteForm(ctx.formId, token);
console.error(eResp);
});
test("Logged in user can create event", async t => {
const loginForm = Selector("form.admin-login-form");
await t.expect(loginForm.exists).ok();
await doLogin(t);
await t.expect(await getPageUrl() === "/admin/events").ok();
const newButton = Selector("[data-e2e=\"create-event\"]");
await t.click(newButton);
await t.expect(await getPageUrl() === "/admin/events/create").ok();
const titleFi = Selector("#rjsf_title_fi");
const titleEn = Selector("#rjsf_title_en");
const descFi = Selector("#rjsf_description_fi");
const descEn = Selector("#rjsf_description_en");
const contentFi = Selector("[data-testid=\"text-area\"]").nth(0);
const contentEn = Selector("[data-testid=\"text-area\"]").nth(1);
const locationFi = Selector("#rjsf_location_fi");
const locationEn = Selector("#rjsf_location_en");
const tagSelect = Selector("#rjsf_tags");
const signupSelect = Selector("#rjsf_signupForm");
// const tagOption = tagSelect.find("option").withExactText("Testi");
// const signupOption = signupSelect.find("option").withExactText("Testi");
// TODO: Testcafe bug https://github.com/DevExpress/testcafe/issues/5339
// https://stackoverflow.com/questions/62932588/unable-to-select-drop-down-list-in-testcafe
// so use keyboard for selection...
await t
.click(tagSelect)
.pressKey("down")
.pressKey("down")
.pressKey("space")
// .pressKey("tab");
// .click(tagOption, { modifiers: { ctrl: true } });
await t
.click(signupSelect)
.pressKey("down")
.pressKey("down")
.pressKey("space")
// .pressKey("tab");
// .click(signupOption, { modifiers: { ctrl: true } });
await t
.typeText(titleFi, "title_fi")
.typeText(descFi, "desc_fi")
.typeText(contentFi, "content_fi")
.typeText(locationFi, "location_fi")
.typeText(titleEn, "title_en")
.typeText(descEn, "desc_en")
.typeText(contentEn, "content_en")
.typeText(locationEn, "location_en");
const submit = Selector("button[type=\"submit\"]");
await t.click(submit);
const parsed = JSON.parse(LOGGER.requests[0].response.body);
t.fixtureCtx.eventId = parsed.id;
const statusMessage = Selector("[data-e2e=\"admin-form-status-message\"]");
await t
.hover(statusMessage)
.expect(
statusMessage.innerText
).eql("Event created successfully");
})
tests/testcafe/admin/create-signup.test.ts
+90
View File
@@ -0,0 +1,90 @@
import { Selector } from "testcafe";
import { getSiteRoot, getPageUrl, deleteForm, doLogin, generateToken, getPostRequestLogger } from "../utils";
const LOGGER = getPostRequestLogger("signupForm/");
fixture`Admin signup form`.page(`${getSiteRoot()}/admin/signups`)
.requestHooks(LOGGER)
.after(async (ctx) => {
const token = await generateToken();
await deleteForm(ctx.formId, token);
});
test("Logged in user can create signup", async t => {
const loginForm = Selector("form.admin-login-form");
await t.expect(loginForm.exists).ok();
await doLogin(t);
await t.expect(await getPageUrl() === "/admin/signups").ok();
const newButton = Selector("[data-e2e=\"create-signup\"]");
await t.click(newButton);
await t.expect(await getPageUrl() === "/admin/signups/create").ok();
const titleFi = Selector("#rjsf_title_fi");
const titleEn = Selector("#rjsf_title_en");
const visible = Selector("#rjsf_visible");
await t
.typeText(titleFi, "Testi Ilmo")
.typeText(titleEn, "Test Signup")
.click(visible);
const newQuestionButton = Selector("[data-e2e=\"admin-signup-new-question\"]");
const lastQuestion = () => Selector("[data-e2e=\"admin-signup-question\"]").child("div").child("div").nth(-1);
await t.click(newQuestionButton);
let question = lastQuestion();
let questionName = question.child("input");
let questionTypeSelect = question.child("select");
let requiredBox = question.child("label")
await t
.selectText(questionName)
.pressKey("delete")
.typeText(questionName, "Nimi")
.click(questionTypeSelect)
.click(questionTypeSelect.find("option").withExactText("name"))
.click(requiredBox);
await t.click(newQuestionButton);
question = lastQuestion();
questionName = question.child("input");
questionTypeSelect = question.child("select");
requiredBox = question.child("label");
await t
.selectText(questionName)
.pressKey("delete")
.typeText(questionName, "S-Posti")
.click(questionTypeSelect)
.click(questionTypeSelect.find("option").withExactText("email"))
.click(requiredBox);
await t.click(newQuestionButton);
question = lastQuestion();
questionName = question.child("input");
questionTypeSelect = question.child("select");
const radioOptions = question.child("input").nth(-1);
await t
.selectText(questionName)
.pressKey("delete")
.typeText(questionName, "Olen")
.click(questionTypeSelect)
.click(questionTypeSelect.find("option").withExactText("radiobutton"))
.typeText(radioOptions, "Nuori,Vanha,Testaaja");
const submit = Selector("button[type=\"submit\"]");
await t.click(submit);
const parsed = JSON.parse(LOGGER.requests[0].response.body);
t.fixtureCtx.formId = parsed.id;
const statusMessage = Selector("[data-e2e=\"admin-form-status-message\"]");
await t
.hover(statusMessage)
.expect(
statusMessage.innerText
).eql("Sign-up created successfully");
})
tests/testcafe/admin.test.ts → tests/testcafe/admin/login.test.ts
+5 -14
View File
@@ -1,11 +1,7 @@
/**
* TestCafé test fixtures.
* This file is used by TestCafé to run end-to-end tests with chrome against the site.
* Tests are grouped into fixtures and fixtures into files.
*/
import { Selector, ClientFunction } from "testcafe";
import { getSiteRoot, doLogin } from "../utils";
fixture`Admin login page functions correctly`.page("http://localhost:3000/admin/login");
fixture`Admin login page functions correctly`.page(`${getSiteRoot()}/admin/login`);
test("Login form exists", async t => {
/**
@@ -19,14 +15,9 @@ test("User can log in with default credentials", async t => {
/**
* Test if the user can log in with default credentials.
*/
const USERNAME = "admin";
const PASSWORD = "password123";
await doLogin(t);
await t.typeText(Selector("#login-username"), USERNAME);
await t.typeText(Selector("#login-password"), PASSWORD);
await t.click(Selector("#login-submit"));
const frontPage = Selector(`[data-e2e="admin-front-page"]`);
const frontPage = Selector("[data-e2e=\"admin-front-page\"]");
await t.expect(frontPage.exists).ok();
});
@@ -43,7 +34,7 @@ test("User can log out and is redirected to login", async t => {
await t.expect(loginForm.exists).ok();
});
test.skip("User is redirected to login when JWT token is invalid", async t => {
test("User is redirected to login when JWT token is invalid", async t => {
/**
* Test if the user is redirected to login when JWT token is invalid.
*/
tests/testcafe/index.test.ts
+3 -7
View File
@@ -1,11 +1,7 @@
/**
* TestCafé test fixtures.
* This file is used by TestCafé to run end-to-end tests with chrome against the site.
* Tests are grouped into fixtures and fixtures into files.
*/
import { Selector } from "testcafe";
import { getSiteRoot } from "./utils";
fixture`Front page renders and functions correctly`.page("http://localhost:3000");
fixture`Front page renders and functions correctly`.page(`${getSiteRoot()}`);
test("Favicon exists", async t => {
/**
@@ -21,5 +17,5 @@ test("Header contains text \"Aalto-yliopiston Sähköinsinöörikilta\"", async
*/
const header = Selector("h1");
await t.expect(header.textContent)
.contains("Aalto-yliopiston Sähköinsinöörikilta");
.contains("Aalto-yliopiston Sähköinsinöörikilta");
});
tests/testcafe/signupToEvent.test.ts
+51
View File
@@ -0,0 +1,51 @@
import { Selector } from "testcafe";
import { getSiteRoot, getPageUrl, generateTestEvent, generateTestForm, deleteEvent, deleteForm, generateToken } from "./utils";
fixture`Event signup`.page(getSiteRoot())
.before(async (ctx) => {
const token = await generateToken();
const form = await generateTestForm(token);
const event = await generateTestEvent([form.id], token);
ctx.eventId = event.id;
ctx.formId = form.id;
})
.after(async (ctx) => {
const token = await generateToken();
await deleteEvent(ctx.eventId, token);
await deleteForm(ctx.formId, token);
});
test("User signups to event from front page", async t => {
const CardSelector = Selector("[data-e2e=\"event-card\"]").withText("title_fi").nth(0);
await t
.click(CardSelector.child("a"));
let url = await getPageUrl();
await t.expect(url).match(/\/events\/\d{1,4}/, "URL isn't /events/<id>");
const SignupButton = Selector("button");
await t
.click(SignupButton);
url = await getPageUrl();
await t.expect(url).match(/\/signup\/\d{1,4}/, "URL isn't /signup/<id>");
const nameField = Selector("input").nth(0);
const emailField = Selector("input").nth(1);
const typeField = Selector("fieldset").child(-1).child("div").child("div").child("label").nth(-1);
await t
.typeText(nameField, "Testi Testeri")
.typeText(emailField, "e2e@sahkoinsinoorikilta.fi")
.click(typeField);
await t.click(Selector("button").nth(-1));
const statusMessage = Selector(".sign-up-statusmessage");
await t
.hover(statusMessage)
.expect(
statusMessage.innerText
).eql("Sign-up submitted successfully");
});
tests/testcafe/utils.ts
+137
View File
@@ -0,0 +1,137 @@
import { Selector, ClientFunction, RequestLogger } from "testcafe";
import axios from "axios";
const API_URL = "https://api.dev.sik.party/api"
export const getSiteRoot = (): string => process.env.SITE_URL || "http://localhost:3000";
// export const getPageUrl = ClientFunction(() => window.location.href.toString());
export const getPageUrl = ClientFunction(() => window.location.pathname);
export const getPostRequestLogger = (url: string) => RequestLogger({ url: `${API_URL}/${url}`, method: "post" }, {
// logResponseHeaders: true,
logResponseBody: true,
stringifyResponseBody: true
});
const openTime = new Date("1994-01-14T22:51:00+02:00");
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
const USERNAME = "admin";
const PASSWORD = "password123";
export const doLogin = async (t: TestController) => {
await t.typeText(Selector("#login-username"), USERNAME);
await t.typeText(Selector("#login-password"), PASSWORD);
await t.click(Selector("#login-submit"));
}
export async function generateToken(): Promise<string> {
const tokenUrl = `${API_URL}/api-token-auth/`;
try {
const resp = await axios.post(tokenUrl, {
username: USERNAME,
password: PASSWORD
});
return resp.data["token"];
} catch (err) {
console.error(err);
throw err;
}
}
export const generateTestForm = async (jwt: string) => (
await createForm({
"title_fi": "Testi Ilmo",
"title_en": "Test Signup",
"visible": true,
"quota": 0,
"start_time": openTime,
"end_time": tomorrow,
"email_content": "E2E Test",
"questions": [{ "id": "XS_Ox5Rry", "name": "Nimi", "type": "name", "options": [], "required": true }, { "id": "Ve02XSEEx", "name": "S-Posti", "type": "email", "options": [], "required": true }, { "id": "luMqnz5y9", "name": "Olen", "type": "radiobutton", "options": ["Nuori", "Vanha", "Testaaja"] }], "id": 14, "isOpen": true, "schema": { "type": "object", "required": ["XS_Ox5Rry", "Ve02XSEEx"], "properties": { "XS_Ox5Rry": { "type": "string", "title": "Nimi" }, "Ve02XSEEx": { "type": ["string"], "title": "S-Posti", "format": "email", "pattern": "^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$", "default": null }, "luMqnz5y9": { "type": "string", "title": "Olen", "pattern": "^Nuori$|^Vanha$|^Testaaja$", "enum": ["Nuori", "Vanha", "Testaaja"] } } }
}, jwt)
)
const formURL = `${API_URL}/signupForm/`;
export async function createForm(data, jwt: string) {
try {
const resp = await axios.post(formURL, data, {
headers: {
"Authorization": `JWT ${jwt}`,
},
});
return resp.data;
} catch (err) {
console.error(err);
throw err;
}
}
export async function deleteForm(id: string, jwt: string) {
try {
const resp = await axios.delete(`${formURL}${id}/`, {
headers: {
"Authorization": `JWT ${jwt}`
},
});
return resp.data;
} catch (err) {
console.error(err);
throw err;
}
}
export const generateTestEvent = async (formIds = [], jwt: string) => (
await createEvent({
"tags":[1],
"visible":true,
"start_time": openTime,
"end_time": tomorrow,
"title_fi":"title_fi",
"description_fi":"desc_fi",
"content_fi":"content_fi",
"location_fi":"location_fi",
"title_en":"title_en",
"description_en":"desc_en",
"content_en":"content_en",
"location_en":"location_en",
"image":null,
"signupForm": formIds,
"signup_id": formIds,
"tag_id":[1]
}, jwt)
)
const eventURL = `${API_URL}/events/`;
export async function createEvent(data, jwt: string) {
try {
const resp = await axios.post(eventURL, data, {
headers: {
"Authorization": `JWT ${jwt}`,
},
});
return resp.data;
} catch (err) {
console.error(err);
throw err;
}
}
export async function deleteEvent(id: string, jwt: string) {
try {
const resp = await axios.delete(`${eventURL}${id}/`, {
headers: {
"Authorization": `JWT ${jwt}`
},
});
return resp.data;
} catch (err) {
console.error(err);
throw err;
}
}
tsconfig.json
+2 -1
View File
@@ -54,7 +54,8 @@
},
"include": [
"./src/**/*",
"./types/**/*"
"./types/**/*",
"./tests/testcafe/**/*"
],
"exclude": [
"node_modules"