react-fiber-experiments/cypress/integration/suspense-regular-rendering.spec.js at master · topheman/react-fiber-experiments · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
const VISIT_URL = "/suspense/regular-rendering";

describe("/suspense/regular-rendering", () => {
  ["slowNetwork", "fastNetwork", "slowEndPoint"].forEach(mode => {
    describe(mode, () => {
      before(() => {
        cy.visit(VISIT_URL); // only reload at the beginning of the following "it"s
        // set correct network mode
        cy.slideNetworkSlider(mode);
        cy.url().should("match", new RegExp("/suspense/regular-rendering$"));
      });
      beforeEach(() => {
        cy.getByTestId("link-to-regular-rendering").click();
        cy.url().should("match", new RegExp("/suspense/regular-rendering$"));
      });
      it("should show blue spinner on first load", () => {
        cy.getByTestId("link-to-course-react").click();
        cy.url().should("contain", "/suspense/regular-rendering/course/react");
        cy.getByTestId("lazyload-spinner").should("be.visible");
        cy.get("[data-testid=lazyload-spinner]").should("not.exist");
      });
      it("should NOT show blue spinner on subsequent loads", () => {
        cy.getByTestId("link-to-course-nodejs").click();
        cy.url().should("contain", "/suspense/regular-rendering/course/nodejs");
        cy.get("[data-testid=lazyload-spinner]").should("not.exist");
      });
      it("should show course infos red spinner", () => {
        cy.getByTestId("link-to-course-webpack").click();
        cy.url().should(
          "contain",
          "/suspense/regular-rendering/course/webpack"
        );
        cy.getByTestId("course-infos-spinner").should("be.visible");
        cy.get("[data-testid=course-infos-spinner]").should("not.exist");
      });
      it("should show course infos result", () => {
        cy.getByTestId("link-to-course-docker").click();
        cy.url().should("contain", "/suspense/regular-rendering/course/docker");
        cy.getByTestId("course-infos").should("be.visible");
      });
      if (mode === "slowEndPoint") {
        it(`[${mode}] should show next lesson spinner`, () => {
          cy.slideNetworkSlider(mode);
          cy.getByTestId("link-to-course-react").click();
          cy.url().should(
            "contain",
            "/suspense/regular-rendering/course/react"
          );
          cy.get("[data-testid=next-lesson-spinner]").should("be.visible");
          cy.get("[data-testid=next-lesson-spinner]").should("not.exist");
        });
      }
      it(`[${mode}] should show next lesson result`, () => {
        cy.slideNetworkSlider(mode);
        cy.getByTestId("link-to-course-nodejs").click();
        cy.url().should("contain", "/suspense/regular-rendering/course/nodejs");
        cy.get("[data-testid=next-lesson]").should("be.visible");
      });
    });
  });
  describe("Error handling", () => {
    it("should show retry button when illegal courseId provided", () => {
      cy.visit(`${VISIT_URL}/course/badCourseId`);
      cy.url().should(
        "match",
        new RegExp("/suspense/regular-rendering/course/badCourseId$")
      );
      cy.get("[data-testid=course-infos-error]").should("be.visible");
    });
    it("should reload when click on retry", () => {
      cy.visit(`${VISIT_URL}/course/badCourseId`);
      cy.url().should(
        "match",
        new RegExp("/suspense/regular-rendering/course/badCourseId$")
      );
      cy.get("[data-testid=course-infos-error] button").click();
      cy.get("[data-testid=course-infos-spinner]").should("be.visible");
      cy.get("[data-testid=course-infos-spinner]").should("not.exist");
      cy.get("[data-testid=course-infos-error]").should("be.visible");
    });
  });
  describe("UI", () => {
    beforeEach(() => {
      cy.visit(VISIT_URL);
      cy.url().should("match", new RegExp("/suspense/regular-rendering$"));
    });
    it('should visit "parent folder" via relative link ".."', () => {
      cy.url().should("match", new RegExp("/suspense/regular-rendering$"));
      cy.getByTestId("link-to-suspense").click();
      cy.url().should("match", new RegExp("/suspense$"));
    });
    it("should return to this page on back button ⬅️ of course result", () => {
      cy.url().should("match", new RegExp("/suspense/regular-rendering$"));
      cy.getByTestId("link-to-course-react").click();
      cy.url().should(
        "match",
        new RegExp("/suspense/regular-rendering/course/react$")
      );
      cy.getByTestId("back-button").click();
      cy.url().should("match", new RegExp("/suspense/regular-rendering$"));
    });
    it("should reload course result when click on 🔄", () => {
      cy.url().should("match", new RegExp("/suspense/regular-rendering$"));
      cy.getByTestId("link-to-course-nodejs").click();
      cy.url().should(
        "match",
        new RegExp("/suspense/regular-rendering/course/nodejs$")
      );
      cy.getByTestId("reload-button").click();
      cy.url().should(
        "match",
        new RegExp("/suspense/regular-rendering/course/nodejs$")
      );
      cy.getByTestId("course-infos-spinner").should("be.visible");
      cy.get("[data-testid=course-infos-spinner]").should("not.exist");
    });
  });
});