TINY-7564: Add part 3 (dealing with TinyMCE part II) (#12)

Co-authored-by: metricjs <[email protected]>
Co-authored-by: Lee Newson <[email protected]>
Co-authored-by: JamesToohey <[email protected]>

Author: 4 people

README.md

@@ -20,6 +20,14 @@ Anything with a TODO is something you need to fill in.
 
 When you're finished a section, let your tutor know and they will review your code.
 
+The tutorial is in 3 parts. They are located:
+
+| Part | Location |
+| ---- | -------- |
+| 1 | `src/main/html` |
+| 2 | `src/main/ts` and `src/test/ts/part2` |
+| 3 | `src/test/ts/part3` |
+
 # Tips
 
 Follow the types.

package.json

@@ -22,10 +22,15 @@
     "@ephox/sugar": "^7.0.1"
   },
   "devDependencies": {
+    "@ephox/agar": "^5.3.1",
     "@ephox/bedrock-client": "^11.1.1",
     "@ephox/bedrock-server": "^11.2.0",
+    "@ephox/mcagar": "^6.1.1",
+    "@types/chai": "^4.2.18",
     "awesome-typescript-loader": "^5.2.1",
+    "chai": "^4.3.4",
     "fast-check": "^2.2.1",
+    "tinymce": "^5.8.1",
     "typescript": "^4.0.2",
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",

src/main/ts/Part2Ex3Optional.ts

@@ -4,7 +4,6 @@ import { Optional } from '@ephox/katamari';
 Optional
 
 NOTE: In TinyMCE 5.4 and earlier, this type is known as Option.
-This codebase currently uses an old version, but we're renaming the import to match the new name.
 
 Programming is all about writing functions to compute values. But quite often we have functions that can't return a
 value in all cases. Some examples:
@@ -92,7 +91,7 @@ The last function you implemented is already part of the Optional type, and is c
 There's a corresponding isNone().
 
 In some VERY LIMITED SITUATIONS you can use isSome() and then the UNSAFE getOrDie() function.
-It's acceptible to do this in tests, or where nested folding is incredibly cumbersome.
+It's acceptable to do this in tests, or where nested folding is incredibly cumbersome.
  */
 
 export const unsafeStuff = (e: Optional<string>): void => {
@@ -102,16 +101,6 @@ export const unsafeStuff = (e: Optional<string>): void => {
 };
 
 /*
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-+
-+ Aside: But you said we used "static" functions, not methods on objects!
-+
-+ Yeah, mostly we do. But Optional is from a time before we pushed that concept very hard.
-+ At some point, we intend to replace Optional's API with something fully static.
-+
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-
-
 A common way to handle an Optional value is to provide a default value if in the case of none.
 
 You can do this with fold, but getOr is a shortcut.

src/main/ts/Part2Ex5Sugar.ts

@@ -9,19 +9,16 @@ Sugar smooths over browser differences and gives us useful functions for manipul
 When using Sugar, we don't use native DOM elements, we wrap them in the SugarElement data type.
 This encourages us to only use Sugar functions to manipulate these elements, rather than the native DOM directly.
 
-NOTE: Like Option=>Optional, Sugar is in the process of renaming. This tutorial is using the old libraries, but we'll
-rename imports to use the new names.
-
 Wrapping
 
 The first thing we need to know is how to wrap and unwrap a sugar element.
  */
 
 
-const e1: Element = document.createElement('span');
+const e1: HTMLSpanElement = document.createElement('span');
 
 // wrapping
-const se1: SugarElement<Element> = SugarElement.fromDom(e1);
+const se1: SugarElement<HTMLSpanElement> = SugarElement.fromDom(e1);
 
 // unwrapping
 const e2: Element = se1.dom;
@@ -32,11 +29,11 @@ Pretty simple so far.
 Now, above, we used `document.createElement`. We want to use Sugar functions everywhere, so we should do this instead:
  */
 
-const se2: SugarElement<Element> = SugarElement.fromTag('span');
+const se2: SugarElement<HTMLSpanElement> = SugarElement.fromTag('span');
 
 // or
 
-const se3: SugarElement<Element> = SugarElement.fromTag('span', document);
+const se3: SugarElement<HTMLSpanElement> = SugarElement.fromTag('span', document);
 
 /*
 It's useful to be able to pass in a document parameter to this function, since we're often dealing with iframes as well
@@ -50,8 +47,8 @@ TODO: Use SugarElement's fromHtml and fromText functions to create a few element
 We often have to traverse from an element to its relatives. The Traverse module has useful functions for this.
  */
 () => {
-  const parent: SugarElement<Element> = SugarElement.fromTag('div');
-  const kid: SugarElement<Element> = SugarElement.fromTag('span');
+  const parent: SugarElement<HTMLDivElement> = SugarElement.fromTag('div');
+  const kid: SugarElement<HTMLSpanElement> = SugarElement.fromTag('span');
   Insert.append(parent, kid);
 
   const parent2 = Traverse.parent(kid);
@@ -63,9 +60,9 @@ We often have to traverse from an element to its relatives. The Traverse module
 
 
 () => {
-  const parent: SugarElement<Element> = SugarElement.fromTag('div');
-  const kid1: SugarElement<Element> = SugarElement.fromTag('span');
-  const kid2: SugarElement<Element> = SugarElement.fromTag('div');
+  const parent: SugarElement<HTMLDivElement> = SugarElement.fromTag('div');
+  const kid1: SugarElement<HTMLSpanElement> = SugarElement.fromTag('span');
+  const kid2: SugarElement<HTMLDivElement> = SugarElement.fromTag('div');
   Insert.append(parent, kid1);
   Insert.append(parent, kid2);
 

src/test/ts/Exercise1CodeStyleTest.ts

@@ -0,0 +1,71 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { assert } from 'chai';
+import * as CodeStyle from '../../../main/ts/Part2Ex1';
+
+type Boundz = CodeStyle.Boundz;
+
+/*
+We run tests using an internally developed test runner called Bedrock.
+Bedrock lets us easily run js tests across different browsers.
+
+1. Running tests with bedrock
+
+Bedrock can be run manually or automatically. Manual will start a test server on a local port, you can then
+access this with any browser to run the tests. Auto will require you specify a target browser.
+
+To test this file with bedrock, run this command and then open the page in any browser:
+yarn bedrock -f src/test/ts/part2/Exercise1CodeStyleTest.ts
+
+Alternatively you can run bedrock-auto and provide a browser as an argument
+
+To test this file with bedrock-auto in a headless browser, run:
+yarn bedrock-auto -b chrome-headless -f src/test/ts/part2/Exercise1CodeStyleTest.ts
+
+If you want to run this in a full browser, try:
+yarn bedrock-auto -b chrome -f src/test/ts/part2/Exercise1CodeStyleTest.ts
+
+TODO: Run bedrock in all modes shown above.
+
+2. Defining tests
+
+Bedrock aims to match the mocha BDD API style which uses describe, context and it.
+
+https://mochajs.org/#getting-started
+
+We start with a definition like this...
+ */
+describe('Exercise1CodeStyleTests', () => {
+  it('width', () => {
+    // ... and then we write some test cases
+    // We use chai assertions https://www.chaijs.com/api/assert/
+
+    const b: Boundz = ({ x1: 3, y1: 4, x2: 7, y2: 8 });
+    assert.deepEqual(CodeStyle.width(b), 4, 'Width');
+
+    // TODO: write another test case for width
+  });
+
+  /*
+  3. Testing 'height' function
+
+  We can have multiple "it" calls in one "describe". This is how we separate tests.
+  In this case, we'll call "it" again, to write a test for 'height'
+
+   */
+  // TODO: write a simple test case for height
+
+  /*
+  4. Test output
+
+  The below test should fail.
+
+  TODO: remove the ".skip" to enable this test. Run it using the commands above.
+  Notice that the output shows a diff.
+  TODO: Correct the test and run it again.
+
+   */
+
+  it.skip('failing test', () => {
+    assert.deepEqual({ a: 1, b: 2 }, { a: 1, b: 7, c: 8 });
+  });
+});

src/test/ts/Exercise2ArrayFunctionsTest.ts

@@ -0,0 +1,38 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { assert } from 'chai';
+import * as Ex from '../../../main/ts/Part2Ex2ArrayFunctions';
+
+describe('Exercise2ArrayFunctionsTest', () => {
+  it('runEach1', () => {
+    Ex.runEach1();
+  });
+
+  it('frog names', () => {
+    assert.deepEqual(Ex.frogNames(Ex.myFrogs), [ 'frog1', 'frog2', 'loudfrog', 'quietfrog' ], 'frog names');
+  });
+
+  it('frog ages', () => {
+    // TODO: write a test for your frog ages function
+  });
+
+  it('ribbitting frogs', () => {
+    assert.deepEqual(Ex.ribbitting(Ex.myFrogs), [
+      { name: 'frog1', ribbits: true, age: 3 },
+      { name: 'loudfrog', ribbits: true, age: 1 }
+    ], 'ribbitting');
+  });
+
+  it('older frogs', () => {
+    assert.deepEqual(Ex.olderFrogs(Ex.myFrogs), [
+      { name: 'quietfrog', ribbits: false, age: 10 }
+    ], 'older frogs');
+  });
+
+  it('csvs', () => {
+    assert.deepEqual(Ex.splitCsvs([]), [], 'empty array');
+    assert.deepEqual(Ex.splitCsvs(['a']), ['a'], 'single string');
+    assert.deepEqual(Ex.splitCsvs(['a,b']), ['a', 'b'], 'single csv string');
+    assert.deepEqual(Ex.splitCsvs(['a', 'b']), ['a', 'b'], 'several strings');
+    assert.deepEqual(Ex.splitCsvs(['a', 'b,d,a']), ['a', 'b', 'd', 'a'], 'several csv strings');
+  });
+});

src/test/ts/Exercise3OptionTest.ts

@@ -0,0 +1,20 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { assert } from 'chai';
+import * as Ex from '../../../main/ts/Part2Ex3Optional';
+
+describe('Exercise3OptionTest', () => {
+  it('getProtocol', () => {
+    assert.equal(Ex.getProtocol('https://frog.com').getOrDie(), 'https');
+    assert.equal(Ex.getProtocol('http://frog.com').getOrDie(), 'http');
+    assert.isTrue(Ex.getProtocol('frog.com').isNone(), 'no protocol should be found');
+    assert.isTrue(Ex.getProtocol('://frog.com').isNone(), 'no protocol should be found');
+    assert.isTrue(Ex.getProtocol('3ttp://frog.com').isNone(), 'malformed protocol should not be registered');
+  });
+
+  it('toPositiveInteger', () => {
+    // TODO: write a few test cases
+  });
+});
+
+// TODO: Now that you have finished all the test files in this directory,
+// try running all tests in the "part2" folder all using the `-d` argument in bedrock and specifying the parent directory.