200ok-ch/organice

View on GitHub
src/components/OrgFile/__snapshots__/OrgFile.integration.test.js.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Render all views Org Functionality Renders everything starting from an Org file TaskList orders tasks for an Org file 1`] = `
<div
  class="drawer-inner-container nice-scroll"
  data-testid="drawer"
  style="transform: translateY(768px); height: 92%; overflow: none;"
>
  <div
    class="drawer__grabber"
  />
  <div
    class="agenda__tab-container"
  >
    <div
      class="tab-buttons tab-buttons--equal-width-tabs"
      style="grid-template-columns: repeat(2, 1fr);"
    >
      <div
        class="tab-buttons__btn tab-buttons__btn--selected"
        title=""
      >
        Search
      </div>
      <div
        class="tab-buttons__btn"
        title=""
      >
        Task List
      </div>
    </div>
  </div>
  <div
    class="task-list__modal-title_search"
  />
  <div
    class="search-input-container"
  >
    <div
      class="search-input-line"
    >
      <datalist
        id="task-list__datalist-filter"
      />
      <div
        class="search__input-container"
      >
        <input
          autocapitalize="none"
          autocomplete="off"
          class="textfield task-list__filter-input"
          list="task-list__datalist-filter"
          placeholder="e.g. -DONE doc|man :simple|easy :assignee:nobody|none"
          type="text"
          value=""
        />
      </div>
      <i
        class="fas fa-lg bookmark__icon  fa-star"
      />
    </div>
  </div>
  <div
    class="task-list__headers-container"
    style="overflow: auto;"
  >
    <div
      class="agenda-day__container"
    >
      <div
        class="agenda-day__headers-container"
      >
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      Top level header
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org &gt; Top level header
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A nested header
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org &gt; Top level header
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              <span
                class="todo-keyword"
              >
                TODO
              </span>
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A todo item with schedule and deadline
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      Another top level header
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org &gt; Another top level header
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              <span
                class="todo-keyword"
              >
                TODO
              </span>
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A repeating todo
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A header with tags                                              
                    </span>
                    
                  </span>
                </div>
                <div>
                  <div
                    class="header-tag"
                  >
                    tag1
                  </div>
                  <div
                    class="header-tag"
                  >
                    tag2
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A header with 
                      <a
                        href="https://organice.200ok.ch"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        a link
                      </a>
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A header with various links as content
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A header with a URL, mail address and phone number as content
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org &gt; A header with a URL, mail address a..
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      PROJECT Foo
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org &gt; A header with a URL, .. &gt; PROJECT Foo
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              <span
                class="todo-keyword todo-keyword--done-state"
              >
                DONE
              </span>
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A headline that's done since a loong time
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org &gt; A header with a URL, .. &gt; PROJECT Foo
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              <span
                class="todo-keyword todo-keyword--done-state"
              >
                DONE
              </span>
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A headline that's done a day earlier even
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A header with plain list items
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="agenda-day__header-container"
        >
          <div
            class="search__breadcrumbs"
          >
            fixtureTestFile.org
          </div>
          <div
            class="agenda-day__header__header-container"
          >
            <div
              class="title-line"
            >
              <span
                class="todo-keyword todo-keyword--done-state"
              >
                FINISHED
              </span>
              <div
                style="width: 100%;"
              >
                <div
                  class="title-line-text"
                >
                  <span
                    style="word-break: break-word;"
                  >
                    <span>
                      A header with a custom todo sequence in DONE state
                    </span>
                    
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br />
</div>
`;

exports[`Render all views Org Functionality Renders everything starting from an Org file renders an Org file 1`] = `
<div>
  <div
    class="header-bar"
  >
    <a
      class="header-bar__back-button"
      href="/files/dir1/dir2"
    >
      <i
        class="fas fa-chevron-left"
      />
      <span
        class="header-bar__back-button__directory-path"
      >
        File browser
      </span>
    </a>
    <div
      class="header-bar__title"
    />
    <div
      class="header-bar__actions"
    >
      <i
        class="fas fa-undo header-bar__actions__item header-bar__actions__item--disabled"
        title="Undo"
      />
      <i
        class="fas fa-redo header-bar__actions__item header-bar__actions__item--disabled"
        title="Redo"
      />
      <i
        class="fas fa-question-circle header-bar__actions__item"
        title="Help"
      />
      <div>
        <a
          href="/settings"
        >
          <i
            class="fas fa-cogs header-bar__actions__item"
            title="Settings"
          />
        </a>
      </div>
    </div>
  </div>
  <div
    class="org-file-container"
    tabindex="-1"
  >
    <div
      class="header-list-container"
    >
      <div
        class="header"
        style="padding-left: 20px; margin-left: 0px;"
      >
        <div
          class="left-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="right-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="header__bullet"
          style="margin-left: -16px;"
        >
          *
        </div>
        <div
          class="title-line"
        >
          
          <div
            style="width: 100%;"
          >
            <div
              class="title-line-text"
            >
              <span
                style="word-break: break-word;"
              >
                <span>
                  Top level header
                </span>
                ...
              </span>
            </div>
          </div>
        </div>
        <div />
      </div>
      <div
        class="header"
        style="padding-left: 20px; margin-left: 0px;"
      >
        <div
          class="left-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="right-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="header__bullet"
          style="margin-left: -16px;"
        >
          *
        </div>
        <div
          class="title-line"
        >
          
          <div
            style="width: 100%;"
          >
            <div
              class="title-line-text"
            >
              <span
                style="word-break: break-word;"
              >
                <span>
                  Another top level header
                </span>
                ...
              </span>
            </div>
          </div>
        </div>
        <div />
      </div>
      <div
        class="header"
        style="padding-left: 20px; margin-left: 0px;"
      >
        <div
          class="left-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="right-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="header__bullet"
          style="margin-left: -16px;"
        >
          *
        </div>
        <div
          class="title-line"
        >
          
          <div
            style="width: 100%;"
          >
            <div
              class="title-line-text"
            >
              <span
                style="word-break: break-word;"
              >
                <span>
                  A header with tags                                              
                </span>
                
              </span>
            </div>
            <div>
              <div
                class="header-tag"
              >
                tag1
              </div>
              <div
                class="header-tag"
              >
                tag2
              </div>
            </div>
          </div>
        </div>
        <div />
      </div>
      <div
        class="header"
        style="padding-left: 20px; margin-left: 0px;"
      >
        <div
          class="left-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="right-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="header__bullet"
          style="margin-left: -16px;"
        >
          *
        </div>
        <div
          class="title-line"
        >
          
          <div
            style="width: 100%;"
          >
            <div
              class="title-line-text"
            >
              <span
                style="word-break: break-word;"
              >
                <span>
                  A header with 
                  <a
                    href="https://organice.200ok.ch"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    a link
                  </a>
                </span>
                
              </span>
            </div>
          </div>
        </div>
        <div />
      </div>
      <div
        class="header"
        style="padding-left: 20px; margin-left: 0px;"
      >
        <div
          class="left-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="right-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="header__bullet"
          style="margin-left: -16px;"
        >
          *
        </div>
        <div
          class="title-line"
        >
          
          <div
            style="width: 100%;"
          >
            <div
              class="title-line-text"
            >
              <span
                style="word-break: break-word;"
              >
                <span>
                  A header with various links as content
                </span>
                ...
              </span>
            </div>
          </div>
        </div>
        <div />
      </div>
      <div
        class="header"
        style="padding-left: 20px; margin-left: 0px;"
      >
        <div
          class="left-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="right-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="header__bullet"
          style="margin-left: -16px;"
        >
          *
        </div>
        <div
          class="title-line"
        >
          
          <div
            style="width: 100%;"
          >
            <div
              class="title-line-text"
            >
              <span
                style="word-break: break-word;"
              >
                <span>
                  A header with a URL, mail address and phone number as content
                </span>
                ...
              </span>
            </div>
          </div>
        </div>
        <div />
      </div>
      <div
        class="header"
        style="padding-left: 20px; margin-left: 0px;"
      >
        <div
          class="left-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="right-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="header__bullet"
          style="margin-left: -16px;"
        >
          *
        </div>
        <div
          class="title-line"
        >
          
          <div
            style="width: 100%;"
          >
            <div
              class="title-line-text"
            >
              <span
                style="word-break: break-word;"
              >
                <span>
                  A header with plain list items
                </span>
                ...
              </span>
            </div>
          </div>
        </div>
        <div />
      </div>
      <div
        class="header"
        style="padding-left: 20px; margin-left: 0px;"
      >
        <div
          class="left-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="right-swipe-action-container"
          style="width: 0px; background-color: rgba(0, 0, 0, 0);"
        >
          <i
            class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
            style="display: none; color: rgb(0, 0, 0);"
          />
        </div>
        <div
          class="header__bullet"
          style="margin-left: -16px;"
        >
          *
        </div>
        <div
          class="title-line"
        >
          <span
            class="todo-keyword todo-keyword--done-state"
          >
            FINISHED
          </span>
          <div
            style="width: 100%;"
          >
            <div
              class="title-line-text"
            >
              <span
                style="word-break: break-word;"
              >
                <span>
                  A header with a custom todo sequence in DONE state
                </span>
                
              </span>
            </div>
          </div>
        </div>
        <div />
      </div>
      <div
        style="height: 90px;"
      />
    </div>
    <div
      class="action-drawer-container nice-scroll"
    >
      <button
        class="btn btn--circle action-drawer__btn fas fa-lg fa-cloud action-drawer__btn--with-sub-icon btn--disabled"
        style="opacity: 1;"
        title="Sync changes"
      >
        <i
          class="fas fa-xs fa-sync-alt action-drawer__btn__sub-icon"
        />
      </button>
      <button
        class="btn btn--circle action-drawer__btn fas fa-lg fa-calendar-alt"
        style="opacity: 1;"
        title="Show agenda"
      />
      <div
        class="action-drawer__arrow-buttons-container"
        style="left: 0px;"
      >
        <button
          class="btn btn--circle action-drawer__btn action-drawer__arrow-button fas fa-lg fa-arrow-up"
          style="opacity: 1; box-shadow: none; bottom: 0px;"
          title="Move header up"
        />
        <button
          class="btn btn--circle action-drawer__btn action-drawer__arrow-button fas fa-lg fa-arrow-down"
          style="opacity: 1; box-shadow: none; bottom: 0px;"
          title="Move header down"
        />
        <button
          class="btn btn--circle action-drawer__btn action-drawer__arrow-button fas fa-lg fa-arrow-left"
          style="opacity: 1; box-shadow: none; bottom: 0px; right: 0px;"
          title="Move header left"
        />
        <button
          class="btn btn--circle action-drawer__btn action-drawer__arrow-button fas fa-lg fa-arrow-right"
          style="opacity: 1; box-shadow: none; bottom: 0px; left: 0px;"
          title="Move header right"
        />
        <button
          class="btn btn--circle action-drawer__btn action-drawer__arrow-button fas fa-lg fa-chevron-left"
          style="opacity: 1; box-shadow: none; bottom: 0px; right: 0px;"
          title="Move entire subtree left"
        />
        <button
          class="btn btn--circle action-drawer__btn action-drawer__arrow-button fas fa-lg fa-chevron-right"
          style="opacity: 1; box-shadow: none; bottom: 0px; left: 0px;"
          title="Move entire subtree right"
        />
        <button
          class="btn btn--circle action-drawer__btn action-drawer__main-arrow-button fas fa-lg fa-arrows-alt"
          style="opacity: 1;"
          title="Show movement buttons"
        />
      </div>
      <button
        class="btn btn--circle action-drawer__btn fas fa-lg fa-search"
        style="opacity: 1; position: relative; z-index: 1;"
        title="Show Search / Task List"
      />
      <div
        class="action-drawer__capture-buttons-container"
      >
        <button
          class="btn btn--circle action-drawer__btn fas fa-lg fa-plus"
          style="opacity: 1; position: relative; z-index: 1;"
          title="Show capture templates"
        />
      </div>
    </div>
  </div>
</div>
`;