Skip to content

Table element refactor #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hheight wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Table element refactor #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1f51f94
receive table data from custom event
hheight Jun 10, 2024
03ec6ca
send table-loaded custom event
hheight Jun 10, 2024
76d7b71
Revert "send table-loaded custom event"
hheight Jun 10, 2024
94d484c
Merge branch 'main' into os-table-refactor
hheight Sep 27, 2024
75c8a0b
listen to initialized event
hheight Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
354 changes: 36 additions & 318 deletions cypress/e2e/table.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
context("table element", function() {
describe("when element have data-os-element=loop and data-os-view attributes", () => {
describe("when element have data-os-element=loop", () => {
beforeEach(() => {
cy.visit("/").then(() => {
cy.request("/").then((response) => {
Expand All @@ -19,67 +19,44 @@ context("table element", function() {
});
});

it("calls api/v1/response_views/view_uuid/items", function() {
cy.intercept(
"GET",
"**/api/v1/response_views/view_uuid/items",
{
data: [],
},
).as("responseViewsItems");

cy.visit("/");

cy.wait("@responseViewsItems").then((interceptor) => {
expect(interceptor.request.headers["workspace-id"]).to.equal("1");
expect(interceptor.request.url).to.match(
/response_views\/view_uuid\/items/,
);
});
});

describe("when response view have items", () => {
describe("when initialized event has been triggered", () => {
it("renders table with data", function() {
cy.intercept(
"GET",
"**/api/v1/response_views/view_uuid/items",
{
data: [
[
{
"columnId": 1,
"uuid": "column_uuid_1_1",
"name": "Name",
"value": "Mohamed Salah",
},
{
"columnId": 2,
"uuid": "column_uuid_1_2",
"name": "City",
"value": "Zhytomyr",
},
],
[
{
"columnId": 1,
"uuid": "column_uuid_1_1",
"name": "Name",
"value": "Lewis Hamilton",
},
{
"columnId": 2,
"uuid": "column_uuid_1_2",
"name": "City",
"value": "Brovary",
},
],
],
},
).as("responseViewsItems");
const data = [
[
{
"columnId": 1,
"uuid": "column_uuid_1_1",
"name": "Name",
"value": "Mohamed Salah",
},
{
"columnId": 2,
"uuid": "column_uuid_1_2",
"name": "City",
"value": "Zhytomyr",
},
],
[
{
"columnId": 1,
"uuid": "column_uuid_1_1",
"name": "Name",
"value": "Lewis Hamilton",
},
{
"columnId": 2,
"uuid": "column_uuid_1_2",
"name": "City",
"value": "Brovary",
},
],
];

cy.visit("/");

cy.wait("@responseViewsItems").then(() => {
cy.get("os-table").trigger("initialized", {
detail: { value: data },
force: true,
}).then(() => {
cy.get("os-table").find("table").should("exist");
cy.get("os-table").find("thead").should("exist");
cy.get("os-table").find("tbody").should("exist");
Expand Down Expand Up @@ -119,265 +96,6 @@ context("table element", function() {
});
});
});

it("renders empty element with os-hidden class", function() {
cy.intercept(
"GET",
"**/api/v1/response_views/view_uuid/items",
{
data: [
[
{
"columnId": 1,
"uuid": "column_uuid_1_1",
"name": "Name",
"value": "Mohamed Salah",
},
],
],
},
).as("responseViewsItems");

cy.visit("/");

cy.wait("@responseViewsItems").then(() => {
cy.get("[data-os-element=empty]").should("have.class", "os-hidden");
cy.get("[data-os-element=empty]").should(
"have.attr",
"data-os-for",
"view_uuid",
);
cy.get("[data-os-element=empty]").should(
"have.text",
"No data found",
);
});
});

it("dispatches a table-success event", function() {
const data = [
[
{
columnId: 1,
uuid: "column_uuid_1_1",
name: "Name",
value: "Mohamed Salah",
},
],
];
cy.intercept(
"GET",
"**/api/v1/response_views/view_uuid/items",
{ data },
).as("responseViewsItems");

cy.visit("/");

cy.get("os-table")
.then(($field) => {
cy.spy($field[0], "dispatchEvent").as("dispatchEventSpy");
});
cy.wait("@responseViewsItems").then(() => {
cy.get("@dispatchEventSpy").should((spy) => {
const { detail, type } = spy.args[0][0];
expect(type).to.equal("table-success");
expect(detail.data).to.deep.equal(data);
expect(detail.responseViewUuid).to.equal("view_uuid");
});
});
});

it("dispatches a table-loading event with value: false", function() {
cy.intercept(
"GET",
"**/api/v1/response_views/view_uuid/items",
{
data: [
[
{
"columnId": 1,
"uuid": "column_uuid_1_1",
"name": "Name",
"value": "Mohamed Salah",
},
],
],
},
).as("responseViewsItems");
cy.visit("/");

cy.get("os-table")
.then(($field) => {
cy.spy($field[0], "dispatchEvent").as("dispatchEventSpy");
});
cy.wait("@responseViewsItems").then(() => {
cy.get("@dispatchEventSpy").should((spy) => {
const { detail, type } = spy.args[1][0];
expect(type).to.equal("table-loading");
expect(detail.value).to.equal(false);
});
});
});
});

describe("when response view does not have items", () => {
it("removes os-hidden class from an empty element", function() {
cy.intercept(
"GET",
"**/api/v1/response_views/view_uuid/items",
{
data: [],
},
).as("responseViewsItems");

cy.visit("/");

cy.wait("@responseViewsItems").then(() => {
cy.get("[data-os-element=empty]").should(
"not.have.class",
"os-hidden",
);
cy.get("[data-os-element=empty]").should("be.visible");
});
});

it("dispatches a table-empty event", function() {
cy.intercept(
"GET",
"**/api/v1/response_views/view_uuid/items",
{ data: [] },
).as("responseViewsItems");

cy.visit("/");

cy.get("os-table")
.then(($field) => {
cy.spy($field[0], "dispatchEvent").as("dispatchEventSpy");
});
cy.wait("@responseViewsItems").then(() => {
cy.get("@dispatchEventSpy").should((spy) => {
const { detail, type } = spy.args[0][0];
expect(type).to.equal("table-empty");
expect(detail.responseViewUuid).to.equal("view_uuid");
});
});
});
});

describe("when items request does not succeeded", () => {
it("dispatches a table-error event", function() {
cy.intercept(
"GET",
"**/api/v1/response_views/view_uuid/items",
{ forceNetworkError: true },
).as(
"itemsError",
);
cy.visit("/");

cy.get("os-table")
.then(($field) => {
cy.spy($field[0], "dispatchEvent").as("dispatchEventSpy");
});
cy.wait("@itemsError").then(() => {
cy.get("@dispatchEventSpy").should((spy) => {
const { detail, type } = spy.args[0][0];
expect(type).to.equal("table-error");
expect(detail.error.message).to.equal("Failed to fetch");
});
});
});

it("dispatches a table-loading event with value: false", function() {
cy.intercept(
"GET",
"**/api/v1/response_views/view_uuid/items",
{ forceNetworkError: true },
).as(
"itemsError",
);
cy.visit("/");

cy.get("os-table")
.then(($field) => {
cy.spy($field[0], "dispatchEvent").as("dispatchEventSpy");
});
cy.wait("@itemsError").then(() => {
cy.get("@dispatchEventSpy").should((spy) => {
const { detail, type } = spy.args[1][0];
expect(type).to.equal("table-loading");
expect(detail.value).to.equal(false);
});
});
});
});
});

describe("when element does not have data-os-element=loop attribute", () => {
beforeEach(() => {
cy.visit("/").then(() => {
cy.request("/").then((response) => {
const body = `
<body>
<os-table data-os-view="view_uuid"></os-table>
</body>
`;

const modifiedHtml = response.body.replace(
/<body>[\s\S]*<\/body>/,
body,
);

cy.intercept("/", modifiedHtml);
});
});
});

it("warns user in console", function() {
cy.visit("/", {
onBeforeLoad(win) {
cy.stub(win.console, "warn").as("consoleWarn");
},
});

cy.get("@consoleWarn").should(
"be.calledWith",
'data-os-element="loop" is not set for <os-table> element',
);
});
});

describe("when element does not have data-os-view attribute", () => {
beforeEach(() => {
cy.visit("/").then(() => {
cy.request("/").then((response) => {
const body = `
<body>
<os-table data-os-element="loop"></os-table>
</body>
`;

const modifiedHtml = response.body.replace(
/<body>[\s\S]*<\/body>/,
body,
);

cy.intercept("/", modifiedHtml);
});
});
});

it("warns user in console", function() {
cy.visit("/", {
onBeforeLoad(win) {
cy.stub(win.console, "warn").as("consoleWarn");
},
});

cy.get("@consoleWarn").should(
"be.calledWith",
"data-os-view is not set for <os-table> element",
);
});
});
});
Loading