@doenet/doenetml 0.6.0-alpha1

package/cypress/e2e/baseComponent/doenetMLtext.cy.js

@@ -0,0 +1,427 @@
+import { cesc, cesc2 } from "../../../../src/utils/url";
+
+describe("DoenetML tests", function () {
+  beforeEach(() => {
+    cy.clearIndexedDB();
+    cy.visit("/src/Tools/cypressTest/");
+  });
+
+  it("doenetML state variable", () => {
+    cy.window().then(async (win) => {
+      win.postMessage(
+        {
+          doenetML: `
+        <p name="theP">
+          Did you know that
+          <math name="m">1 + 1</math>
+          =
+          $m{simplify}?
+        </p>
+      
+        <pre name="theDoenetML">$theP.doenetML</pre>
+      
+  `,
+        },
+        "*",
+      );
+    });
+
+    let thePDoenetML = `<p name="theP">
+  Did you know that
+  <math name="m">1 + 1</math>
+  =
+  $m{simplify}?
+</p>`;
+
+    cy.get(cesc("#\\/theP")).should(
+      "contain.text",
+      "\n          Did you know that\n          1+1",
+    );
+    cy.get(cesc("#\\/theP")).should(
+      "contain.text",
+      "1\n          =\n          2",
+    );
+    cy.get(cesc("#\\/theDoenetML")).should("have.text", thePDoenetML);
+
+    cy.window().then(async (win) => {
+      let stateVariables = await win.returnAllStateVariables1();
+      expect(stateVariables["/theP"].stateValues.doenetML).eqls(thePDoenetML);
+
+      let preChild =
+        stateVariables["/theDoenetML"].activeChildren[0].componentName;
+      expect(stateVariables[preChild].stateValues.value).eqls(thePDoenetML);
+    });
+  });
+
+  it("doenetML from displayDoenetML", () => {
+    cy.window().then(async (win) => {
+      win.postMessage(
+        {
+          doenetML: `
+        <pre name="theDoenetML"><displayDoenetML name="ddml">
+          <p>A graph of a point</p>
+
+          <graph>
+            <point name="P">(3,4)</point>
+          </graph>
+
+          A string by itself!
+        </displayDoenetML></pre>
+      
+        <pre name="theDoenetML2"><displayDoenetML>String with no space.</displayDoenetML></pre>
+
+        <p name="pMacro">This is a macro: <c><displayDoenetML>$f</displayDoenetML></c>.</p>
+
+  `,
+        },
+        "*",
+      );
+    });
+
+    let thePDoenetML = `<p>A graph of a point</p>
+
+<graph>
+  <point name="P">(3,4)</point>
+</graph>
+
+A string by itself!`;
+
+    cy.get(cesc("#\\/theDoenetML")).should("have.text", thePDoenetML);
+    cy.get(cesc("#\\/theDoenetML2")).should(
+      "have.text",
+      "String with no space.",
+    );
+    cy.get(cesc("#\\/pMacro")).should("have.text", "This is a macro: $f.");
+
+    cy.window().then(async (win) => {
+      let stateVariables = await win.returnAllStateVariables1();
+      expect(stateVariables["/ddml"].stateValues.value).eq(thePDoenetML);
+      expect(stateVariables["/ddml"].stateValues.text).eq(thePDoenetML);
+      expect(stateVariables["/_displaydoenetml2"].stateValues.value).eq(
+        "String with no space.",
+      );
+      expect(stateVariables["/_displaydoenetml3"].stateValues.value).eq("$f");
+    });
+  });
+
+  it("copying displayDoenetML, with or without linking", () => {
+    cy.window().then(async (win) => {
+      win.postMessage(
+        {
+          doenetML: `
+  <section name="s1" newNamespace>
+    <pre><displayDoenetML>
+      <text>hello!</text>
+    </displayDoenetML></pre>
+
+    <p>A sentence</p>
+
+    <p name="pd">DoenetML: <c>$_p1.doenetML</c></p>
+
+  </section>
+
+  <section name="s2" copySource="s1" />
+  <copy source="s1" assignNames="s3" />
+  <section name="s4" copySource="s1" link="false" />
+  <copy source="s1" assignNames="s5" link="false" />
+
+  
+  <section name="s1a" newNamespace>
+    <title>$(/s1.title)</title>
+    <p name="p1">Copy: $(/s1/_displaydoenetml1)</p>
+    <p name="p2">Copy, no link: $(/s1/_displaydoenetml1{link="false"})</p>
+    <p name="p3">Copy text: $(/s1/_displaydoenetml1.text)</p>
+    <p name="p4">Copy text, no link: $(/s1/_displaydoenetml1.text{link="false"})</p>
+  </section>
+
+  <section name="s2a" newNamespace>
+    <title>$(/s2.title)</title>
+    <p name="p1">Copy: $(/s2/_displaydoenetml1)</p>
+    <p name="p2">Copy, no link: $(/s2/_displaydoenetml1{link="false"})</p>
+    <p name="p3">Copy text: $(/s2/_displaydoenetml1.text)</p>
+    <p name="p4">Copy text, no link: $(/s2/_displaydoenetml1.text{link="false"})</p>
+  </section>
+
+  <section name="s3a" newNamespace>
+    <title>$(/s3.title)</title>
+    <p name="p1">Copy: $(/s3/_displaydoenetml1)</p>
+    <p name="p2">Copy, no link: $(/s3/_displaydoenetml1{link="false"})</p>
+    <p name="p3">Copy text: $(/s3/_displaydoenetml1.text)</p>
+    <p name="p4">Copy text, no link: $(/s3/_displaydoenetml1.text{link="false"})</p>
+  </section>
+
+  <section name="s4a" newNamespace>
+    <title>$(/s4.title)</title>
+    <p name="p1">Copy: $(/s4/_displaydoenetml1)</p>
+    <p name="p2">Copy, no link: $(/s4/_displaydoenetml1{link="false"})</p>
+    <p name="p3">Copy text: $(/s4/_displaydoenetml1.text)</p>
+    <p name="p4">Copy text, no link: $(/s4/_displaydoenetml1.text{link="false"})</p>
+  </section>
+
+  <section name="s5a" newNamespace>
+    <title>$(/s5.title)</title>
+    <p name="p1">Copy: $(/s5/_displaydoenetml1)</p>
+    <p name="p2">Copy, no link: $(/s5/_displaydoenetml1{link="false"})</p>
+    <p name="p3">Copy text: $(/s5/_displaydoenetml1.text)</p>
+    <p name="p4">Copy text, no link: $(/s5/_displaydoenetml1.text{link="false"})</p>
+  </section>
+
+  `,
+        },
+        "*",
+      );
+    });
+
+    cy.get(cesc2("#/s1/_pre1")).should("have.text", `<text>hello!</text>`);
+    cy.get(cesc2("#/s1/pd")).should("have.text", `DoenetML: <p>A sentence</p>`);
+
+    cy.get(cesc2("#/s2/_pre1")).should("have.text", `<text>hello!</text>`);
+    cy.get(cesc2("#/s2/pd")).should("have.text", `DoenetML: <p>A sentence</p>`);
+
+    cy.get(cesc2("#/s3/_pre1")).should("have.text", `<text>hello!</text>`);
+    cy.get(cesc2("#/s3/pd")).should("have.text", `DoenetML: <p>A sentence</p>`);
+
+    cy.get(cesc2("#/s4/_pre1")).should("have.text", `<text>hello!</text>`);
+    cy.get(cesc2("#/s4/pd")).should("have.text", `DoenetML: <p>A sentence</p>`);
+
+    cy.get(cesc2("#/s5/_pre1")).should("have.text", `<text>hello!</text>`);
+    cy.get(cesc2("#/s5/pd")).should("have.text", `DoenetML: <p>A sentence</p>`);
+
+    cy.get(cesc2("#/s1a/p1")).should("have.text", `Copy: <text>hello!</text>`);
+    cy.get(cesc2("#/s1a/p2")).should(
+      "have.text",
+      `Copy, no link: <text>hello!</text>`,
+    );
+    cy.get(cesc2("#/s1a/p3")).should(
+      "have.text",
+      `Copy text: <text>hello!</text>`,
+    );
+    cy.get(cesc2("#/s1a/p4")).should(
+      "have.text",
+      `Copy text, no link: <text>hello!</text>`,
+    );
+
+    cy.get(cesc2("#/s2a/p1")).should("have.text", `Copy: <text>hello!</text>`);
+    cy.get(cesc2("#/s2a/p2")).should(
+      "have.text",
+      `Copy, no link: <text>hello!</text>`,
+    );
+    cy.get(cesc2("#/s2a/p3")).should(
+      "have.text",
+      `Copy text: <text>hello!</text>`,
+    );
+    cy.get(cesc2("#/s2a/p4")).should(
+      "have.text",
+      `Copy text, no link: <text>hello!</text>`,
+    );
+
+    cy.get(cesc2("#/s3a/p1")).should("have.text", `Copy: <text>hello!</text>`);
+    cy.get(cesc2("#/s3a/p2")).should(
+      "have.text",
+      `Copy, no link: <text>hello!</text>`,
+    );
+    cy.get(cesc2("#/s3a/p3")).should(
+      "have.text",
+      `Copy text: <text>hello!</text>`,
+    );
+    cy.get(cesc2("#/s3a/p4")).should(
+      "have.text",
+      `Copy text, no link: <text>hello!</text>`,
+    );
+
+    cy.get(cesc2("#/s4a/p1")).should("have.text", `Copy: <text>hello!</text>`);
+    cy.get(cesc2("#/s4a/p2")).should(
+      "have.text",
+      `Copy, no link: <text>hello!</text>`,
+    );
+    cy.get(cesc2("#/s4a/p3")).should(
+      "have.text",
+      `Copy text: <text>hello!</text>`,
+    );
+    cy.get(cesc2("#/s4a/p4")).should(
+      "have.text",
+      `Copy text, no link: <text>hello!</text>`,
+    );
+
+    cy.get(cesc2("#/s5a/p1")).should("have.text", `Copy: <text>hello!</text>`);
+    cy.get(cesc2("#/s5a/p2")).should(
+      "have.text",
+      `Copy, no link: <text>hello!</text>`,
+    );
+    cy.get(cesc2("#/s5a/p3")).should(
+      "have.text",
+      `Copy text: <text>hello!</text>`,
+    );
+    cy.get(cesc2("#/s5a/p4")).should(
+      "have.text",
+      `Copy text, no link: <text>hello!</text>`,
+    );
+  });
+
+  it("doenetML with external copies", () => {
+    cy.window().then(async (win) => {
+      win.postMessage(
+        {
+          doenetML: `
+    <section name="s1">
+      <section boxed>
+        <title>Copy in external</title>
+        <copy uri="doenet:cid=bafkreievuawsojoy4kzz7sbjvc2sxreqw6bzg3gow2jwor23aknjsmihcy" assignNames="external" />
+      </section>
+
+      <p>Grab the DoenetML from external pre:</p>
+      <pre>$(external/_pre1.doenetML)</pre>
+
+      <p>Grab the DoenetML from external p from external:</p>
+      <pre>$(external/external/p.doenetML)</pre>
+    </section>
+
+
+    <copy source="s1" assignNames="s2" assignNewNamespaces />
+
+    <section copySource="s1" name="s3" newNamespace />
+
+    <copy source="s1" assignNames="s4" link="false" assignNewNamespaces />
+
+    <section copySource="s1" name="s5" link="false" newNamespace />
+  `,
+        },
+        "*",
+      );
+    });
+
+    let theGraphDoenetML = `<graph>
+  <point name="P" />
+</graph>`;
+
+    cy.log("check original");
+
+    cy.get(cesc2("#/external/external/_pre1")).should(
+      "have.text",
+      theGraphDoenetML,
+    );
+    cy.get(cesc2("#/external/external/_pre2")).should(
+      "have.text",
+      `<p name="p">The <alert>DoenetML</alert> of a graph:</p>`,
+    );
+
+    cy.get(cesc2("#/external/_pre1")).should(
+      "have.text",
+      '<p name="p">The <alert>DoenetML</alert> of a graph:</p>',
+    );
+    cy.get(cesc2("#/external/_pre2")).should("have.text", `<text>hi</text>`);
+
+    cy.get(cesc2("#/_pre1")).should(
+      "have.text",
+      `<pre>$(external/p.doenetML)</pre>`,
+    );
+    cy.get(cesc2("#/_pre2")).should(
+      "have.text",
+      '<p name="p">The <alert>DoenetML</alert> of a graph:</p>',
+    );
+
+    cy.log("check s2");
+
+    cy.get(cesc2("#/s2/external/external/_pre1")).should(
+      "have.text",
+      theGraphDoenetML,
+    );
+    cy.get(cesc2("#/s2/external/external/_pre2")).should(
+      "have.text",
+      `<p name="p">The <alert>DoenetML</alert> of a graph:</p>`,
+    );
+
+    cy.get(cesc2("#/s2/external/_pre1")).should(
+      "have.text",
+      '<p name="p">The <alert>DoenetML</alert> of a graph:</p>',
+    );
+    cy.get(cesc2("#/s2/external/_pre2")).should("have.text", `<text>hi</text>`);
+
+    cy.get(cesc2("#/s2/_pre1")).should(
+      "have.text",
+      `<pre>$(external/p.doenetML)</pre>`,
+    );
+    cy.get(cesc2("#/s2/_pre2")).should(
+      "have.text",
+      `<p name="p">The <alert>DoenetML</alert> of a graph:</p>`,
+    );
+
+    cy.log("check s3");
+
+    cy.get(cesc2("#/s3/external/external/_pre1")).should(
+      "have.text",
+      theGraphDoenetML,
+    );
+    cy.get(cesc2("#/s3/external/external/_pre2")).should(
+      "have.text",
+      `<p name="p">The <alert>DoenetML</alert> of a graph:</p>`,
+    );
+
+    cy.get(cesc2("#/s3/external/_pre1")).should(
+      "have.text",
+      '<p name="p">The <alert>DoenetML</alert> of a graph:</p>',
+    );
+    cy.get(cesc2("#/s3/external/_pre2")).should("have.text", `<text>hi</text>`);
+
+    cy.get(cesc2("#/s3/_pre1")).should(
+      "have.text",
+      `<pre>$(external/p.doenetML)</pre>`,
+    );
+    cy.get(cesc2("#/s3/_pre2")).should(
+      "have.text",
+      '<p name="p">The <alert>DoenetML</alert> of a graph:</p>',
+    );
+
+    cy.log("check s4");
+
+    cy.get(cesc2("#/s4/external/external/_pre1")).should(
+      "have.text",
+      theGraphDoenetML,
+    );
+    cy.get(cesc2("#/s4/external/external/_pre2")).should(
+      "have.text",
+      `<p name="p">The <alert>DoenetML</alert> of a graph:</p>`,
+    );
+
+    cy.get(cesc2("#/s4/external/_pre1")).should(
+      "have.text",
+      '<p name="p">The <alert>DoenetML</alert> of a graph:</p>',
+    );
+    cy.get(cesc2("#/s4/external/_pre2")).should("have.text", `<text>hi</text>`);
+
+    cy.get(cesc2("#/s4/_pre1")).should(
+      "have.text",
+      `<pre>$(external/p.doenetML)</pre>`,
+    );
+    cy.get(cesc2("#/s4/_pre2")).should(
+      "have.text",
+      '<p name="p">The <alert>DoenetML</alert> of a graph:</p>',
+    );
+
+    cy.log("check s5");
+
+    cy.get(cesc2("#/s5/external/external/_pre1")).should(
+      "have.text",
+      theGraphDoenetML,
+    );
+    cy.get(cesc2("#/s5/external/external/_pre2")).should(
+      "have.text",
+      `<p name="p">The <alert>DoenetML</alert> of a graph:</p>`,
+    );
+
+    cy.get(cesc2("#/s5/external/_pre1")).should(
+      "have.text",
+      '<p name="p">The <alert>DoenetML</alert> of a graph:</p>',
+    );
+    cy.get(cesc2("#/s5/external/_pre2")).should("have.text", `<text>hi</text>`);
+
+    cy.get(cesc2("#/s5/_pre1")).should(
+      "have.text",
+      `<pre>$(external/p.doenetML)</pre>`,
+    );
+    cy.get(cesc2("#/s5/_pre2")).should(
+      "have.text",
+      '<p name="p">The <alert>DoenetML</alert> of a graph:</p>',
+    );
+  });
+});

package/cypress/e2e/chemistry/atom.cy.js

@@ -0,0 +1,201 @@
+import me from "math-expressions";
+import { cesc } from "../../../../src/utils/url";
+
+describe("Atom Tests", function () {
+  beforeEach(() => {
+    cy.clearIndexedDB();
+    cy.visit("/src/Tools/cypressTest/");
+  });
+
+  it("information on atom", () => {
+    cy.window().then(async (win) => {
+      win.postMessage(
+        {
+          doenetML: `
+  <text>a</text>
+  <title>Information on atom</title>
+
+  <setup>
+    <atom atomicNumber="$aNum" name="atom" />
+  </setup>
+  
+  <p>Atomic number: <mathinput name="aNum" prefill="1" /></p>
+  
+  <p>Name: <copy prop="name" target="atom" assignNames="name" /></p>
+  <p>Symbol: <copy prop="symbol" target="atom" assignNames="symbol" /></p>
+  <p>Atomic number: <copy prop="atomicNumber" target="atom" assignNames="atomicNumber" /></p>
+  <p>Group: <copy prop="group" target="atom" assignNames="group" /></p>
+  <p>Group Name: <copy prop="groupName" target="atom" assignNames="groupName" /></p>
+  <p>Atomic mass: <copy prop="atomicMass" target="atom" assignNames="atomicMass" displayDigits="10" /></p>
+  <p>Phase at STP: <copy prop="phaseAtSTP" target="atom" assignNames="pahseAtSTP" displayDigits="10" /></p>
+  <p>Charge of common ion: <copy prop="chargeOfCommonIon" target="atom" assignNames="chargeOfCommonIon" displayDigits="10" /></p>
+  <p>Metal category: <copy prop="metalCategory" target="atom" assignNames="metalCategory" displayDigits="10" /></p>
+  <p>Period: <copy prop="period" target="atom" assignNames="period" displayDigits="10" /></p>
+  <p>Ionization energy: <copy prop="ionizationEnergy" target="atom" assignNames="ionizationEnergy" displayDigits="10" /></p>
+  <p>Melting point: <copy prop="meltingPoint" target="atom" assignNames="meltingPoint" displayDigits="10" /></p>
+  <p>Boiling point: <copy prop="boilingPoint" target="atom" assignNames="boilingPoint" displayDigits="10" /></p>
+  <p>Atomic radius: <copy prop="atomicRadius" target="atom" assignNames="atomicRadius" displayDigits="10" /></p>
+  <p>Density: <copy prop="density" target="atom" assignNames="density" displayDigits="10" /></p>
+  <p>Electronegativity: <copy prop="electronegativity" target="atom" assignNames="electronegativity" displayDigits="10" /></p>
+  <p>Electron configuration: <copy prop="electronConfiguration" target="atom" assignNames="electronConfiguration" /></p>
+  Orbital diagram: <copy prop="orbitalDiagram" target="atom" assignNames="orbitalDiagram" />
+  
+  `,
+        },
+        "*",
+      );
+    });
+
+    cy.get(cesc("#\\/_text1")).should("have.text", "a"); // to wait for page to load
+
+    cy.get(cesc("#\\/name")).should("have.text", "Hydrogen");
+    cy.get(cesc("#\\/symbol")).should("have.text", "H");
+    cy.get(cesc("#\\/atomicNumber")).should("have.text", "1");
+    cy.get(cesc("#\\/group")).should("have.text", "1");
+    cy.get(cesc("#\\/groupName")).should("have.text", "");
+    cy.get(cesc("#\\/atomicMass")).should("have.text", "1.00794");
+    cy.get(cesc("#\\/pahseAtSTP")).should("have.text", "Gas");
+    cy.get(cesc("#\\/chargeOfCommonIon")).should("have.text", "1");
+    cy.get(cesc("#\\/metalCategory")).should("have.text", "Non Metal");
+    cy.get(cesc("#\\/period")).should("have.text", "1");
+    cy.get(cesc("#\\/ionizationEnergy")).should("have.text", "13.5984");
+    cy.get(cesc("#\\/meltingPoint")).should("have.text", "-259.14");
+    cy.get(cesc("#\\/boilingPoint")).should("have.text", "-252.87");
+    cy.get(cesc("#\\/atomicRadius")).should("have.text", "53");
+    cy.get(cesc("#\\/density")).should("have.text", "0.0899");
+    cy.get(cesc("#\\/electronegativity")).should("have.text", "2.2");
+    cy.get(cesc("#\\/electronConfiguration") + " .mjx-mrow")
+      .eq(0)
+      .invoke("text")
+      .then((text) => {
+        expect(text).eq("1s1");
+      });
+
+    cy.get(cesc("#\\/aNum") + " textarea").type("{end}{backspace}2{enter}", {
+      force: true,
+    });
+
+    cy.get(cesc("#\\/name")).should("have.text", "Helium");
+    cy.get(cesc("#\\/symbol")).should("have.text", "He");
+    cy.get(cesc("#\\/atomicNumber")).should("have.text", "2");
+    cy.get(cesc("#\\/group")).should("have.text", "18");
+    cy.get(cesc("#\\/groupName")).should("have.text", "Noble Gas");
+    cy.get(cesc("#\\/atomicMass")).should("have.text", "4.002602");
+    cy.get(cesc("#\\/pahseAtSTP")).should("have.text", "Gas");
+    cy.get(cesc("#\\/chargeOfCommonIon")).should("have.text", "NaN");
+    cy.get(cesc("#\\/metalCategory")).should("have.text", "Non Metal");
+    cy.get(cesc("#\\/period")).should("have.text", "1");
+    cy.get(cesc("#\\/ionizationEnergy")).should("have.text", "24.5874");
+    cy.get(cesc("#\\/meltingPoint")).should("have.text", "NaN");
+    cy.get(cesc("#\\/boilingPoint")).should("have.text", "-268.93");
+    cy.get(cesc("#\\/atomicRadius")).should("have.text", "31");
+    cy.get(cesc("#\\/density")).should("have.text", "0.1785");
+    cy.get(cesc("#\\/electronegativity")).should("have.text", "NaN");
+    cy.get(cesc("#\\/electronConfiguration") + " .mjx-mrow")
+      .eq(0)
+      .invoke("text")
+      .then((text) => {
+        expect(text).eq("1s2");
+      });
+
+    cy.get(cesc("#\\/aNum") + " textarea").type("{home}1{enter}", {
+      force: true,
+    });
+
+    cy.get(cesc("#\\/name")).should("have.text", "Magnesium");
+    cy.get(cesc("#\\/symbol")).should("have.text", "Mg");
+    cy.get(cesc("#\\/atomicNumber")).should("have.text", "12");
+    cy.get(cesc("#\\/group")).should("have.text", "2");
+    cy.get(cesc("#\\/groupName")).should("have.text", "Alkaline Earth Metal");
+    cy.get(cesc("#\\/atomicMass")).should("have.text", "24.305");
+    cy.get(cesc("#\\/pahseAtSTP")).should("have.text", "Solid");
+    cy.get(cesc("#\\/chargeOfCommonIon")).should("have.text", "2");
+    cy.get(cesc("#\\/metalCategory")).should("have.text", "Metal");
+    cy.get(cesc("#\\/period")).should("have.text", "3");
+    cy.get(cesc("#\\/ionizationEnergy")).should("have.text", "7.6462");
+    cy.get(cesc("#\\/meltingPoint")).should("have.text", "650");
+    cy.get(cesc("#\\/boilingPoint")).should("have.text", "1090");
+    cy.get(cesc("#\\/atomicRadius")).should("have.text", "145");
+    cy.get(cesc("#\\/density")).should("have.text", "1.738");
+    cy.get(cesc("#\\/electronegativity")).should("have.text", "1.31");
+    cy.get(cesc("#\\/electronConfiguration") + " .mjx-mrow")
+      .eq(0)
+      .invoke("text")
+      .then((text) => {
+        expect(text.replace(/[\s\u200B-\u200D\uFEFF]/g, "")).eq("1s22s22p63s2");
+      });
+
+    cy.get(cesc("#\\/aNum") + " textarea").type(
+      "{home}{rightArrow}{backspace}5{enter}",
+      { force: true },
+    );
+
+    cy.get(cesc("#\\/name")).should("have.text", "Tellurium");
+    cy.get(cesc("#\\/symbol")).should("have.text", "Te");
+    cy.get(cesc("#\\/atomicNumber")).should("have.text", "52");
+    cy.get(cesc("#\\/group")).should("have.text", "16");
+    cy.get(cesc("#\\/groupName")).should("have.text", "");
+    cy.get(cesc("#\\/atomicMass")).should("have.text", "127.6");
+    cy.get(cesc("#\\/pahseAtSTP")).should("have.text", "Solid");
+    cy.get(cesc("#\\/chargeOfCommonIon")).should("have.text", "NaN");
+    cy.get(cesc("#\\/metalCategory")).should("have.text", "Metalloid");
+    cy.get(cesc("#\\/period")).should("have.text", "5");
+    cy.get(cesc("#\\/ionizationEnergy")).should("have.text", "9.0096");
+    cy.get(cesc("#\\/meltingPoint")).should("have.text", "449.51");
+    cy.get(cesc("#\\/boilingPoint")).should("have.text", "988");
+    cy.get(cesc("#\\/atomicRadius")).should("have.text", "123");
+    cy.get(cesc("#\\/density")).should("have.text", "6.24");
+    cy.get(cesc("#\\/electronegativity")).should("have.text", "2.1");
+    cy.get(cesc("#\\/electronConfiguration") + " .mjx-mrow")
+      .eq(0)
+      .invoke("text")
+      .then((text) => {
+        expect(text.replace(/[\s\u200B-\u200D\uFEFF]/g, "")).eq(
+          "1s22s22p63s23p63d104s24p64d105s25p4",
+        );
+      });
+  });
+
+  it("sort atoms", () => {
+    cy.window().then(async (win) => {
+      win.postMessage(
+        {
+          doenetML: `
+  <text>a</text>
+
+  <p>Originals: <aslist><group name="original">
+    <atom symbol="C" />
+    <atom symbol="He" />
+    <atom symbol="as" />
+    <atom symbol="o" />
+  </group></aslist></p>
+    
+
+  <p>Sort by atomic number: <aslist><sort assignNames="an1 an2 an3 an4" sortByProp="atomicnumber">$original</sort></aslist></p>
+  <p>Sort by atomic radius: <aslist><sort assignNames="ar1 ar2 ar3 ar4" sortByProp="atomicRadius">$original</sort></aslist></p>
+  <p>Sort by ionization energy: <aslist><sort assignNames="ie1 ie2 ie3 ie4" sortByProp="ionizationEnergy">$original</sort></aslist></p>
+
+
+  `,
+        },
+        "*",
+      );
+    });
+    cy.get(cesc("#\\/_text1")).should("have.text", "a"); // to wait for page to load
+
+    cy.get(cesc("#\\/an1") + " .mjx-mrow").contains("He");
+    cy.get(cesc("#\\/an2") + " .mjx-mrow").contains("C");
+    cy.get(cesc("#\\/an3") + " .mjx-mrow").contains("O");
+    cy.get(cesc("#\\/an4") + " .mjx-mrow").contains("As");
+
+    cy.get(cesc("#\\/ar1") + " .mjx-mrow").contains("He");
+    cy.get(cesc("#\\/ar2") + " .mjx-mrow").contains("O");
+    cy.get(cesc("#\\/ar3") + " .mjx-mrow").contains("C");
+    cy.get(cesc("#\\/ar4") + " .mjx-mrow").contains("As");
+
+    cy.get(cesc("#\\/ie1") + " .mjx-mrow").contains("As");
+    cy.get(cesc("#\\/ie2") + " .mjx-mrow").contains("C");
+    cy.get(cesc("#\\/ie3") + " .mjx-mrow").contains("O");
+    cy.get(cesc("#\\/ie4") + " .mjx-mrow").contains("He");
+  });
+});