Skill Test

.github/pull_request_template.md

@@ -1,10 +1,10 @@
 ## Questionnaire
 
-- Where did you find the job? -> LinkedIn / Indeed / Kyujin Box / Referral
-- Have you applied on the site above? -> Yes / No
+- Where did you find the job? -> LinkedIn
+- Have you applied on the site above? -> Yes
 
 ## Agreement
 
-- [ ] I did not ask anyone for help to solve the problem.
-- [ ] I did not refer any other forks or pull requests of this repository.
-- [ ] I would make my fork private if requested after screening.
+- [x] I did not ask anyone for help to solve the problem.
+- [x] I did not refer any other forks or pull requests of this repository.
+- [x] I would make my fork private if requested after screening.

.github/workflows/ci.yml

@@ -33,5 +33,8 @@ jobs:
       - name: Lint
         run: deno lint
 
+      - name: Run Dev Server Parallel To Wait Testing
+        run: deno task dev &
+
       - name: Test
         run: deno task start && CHROME_BIN=$(which chrome) deno task test --quiet

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "es6"
+}

fresh.gen.ts

@@ -2,13 +2,20 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $0 from "./routes/index.tsx";
+import * as $0 from "./routes/error.tsx";
+import * as $1 from "./routes/index.tsx";
+import * as $2 from "./routes/jobs/[name].tsx";
+import * as $$0 from "./islands/Input.tsx";
 
 const manifest = {
   routes: {
-    "./routes/index.tsx": $0,
+    "./routes/error.tsx": $0,
+    "./routes/index.tsx": $1,
+    "./routes/jobs/[name].tsx": $2,
+  },
+  islands: {
+    "./islands/Input.tsx": $$0,
   },
-  islands: {},
   baseUrl: import.meta.url,
 };
 

islands/Input.tsx

@@ -0,0 +1,25 @@
+/** @jsx h */
+import { createRef, h } from "preact";
+
+export default function Input() {
+  const input = createRef();
+
+  const btnClickHandler = () => {
+    const aEle = document.querySelector("a") as HTMLAnchorElement;
+    if (aEle !== undefined) {
+      aEle.href = input?.current?.value
+        ? `jobs/${input?.current?.value}`
+        : "/error";
+      aEle.click();
+    }
+  };
+
+  return (
+    <div>
+      <input type="text" ref={input} />
+      <button onClick={btnClickHandler}>
+        <a>submit</a>
+      </button>
+    </div>
+  );
+}

routes/error.tsx

@@ -0,0 +1,12 @@
+/** @jsx h */
+import { h } from "preact";
+import Home from "./index.tsx";
+
+export default function InputPage(props) {
+  return (
+    <div>
+      <Home />
+      <p>error: empty input</p>
+    </div>
+  );
+}

routes/index.tsx

@@ -1,18 +1,15 @@
 /** @jsx h */
-import { h } from "preact";
+import { createRef, h } from "preact";
+import Input from "../islands/Input.tsx";
 
 export default function Home() {
   return (
     <div>
       <a href="https://www.active-connector.com/">
-        <img
-          src="/logo.png"
-          alt="Active Connector company logo"
-        />
+        <img src="/logo.png" alt="Active Connector company logo" />
       </a>
-      <h2>
-        Skill Test (Software Engineer)
-      </h2>
+      <h2>Skill Test (Software Engineer)</h2>
+      <Input />
     </div>
   );
 }

routes/jobs/[name].tsx

@@ -0,0 +1,10 @@
+/** @jsx h */
+import { h } from "preact";
+
+export default function InputPage(props) {
+  let text = `Job "${props.params.name}" is not available`;
+  if (props.params.name === "engineer") {
+    text = 'Job "engineer" is open for you!';
+  }
+  return <div>{text}</div>;
+}

start.ts

@@ -1,6 +1,5 @@
 const proc = Deno.run({
   cmd: ["deno", "task", "dev"],
 });
-
 proc.close();
 Deno.exit(0);

test.ts

@@ -3,84 +3,90 @@ import { assertEquals } from "testing/asserts.ts";
 
 const CHROME_BIN = Deno.env.get("CHROME_BIN");
 
-Deno.test("E2E test", async (t) => {
-  /* Start Sinco */
-  const { browser, page } = await buildFor("chrome", {
-    binaryPath: CHROME_BIN,
-  });
+Deno.test(
+  "E2E test",
+  {
+    sanitizeResources: false,
+    sanitizeOps: false,
+  },
+  async (t) => {
+    /* Start Sinco */
+    const { browser, page } = await buildFor("chrome", {
+      binaryPath: CHROME_BIN,
+    });
 
-  const index = "http://localhost:8000/";
+    const index = "http://localhost:8000/";
 
-  /* Beginning of tests */
+    /* Beginning of tests */
 
-  await t.step("click the logo", async () => {
-    await page.location(index);
+    await t.step("click the logo", async () => {
+      await page.location(index);
 
-    const image = await page.querySelector("img");
-    await image.click({ waitFor: "navigation" });
+      const image = await page.querySelector("img");
+      await image.click({ waitFor: "navigation" });
 
-    assertEquals(await page.location(), "https://www.active-connector.com/");
-  });
+      assertEquals(await page.location(), "https://www.active-connector.com/");
+    });
 
-  await page.location(index);
+    await page.location(index);
 
-  await t.step("input is empty", async () => {
-    const input = await page.querySelector("input");
-    assertEquals(await input.value(), "");
-  });
+    await t.step("input is empty", async () => {
+      const input = await page.querySelector("input");
+      assertEquals(await input.value(), "");
+    });
 
-  await t.step("error is not shown", async () => {
-    const error = await page.evaluate(() =>
-      document.querySelector("p")?.innerText
-    );
-    assertEquals(error, undefined);
-  });
+    await t.step("error is not shown", async () => {
+      const error = await page.evaluate(
+        () => document.querySelector("p")?.innerText,
+      );
+      assertEquals(error, undefined);
+    });
 
-  await t.step("show error for an empty input", async () => {
-    const button = await page.querySelector("button");
-    await button.click({ waitFor: "navigation" });
+    await t.step("show error for an empty input", async () => {
+      const button = await page.querySelector("button");
+      await button.click({ waitFor: "navigation" });
 
-    const error = await page.evaluate(() =>
-      document.querySelector("p")?.innerText
-    );
-    assertEquals(error, "error: empty input");
-  });
+      const error = await page.evaluate(
+        () => document.querySelector("p")?.innerText,
+      );
+      assertEquals(error, "error: empty input");
+    });
 
-  await t.step("input a random string and click the button", async () => {
-    const input = await page.querySelector("input");
+    await t.step("input a random string and click the button", async () => {
+      const input = await page.querySelector("input");
 
-    const name = crypto.randomUUID().slice(0, 7);
-    await input.value(name);
+      const name = crypto.randomUUID().slice(0, 7);
+      await input.value(name);
 
-    const button = await page.querySelector("button");
-    await button.click({ waitFor: "navigation" });
+      const button = await page.querySelector("button");
+      await button.click({ waitFor: "navigation" });
 
-    assertEquals(await page.location(), `${index}jobs/${name}`);
+      assertEquals(await page.location(), `${index}jobs/${name}`);
 
-    const body = await page.evaluate(() => {
-      return document.querySelector("div")?.innerText;
+      const body = await page.evaluate(() => {
+        return document.querySelector("div")?.innerText;
+      });
+      assertEquals(body, `Job "${name}" is not available`);
     });
-    assertEquals(body, `Job "${name}" is not available`);
-  });
 
-  await page.location(index);
+    await page.location(index);
 
-  await t.step("input 'engineer' and click the button", async () => {
-    const input = await page.querySelector("input");
-    await input.value("engineer");
+    await t.step("input 'engineer' and click the button", async () => {
+      const input = await page.querySelector("input");
+      await input.value("engineer");
 
-    const button = await page.querySelector("button");
-    await button.click({ waitFor: "navigation" });
+      const button = await page.querySelector("button");
+      await button.click({ waitFor: "navigation" });
 
-    assertEquals(await page.location(), `${index}jobs/engineer`);
+      assertEquals(await page.location(), `${index}jobs/engineer`);
 
-    const body = await page.evaluate(() => {
-      return document.querySelector("div")?.innerText;
+      const body = await page.evaluate(() => {
+        return document.querySelector("div")?.innerText;
+      });
+      assertEquals(body, `Job "engineer" is open for you!`);
     });
-    assertEquals(body, `Job "engineer" is open for you!`);
-  });
-
-  /* End of tests */
+    /* End of tests */
 
-  await browser.close();
-});
+    await browser.close();
+  },
+);