// It renders the component on the page
import * as React from "react";
import { render, screen } from "@testing-library/react";

import { Divider } from "./live";
import settings from "./settings";

describe("Divider (Rendering)", () => {
  it(`Should render on the page`, () => {
    const testId = "WC-DIVIDER-LIVE";
    const { debug } = render(<Divider {...settings.default} />);
    expect(screen.queryByTestId(testId)).toBeTruthy();
  });
  
  // Props
});

describe("Divider (Editor)", () => {
  
  // renders in the editor
  // has all property sections
  // can change width 
  // can change the height
  // can change color
  // can change vertical position
  // can change alignment
  
})

// live version of component shows style values that match prop settings
describe("Divider (Live Site)", () => {
  
  // renders (via generate site)
  // width property accurately reflected
  // height property accurately reflected
  // backgroundColor property accurately reflected
  // marginTop accurately reflected
  // alignment change accurately reflected

})

// [manual] persist when refreshed (saves to db)