The same page in a terminal

Task: use the same page from a browser and from a terminal.

# Recipe: one page, drawn in the browser (quantum start) and in a terminal (quantum console).
paths:
  components: ./components

A page made of Core ui:* tags is not tied to HTML. quantum start serves it to a browser; quantum console draws it in the terminal, and quantum desktop in a local window. The console asks the same server for the page's view tree and posts the same actions: the rule on name, the flash and the session work the same way, with nothing translated.

<q:component name="GuestList">
  <q:action name="sign" method="POST">
    <q:param name="name" required="true" minlength="2" maxlength="40" />
    <!-- append to a list that does not exist yet starts one -->
    <q:set name="session.guests" operation="append" value="{name}" />
    <q:redirect url="/" flash="Welcome, {name}!" />
  </q:action>

  <q:set name="guests" type="array" value="{session.guests}" default="[]" />

  <ui:window title="Guest list">
    <ui:vbox gap="md" padding="lg">
      <q:if condition="flash">
        <ui:alert variant="{flashType == 'error' and 'danger' or 'success'}">{flash}</ui:alert>
      </q:if>
      <ui:text>{len(guests)} signed so far.</ui:text>
      <ui:form on-submit="sign">
        <ui:hbox gap="sm">
          <ui:input bind="name" placeholder="Your name" grow="true" />
          <ui:button variant="primary">Sign</ui:button>
        </ui:hbox>
      </ui:form>
      <ui:list>
        <q:loop type="array" var="guest" items="{guests}">
          <ui:item>{guest}</ui:item>
        </q:loop>
      </ui:list>
    </ui:vbox>
  </ui:window>
</q:component>

In the browser, quantum test:

<q:test name="an empty list to start" page="/">
  <test:visit />
  <test:expect text="0 signed so far." />
</q:test>

<q:test name="signing adds the name" page="/">
  <test:submit action="sign" name="Ana" />
  <test:expect redirect="/" flash="Welcome, Ana!" />
  <test:expect text="1 signed so far." />
  <test:expect text="Ana" />
</q:test>

<q:test name="a name that is too short is refused on its field" page="/">
  <test:submit action="sign" name="A" />
  <test:expect error="name" message="Must be at least 2 characters" />
  <test:expect text="0 signed so far." />
</q:test>

tests/guests.test.q
  PASS  an empty list to start
  PASS  signing adds the name
  PASS  a name that is too short is refused on its field
3 passed, 0 failed

In the console, tests/docs/test_cookbook_console.py opens the same app in the console renderer. It checks that every text this suite expects on a plain visit is on the console screen, then types a name that is too short and one that is fine, and presses Sign: the console shows the field's error, then the flash and the new name.

quantum start      # http://localhost:8080
quantum console    # the same page in this terminal

See UI-3 and UI-7.