const selectors = {
  defaultOutput: '.output-text',
  editor: '.react-monaco-editor-container'
};

const location =
  '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements';

describe('Challenge with editor', function () {
  before(() => {
    cy.visit(location);
  });

  it('renders seed code without localStorage', () => {
    const editorContents = `<h1>Hello</h1>`;
    cy.get(selectors.editor).as('editor').contains(editorContents);
    cy.get('@editor').click().focused().type(`{movetoend}<h1>Hello World</h1>`);
    cy.reload();
    cy.get('@editor', { timeout: 10000 }).contains(editorContents);
  });

  it('renders code from localStorage after "Ctrl + S"', () => {
    const editorContents = `<h1>Hello</h1>`;
    cy.get(selectors.editor).as('editor').contains(editorContents);
    cy.get('@editor')
      .click()
      .focused()
      .type(`{movetoend}<h1>Hello World</h1>{ctrl+s}`);
    cy.contains("Saved! Your code was saved to your browser's local storage.");
    cy.reload();
    cy.get('@editor', { timeout: 10000 }).contains(
      '<h1>Hello</h1><h1>Hello World</h1>'
    );
  });
});