diff --git a/cypress/integration/home/raid.spec.js b/cypress/integration/home/raid.spec.js new file mode 100644 index 0000000..113a746 --- /dev/null +++ b/cypress/integration/home/raid.spec.js @@ -0,0 +1,51 @@ +import { streamsRegex, tagsRegex, vodsRegex } from "../../consts/urlRegexes"; + +describe("Home > Raid", () => { + it("Copy raid command to clipboard", () => { + const COPIED_TEXT = "/raid emersongarrido"; + + cy.intercept(streamsRegex, { + statusCode: 200, + fixture: "streams", + }).as("streams"); + cy.intercept(tagsRegex, { + statusCode: 200, + fixture: "tags", + }).as("tags"); + cy.intercept(vodsRegex, { + statusCode: 200, + fixture: "vods", + }).as("vods"); + + // use the Chrome debugger protocol to grant the current browser window + // access to the clipboard from the current origin + // https://chromedevtools.github.io/devtools-protocol/tot/Browser/#method-grantPermissions + // We are using cy.wrap to wait for the promise returned + // from the Cypress.automation call, so the test continues + // after the clipboard permission has been granted + cy.wrap( + Cypress.automation("remote:debugger:protocol", { + command: "Browser.grantPermissions", + params: { + permissions: ["clipboardReadWrite", "clipboardSanitizedWrite"], + origin: window.location.origin, + }, + }), + ); + + cy.visit(Cypress.env("hostUrl")) + .its("navigator.permissions") + .invoke("query", { name: "clipboard-read" }) + .its("state") + .should("equal", "granted"); + + cy.wait(["@streams", "@tags", "@vods"]); + + cy.getByData("raid-button").first().click(); + cy.window().its("navigator.clipboard").invoke("readText").should("equal", COPIED_TEXT); + + cy.get(".chakra-alert").within(() => { + cy.get(".chakra-alert__title").contains(`Comando "${COPIED_TEXT}" copiado!`); + }); + }); +}); diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx index 82959d3..37279b9 100644 --- a/src/components/ui/Card.tsx +++ b/src/components/ui/Card.tsx @@ -5,14 +5,17 @@ import { ViewIcon } from "@chakra-ui/icons"; import { FaDiscord, FaGithub, FaInstagram, FaLinkedin, FaTwitter } from "react-icons/fa"; import { Box, + Button, HStack, Icon, Image, Link, + Spacer, Tag, TagLabel, TagLeftIcon, Text, + useToast, VisuallyHidden, } from "@chakra-ui/react"; @@ -35,9 +38,34 @@ export default function Card({ handleChannelToMosaic = () => null, "data-test": dataTest, }: Props) { + const toast = useToast(); + const [showPreview, setShowPreview] = useState(false); const [isSelected, setIsSelected] = useState(false); + const copyToClipboard = async (event: React.MouseEvent) => { + event.preventDefault(); + + try { + await navigator.clipboard.writeText(`/raid ${channel.user_login}`); + toast({ + title: `Comando "/raid ${channel.user_login}" copiado!`, + status: "success", + isClosable: true, + position: "top", + variant: "left-accent", + }); + } catch (error) { + toast({ + title: "Não foi possível copiar o comando", + status: "error", + isClosable: true, + position: "top", + variant: "left-accent", + }); + } + }; + return ( - - - {channel.user_login} - + + + + {channel.user_login} + + + + {channel.title}