lms/cypress/e2e/course_creation.cy.js

describe("Course Creation", () => {
	it("creates a new course", () => {
		cy.login();
		cy.wait(1000);

		cy.visit("/lms/courses");

		// Create a course
		cy.get("a").contains("New Course").click();
		cy.wait(1000);
		cy.url().should("include", "/courses/new/edit");

		cy.get("label").contains("Title").type("Test Course");
		cy.get("label")
			.contains("Short Introduction")
			.type("Test Course Short Introduction to test the UI");
		cy.get("div[contenteditable=true").invoke(
			"text",
			"Test Course Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
		);

		cy.fixture("profile.png", "base64").then((fileContent) => {
			cy.get('input[type="file"]').attachFile({
				fileContent,
				fileName: "profile.png",
				mimeType: "image/png",
				encoding: "base64",
			});
		});

		cy.get("label")
			.contains("Preview Video")
			.type("https://www.youtube.com/embed/-LPmw2Znl2c");
		cy.get("[id=tags]").type("Learning{enter}Frappe{enter}ERPNext{enter}");
		cy.get("label").contains("Published").click();
		cy.get("label").contains("Published On").type("2021-01-01");
		cy.button("Save").click();

		// Add Chapter
		cy.wait(1000);
		cy.button("Add Chapter").click();

		cy.wait(1000);
		cy.get("[id^=headlessui-dialog-panel-")
			.should("be.visible")
			.within(() => {
				cy.get("label").contains("Title").type("Test Chapter");
				cy.button("Add Chapter").click();
			});

		// Add Lesson
		cy.wait(1000);
		cy.button("Add Lesson").click();
		cy.wait(1000);
		cy.url().should("include", "/learn/1-1/edit");
		cy.wait(1000);

		cy.get("label").contains("Title").type("Test Lesson");
		/* cy.get("#content .ce-block")
			.click()
			.invoke("text", "https://www.youtube.com/watch?v=GoDtyItReto"); */
		/* cy.get("#content .ce-block")
			.click()
			.paste("https://www.youtube.com/watch?v=GoDtyItReto"); */

		cy.fixture("Youtube.mov", "base64").then((fileContent) => {
			cy.get('input[type="file"]').attachFile({
				fileContent,
				fileName: "Youtube.mov",
				mimeType: "image/png",
				encoding: "base64",
			});
		});
		cy.wait(1000);
		cy.get("#content .ce-block").type(
			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now. {enter}"
		);
		cy.button("Save").click();

		// View Course
		cy.wait(1000);
		cy.visit("/lms");
		cy.wait(500);
		cy.url().should("include", "/lms/courses");
		cy.get(".grid a:first").within(() => {
			cy.get("div").contains("Test Course");
			cy.get("div").contains(
				"Test Course Short Introduction to test the UI"
			);
			cy.get(".course-image").should(
				"have.css",
				"background-image",
				'url("/files/profile.png")'
			);
		});
		cy.get(".grid a:first").click();
		cy.url().should("include", "/lms/courses/test-course");
		cy.get("div").contains("Test Course");
		cy.get("div").contains("Test Course Short Introduction to test the UI");
		cy.get("div").contains("Learning");
		cy.get("div").contains("Frappe");
		cy.get("div").contains("ERPNext");
		cy.get("iframe").should(
			"have.attr",
			"src",
			"https://www.youtube.com/embed/-LPmw2Znl2c"
		);

		// View Chapter
		cy.get("div").contains("Test Chapter");
		cy.get("[id^=headlessui-disclosure-panel-").within(() => {
			cy.get("div").contains("Test Lesson").click();
		});
		cy.wait(1000);

		// View Lesson
		cy.url().should("include", "/learn/1-1");
		cy.get("div").contains("Test Lesson");
		cy.get("div").contains("Test User");
		cy.get("div").contains(
			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now. "
		);
		cy.get("video")
			.should("be.visible")
			.children("source")
			.should("have.attr", "src", "/files/Youtube.mov");

		// Add Discussion
		cy.button("New Question").click();
		cy.wait(500);
		cy.get("[id^=headlessui-dialog-panel-").within(() => {
			cy.get("label").contains("Title").type("Test Discussion");
			cy.get("div[contenteditable=true").invoke(
				"text",
				"This is a test discussion. This will check if the UI is working properly."
			);
			cy.button("Post").click();
		});

		// View Discussion
		cy.wait(500);
		cy.get("div").contains("Test Discussion").click();
		cy.get("div[contenteditable=true").invoke(
			"text",
			"This is a test comment. This will check if the UI is working properly."
		);

		cy.get("div").contains(
			"This is a test comment. This will check if the UI is working properly."
		);
	});
});