course_creation.cy.js

describe("Course Creation", () => {
	it("creates a new course", () => {
		cy.login();
		cy.wait(500);
		cy.visit("/lms/courses");

		// Close onboarding modal
		cy.closeOnboardingModal();

		// Create a course
		cy.get("button").contains("Create").click();
		cy.contains('[role="menuitem"]', "New Course").click();
		cy.wait(500);

		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.ProseMirror").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.contains("Course Image")
			.should("exist")
			.parent()
			.find('input[type="file"]')
			.attachFile("profile.png", { force: true });

		/* cy.fixture("profile.png", "base64").then((fileContent) => {
			expect(fileContent).to.exist;
			cy.get("div")
				.contains("Course Image")
				.parent()
				.children('input[type="file"]')
				.attachFile({
					fileContent,
					fileName: "profile.png",
					mimeType: "image/png",
					encoding: "base64",
				});
		}); */

		/* Instructor */
		cy.get("label")
			.contains("Instructors")
			.parent()
			.within(() => {
				cy.get("input").click().type("frappe");
				cy.wait(500);
				cy.get("input")
					.invoke("attr", "aria-controls")
					.as("instructor_list_id");
			});
		cy.get("@instructor_list_id").then((instructor_list_id) => {
			cy.get(`[id^=${instructor_list_id}`)
				.should("be.visible")
				.within(() => {
					cy.get("[id^=headlessui-combobox-option-").first().click();
				});
		});

		cy.button("Save").last().click();
		cy.closeOnboardingModal();
		// Edit Course Details
		cy.wait(500);
		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("Category")
			.parent()
			.within(() => {
				cy.get("button").click();
			});
		cy.get("div").contains("Business").click();

		cy.get("label").contains("Published").click();
		cy.get("label").contains("Published On").type("2021-01-01");
		cy.button("Save").click();

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

		cy.wait(500);
		cy.get("[data-dismissable-layer]")
			.should("be.visible")
			.within(() => {
				cy.get("label").contains("Title").type("Test Chapter");
				cy.button("Create").click();
			});

		// Add Lesson
		cy.wait(500);
		cy.button("Add Lesson").click();
		cy.wait(500);
		cy.url().should("include", "/learn/1-1/edit");
		cy.get("label").contains("Title").type("Test Lesson");
		cy.get("#content .ce-block").type(
			"{enter}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.button("Save").click();

		// View Course
		cy.wait(500);
		cy.visit("/lms/courses");
		cy.closeOnboardingModal();

		cy.url().should("include", "/lms/courses");
		cy.get("div")
			.contains("Test Course")
			.closest("a")
			.within(() => {
				cy.get("div").contains(
					"Test Course Short Introduction to test the UI"
				);
				cy.get(".bg-cover")
					.invoke("css", "background-image")
					.should("include", "/files/profile");
			});
		cy.get("div").contains("Test Course").closest("a").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(500);

		// View Lesson
		cy.url().should("include", "/learn/1-1");
		cy.get("div").contains("Test Lesson");

		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."
		);

		// Add Discussion
		cy.button("New Question").click();
		cy.wait(500);
		cy.get("[data-dismissable-layer]").within(() => {
			cy.get("label").contains("Title").type("Test Discussion");
			cy.get("div.ProseMirror").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.ProseMirror").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."
		);

		// Delete Course
		cy.get("div").contains("Test Course").click();
		cy.get("button").contains("Settings").click();
		cy.get("header").within(() => {
			cy.get("svg.lucide.lucide-ellipsis-icon").click();
		});
		cy.get("div[role=menu]").within(() => {
			cy.contains('[role="menuitem"]', "Delete").click();
		});
		cy.get("span").contains("Delete").click();
		cy.wait(500);
		cy.url().should("include", "/lms/courses");
		cy.get("div").contains("Test Course").should("not.exist");
	});
});