feat: color picker redesign (#6216)
Co-authored-by: Maielo <maielo.mv@gmail.com> Co-authored-by: dwelle <luzar.david@gmail.com> Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
@ -12,11 +12,11 @@ import {
|
||||
fireEvent,
|
||||
render,
|
||||
screen,
|
||||
togglePopover,
|
||||
waitFor,
|
||||
} from "./test-utils";
|
||||
import { defaultLang } from "../i18n";
|
||||
import { FONT_FAMILY } from "../constants";
|
||||
import { t } from "../i18n";
|
||||
|
||||
const { h } = window;
|
||||
|
||||
@ -42,7 +42,6 @@ const checkpoint = (name: string) => {
|
||||
expect(element).toMatchSnapshot(`[${name}] element ${i}`),
|
||||
);
|
||||
};
|
||||
|
||||
beforeEach(async () => {
|
||||
// Unmount ReactDOM from root
|
||||
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
|
||||
@ -159,13 +158,14 @@ describe("regression tests", () => {
|
||||
UI.clickTool("rectangle");
|
||||
mouse.down(10, 10);
|
||||
mouse.up(10, 10);
|
||||
togglePopover("Background");
|
||||
UI.clickOnTestId("color-yellow");
|
||||
UI.clickOnTestId("color-red");
|
||||
|
||||
UI.clickLabeledElement("Background");
|
||||
UI.clickLabeledElement(t("colors.fa5252"));
|
||||
UI.clickLabeledElement("Stroke");
|
||||
UI.clickLabeledElement(t("colors.5f3dc4"));
|
||||
expect(API.getSelectedElement().backgroundColor).toBe("#fa5252");
|
||||
expect(API.getSelectedElement().strokeColor).toBe("#5f3dc4");
|
||||
togglePopover("Stroke");
|
||||
UI.clickOnTestId("color-blue");
|
||||
expect(API.getSelectedElement().backgroundColor).toBe("#ffc9c9");
|
||||
expect(API.getSelectedElement().strokeColor).toBe("#1971c2");
|
||||
});
|
||||
|
||||
it("click on an element and drag it", () => {
|
||||
@ -988,8 +988,8 @@ describe("regression tests", () => {
|
||||
UI.clickTool("rectangle");
|
||||
// change background color since default is transparent
|
||||
// and transparent elements can't be selected by clicking inside of them
|
||||
UI.clickLabeledElement("Background");
|
||||
UI.clickLabeledElement(t("colors.fa5252"));
|
||||
togglePopover("Background");
|
||||
UI.clickOnTestId("color-red");
|
||||
mouse.down();
|
||||
mouse.up(1000, 1000);
|
||||
|
||||
@ -1088,15 +1088,14 @@ describe("regression tests", () => {
|
||||
assertSelectedElements(rect3);
|
||||
});
|
||||
|
||||
it("should show fill icons when element has non transparent background", () => {
|
||||
it("should show fill icons when element has non transparent background", async () => {
|
||||
UI.clickTool("rectangle");
|
||||
expect(screen.queryByText(/fill/i)).not.toBeNull();
|
||||
mouse.down();
|
||||
mouse.up(10, 10);
|
||||
expect(screen.queryByText(/fill/i)).toBeNull();
|
||||
|
||||
UI.clickLabeledElement("Background");
|
||||
UI.clickLabeledElement(t("colors.fa5252"));
|
||||
togglePopover("Background");
|
||||
UI.clickOnTestId("color-red");
|
||||
// select rectangle
|
||||
mouse.reset();
|
||||
mouse.click();
|
||||
|
Reference in New Issue
Block a user