From 1d6e344d3959e1cf6394c8d38585b3b98a0bb520 Mon Sep 17 00:00:00 2001 From: Matthew Curtis Date: Mon, 22 Jul 2024 12:20:43 -0500 Subject: [PATCH] remove Interactive Graph Cypress tests --- .../__tests__/interactive-graph.cypress.ts | 815 ------------------ 1 file changed, 815 deletions(-) delete mode 100644 packages/perseus/src/widgets/__tests__/interactive-graph.cypress.ts diff --git a/packages/perseus/src/widgets/__tests__/interactive-graph.cypress.ts b/packages/perseus/src/widgets/__tests__/interactive-graph.cypress.ts deleted file mode 100644 index 293305b425..0000000000 --- a/packages/perseus/src/widgets/__tests__/interactive-graph.cypress.ts +++ /dev/null @@ -1,815 +0,0 @@ -import renderQuestion from "../../../../../testing/render-question-with-cypress"; -import {cypressTestDependencies} from "../../../../../testing/test-dependencies"; -import * as Dependencies from "../../dependencies"; -import * as Perseus from "../../index"; -import { - questionsAndAnswers, - angleQuestion, - circleQuestion, - linearQuestion, - linearSystemQuestion, - pointQuestion, - rayQuestion, - segmentQuestion, - sinusoidQuestion, -} from "../__testdata__/interactive-graph.testdata"; - -// NOTE(jeremy): Careful. This selector _excludes_ other `.graphie` elements -// (which might be rendered by the SvgImage component if the image is itself a -// graphie image). This can lead to there being two `.graphie` matches in the -// DOM. If we use the wrong one, all of our click and drag coordinates are -// wrong. -const GRAPHIE = - ".perseus-widget-interactive-graph > .graphie-container > .graphie"; -const POINTS = - "[data-interactive-kind-for-testing=movable-point] > svg > ellipse"; -const CIRCLES = "svg > circle"; - -describe("Interactive graph", () => { - beforeEach(() => { - Dependencies.setDependencies(cypressTestDependencies); - Perseus.init({skipMathJax: true}); - }); - - describe("angle graph", () => { - it("should be correctly answerable", () => { - // Arrange - const getRenderer = renderQuestion(angleQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - // Move vertex to "A" - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: left + 160, y: top + 240}); - - // Move first ray to point B - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: left + 300, y: top + 100}); - - // Move second ray to top-left dot - cy.get(POINTS) - .eq(2) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: left + 70, y: top + 35}); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 1, - total: 1, - message: null, - }); - }); - }); - - it("should be incorrectly answerable", () => { - // Arrange - const getRenderer = renderQuestion(angleQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - // Move vertex to "A" - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: left + 0, y: top + 240}); - - // Move first ray to top-left black dot - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: left + 300, y: top + 120}); - - // Move second ray to point through B - cy.get(POINTS) - .eq(2) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: left + 70, y: top + 0}); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 0, - total: 1, - message: null, - }); - }); - }); - }); - - describe("circle graph", () => { - it("should be correctly answerable", () => { - // Arrange - const getRenderer = renderQuestion(circleQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - // Move the center point - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: left + 160, y: top + 280}); - - // Resize the circle - cy.get(CIRCLES) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: left + 160, y: top + 320}); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 1, - total: 1, - message: null, - }); - }); - }); - - it("should be incorrectly answerable", () => { - // Arrange - const getRenderer = renderQuestion(circleQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - // Move the center point - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: left + 160, y: top + 280}); - - // Resize the circle - cy.get(CIRCLES) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: left + 160, y: top + 390}); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 0, - total: 1, - message: null, - }); - }); - }); - }); - - describe("linear graph", () => { - const grid = 20; - const topOffset = 0; - - it("should be correctly answerable", () => { - // Arrange - const getRenderer = renderQuestion(linearQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (-1 + 10) * grid, - y: top + topOffset + Math.abs(1 + 10 - 20) * grid, - }); - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (0 + 10) * grid, - y: top + topOffset + Math.abs(-2 + 10 - 20) * grid, - }); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 1, - total: 1, - message: null, - }); - }); - }); - - it("should be incorrectly answerable", () => { - // Arrange - const getRenderer = renderQuestion(linearQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + grid * 1, - y: top + topOffset + grid * 1, - }); - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + grid * 1, - y: top + topOffset + grid * 19, - }); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 0, - total: 1, - message: null, - }); - }); - }); - }); - - describe("linear-system graph", () => { - const grid = 20; - - it("should be correctly answerable", () => { - // Arrange - const getRenderer = renderQuestion(linearSystemQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - // Move the to point A - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (-7 + 10) * grid, - y: top + Math.abs(7 + 10 - 20) * grid, - }); - - // Move the to point B - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (0 + 10) * grid, - y: top + Math.abs(-2 + 10 - 20) * grid, - }); - - // // Move the to point C - cy.get(POINTS) - .eq(2) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (-3 + 10) * grid, - y: top + Math.abs(-7 + 10 - 20) * grid, - }); - - // // Move the to point D - cy.get(POINTS) - .eq(3) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (7 + 10) * grid, - y: top + Math.abs(-3 + 10 - 20) * grid, - }); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 1, - total: 1, - message: null, - }); - }); - }); - - it("should be incorrectly answerable", () => { - // Arrange - const getRenderer = renderQuestion(linearSystemQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - // Move the to point A - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (-9 + 10) * grid, - y: top + Math.abs(9 + 10 - 20) * grid, - }); - - // Move the to point B - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (9 + 10) * grid, - y: top + Math.abs(9 + 10 - 20) * grid, - }); - - // // Move the to point C - cy.get(POINTS) - .eq(2) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (-9 + 10) * grid, - y: top + Math.abs(-9 + 10 - 20) * grid, - }); - - // // Move the to point D - cy.get(POINTS) - .eq(3) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (9 + 10) * grid, - y: top + Math.abs(-9 + 10 - 20) * grid, - }); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 0, - total: 1, - message: null, - }); - }); - }); - }); - - describe("point graph", () => { - const grid = 50; - - it("should be correctly answerable", () => { - // Arrange - const getRenderer = renderQuestion(pointQuestion); - - // Act - cy.get(".graphie > svg > rect") - .first() - .should("exist") - .click((0 + 4) * grid, 4 * grid) - .click((-2.5 + 4) * grid, 4 * grid) - .click((-1 + 4) * grid, 4 * grid); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 1, - total: 1, - message: null, - }); - }); - }); - - it("should be incorrectly answerable", () => { - // Arrange - const getRenderer = renderQuestion(pointQuestion); - - // Act - cy.get(GRAPHIE).then((node) => { - cy.get(".graphie > svg > rect") - .first() - .should("exist") - .click((-3 + 4) * grid, Math.abs(-3 + 4 - 8) * grid) - .click((0 + 4) * grid, Math.abs(0 + 4 - 8) * grid) - .click((3 + 4) * grid, Math.abs(3 + 4 - 8) * grid); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 0, - total: 1, - message: null, - }); - }); - }); - }); - - describe("polygon graph", () => { - const grid = 55; - - it("should be correctly answerable", () => { - /** Arrange */ - const question = questionsAndAnswers[0][0]; - const getRenderer = renderQuestion(question); - - /** Act */ - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - // We're dragging the three points to form a 3/4/5 triangle - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: 92, y: 126}); - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: 92, y: 298}); - cy.get(POINTS) - .eq(2) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: 320, y: 298}); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 1, - total: 1, - message: null, - }); - }); - }); - - it("should be incorrectly answerable", () => { - /** Arrange */ - const question = questionsAndAnswers[0][0]; - const getRenderer = renderQuestion(question); - - /** Act */ - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - // const {left, top} = node.position(); - const {left, top} = node[0].getBoundingClientRect(); - const x = left + 20; - const y = top + 20; - // If one point is off, it won't work - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: x + grid * 2, y: y}); - - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: x, y: y + grid * 3}); - - cy.get(POINTS) - .eq(2) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({x: x + grid * 4, y: y + grid * 3}); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 0, - total: 1, - message: null, - }); - }); - }); - }); - - describe("ray graph", () => { - const grid = 20; - - it("should be correctly answerable", () => { - // Arrange - const getRenderer = renderQuestion(rayQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (5 + 10) * grid, - y: top + Math.abs(3 + 10 - 20) * grid, - }); - - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (-5 + 10) * grid, - y: top + Math.abs(-5 + 10 - 20) * grid, - }); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 1, - total: 1, - message: null, - }); - }); - }); - - it("should be incorrectly answerable", () => { - // Arrange - const getRenderer = renderQuestion(rayQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - // Reversed direction - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (7 + 10) * grid, - y: top + Math.abs(-7 + 10 - 20) * grid, - }); - - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (3 + 10) * grid, - y: top + Math.abs(3 + 10 - 20) * grid, - }); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 0, - total: 1, - message: null, - }); - }); - }); - }); - - describe("segment graph", () => { - const grid = 20; - - it("should be correctly answerable", () => { - // Arrange - const getRenderer = renderQuestion(segmentQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (-7 + 10) * grid, - y: top + Math.abs(7 + 10 - 20) * grid, - }); - - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (2 + 10) * grid, - y: top + Math.abs(5 + 10 - 20) * grid, - }); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 1, - total: 1, - message: null, - }); - }); - }); - - it("should be incorrectly answerable", () => { - // Arrange - const getRenderer = renderQuestion(segmentQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (8 + 10) * grid, - y: top + Math.abs(2 + 10 - 20) * grid, - }); - - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (8 + 10) * grid, - y: top + Math.abs(-8 + 10 - 20) * grid, - }); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 0, - total: 1, - message: null, - }); - }); - }); - }); - - describe("sinusoid graph", () => { - const grid = 20; - - it("should be correctly answerable", () => { - // Arrange - const getRenderer = renderQuestion(sinusoidQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (1 + 10) * grid, - y: top + Math.abs(2 + 10 - 20) * grid, - }); - - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (1.5 + 10) * grid, - y: top + Math.abs(5 + 10 - 20) * grid, - }); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 1, - total: 1, - message: null, - }); - }); - }); - - it("should be incorrectly answerable", () => { - // Arrange - const getRenderer = renderQuestion(sinusoidQuestion); - - // Act - cy.get(GRAPHIE) - .should("exist") - .then((node) => { - const {left, top} = node[0].getBoundingClientRect(); - - cy.get(POINTS) - .eq(0) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (0 + 10) * grid, - y: top + Math.abs(0 + 10 - 20) * grid, - }); - - cy.get(POINTS) - .eq(1) - .should("exist") - // @ts-expect-error - TS2339 - Property 'dragTo' does not exist on type 'Chainable>'. - .dragTo({ - x: left + (5 + 10) * grid, - y: top + Math.abs(9 + 10 - 20) * grid, - }); - }); - - // Assert - cy.then(() => { - const state = getRenderer().guessAndScore(); - expect(state[1]).toStrictEqual({ - type: "points", - earned: 0, - total: 1, - message: null, - }); - }); - }); - }); -});