Skip to content

Commit

Permalink
Merge pull request #21 from wallet-dm/tomm/fix-attachements
Browse files Browse the repository at this point in the history 
fix: attatchments and upgrade @xmtp/react-sdk
  • Loading branch information
@MuckT
MuckT authored Apr 9, 2024
2 parents d47d737 + 2cc321a commit 35057d8
Show file tree
Hide file tree
Showing 10 changed files with 354 additions and 367 deletions.
142 changes: 85 additions & 57 deletions cypress/e2e/connect_disconnect.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,101 @@
import { checkElement, startDemoEnv } from "../test_utils";

describe(
"Connected Test Cases",
const testCases = [
{
retries: {
runMode: 2,
openMode: 1,
},
size: "macbook-16",
expectedLeftPanel: [
"avatar",
"messages-icon",
"collapse-icon",
"icon",
"conversation-list-header",
"empty-message-icon",
"empty-message-header",
"empty-message-subheader",
"empty-message-cta",
],
expectedRightPanel: [
"learn-more-header",
"get-started-header",
"message-section-link",
"message-icon",
"community-section-link",
"community-icon",
"docs-section-link",
"docs-icon",
],
},
() => {
beforeEach(() => {
startDemoEnv();
// In connected flow, conversation list header should render before any tests run
checkElement("conversation-list-header");
});
{
size: "iphone-x",
expectedLeftPanel: [
"avatar",
"messages-icon",
"collapse-icon",
"icon",
"conversation-list-header",
"empty-message-icon",
"empty-message-header",
"empty-message-subheader",
"empty-message-cta",
],
expectedRightPanel: [],
},
] as {
size: Cypress.ViewportPreset;
expectedLeftPanel: string[];
expectedRightPanel: string[];
}[];

it("Shows expected left panel fields when logged in with a connected wallet and no existing messages", () => {
const elements = [
"avatar",
"messages-icon",
"collapse-icon",
"icon",
"conversation-list-header",
"empty-message-icon",
"empty-message-header",
"empty-message-subheader",
"empty-message-cta",
];
elements.forEach((element) => {
checkElement(element);
testCases.forEach(({ size, expectedLeftPanel, expectedRightPanel }) => {
describe(
`Connected Test Cases - ${size}`,
{
retries: {
runMode: 2,
openMode: 1,
},
},
() => {
beforeEach(() => {
cy.viewport(size);
startDemoEnv();
// In connected flow, conversation list header should render before any tests run
checkElement("conversation-list-header");
});
});

it("Shows expected right panel fields when logged in with a connected wallet and no existing messages", () => {
const elements = [
"learn-more-header",
"get-started-header",
"message-section-link",
"message-icon",
"community-section-link",
"community-icon",
"docs-section-link",
"docs-icon",
];
elements.forEach((element) => {
checkElement(element);
it("Shows expected left panel fields when logged in with a connected wallet and no existing messages", () => {
expectedLeftPanel.forEach((element) => {
checkElement(element);
});
});
});

it("Shows expected fields when expanding side nav while connected", () => {
cy.get(`[data-testid="collapse-icon"]`).click();
it("Shows expected right panel fields when logged in with a connected wallet and no existing messages", () => {
expectedRightPanel.forEach((element) => {
checkElement(element);
});
});

const elements = ["Messages", "Collapse", "wallet-address"];
it("Shows expected fields when expanding side nav while connected", () => {
cy.get(`[data-testid="collapse-icon"]`).click();

elements.forEach((element) => {
checkElement(element);
});
const elements = ["Messages", "Collapse", "wallet-address"];

cy.get(`[data-testid="icon"]`).click();
cy.get(`[data-testid="disconnect-wallet-cta"]`).click();
});
elements.forEach((element) => {
checkElement(element);
});

it("Opens new message view when clicking the CTA from left panel", () => {
// Need to break up the click chain for GitHub actions
cy.get(`[data-testid=empty-message-cta]`).click();
checkElement("message-input");
});
},
);
cy.get(`[data-testid="icon"]`).click();
cy.get(`[data-testid="disconnect-wallet-cta"]`).click();
});

it("Opens new message view when clicking the CTA from left panel", () => {
// Need to break up the click chain for GitHub actions
cy.get(`[data-testid=empty-message-cta]`).click();
checkElement("message-input");
});
},
);
});

describe("Disconnected Test Cases", () => {
beforeEach(() => {
Expand Down
106 changes: 57 additions & 49 deletions cypress/e2e/messaging.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,62 +4,70 @@ import {
checkElement,
checkMissingElement,
TIMEOUT,
sizes,
} from "../test_utils";

describe(
"Messaging Test Cases",
{
retries: {
runMode: 3,
openMode: 2,
sizes.forEach((size) => {
describe(
`Messaging Test Cases ${size}`,
{
retries: {
runMode: 3,
openMode: 2,
},
},
},
() => {
beforeEach(() => {
startDemoEnv();
// In connected flow, conversation list header should render before any tests run
checkElement("conversation-list-header");
});
const testUserWithXmtpAccount =
"0x78BfD39428C32Be149892d64bEE6C6f90aedEec1";
() => {
beforeEach(() => {
cy.viewport(size);
startDemoEnv();
// In connected flow, conversation list header should render before any tests run
checkElement("conversation-list-header");
});
const testUserWithXmtpAccount =
"0x78BfD39428C32Be149892d64bEE6C6f90aedEec1";
const testUserWithXmtpAccountDisplay =
size === "macbook-16"
? "0x78BfD39428C32Be149892d64bEE6C6f90aedEec1"
: "0x78Bf...Eec1";

const shortMessage = "hello";
const longMessage =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et ultrices neque ornare aenean euismod elementum. Etiam tempor orci eu lobortis elementum nibh. Tincidunt ornare massa eget egestas purus. Purus sit amet volutpat consequat mauris. Arcu felis bibendum ut tristique et egestas quis ipsum suspendisse. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Neque ornare aenean euismod elementum nisi quis eleifend. Amet consectetur adipiscing elit pellentesque habitant morbi. Malesuada fames ac turpis egestas sed tempus urna. Morbi quis commodo odio aenean sed adipiscing diam donec. Id aliquet risus feugiat in. Massa sed elementum tempus egestas sed. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Massa id neque aliquam vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in aliquam. Enim sed faucibus turpis in eu mi bibendum neque egestas. Lectus urna duis convallis convallis tellus id. Vitae semper quis lectus nulla at.";
const shortMessage = "hello";
const longMessage =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et ultrices neque ornare aenean euismod elementum. Etiam tempor orci eu lobortis elementum nibh. Tincidunt ornare massa eget egestas purus. Purus sit amet volutpat consequat mauris. Arcu felis bibendum ut tristique et egestas quis ipsum suspendisse. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Neque ornare aenean euismod elementum nisi quis eleifend. Amet consectetur adipiscing elit pellentesque habitant morbi. Malesuada fames ac turpis egestas sed tempus urna. Morbi quis commodo odio aenean sed adipiscing diam donec. Id aliquet risus feugiat in. Massa sed elementum tempus egestas sed. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Massa id neque aliquam vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in aliquam. Enim sed faucibus turpis in eu mi bibendum neque egestas. Lectus urna duis convallis convallis tellus id. Vitae semper quis lectus nulla at.";

it("Can send a new message to user in XMTP network", () => {
sendAndEnterMessage(testUserWithXmtpAccount, shortMessage, 1);
});
it("Can send a new message to user in XMTP network", () => {
sendAndEnterMessage(testUserWithXmtpAccount, shortMessage, 1);
});

it("Can send a long message to user in XMTP network", () => {
sendAndEnterMessage(testUserWithXmtpAccount, longMessage, 1);
});
it("Can send a long message to user in XMTP network", () => {
sendAndEnterMessage(testUserWithXmtpAccount, longMessage, 1);
});

it("Can send multiple messages to user in XMTP network", () => {
sendAndEnterMessage(testUserWithXmtpAccount, shortMessage, 3);
});
it("Can send multiple messages to user in XMTP network", () => {
sendAndEnterMessage(testUserWithXmtpAccount, shortMessage, 3);
});

it("Displays messages in the correct order", () => {
sendAndEnterMessage(testUserWithXmtpAccount, shortMessage, 3, true);
});
it("Displays messages in the correct order", () => {
sendAndEnterMessage(testUserWithXmtpAccount, shortMessage, 3, true);
});

it("Does not allow address to be edited", () => {
sendAndEnterMessage(testUserWithXmtpAccount, shortMessage, 1);
checkMissingElement("message-to-input");
checkElement("recipient-wallet-address").should(
"have.text",
testUserWithXmtpAccount,
);
});
it("Does not allow address to be edited", () => {
sendAndEnterMessage(testUserWithXmtpAccount, shortMessage, 1);
checkMissingElement("message-to-input");
checkElement("recipient-wallet-address").should(
"have.text",
testUserWithXmtpAccountDisplay,
);
});

it("Renders error message when sending message to existing user outside of XMTP network", () => {
checkElement("empty-message-cta");
cy.get(`[data-testid=empty-message-cta]`).click({ timeout: TIMEOUT });
checkElement("message-to-input").type("invalidUser", { delay: 1 });
cy.get(`[data-testid=message-to-subtext]`, { timeout: TIMEOUT }).should(
"have.text",
"Please enter a valid 0x wallet, ENS, or UNS address",
);
});
},
);
it("Renders error message when sending message to existing user outside of XMTP network", () => {
checkElement("empty-message-cta");
cy.get(`[data-testid=empty-message-cta]`).click({ timeout: TIMEOUT });
checkElement("message-to-input").type("invalidUser", { delay: 1 });
cy.get(`[data-testid=message-to-subtext]`, { timeout: TIMEOUT }).should(
"have.text",
"Please enter a valid 0x wallet, ENS, or UNS address",
);
});
},
);
});
Loading

0 comments on commit 35057d8

Please sign in to comment.