├── .husky
    ├── .gitignore
    └── pre-commit
├── docs
    ├── CNAME
    ├── assets
    │   ├── mainDemo.gif
    │   ├── SvesteLogo.png
    │   ├── githubthumbnail.png
    │   ├── savetofavorites.gif
    │   └── firstTestStatement.gif
    ├── index.html
    ├── about.html
    └── styles.css
├── .eslintignore
├── src
    ├── handlers
    │   ├── .prettierignore
    │   ├── .eslintignore
    │   ├── .prettierrc.json
    │   ├── tsconfig.json
    │   ├── .eslintrc.js
    │   ├── package.json
    │   ├── server.ts
    │   └── controllers
    │   │   ├── usersController.ts
    │   │   └── favoritesController.ts
    ├── pages
    │   ├── 404Page.svelte
    │   ├── Favorites.svelte
    │   ├── FavoritesPage.svelte
    │   ├── Home.svelte
    │   ├── HomePage.svelte
    │   ├── SignupPage.svelte
    │   └── LoginPage.svelte
    ├── types
    │   ├── modifierTypes.ts
    │   ├── actionTypes.ts
    │   ├── matcherTypes.ts
    │   └── queryTypes.ts
    ├── components
    │   ├── icons
    │   │   ├── ExpandLess.svelte
    │   │   ├── ExpandMore.svelte
    │   │   ├── StarOutline.svelte
    │   │   ├── StarFilled.svelte
    │   │   ├── ContentCopy.svelte
    │   │   └── SvesteLogo.png
    │   ├── blocks
    │   │   ├── renderBlock.svelte
    │   │   ├── modifierBlock.svelte
    │   │   ├── actionBlock.svelte
    │   │   └── executionBlock.svelte
    │   ├── statements
    │   │   ├── describeStatement.svelte
    │   │   └── testStatement.svelte
    │   ├── FormDisplay.svelte
    │   ├── NavMenu.svelte
    │   ├── form
    │   │   ├── Describe.svelte
    │   │   ├── Render.svelte
    │   │   ├── Test.svelte
    │   │   ├── Expect.svelte
    │   │   ├── Mock.svelte
    │   │   ├── Input.svelte
    │   │   ├── loginModal.svelte
    │   │   ├── DeleteButton.svelte
    │   │   ├── AddButton.svelte
    │   │   ├── UserEvent.svelte
    │   │   ├── Query.svelte
    │   │   ├── MockStatement.svelte
    │   │   ├── Assertion.svelte
    │   │   ├── AddButtonMenu.svelte
    │   │   └── Block.svelte
    │   ├── CodeDisplay.svelte
    │   ├── FavoritesDisplay.svelte
    │   ├── NavDisplay.svelte
    │   ├── LoginButton.svelte
    │   ├── InfoDisplay.svelte
    │   ├── Form.svelte
    │   ├── HomeButton.svelte
    │   ├── Footer.svelte
    │   ├── TestFormBrain.svelte
    │   ├── InputDisplay.svelte
    │   ├── FavoritesButton.svelte
    │   ├── AddFavoriteButton.svelte
    │   ├── OutputDisplay.svelte
    │   ├── FavoriteBlock.svelte
    │   ├── Header.svelte
    │   ├── CodeBlock.svelte
    │   └── NavBlock.svelte
    ├── vite-env.d.ts
    ├── assets
    │   ├── mainDemo.gif
    │   ├── githubthumbnail.png
    │   ├── savetofavorites.gif
    │   ├── firstTestStatement.gif
    │   └── mockTest.js
    ├── models
    │   ├── favoritesStore.ts
    │   ├── models.ts
    │   └── store.ts
    ├── main.ts
    ├── compiledTestStore.ts
    ├── controllers
    │   ├── textBoxController.ts
    │   ├── blockClass.ts
    │   ├── click_outside.ts
    │   ├── submitForm.ts
    │   ├── blockTypes.ts
    │   ├── favoritesController.ts
    │   └── testCompile.js
    ├── app.css
    ├── routers
    │   ├── routes.ts
    │   ├── favoritesRouter.ts
    │   └── dbroutes.ts
    ├── services
    │   └── database.services.ts
    └── App.svelte
├── .prettierignore
├── .vscode
    └── extensions.json
├── .prettierrc.json
├── tsconfig.node.json
├── svelte.config.mjs
├── samconfig.toml
├── .gitignore
├── tests
    ├── Form.test.ts
    ├── CodeBlock.test.ts
    ├── FavoriteBlock.test.ts
    ├── Header.test.ts
    ├── SignupPage.test.ts
    ├── Footer.test.ts
    ├── InputDisplay.test.ts
    ├── NavDisplay.test.ts
    ├── LoginPage.test.ts
    ├── OutputDisplay.test.ts
    ├── AddButton.test.ts
    ├── FavoritesButton.test.ts
    ├── AddButtonMenu.test.ts
    └── Block.test.ts
├── index.html
├── .eslintrc.json
├── vite.config.ts
├── tsconfig.json
├── package.json
├── .github
    └── workflows
    │   └── pipeline.yaml
├── README.md
└── template.yaml


/.husky/.gitignore:
--------------------------------------------------------------------------------
1 | _
2 | 


--------------------------------------------------------------------------------
/docs/CNAME:
--------------------------------------------------------------------------------
1 | www.sveste.dev


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | tsconfig.json


--------------------------------------------------------------------------------
/src/handlers/.prettierignore:
--------------------------------------------------------------------------------
1 | controllers/*


--------------------------------------------------------------------------------
/src/pages/404Page.svelte:
--------------------------------------------------------------------------------
1 | Page Not Found
2 | 


--------------------------------------------------------------------------------
/src/handlers/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .aws-sam


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .aws-sam
4 | src/assets


--------------------------------------------------------------------------------
/src/types/modifierTypes.ts:
--------------------------------------------------------------------------------
1 | export const modifiers = ["innerHTML", "value"];
2 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | npx lint-staged
5 | 


--------------------------------------------------------------------------------
/src/components/icons/ExpandLess.svelte:
--------------------------------------------------------------------------------
1 | <span class="material-icons"> expand_less </span>
2 | 


--------------------------------------------------------------------------------
/src/components/icons/ExpandMore.svelte:
--------------------------------------------------------------------------------
1 | <span class="material-icons"> expand_more </span>
2 | 


--------------------------------------------------------------------------------
/src/types/actionTypes.ts:
--------------------------------------------------------------------------------
1 | export const actionTypes = ["click", "hover", "type", "clear"];
2 | 


--------------------------------------------------------------------------------
/src/components/icons/StarOutline.svelte:
--------------------------------------------------------------------------------
1 | <span class="material-symbols-outlined"> star </span>
2 | 


--------------------------------------------------------------------------------
/src/types/matcherTypes.ts:
--------------------------------------------------------------------------------
1 | export const matchers = ["toBe", "toThrow", "toEqual", "toContain"];
2 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="svelte" />
2 | /// <reference types="vite/client" />
3 | 


--------------------------------------------------------------------------------
/docs/assets/mainDemo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Sveste/HEAD/docs/assets/mainDemo.gif


--------------------------------------------------------------------------------
/src/assets/mainDemo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Sveste/HEAD/src/assets/mainDemo.gif


--------------------------------------------------------------------------------
/src/components/icons/StarFilled.svelte:
--------------------------------------------------------------------------------
1 | <span class="material-icons" id="selected"> star </span>
2 | 


--------------------------------------------------------------------------------
/docs/assets/SvesteLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Sveste/HEAD/docs/assets/SvesteLogo.png


--------------------------------------------------------------------------------
/src/components/icons/ContentCopy.svelte:
--------------------------------------------------------------------------------
1 | <span class="material-symbols-outlined"> content_copy </span>
2 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["svelte.svelte-vscode", "esbenp.prettier-vscode"]
3 | }
4 | 


--------------------------------------------------------------------------------
/docs/assets/githubthumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Sveste/HEAD/docs/assets/githubthumbnail.png


--------------------------------------------------------------------------------
/docs/assets/savetofavorites.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Sveste/HEAD/docs/assets/savetofavorites.gif


--------------------------------------------------------------------------------
/src/assets/githubthumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Sveste/HEAD/src/assets/githubthumbnail.png


--------------------------------------------------------------------------------
/src/assets/savetofavorites.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Sveste/HEAD/src/assets/savetofavorites.gif


--------------------------------------------------------------------------------
/docs/assets/firstTestStatement.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Sveste/HEAD/docs/assets/firstTestStatement.gif


--------------------------------------------------------------------------------
/src/assets/firstTestStatement.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Sveste/HEAD/src/assets/firstTestStatement.gif


--------------------------------------------------------------------------------
/src/models/favoritesStore.ts:
--------------------------------------------------------------------------------
1 | import { writable } from "svelte/store";
2 | export const favoritesStore = writable([]);
3 | 


--------------------------------------------------------------------------------
/src/components/icons/SvesteLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Sveste/HEAD/src/components/icons/SvesteLogo.png


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "es5",
3 |   "tabWidth": 2,
4 |   "semi": true,
5 |   "singleQuote": true,
6 |   "printWidth": 80
7 | }


--------------------------------------------------------------------------------
/src/handlers/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "es5",
3 |   "tabWidth": 2,
4 |   "semi": true,
5 |   "singleQuote": true,
6 |   "printWidth": 80
7 | }


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './app.css';
2 | import App from './App.svelte';
3 | 
4 | export const app = new App({
5 |   target: document.body.children[0],
6 | });
7 | 


--------------------------------------------------------------------------------
/src/compiledTestStore.ts:
--------------------------------------------------------------------------------
1 | import { writable } from "svelte/store";
2 | export const compiledTestStore = writable(`...`);
3 | export const submitSuccessful = writable();
4 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "ESNext",
5 |     "moduleResolution": "Node"
6 |   },
7 |   "include": ["vite.config.js"]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/components/blocks/renderBlock.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 |   export let id;
3 |   import Input from "../form/Input.svelte";
4 | </script>
5 | 
6 | <div>
7 |   <Input {id} inputType={"renderBlock"} />
8 | </div>
9 | 


--------------------------------------------------------------------------------
/src/types/queryTypes.ts:
--------------------------------------------------------------------------------
 1 | export const queries = [
 2 |   "getBy",
 3 |   "queryBy",
 4 |   "findBy",
 5 |   "getAllBy",
 6 |   "queryAllBy",
 7 |   "findAllBy",
 8 | ];
 9 | 
10 | export const roles = ["Role", "Text"];
11 | 


--------------------------------------------------------------------------------
/src/components/statements/describeStatement.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   export let id;
3 |   import Input from "./../form/Input.svelte";
4 | </script>
5 | 
6 | <div>
7 |   <Input {id} inputType={"describeStatement"} />
8 | </div>
9 | 


--------------------------------------------------------------------------------
/src/components/statements/testStatement.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 |   import Input from "../form/Input.svelte";
3 |   export let id;
4 | </script>
5 | 
6 | <div>
7 |   <Input {id} inputType={"testStatement"} />
8 | </div>
9 | 


--------------------------------------------------------------------------------
/svelte.config.mjs:
--------------------------------------------------------------------------------
1 | import sveltePreprocess from "svelte-preprocess";
2 | 
3 | export default {
4 |   // Consult https://github.com/sveltejs/svelte-preprocess
5 |   // for more information about preprocessors
6 |   preprocess: sveltePreprocess(),
7 | };
8 | 


--------------------------------------------------------------------------------
/src/components/FormDisplay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import TestFormBrain from '../components/TestFormBrain.svelte';
 3 | </script>
 4 | 
 5 | <div>
 6 |   <TestFormBrain />
 7 | </div>
 8 | 
 9 | <style>
10 |   div {
11 |     display: flex;
12 |     flex-direction: column;
13 |     width: 100%;
14 |   }
15 | </style>
16 | 


--------------------------------------------------------------------------------
/samconfig.toml:
--------------------------------------------------------------------------------
 1 | version = 0.1
 2 | [default]
 3 | [default.deploy]
 4 | [default.deploy.parameters]
 5 | stack_name = "sveste-app"
 6 | s3_bucket = "aws-sam-cli-managed-default-samclisourcebucket-oixts0cp9hhz"
 7 | s3_prefix = "sveste-app"
 8 | region = "us-east-1"
 9 | capabilities = "CAPABILITY_IAM"
10 | image_repositories = []
11 | 


--------------------------------------------------------------------------------
/src/pages/Favorites.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import App from '../App.svelte';
 3 |   import Header from '../components/Header.svelte';
 4 |   import FavoritesDisplay from '../components/FavoritesDisplay.svelte';
 5 |   import Footer from '../components/Footer.svelte';
 6 | </script>
 7 | 
 8 | <Header />
 9 | <FavoritesDisplay />
10 | <Footer />
11 | 


--------------------------------------------------------------------------------
/src/pages/FavoritesPage.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import App from "../App.svelte";
 3 |   import Header from "../components/Header.svelte";
 4 |   import FavoritesDisplay from "../components/FavoritesDisplay.svelte";
 5 |   import Footer from "../components/Footer.svelte";
 6 | </script>
 7 | 
 8 | <Header />
 9 | <FavoritesDisplay />
10 | <Footer />
11 | 


--------------------------------------------------------------------------------
/src/components/NavMenu.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import NavBlock from './NavBlock.svelte';
 3 |   import { testStore } from '../models/store';
 4 | </script>
 5 | 
 6 | <div>
 7 |   <NavBlock
 8 |     name={$testStore['type'] || 'root'}
 9 |     children={$testStore['children']}
10 |     id={$testStore['id']}
11 |   />
12 | </div>
13 | 
14 | <style>
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/components/form/Describe.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { blockStore } from '../../models/store';
 3 |   export let id;
 4 | </script>
 5 | 
 6 | <div>
 7 |   <input
 8 |     required
 9 |     id="describeInput"
10 |     name="describeInput"
11 |     bind:value={$blockStore[id].value}
12 |   />
13 |   <label for="describeInput">Describe</label>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | .aws-sam
 6 | node_modules
 7 | dist
 8 | dist-ssr
 9 | *.local
10 | 
11 | .aws-sam
12 | .env
13 | 
14 | # Editor directories and files
15 | .vscode/*
16 | !.vscode/extensions.json
17 | .idea
18 | .DS_Store
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | development.env
25 | 
26 | # TEMP
27 | sam-app
28 | 


--------------------------------------------------------------------------------
/src/components/form/Render.svelte:
--------------------------------------------------------------------------------
 1 | <!-- Currently not being used -->
 2 | <script>
 3 |   import { blockStore } from '../../models/store';
 4 |   export let id;
 5 | </script>
 6 | 
 7 | <div>
 8 |   <input
 9 |     required
10 |     id="renderInput"
11 |     name="renderInput"
12 |     bind:value={$blockStore[id].value}
13 |   />
14 |   <label for="renderInput">Render</label>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/src/components/form/Test.svelte:
--------------------------------------------------------------------------------
 1 | <!-- CUrrently not being used -->
 2 | <script>
 3 |   import { blockStore } from '../../models/store';
 4 |   export let id;
 5 | </script>
 6 | 
 7 | <div>
 8 |   <input
 9 |     required
10 |     id="testInput"
11 |     name="testInput"
12 |     bind:value={$blockStore[id].value}
13 |   />
14 |   <label for="testInput">Test Description</label>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/tests/Form.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import { describe, beforeEach, expect, it } from 'vitest';
 3 | import Form from '../src/components/Form.svelte';
 4 | 
 5 | describe('add form', () => {
 6 |   it('renders a block'),
 7 |     () => {
 8 |       let view = render(Form);
 9 |       expect(() => screen.getByRole('Block')).not.toThrow();
10 |     };
11 | });
12 | 


--------------------------------------------------------------------------------
/src/components/form/Expect.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { blockStore } from '../../models/store';
 3 |   export let id;
 4 | 
 5 |   let selectedQuery;
 6 |   let argument;
 7 |   function updateVal() {
 8 |     $blockStore[id]['value'] = `screen.${selectedQuery}('${argument}')`;
 9 |   }
10 | 
11 |   const queries = ['toContain', 'toBe', 'toBeTruthy'];
12 | </script>
13 | 
14 | <div>
15 |   <p>expect...</p>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/tests/CodeBlock.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import { describe, beforeEach, expect, it } from 'vitest';
 3 | import CodeBlock from 'src/components/CodeBlock.svelte';
 4 | 
 5 | describe('CodeBlock', () => {
 6 |   it('renders a token operator', () => {
 7 |     const view = render(CodeBlock);
 8 |     expect(() => {
 9 |       screen.getByText('...');
10 |     }).not.toThrow();
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/src/handlers/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |       "target": "es2020",
 4 |       "strict": false,
 5 |       "preserveConstEnums": true,
 6 |       "noEmit": true,
 7 |       "sourceMap": false,
 8 |       "module":"es6",
 9 |       "moduleResolution":"node",
10 |       "esModuleInterop": true, 
11 |       "skipLibCheck": true,
12 |       "forceConsistentCasingInFileNames": true,
13 |     },
14 |     "exclude": ["node_modules", "**/*.test.ts"],
15 | 
16 |     
17 |   }


--------------------------------------------------------------------------------
/src/components/CodeDisplay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import CodeBlock from './CodeBlock.svelte';
 3 |   import { compiledTestStore } from '../compiledTestStore';
 4 | </script>
 5 | 
 6 | <!-- key reloads the code block component on store change !important -->
 7 | <div>
 8 |   {#key $compiledTestStore}
 9 |     <CodeBlock />
10 |   {/key}
11 | </div>
12 | 
13 | <style>
14 |   div {
15 |     display: flex;
16 |     flex-direction: column;
17 |     width: 100%;
18 |   }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <link
 7 |       href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Symbols+Outlined"
 8 |       rel="stylesheet"
 9 |     />
10 |     <title>Sveste</title>
11 |   </head>
12 |   <body>
13 |     <div id="app"></div>
14 |     <script type="module" src="/src/main.ts"></script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/controllers/textBoxController.ts:
--------------------------------------------------------------------------------
 1 | import * as express from 'express';
 2 | import { processTestBlob } from './testCompile';
 3 | class textBoxController {
 4 |   public router = express.Router(); //delete later
 5 | 
 6 |   constructor() {}
 7 |   public createTests = (req: express.Request, res: express.Response) => {
 8 |     let stringResponse = processTestBlob(req.body);
 9 |     return res.status(200).send(stringResponse);
10 |   };
11 | }
12 | 
13 | //export statement
14 | export default textBoxController;
15 | 


--------------------------------------------------------------------------------
/src/controllers/blockClass.ts:
--------------------------------------------------------------------------------
 1 | import { idStore, testStore, blockStore } from "../models/store";
 2 | 
 3 | export class Block {
 4 |   id: string;
 5 |   type: string;
 6 |   parentId: string;
 7 |   parent: Block;
 8 |   children: Block[];
 9 |   value: string;
10 | 
11 |   constructor(type, parentId = "root0") {
12 |     this.id = idStore.newId(type);
13 |     this.type = type;
14 |     this.parentId = parentId;
15 |     this.parent = blockStore[parentId];
16 |     this.value = "";
17 |     this.children = [];
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/form/Mock.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { blockStore } from '../../models/store';
 3 |   export let id;
 4 |   let options = ['beforeEach', 'beforeAll'];
 5 | </script>
 6 | 
 7 | <div>
 8 |   <select
 9 |     required
10 |     id="mockInput"
11 |     name="mockInput"
12 |     bind:value={$blockStore[id]['value']}
13 |   >
14 |     <option>...</option>
15 |     {#each options as option}
16 |       <option value={option}>{option}</option>
17 |     {/each}
18 |   </select>
19 |   <label for="mockInput">Mock</label>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/components/FavoritesDisplay.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { favoritesStore } from '../models/favoritesStore';
 3 |   import FavoriteBlock from '../components/FavoriteBlock.svelte';
 4 | 
 5 |   let index = 0;
 6 | </script>
 7 | 
 8 | {#key $favoritesStore}
 9 |   <div class="container">
10 |     {#each $favoritesStore as fav}
11 |       <FavoriteBlock {fav} id={index + 1} />
12 |     {/each}
13 |   </div>
14 | {/key}
15 | 
16 | <style>
17 |   .container {
18 |     display: flex;
19 |     flex-direction: row;
20 |     flex-wrap: wrap;
21 |   }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/components/NavDisplay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import NavMenu from "./NavMenu.svelte";
 3 | </script>
 4 | 
 5 | <div>
 6 |   <NavMenu />
 7 | </div>
 8 | 
 9 | <style>
10 |   div {
11 |     grid-area: nav;
12 |     display: grid;
13 |     grid-template-columns: 1fr;
14 |     grid-template-rows: min-content;
15 |     padding: 2vh 1vw 2vh 2vw;
16 |     background-color: var(--primary-mid);
17 |     border-right: 1px solid var(--shadow);
18 |     border-bottom: 1px solid var(--shadow);
19 |     box-shadow: 0 0 1px 1px var(--shadow);
20 |   }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/components/form/Input.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { blockStore } from '../../models/store';
 3 |   export let id;
 4 |   export let inputType;
 5 |   function capitalizeFirstLetter(string) {
 6 |     return string.charAt(0).toUpperCase() + string.slice(1);
 7 |   }
 8 |   const labelText = capitalizeFirstLetter(inputType);
 9 |   const idText = id + inputType + 'Input';
10 | </script>
11 | 
12 | <input required id={idText} name={idText} bind:value={$blockStore[id].value} />
13 | <label for={idText}>{labelText}</label>
14 | 
15 | <!-- <style>
16 | </style> -->
17 | 


--------------------------------------------------------------------------------
/tests/FavoriteBlock.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import FavoriteBlock from 'src/components/FavoriteBlock.svelte';
 3 | import { describe, beforeEach, expect, it } from 'vitest';
 4 | 
 5 | describe('Favorite Block', () => {
 6 |   it('Renders a button', () => {
 7 |     const view = render(FavoriteBlock);
 8 |     expect(() => screen.getByRole('button')).not.toThrow();
 9 |   });
10 |   it('Can handle change', () => {
11 |     const view = render(FavoriteBlock);
12 |     expect(FavoriteBlock.prototype.handleChange).toBeDefined;
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |         "browser": true,
 4 |         "es2021": true,
 5 |         "node": true
 6 |     },
 7 |     "extends": [
 8 |         "eslint:recommended",
 9 |         "plugin:@typescript-eslint/recommended",
10 |         "prettier"
11 |     ],
12 |     "overrides": [
13 |     ],
14 |     "parser": "@typescript-eslint/parser",
15 |     "parserOptions": {
16 |         "ecmaVersion": "latest",
17 |         "sourceType": "module"
18 |     },
19 |     "plugins": [
20 |         "@typescript-eslint",
21 |         "testing-library"
22 |     ],
23 |     "rules": {
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/models/models.ts:
--------------------------------------------------------------------------------
 1 | // import * as dotenv from 'dotenv' // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
 2 | // dotenv.config();
 3 | // import express from 'express'
 4 | import type { ObjectId, ArrayElement } from 'mongodb';
 5 | export default class User {
 6 |   constructor(
 7 |     public _id: ObjectId,
 8 |     public password: string,
 9 |     public storage: Array<[]>
10 |   ) {}
11 | }
12 | 
13 | export class Session {
14 |   constructor(
15 |     public cookieId: { type: String; required: true; unique: true },
16 |     public createdAt: { type: Date }
17 |   ) {}
18 | }
19 | 


--------------------------------------------------------------------------------
/tests/Header.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import { describe, beforeEach, expect, it } from 'vitest';
 3 | import Header from '../src/components/Header.svelte';
 4 | 
 5 | describe('site header', () => {
 6 |   it('renders a heading', () => {
 7 |     const view = render(Header);
 8 |     expect(() => screen.getByRole('heading')).not.toThrow();
 9 |   });
10 | 
11 |   it('renders expected text', () => {
12 |     const view = render(Header);
13 |     screen.getByRole('heading').innerHTML = 'Test';
14 |     expect(() => screen.getByText('Test')).not.toThrow();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/components/LoginButton.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   function handleClick() {
 3 |     location.href = '/#/login';
 4 |   }
 5 | </script>
 6 | 
 7 | <button on:click={handleClick}>Login</button>
 8 | 
 9 | <style>
10 |   button {
11 |     font-size: 1rem;
12 |     color: white;
13 |     background-color: transparent;
14 |     border-radius: 0.25rem;
15 |     border: 1px solid var(--primary);
16 |     color: var(--text-light);
17 |     transition: all 0.3s;
18 |     padding: 0.5rem 1rem;
19 |     border-radius: 0.5rem;
20 |   }
21 |   button:hover {
22 |     background-color: var(--text-light);
23 |     color: var(--primary);
24 |     cursor: pointer;
25 |   }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="vitest" />
 2 | import { defineConfig } from 'vite';
 3 | import { svelte } from '@sveltejs/vite-plugin-svelte';
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [svelte()],
 8 |   build: {
 9 |     manifest: true,
10 |     rollupOptions: {
11 |       input: ['index.html'],
12 |     },
13 |   },
14 |   test: {
15 |     globals: true,
16 |     environment: 'jsdom',
17 |   },
18 |   server: {
19 |     proxy: {
20 |       '/api': {
21 |         target: 'http://127.0.0.1:3000',
22 |         changeOrigin: true,
23 |       },
24 |     },
25 |   },
26 |   define: {
27 |     'process.env': {},
28 |   },
29 | });
30 | 


--------------------------------------------------------------------------------
/src/components/InfoDisplay.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | </script>
 3 | 
 4 | <div>
 5 |   <span class="material-icons">info</span>
 6 |   <p>
 7 |     Start crafting your code by adding a <code>describe</code> statement below.
 8 |   </p>
 9 | </div>
10 | 
11 | <style>
12 |   div {
13 |     display: flex;
14 |     align-items: center;
15 |     border: 1px solid var(--shadow);
16 |     border-radius: 0.5rem;
17 |     gap: 0.5rem;
18 |     padding: 0.5rem;
19 |   }
20 |   p {
21 |     margin-block-start: 0;
22 |     margin-block-end: 0;
23 |     color: var(--text-mid);
24 |   }
25 |   .material-icons {
26 |     color: var(--shadow);
27 |   }
28 |   code {
29 |     font-size: 1rem;
30 |   }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/components/Form.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import Block from './form/Block.svelte';
 3 |   import { testStore } from '../models/store';
 4 |   import { POST } from '../controllers/submitForm';
 5 | </script>
 6 | 
 7 | <div>
 8 |   <form on:submit|preventDefault={() => POST('/tests', $testStore)}>
 9 |     <!-- <button type="submit">Submit</button> -->
10 |     <Block
11 |       id={$testStore['id']}
12 |       type={$testStore['type']}
13 |       children={$testStore['children']}
14 |     />
15 |   </form>
16 | </div>
17 | 
18 | <style>
19 |   form {
20 |     display: flex;
21 |     flex-direction: column;
22 |     position: relative;
23 |     height: 100%;
24 |     padding-top: 2rem;
25 |   }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/components/HomeButton.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   function handleClick() {
 3 |     location.href = '/#/home';
 4 |   }
 5 | </script>
 6 | 
 7 | <button type="button" on:click={handleClick}> Home</button>
 8 | 
 9 | <style>
10 |   button {
11 |     text-decoration: none;
12 | 
13 |     flex-direction: row;
14 |     border-radius: 0.25rem;
15 |     border: 1px solid var(--primary);
16 |     background-color: transparent;
17 |     font-size: 1rem;
18 |     color: var(--text-light);
19 |     transition: all 0.3s;
20 |     padding: 0.5rem 1rem;
21 |     border-radius: 0.5rem;
22 |   }
23 |   button:hover {
24 |     background-color: var(--text-light);
25 |     color: var(--primary);
26 |     cursor: pointer;
27 |   }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/tests/SignupPage.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import { describe, beforeEach, expect, it } from 'vitest';
 3 | import SignupPage from 'src/pages/SignupPage.svelte';
 4 | 
 5 | describe('Signup page', () => {
 6 |   it('Renders a Signup form', () => {
 7 |     const view = render(SignupPage);
 8 |     expect(() => screen.findByRole('form')).not.toThrow();
 9 |   });
10 |   it('Renders a Signup button', () => {
11 |     const view = render(SignupPage);
12 |     expect(() => screen.findByText('Sign Up')).not.toThrow();
13 |   });
14 |   it('Renders a Login button', () => {
15 |     const view = render(SignupPage);
16 |     expect(() => screen.findByText('Login')).not.toThrow();
17 |   });
18 | });
19 | 


--------------------------------------------------------------------------------
/tests/Footer.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import { describe, beforeEach, expect, it } from 'vitest';
 3 | import Footer from '../src/components/Footer.svelte';
 4 | 
 5 | describe('site Footer', () => {
 6 |   it('renders a link', () => {
 7 |     const view = render(Footer);
 8 |     expect(() => screen.getByRole('link')).not.toThrow();
 9 |   });
10 | 
11 |   it('renders expected text', () => {
12 |     const view = render(Footer);
13 |     screen.getByRole('link').innerHTML = 'Test';
14 |     expect(() => screen.getByText('Test')).not.toThrow();
15 |   });
16 |   it('contains an imager as well', () => {
17 |     const view = render(Footer);
18 |     expect(() => screen.getByRole('img')).not.toThrow();
19 |   });
20 | });
21 | 


--------------------------------------------------------------------------------
/src/components/form/loginModal.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   // export let modalContent;
 3 |   export let modalContent;
 4 | </script>
 5 | 
 6 | <div on:click|self class="modal">
 7 |   <div class="content">
 8 |     <h2>You Must Log In to Add Favorite</h2>
 9 |     <svelte:component this={modalContent} on:click />
10 |     <button on:click>Close</button>
11 |   </div>
12 | </div>
13 | 
14 | <style>
15 |   .modal {
16 |     background-color: rgba(0, 0, 0, 0.4);
17 |     position: absolute;
18 |     top: 0;
19 |     left: 0;
20 |     width: 100%;
21 |     height: 100%;
22 |     display: flex;
23 |     justify-content: center;
24 |     align-items: center;
25 |   }
26 | 
27 |   .content {
28 |     background-color: white;
29 |     width: 20em;
30 |     height: 20em;
31 |   }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/components/Footer.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   const src = 'src/assets/githubthumbnail.png';
 3 | </script>
 4 | 
 5 | <footer>
 6 |   <a href="https://github.com/oslabs-beta/Sveste"
 7 |     ><img {src} alt="GitHub Icon" /> | GitHub</a
 8 |   >
 9 | </footer>
10 | 
11 | <style>
12 |   footer {
13 |     /* margin-top: 15rem; */
14 |     min-height: 5rem;
15 |     width: 100%;
16 |     background-color: var(--primary);
17 |     display: flex;
18 |     justify-content: center;
19 |     align-items: center;
20 |     border-top: 3px solid var(--svelte);
21 |     /* border-bottom: 3px solid var(--svelte); */
22 |   }
23 |   img {
24 |     max-height: 16px;
25 |   }
26 |   a {
27 |     text-decoration: none;
28 |     color: black;
29 |   }
30 |   a:hover {
31 |     text-decoration: underline;
32 |   }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/handlers/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   parser: '@typescript-eslint/parser',
 3 |   parserOptions: {
 4 |     ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
 5 |     sourceType: 'module',
 6 |   },
 7 |   extends: [
 8 |     'plugin:@typescript-eslint/recommended', // recommended rules from the @typescript-eslint/eslint-plugin
 9 |     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
10 |   ],
11 |   rules: {
12 |     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
13 |     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   /* colors */
 3 |   --primary: rgba(0, 179, 137, 100%);
 4 |   --primary-mid: rgba(0, 179, 137, 75%);
 5 |   --primary-light: rgba(0, 179, 137, 10%);
 6 |   --background: rgba(0, 179, 137, 5%);
 7 |   --text: rgba(0, 0, 0, 90%);
 8 |   --text-mid: rgba(0, 0, 0, 50%);
 9 |   --text-light: rgba(255, 255, 255, 90%);
10 |   --shadow: rgba(0, 0, 0, 10%);
11 |   --highlight: rgb(255, 62, 1);
12 | }
13 | html {
14 |   font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
15 |     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
16 |   font-weight: 400;
17 |   font-size: 16px;
18 |   height: 100%;
19 | }
20 | 
21 | body {
22 |   margin: 0;
23 |   height: 100%;
24 |   background: var(--background);
25 |   color: var(--text);
26 | }
27 | 
28 | #app {
29 |   height: 100%;
30 | }
31 | 


--------------------------------------------------------------------------------
/tests/InputDisplay.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import { describe, beforeEach, expect, it } from 'vitest';
 3 | import userEvent from '@testing-library/user-event';
 4 | import InputDisplay from 'src/components/InputDisplay.svelte';
 5 | import InfoDisplay from 'src/components/InfoDisplay.svelte';
 6 | // import InfoDisplay from "src/components/InfoDisplay.svelte";
 7 | 
 8 | describe('InputDisplay', async () => {
 9 |   it('renders an infodisplay', () => {
10 |     const view = render(InputDisplay);
11 |     expect(() => {
12 |       screen.getByText('info');
13 |     }).not.toThrow();
14 |   });
15 |   it('renders a form', () => {
16 |     const view = render(InputDisplay);
17 |     expect(() => {
18 |       screen.findByRole('form');
19 |     }).not.toThrow();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/routers/routes.ts:
--------------------------------------------------------------------------------
 1 | import * as express from 'express';
 2 | import textBoxController from '../controllers/textBoxController';
 3 | 
 4 | const router = express.Router();
 5 | let controller = new textBoxController();
 6 | //Path for textBox component
 7 | router.post(
 8 |   '/',
 9 |   controller.createTests,
10 |   (req: express.Request, res: express.Response, next) => {
11 |     try {
12 |       res.status(201).send(res.locals.code);
13 |     } catch (err) {
14 |       console.log('Error in routes: ', err);
15 |       return next(err);
16 |     }
17 |   }
18 | );
19 | 
20 | // router.post('/', (request, response)=>{
21 | //   response.send({
22 | //     method: request.method,
23 | //     status: 200,
24 | //     path: request.path,
25 | //   })
26 | // })
27 | 
28 | //module.exports = router;
29 | export default router;
30 | 


--------------------------------------------------------------------------------
/tests/NavDisplay.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import { describe, beforeEach, expect, it } from 'vitest';
 3 | import NavDisplay from 'src/components/NavDisplay.svelte';
 4 | import userEvent from '@testing-library/user-event';
 5 | 
 6 | describe(`"NavDisplay"`, async () => {
 7 |   it('Renders with a root heading', async () => {
 8 |     const view = render(NavDisplay);
 9 |     expect(() => screen.getByText('root')).not.toThrow();
10 |   });
11 |   describe('When root button is clicked', async () => {
12 |     it('Does not throw an error', async () => {
13 |       const view = render(NavDisplay);
14 |       const user = userEvent.setup();
15 |       expect(
16 |         async () => await user.click(screen.getByRole('button'))
17 |       ).not.toThrow();
18 |     });
19 |   });
20 | });
21 | 


--------------------------------------------------------------------------------
/src/components/form/DeleteButton.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { testStore, blockStore } from "../../models/store";
 3 |   export let id;
 4 | 
 5 |   function handleClick(id) {
 6 |     let target = $blockStore[id];
 7 |     blockStore.deleteBlock(target);
 8 |   }
 9 | </script>
10 | 
11 | <button type="button" on:click|preventDefault={() => handleClick(id)}>-</button>
12 | 
13 | <style>
14 |   button {
15 |     display: flex;
16 |     width: 2rem;
17 |     height: 2rem;
18 |     padding: 0.5rem;
19 |     border-radius: 50%;
20 |     font-size: 1.4rem;
21 |     align-items: center;
22 |     justify-content: center;
23 |     color: var(--highlight);
24 |     border: none;
25 |     background: transparent;
26 |   }
27 |   button:hover {
28 |     background-color: var(--highlight);
29 |     color: white;
30 |   }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/controllers/click_outside.ts:
--------------------------------------------------------------------------------
 1 | export function clickOutside(node) {
 2 |   const handleClick = (event) => {
 3 |     if (!node.contains(event.target)) {
 4 |       node.dispatchEvent(new CustomEvent("outclick"));
 5 |     }
 6 |   };
 7 |   document.addEventListener("click", handleClick, true);
 8 |   return {
 9 |     destroy() {
10 |       document.removeEventListener("click", handleClick, true);
11 |     },
12 |   };
13 | }
14 | 
15 | // export function clickOutside(node, onEventFunction) {
16 | //   const handleClick = (event) => {
17 | //     var path = event.composedPath();
18 | 
19 | //     if (!path.includes(node)) {
20 | //       onEventFunction();
21 | //     }
22 | //   };
23 | 
24 | //   document.addEventListener('click', handleClick);
25 | 
26 | //   return {
27 | //     destroy() {
28 | //       document.removeEventListener('click', handleClick);
29 | //     },
30 | //   };
31 | // }
32 | 


--------------------------------------------------------------------------------
/src/routers/favoritesRouter.ts:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import type { Request, Response } from 'express';
 3 | import { favoritesController } from '../controllers/favoritesController';
 4 | const favoritesRouter = express.Router();
 5 | favoritesRouter.use(express.json());
 6 | 
 7 | favoritesRouter.get(
 8 |   '/',
 9 |   favoritesController.getFavorites,
10 |   (req: Request, res: Response) => {
11 |     return res.status(200).send(res.locals.favorites);
12 |   }
13 | );
14 | favoritesRouter.post(
15 |   '/',
16 |   favoritesController.addFavorite,
17 |   (req: Request, res: Response) => {
18 |     return res.status(200).send(res.locals.favorites);
19 |   }
20 | );
21 | favoritesRouter.put(
22 |   '/',
23 |   favoritesController.deleteFavorite,
24 |   (req: Request, res: Response) => {
25 |     return res.status(200).send(res.locals.favorites);
26 |   }
27 | );
28 | export default favoritesRouter;
29 | 


--------------------------------------------------------------------------------
/tests/LoginPage.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import { describe, beforeEach, expect, it } from 'vitest';
 3 | import LoginPage from 'src/pages/LoginPage.svelte';
 4 | import userEvent from '@testing-library/user-event';
 5 | 
 6 | describe('Login page', () => {
 7 |   it('Renders a form', () => {
 8 |     const view = render(LoginPage);
 9 |     expect(() => screen.findByRole('form')).not.toThrow();
10 |   });
11 |   it('Renders a Login Button', () => {
12 |     const view = render(LoginPage);
13 |     //check for button that has the text login and test for no errors
14 |     expect(() => screen.findByText('Login')).not.toThrow();
15 |   });
16 |   it('Renders a Signup Button', () => {
17 |     const view = render(LoginPage);
18 |     //check for button that has the text sign up and test for no errors
19 |     expect(() => screen.findByText('Signup')).not.toThrow();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/tests/OutputDisplay.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import { describe, beforeEach, expect, it } from 'vitest';
 3 | import OutputDisplay from 'src/components/OutputDisplay.svelte';
 4 | import userEvent from '@testing-library/user-event';
 5 | 
 6 | describe('Output Display', () => {
 7 |   it('Should render a favorites button', async () => {
 8 |     let view = render(OutputDisplay);
 9 |     expect(() => {
10 |       screen.getByRole('button');
11 |     }).not.toThrow();
12 |     it('Does not throw an error when clicked', async () => {
13 |       const user = userEvent.setup();
14 |       expect(
15 |         async () => await user.click(screen.getByRole('button'))
16 |       ).not.toThrow();
17 |     });
18 |   });
19 |   it('Should render a CodeBlock', () => {
20 |     let view = render(OutputDisplay);
21 |     expect(() => {
22 |       screen.getByText('...');
23 |     }).not.toThrow();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/controllers/submitForm.ts:
--------------------------------------------------------------------------------
 1 | import { compiledTestStore, submitSuccessful } from '../compiledTestStore';
 2 | import axios from 'axios';
 3 | const url = '/test';
 4 | 
 5 | export async function POST(url, body) {
 6 |   try {
 7 |     let parsedBody = JSON.stringify(body, [
 8 |       'id',
 9 |       'type',
10 |       'parentId',
11 |       'value',
12 |       'children',
13 |     ]);
14 |     const response = await axios.post(url, parsedBody, {
15 |       headers: {
16 |         'Content-Type': 'application/json',
17 |       },
18 |     });
19 |     compiledTestStore.set(response.data);
20 |     submitSuccessful.set(true);
21 |     return response.data;
22 |   } catch (err) {
23 |     submitSuccessful.set(false);
24 |     console.log(err);
25 |   }
26 | }
27 | 
28 | export function handleFormSubmission(body) {
29 |   const form = document.querySelector('form');
30 |   const formData = new FormData(form);
31 | 
32 |   let response = POST('/', JSON.stringify(body));
33 | }
34 | 


--------------------------------------------------------------------------------
/tests/AddButton.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import userEvent from '@testing-library/user-event';
 3 | import { describe, beforeEach, expect, it } from 'vitest';
 4 | import AddButton from '../src/components/form/AddButton.svelte';
 5 | 
 6 | describe(`"add" button`, () => {
 7 |   it('renders a button', () => {
 8 |     let view = render(AddButton);
 9 |     expect(() => screen.getByRole('button')).not.toThrow();
10 |   });
11 |   it('renders a button with text', () => {
12 |     let view = render(AddButton);
13 |     screen.getByRole('button').innerHTML = 'test';
14 |     expect(() => screen.getByText('test')).not.toThrow();
15 |   });
16 |   describe('when clicked', () => {
17 |     it('renders a menu', async () => {
18 |       let view = render(AddButton);
19 |       const user = userEvent.setup();
20 |       await user.click(screen.getByRole('button'));
21 |       expect(() => screen.getByRole('list')).not.toThrow();
22 |     });
23 |   });
24 | });
25 | 


--------------------------------------------------------------------------------
/src/components/TestFormBrain.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import Block from './form/Block.svelte';
 3 |   import { testStore } from '../models/store';
 4 |   import { POST } from '../controllers/submitForm';
 5 | </script>
 6 | 
 7 | <div>
 8 |   <form on:submit|preventDefault={() => POST('/tests', $testStore)}>
 9 |     <button type="submit">Submit</button>
10 |     <Block
11 |       id={$testStore['id']}
12 |       type={$testStore['type']}
13 |       children={$testStore['children']}
14 |     />
15 |   </form>
16 | </div>
17 | 
18 | <style>
19 |   form {
20 |     display: flex;
21 |     flex-direction: column;
22 |     position: relative;
23 |     flex-direction: column;
24 |     padding-top: 2rem;
25 |   }
26 |   button {
27 |     position: absolute;
28 |     right: -1rem;
29 |     top: 0.5rem;
30 |     width: fit-content;
31 |     border: none;
32 |     border-radius: 2rem;
33 |     padding: 0.5rem 1rem;
34 |     color: white;
35 |     background-color: var(--svestedarkteal);
36 |   }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/controllers/blockTypes.ts:
--------------------------------------------------------------------------------
 1 | import DescribeStatement from '../components/statements/describeStatement.svelte';
 2 | import RenderBlock from '../components/blocks/renderBlock.svelte';
 3 | import ExecutionBlock from '../components/blocks/executionBlock.svelte';
 4 | import TestStatement from '../components/statements/testStatement.svelte';
 5 | import ModifierBlock from '../components/blocks/modifierBlock.svelte';
 6 | import ActionBlock from '../components/blocks/actionBlock.svelte';
 7 | 
 8 | type TypeComponentPair = { type: string; component: any };
 9 | type BlockRef = TypeComponentPair[];
10 | 
11 | export const blockRef: BlockRef = [
12 |   { type: 'describeStatement', component: DescribeStatement },
13 |   { type: 'modifierBlock', component: ModifierBlock },
14 |   { type: 'renderBlock', component: RenderBlock },
15 |   { type: 'testStatement', component: TestStatement },
16 |   { type: 'executionBlock', component: ExecutionBlock },
17 |   { type: 'actionBlock', component: ActionBlock },
18 | ];
19 | 


--------------------------------------------------------------------------------
/tests/FavoritesButton.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import userEvent from '@testing-library/user-event';
 3 | import { describe, beforeEach, expect, it } from 'vitest';
 4 | import FavoritesButton from '../src/components/FavoritesButton.svelte';
 5 | 
 6 | describe(`"Favorites" button`, async () => {
 7 |   it('renders a button', () => {
 8 |     let view = render(FavoritesButton);
 9 |     expect(() => screen.getByRole('button')).not.toThrow();
10 |   });
11 |   it('renders a button with text', () => {
12 |     let view = render(FavoritesButton);
13 |     screen.getByRole('button').innerHTML = 'test';
14 |     expect(() => screen.getByText('test')).not.toThrow();
15 |   });
16 |   describe('when clicked', async () => {
17 |     it("doesn't throw an error", async () => {
18 |       let view = render(FavoritesButton);
19 |       const user = userEvent.setup();
20 |       expect(async () => {
21 |         await user.click(screen.getByRole('button'));
22 |       }).not.toThrow();
23 |     });
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/pages/Home.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   //import App from "../App.svelte";
 3 |   import CodeDisplay from '../components/CodeDisplay.svelte';
 4 |   import FormDisplay from '../components/FormDisplay.svelte';
 5 |   import InfoDisplay from '../components/InfoDisplay.svelte';
 6 |   import Header from '../components/Header.svelte';
 7 |   import Footer from '../components/Footer.svelte';
 8 |   import { push } from 'svelte-spa-router';
 9 | </script>
10 | 
11 | <Header />
12 | 
13 | <div class="container">
14 |   <section>
15 |     <InfoDisplay />
16 |     <FormDisplay />
17 |   </section>
18 |   <CodeDisplay />
19 | </div>
20 | <Footer />
21 | 
22 | <style>
23 |   .container {
24 |     display: grid;
25 |     grid-template-columns: repeat(auto-fit, minmax(500px, 2fr));
26 |     gap: 4vw;
27 |     padding: 4vh 4vw;
28 |     height: 100%;
29 |     /* max-width: 1200px; */
30 |   }
31 |   section {
32 |     display: flex;
33 |     flex-direction: column;
34 |     height: 100%;
35 |     gap: 1rem;
36 |     /* justify-content: space-between; */
37 |   }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/svelte/tsconfig.json",
 3 |   "ts-node": {
 4 |     "compilerOptions": {
 5 |       "module": "NodeNext"
 6 |     }
 7 |   },
 8 |   "compilerOptions": {
 9 |     "moduleResolution": "node",
10 |     "useDefineForClassFields": true,
11 |     "module": "esnext",
12 |     "resolveJsonModule": true,
13 |     "baseUrl": ".",
14 |     "strict": true,
15 |     "esModuleInterop": true,
16 |     /**
17 |      * Typecheck JS in `.svelte` and `.js` files by default.
18 |      * Disable checkJs if you'd like to use dynamic types in JS.
19 |      * Note that setting allowJs false does not prevent the use
20 |      * of JS in `.svelte` files.
21 |      */
22 |     "allowJs": true,
23 |     "checkJs": false,
24 |     "isolatedModules": true
25 |   },
26 |   "include": [
27 |     "src/**/*.d.ts",
28 |     "src/**/*.ts",
29 |     "src/**/*.js",
30 |     "src/**/*.svelte",
31 |     "tests/**/*.ts"
32 |     // "tests/**/*.js"
33 |   ],
34 |   "references": [{ "path": "./tsconfig.node.json" }],
35 |   "exclude": [
36 |     "node_modules"
37 |   ]
38 |   
39 | }
40 | 


--------------------------------------------------------------------------------
/src/handlers/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "server_function",
 3 |   "version": "0.2.0",
 4 |   "description": "Sveste serverFunction",
 5 |   "main": "server.ts",
 6 |   "author": "Sveste",
 7 |   "license": "ISC",
 8 |   "dependencies": {
 9 |     "esbuild": "^0.14.14",
10 |     "bcryptjs": "^2.4.3"
11 |   },
12 |   "scripts": {
13 |     "lint": "eslint '*.ts' --quiet --fix",
14 |     "compile": "tsc",
15 |     "test": "npm run compile && npm run unit"
16 |   },
17 |   "devDependencies": {
18 |     "@aws-sdk/client-dynamodb": "^3.186.0",
19 |     "@types/aws-lambda": "^8.10.92",
20 |     "@types/bcryptjs": "^2.4.2",
21 |     "@types/jest": "^27.4.0",
22 |     "@types/node": "^17.0.13",
23 |     "@typescript-eslint/eslint-plugin": "^5.10.2",
24 |     "@typescript-eslint/parser": "^5.10.2",
25 |     "aws-sdk": "^2.1231.0",
26 |     
27 |     "esbuild-jest": "^0.5.0",
28 |     "eslint": "^8.8.0",
29 |     "eslint-config-prettier": "^8.3.0",
30 |     "eslint-plugin-prettier": "^4.0.0",
31 |     "prettier": "^2.5.1",
32 |     "ts-node": "^10.4.0",
33 |     "typescript": "^4.5.5"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/form/AddButton.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import AddButtonMenu from './AddButtonMenu.svelte';
 3 |   import { blockRef } from '../../controllers/blockTypes';
 4 |   export let addToId,
 5 |     active = false;
 6 |   let menu = null;
 7 |   let blockTypes = blockRef.map((obj) => obj.type);
 8 |   function handleClick(e) {
 9 |     menu = !menu ? AddButtonMenu : null;
10 |     active = !active;
11 |   }
12 | </script>
13 | 
14 | <button type="button" class:active on:click|preventDefault={handleClick}
15 |   >+ {addToId
16 |     ? addToId.replace(/(.)(statement|block|)([0-9])/gi, '$1 $2').toLowerCase()
17 |     : 'root'}</button
18 | >
19 | <svelte:component this={menu} {addToId} bind:menu />
20 | 
21 | <style>
22 |   button {
23 |     display: flex;
24 |     width: fit-content;
25 |     font-size: 1rem;
26 |     margin: 1rem auto;
27 |     padding: 0.5rem 1rem;
28 |     border-radius: 0.5rem;
29 |     color: var(--primary);
30 |     background-color: transparent;
31 |     border: 1px solid var(--primary);
32 |   }
33 |   button:hover,
34 |   button.active {
35 |     background-color: var(--primary);
36 |     color: white;
37 |   }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/pages/HomePage.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import Header from '../components/Header.svelte';
 3 |   import NavDisplay from '../components/NavDisplay.svelte';
 4 |   import InputDisplay from '../components/InputDisplay.svelte';
 5 |   import OutputDisplay from '../components/OutputDisplay.svelte';
 6 | 
 7 |   let screenWidth: number;
 8 | </script>
 9 | 
10 | <svelte:window bind:innerWidth={screenWidth} />
11 | <div>
12 |   <Header />
13 |   <NavDisplay {screenWidth} />
14 |   <InputDisplay />
15 |   <OutputDisplay />
16 | </div>
17 | 
18 | <style>
19 |   div {
20 |     display: grid;
21 |     grid-template-columns: 15rem 2fr 2fr;
22 |     grid-template-rows: 65px 1fr;
23 |     grid-template-areas:
24 |       'header   header    header'
25 |       'nav      input     output';
26 |     max-width: 100%;
27 |     height: 100%;
28 |     min-width: 0;
29 |   }
30 | 
31 |   @media screen and (max-width: 1200px) {
32 |     div {
33 |       grid-template-columns: 1fr;
34 |       grid-template-rows: 65px auto minmax(0, 50vh) minmax(0, 50vh);
35 |       grid-template-areas:
36 |         'header'
37 |         'nav'
38 |         'input'
39 |         'output';
40 |     }
41 |   }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/components/InputDisplay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import Form from './Form.svelte';
 3 |   import InfoDisplay from './InfoDisplay.svelte';
 4 |   import { formHeight } from '../models/store';
 5 | </script>
 6 | 
 7 | <!--
 8 | @component Creates form component which user will enter/customize input to make the code tests appear.
 9 | -->
10 | <div class="input-display">
11 |   <div class="info-wrapper">
12 |     <InfoDisplay />
13 |   </div>
14 |   <div class="form-wrapper" bind:clientHeight={$formHeight}>
15 |     <Form />
16 |   </div>
17 | </div>
18 | 
19 | <style>
20 |   .input-display {
21 |     display: grid;
22 |     grid-template-rows: auto 1fr;
23 |     max-height: 90vh;
24 |     padding: 0 2vw;
25 |   }
26 |   .info-wrapper {
27 |     margin-top: 2em;
28 |     margin-bottom: 1em;
29 |   }
30 |   .form-wrapper {
31 |     overflow-y: auto;
32 |   }
33 |   ::-webkit-scrollbar {
34 |     width: 20px;
35 |   }
36 |   ::-webkit-scrollbar-track {
37 |     background-color: transparent;
38 |   }
39 |   ::-webkit-scrollbar-thumb {
40 |     background-color: #d6dee1;
41 |     border-radius: 20px;
42 |     border: 6px solid transparent;
43 |     background-clip: content-box;
44 |   }
45 |   ::-webkit-scrollbar-thumb:hover {
46 |     background-color: #a8bbbf;
47 |   }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/src/services/database.services.ts:
--------------------------------------------------------------------------------
 1 | import * as mongoDB from 'mongodb';
 2 | import * as dotenv from 'dotenv';
 3 | 
 4 | const DB_CONN_STRING =
 5 |   'mongodb+srv://bookbeats_dev:admin@cluster0.nduddbx.mongodb.net/?retryWrites=true&w=majority';
 6 | const DB_NAME = 'SvesteDB';
 7 | const USERS_COLLECTION_NAME = 'SvesteUsers';
 8 | const SESSIONS_COLLECTION_NAME = 'SvesteSessions';
 9 | 
10 | export const collections: {
11 |   SvesteUsers?: mongoDB.Collection;
12 |   SvesteSessions?: mongoDB.Collection;
13 | } = {};
14 | 
15 | export async function connectToDatabase() {
16 |   dotenv.config();
17 |   const client: mongoDB.MongoClient = new mongoDB.MongoClient(DB_CONN_STRING);
18 |   await client.connect();
19 |   const db: mongoDB.Db = client.db(DB_NAME);
20 |   const usersCollection: mongoDB.Collection = db.collection(
21 |     USERS_COLLECTION_NAME
22 |   );
23 |   collections.SvesteUsers = usersCollection;
24 |   const sessionsCollection: mongoDB.Collection = db.collection(
25 |     SESSIONS_COLLECTION_NAME
26 |   );
27 |   collections.SvesteSessions = sessionsCollection;
28 |   console.log(
29 |     `Successfully connected to database: ${db.databaseName} and collections: ${usersCollection.collectionName}, ${sessionsCollection.collectionName}`
30 |   );
31 | }
32 | 
33 | export default collections;
34 | 


--------------------------------------------------------------------------------
/tests/AddButtonMenu.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import { describe, beforeEach, expect, it, vi } from 'vitest';
 3 | import userEvent from '@testing-library/user-event';
 4 | import AddButtonMenu from 'src/components/form/AddButtonMenu.svelte';
 5 | //import { testStore, blockStore } from "../src/models/store";
 6 | import addBlock from 'src/components/form/AddButtonMenu.svelte';
 7 | 
 8 | describe('Add Button Menu', () => {
 9 |   beforeEach(() => {
10 |     let view = render(AddButtonMenu);
11 |     screen.getByRole('button').innerHTML = 'test';
12 |   });
13 |   //test for button if there is a root block
14 |   it('renders a button after root'),
15 |     () => {
16 |       expect(() => screen.getByRole('button')).not.toThrow();
17 |     };
18 |   it('renders a button with text', () => {
19 |     expect(() => screen.getByText('test')).not.toThrow();
20 |   });
21 | 
22 |   describe('when clicked', () => {
23 |     beforeEach(async () => {
24 |       const user = userEvent.setup();
25 |       await user.click(screen.getByRole('button'));
26 |     });
27 |     // test add block functionality
28 |     //might have to mock the function to test
29 |     it('Should add a block', () => {
30 |       expect(addBlock).toBeDefined;
31 |     });
32 |   });
33 | });
34 | 


--------------------------------------------------------------------------------
/src/components/FavoritesButton.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { push } from 'svelte-spa-router';
 3 |   import { favoritesStore } from '../models/favoritesStore';
 4 |   import { userId } from '../models/store';
 5 | 
 6 |   /*
 7 |    * Upon clicking Favorites button, redirects to favorites page. Initiates GET request to server to display user's saved codes tests
 8 |    */
 9 |   async function handleFavoritesGet() {
10 |     const params = '?' + `id=${$userId}`;
11 |     const res = await fetch('/api/favorites' + params, {
12 |       method: 'GET',
13 |     });
14 |     const data = await res.json();
15 |     favoritesStore.set(data.favorites);
16 |     return push('#/favorites');
17 |   }
18 | </script>
19 | 
20 | <button type="button" on:click={handleFavoritesGet}>Favorites</button>
21 | 
22 | <style>
23 |   button {
24 |     text-decoration: none;
25 |     flex-direction: row;
26 |     border-radius: 0.25rem;
27 |     border: 1px solid var(--primary);
28 |     background-color: transparent;
29 |     color: white;
30 |     font-size: 1rem;
31 |     color: var(--text-light);
32 |     transition: all 0.3s;
33 |     padding: 0.5rem 1rem;
34 |     border-radius: 0.5rem;
35 |   }
36 |   button:hover {
37 |     background-color: var(--text-light);
38 |     color: var(--primary);
39 |     cursor: pointer;
40 |   }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/components/form/UserEvent.svelte:
--------------------------------------------------------------------------------
 1 | <!-- Currently not being used -->
 2 | <script lang="ts">
 3 |   import { blockStore } from '../../models/store';
 4 |   import { Block } from '../../controllers/blockClass';
 5 |   export let id;
 6 |   const events = ['click', 'hover', 'type'];
 7 |   let event;
 8 |   let text;
 9 |   let selected = false;
10 |   function updateVal() {
11 |     selected = true;
12 |     $blockStore[id]['value'] = `${event}`;
13 |   }
14 |   $: if (selected) handleTypeEvent();
15 |   function handleTypeEvent() {
16 |     // console.log('the chosen one');
17 |     const newBlock = new Block('query', id);
18 |     blockStore.upsertBlock(newBlock);
19 |   }
20 | </script>
21 | 
22 | <div>
23 |   <select
24 |     required
25 |     id="eventType"
26 |     name="eventType"
27 |     bind:value={event}
28 |     on:change={() => updateVal()}
29 |   >
30 |     <option>...</option>
31 |     {#each events as value}
32 |       <option {value}>
33 |         {value}
34 |       </option>
35 |     {/each}
36 |   </select>
37 |   <label for="eventType">Event Type</label>
38 | </div>
39 | <!-- {#if event === 'type'} -->
40 | <div>
41 |   <input
42 |     required
43 |     id="eventInput"
44 |     name="eventInput"
45 |     bind:value={text}
46 |     on:change={() => updateVal()}
47 |   />
48 |   <label for="eventInput">Event Input</label>
49 | </div>
50 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import Router, { push } from 'svelte-spa-router';
 3 |   import { wrap } from 'svelte-spa-router/wrap';
 4 |   import Login from './pages/LoginPage.svelte';
 5 |   import SignUp from './pages/SignupPage.svelte';
 6 |   import NotFound from './pages/404Page.svelte';
 7 |   import Home from './pages/HomePage.svelte';
 8 |   import Favorites from './pages/FavoritesPage.svelte';
 9 |   import { userId } from './models/store';
10 | 
11 |   export const loadCookie = () => {
12 |     const myCookieValue = document.cookie;
13 |     console.log('myCookieValues: ', myCookieValue);
14 |     return myCookieValue;
15 |   };
16 | 
17 |   let routes = {
18 |     '/': Home,
19 |     '/signup': SignUp,
20 |     '/login': Login,
21 |     '/home': Home,
22 |     '/favorites': wrap({
23 |       // The Svelte component used by the route
24 |       component: Favorites,
25 |       // List of route pre-conditions
26 |       conditions: [
27 |         // First pre-condition function
28 |         (detail) => {
29 |           /********PLACEHOLDER FOR ROUTING CONDITION**********/
30 |           if (!$userId) {
31 |             push('/login');
32 |             return true;
33 |           } else {
34 |             push('/favorites');
35 |             return true;
36 |           }
37 |         },
38 |       ],
39 |     }),
40 |     '*': NotFound,
41 |   };
42 | </script>
43 | 
44 | <Router {routes} />
45 | <slot />
46 | 


--------------------------------------------------------------------------------
/src/components/AddFavoriteButton.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { userId } from '../models/store';
 3 |   import Star from './icons/StarOutline.svelte';
 4 |   import FilledStar from './icons/StarFilled.svelte';
 5 |   import { compiledTestStore } from '../compiledTestStore';
 6 |   let clicked = false;
 7 |   /*
 8 |    * Upon clicking favorites star, sends POST request to database to store all text in CodeDisplay to user database
 9 |    */
10 |   async function handleAddFavorite() {
11 |     clicked = !clicked;
12 |     try {
13 |       const response = await fetch('/api/favorites', {
14 |         method: 'POST',
15 |         headers: {
16 |           'Content-Type': 'application/json',
17 |         },
18 |         body: JSON.stringify({ id: $userId, favorite: $compiledTestStore }),
19 |       });
20 |       const data = await response.json();
21 |       return data;
22 |     } catch (err) {
23 |       console.log(err);
24 |     }
25 |   }
26 | </script>
27 | 
28 | <button on:click|preventDefault={handleAddFavorite} type="submit">
29 |   {#if !clicked}
30 |     <Star />
31 |   {:else}
32 |     <FilledStar />
33 |   {/if}
34 | </button>
35 | 
36 | <style>
37 |   button {
38 |     display: flex;
39 |     width: fit-content;
40 |     justify-self: end;
41 |     align-self: center;
42 |     color: var(--primary);
43 |     background-color: transparent;
44 |     border: none;
45 |   }
46 |   button:hover {
47 |     color: var(--highlight);
48 |     cursor: pointer;
49 |   }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/components/OutputDisplay.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import CodeBlock from './CodeBlock.svelte';
 3 |   import { compiledTestStore } from '../compiledTestStore';
 4 |   import AddFavoriteButton from './AddFavoriteButton.svelte';
 5 |   import CopyIcon from './icons/ContentCopy.svelte';
 6 | 
 7 |   const copy = () => {
 8 |     return navigator.clipboard
 9 |       .writeText($compiledTestStore)
10 |       .then(() => alert('Your unit test is copied to the clipboard!'));
11 |   };
12 | </script>
13 | 
14 | <!-- !IMPORTANT: key reloads the code block component on store change  -->
15 | 
16 | <div class="code-output">
17 |   <div class="icon-bar">
18 |     <button on:click|preventDefault={copy}><CopyIcon /></button>
19 |     <AddFavoriteButton />
20 |   </div>
21 |   {#key $compiledTestStore}
22 |     <CodeBlock />
23 |   {/key}
24 | </div>
25 | 
26 | <style>
27 |   .code-output {
28 |     display: grid;
29 |     grid-template-rows: minmax(0, 2rem) 1fr;
30 |     padding: 1vh 1vw;
31 |     margin: 2vh 2vw;
32 |     border-radius: 0.5rem;
33 |     border: 1px solid var(--shadow);
34 |   }
35 |   .icon-bar {
36 |     display: flex;
37 |     flex-direction: row;
38 |     justify-content: end;
39 |     align-items: center;
40 |   }
41 | 
42 |   button {
43 |     display: flex;
44 |     width: fit-content;
45 |     justify-self: end;
46 |     align-self: center;
47 |     color: var(--primary);
48 |     background-color: transparent;
49 |     border: none;
50 |     margin-top: 0.2rem;
51 |   }
52 |   button:hover {
53 |     color: var(--highlight);
54 |     cursor: pointer;
55 |   }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/src/handlers/server.ts:
--------------------------------------------------------------------------------
 1 | import type { APIGatewayProxyEvent, APIGatewayProxyResult } from 'aws-lambda';
 2 | import {
 3 |   getFavorites,
 4 |   addFavorite,
 5 |   deleteFavorite,
 6 | } from './controllers/favoritesController';
 7 | 
 8 | import { handleLogin, handleSignup } from './controllers/usersController';
 9 | /**
10 |  *
11 |  * @param event
12 |  * @returns API Gateway Proxy Result Object
13 |  * switch case is routed based on the passed in http method and path retrieved from event param
14 |  */
15 | export const serverFunction = async (
16 |   event: APIGatewayProxyEvent
17 | ): Promise<APIGatewayProxyResult> => {
18 |   try {
19 |     switch (`${event.httpMethod} ${event.path}`) {
20 |       case 'GET /api/favorites':
21 |         return getFavorites(event);
22 |         break;
23 |       case 'POST /api/favorites':
24 |         return addFavorite(event);
25 |         break;
26 |       case 'DELETE /api/favorites':
27 |         return deleteFavorite(event);
28 |         break;
29 |       case 'POST /api/users/login':
30 |         return handleLogin(event);
31 |         break;
32 |       case 'POST /api/users/signup':
33 |         return handleSignup(event);
34 |         break;
35 |       default:
36 |         return {
37 |           statusCode: 404,
38 |           headers: {
39 |             'Content-Type': 'application/json',
40 |           },
41 |           body: JSON.stringify({ err: 'page does not exist' }),
42 |         };
43 |     }
44 |   } catch (err) {
45 |     return {
46 |       statusCode: 400,
47 |       headers: {
48 |         'Content-Type': 'application/json',
49 |       },
50 |       body: JSON.stringify({ err: err.message }),
51 |     };
52 |   }
53 | };
54 | 


--------------------------------------------------------------------------------
/src/components/FavoriteBlock.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let fav;
 3 |   import Prism from 'prismjs';
 4 |   import { userId } from '../models/store';
 5 |   import { favoritesStore } from '../models/favoritesStore';
 6 | 
 7 |   function handleChange(codeBlock) {
 8 |     const block = codeBlock;
 9 |     Prism.highlightElement(block);
10 |   }
11 |   /*
12 |    * Upon clicking '-' button, sends DELETE request to server which deletes entry in database and updates page
13 |    */
14 |   async function handleDelete() {
15 |     try {
16 |       const res = await fetch('/api/favorites', {
17 |         method: 'DELETE',
18 |         body: JSON.stringify({
19 |           id: $userId,
20 |           index: $favoritesStore.indexOf(fav),
21 |         }),
22 |       });
23 |       const data = await res.json();
24 |       if (data) favoritesStore.set([...data]);
25 |       else favoritesStore.set([]);
26 |     } catch (err) {
27 |       console.log(err);
28 |     }
29 |   }
30 | </script>
31 | 
32 | <pre>
33 |     <code use:handleChange id="code" class="language-javascript">
34 |       {fav}
35 |     </code>
36 |   </pre>
37 | <button on:click|preventDefault={handleDelete}>-</button>
38 | 
39 | <style>
40 |   @import 'prismjs';
41 |   pre {
42 |     margin-left: 2em;
43 |     margin-top: 2em;
44 |     border-radius: 10px;
45 |     border: 2px solid var(--primary);
46 |   }
47 |   button {
48 |     display: flex;
49 |     width: 2rem;
50 |     height: 2rem;
51 |     padding: 0.5rem;
52 |     border-radius: 50%;
53 |     font-size: 1.4rem;
54 |     align-items: center;
55 |     justify-content: center;
56 |     color: var(--highlight);
57 |     border: none;
58 |     background: transparent;
59 |   }
60 |   button:hover {
61 |     background-color: var(--highlight);
62 |     color: white;
63 |   }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/components/form/Query.svelte:
--------------------------------------------------------------------------------
 1 | <!-- Currently not being used -->
 2 | <script lang="ts">
 3 |   import { blockStore } from '../../models/store';
 4 |   export let id;
 5 | 
 6 |   let selectedQuery;
 7 |   let selectedType;
 8 |   let argument;
 9 |   // $: if($blockStore[id].parentId.includes('mock')) parentIsMock = true;
10 |   function updateVal() {
11 |     console.log($blockStore[id].parentId.includes('mock'));
12 |     $blockStore[id][
13 |       'value'
14 |     ] = `screen.${selectedQuery}${selectedType}('${argument}')`;
15 |     // if(parentIsMock) $blockStore[id]["value"] += `${comparisonType} = ${modifier}`
16 |   }
17 | 
18 |   const queries = [
19 |     'getBy',
20 |     'queryBy',
21 |     'findBy',
22 |     'getAllBy',
23 |     'queryAllBy',
24 |     'findAllBy',
25 |   ];
26 |   const types = ['Role', 'Text'];
27 |   const comparisons = ['.innerHMTL', '.textContent'];
28 | </script>
29 | 
30 | <div>
31 |   <select
32 |     required
33 |     id="queryInput"
34 |     name="queryInput"
35 |     bind:value={selectedQuery}
36 |     on:change={() => updateVal()}
37 |   >
38 |     <option>...</option>
39 |     {#each queries as value}
40 |       <option {value}>
41 |         {value}
42 |       </option>
43 |     {/each}
44 |   </select>
45 |   <label for="queryInput">Query</label>
46 | </div>
47 | <div>
48 |   <select
49 |     required
50 |     id="queryType"
51 |     name="queryType"
52 |     bind:value={selectedType}
53 |     on:change={() => updateVal()}
54 |   >
55 |     <option>...</option>
56 |     {#each types as value}
57 |       <option {value}>
58 |         {value}
59 |       </option>
60 |     {/each}
61 |   </select>
62 |   <label for="queryType">Type</label>
63 | </div>
64 | <div>
65 |   <input
66 |     required
67 |     id="argumentInput"
68 |     name="argumentInput"
69 |     bind:value={argument}
70 |   />
71 |   <label for="argumentInput">Argument</label>
72 | </div>
73 | 


--------------------------------------------------------------------------------
/src/components/Header.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import FavoritesButton from '../components/FavoritesButton.svelte';
 3 |   import LoginButton from '../components/LoginButton.svelte';
 4 |   import HomeButton from '../components/HomeButton.svelte';
 5 |   import { isLoggedIn } from '../models/store';
 6 |   const logoUrl = new URL('./icons/SvesteLogo.png', import.meta.url).href;
 7 | </script>
 8 | 
 9 | <header>
10 |   <!-- <h1>🦺 Sveste</h1> -->
11 |   <a href="#/home">
12 |     <img src={logoUrl} alt="Sveste" />
13 |     <h1>Sveste</h1>
14 |   </a>
15 |   <menu>
16 |     {#if location.href.includes('login')}
17 |       <li><HomeButton /></li>
18 |     {:else if $isLoggedIn}
19 |       <li><a href="/#/home"><HomeButton /></a></li>
20 |       <li class="vl" />
21 |       <li><FavoritesButton /></li>
22 |     {:else}
23 |       <li><LoginButton /></li>
24 |     {/if}
25 |   </menu>
26 | </header>
27 | 
28 | <style>
29 |   header {
30 |     grid-area: header;
31 |     display: flex;
32 |     justify-content: space-between;
33 |     align-items: center;
34 |     padding: 1vh 2vw;
35 |     background-color: var(--primary);
36 |     color: var(--text-light);
37 |     box-shadow: 0 0 1px 1px var(--shadow);
38 |     border: 1px solid var(--shadow);
39 |   }
40 |   h1 {
41 |     color: rgb(250, 250, 250);
42 |     text-shadow: 2px 2px rgb(255, 62, 1);
43 |   }
44 |   menu {
45 |     display: flex;
46 |   }
47 |   menu > li {
48 |     list-style-type: none;
49 |   }
50 | 
51 |   .vl {
52 |     border-left: 1px solid var(--shadow);
53 |     margin-left: 0.25rem;
54 |     margin-right: 0.25rem;
55 |   }
56 | 
57 |   img {
58 |     height: 30px;
59 |   }
60 |   a {
61 |     text-decoration: none;
62 |     color: inherit;
63 |     display: flex;
64 |     align-items: center;
65 |     justify-content: space-around;
66 |     gap: 0.5rem;
67 |   }
68 |   a:hover {
69 |     text-decoration: none;
70 |   }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/components/CodeBlock.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { onMount } from 'svelte';
 3 |   import Prism from 'prismjs';
 4 |   import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
 5 |   import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
 6 |   import { compiledTestStore } from '../compiledTestStore';
 7 |   import { testStore, blockStore } from '../models/store';
 8 |   import { processTestBlob } from '../controllers/testCompile';
 9 | 
10 |   ///////----- Functionality to reload Prism on Change!!!!!!!!!----------///
11 |   //when mounted on on store change prism reruns on only the element <code>
12 |   let loaded = false;
13 | 
14 |   onMount(() => (loaded = true));
15 |   $: html = Prism.highlight(
16 |     $compiledTestStore,
17 |     Prism.languages.javascript,
18 |     'javascript'
19 |   );
20 |   $: if ($blockStore && $testStore['children']) createTest();
21 |   $: if (loaded && $compiledTestStore) handleChange();
22 |   $: $blockStore && console.log('updated block store');
23 |   function handleChange() {
24 |     const block = document.getElementById('code');
25 |     Prism.highlightElement(block);
26 |   }
27 | 
28 |   function createTest() {
29 |     let parsedBody = JSON.stringify($testStore, [
30 |       'id',
31 |       'type',
32 |       'parentId',
33 |       'value',
34 |       'children',
35 |     ]);
36 |     let nonparsed = JSON.parse(parsedBody);
37 |     compiledTestStore.set(processTestBlob(nonparsed));
38 |   }
39 |   //////-----------------------------------//////////
40 | </script>
41 | 
42 | <pre class="line-numbers">
43 |   <code id="code" class="language-javascript">
44 |   
45 |     {$compiledTestStore}
46 |   </code>
47 | </pre>
48 | 
49 | <style>
50 |   @import 'prismjs';
51 | 
52 |   pre {
53 |     height: 100%;
54 |     max-width: 100%;
55 |     padding: 0;
56 |   }
57 |   pre.line-numbers {
58 |     padding: 1vh 1rem 1vh 2rem;
59 |     color: var(--text);
60 |   }
61 |   pre:global([class*='language-']) {
62 |     background: none;
63 |     margin-top: 0;
64 |     padding-top: 0;
65 |     font-size: clamp(12px, 2vw, 16px);
66 |   }
67 | </style>
68 | 


--------------------------------------------------------------------------------
/tests/Block.test.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/svelte';
 2 | import userEvent from '@testing-library/user-event';
 3 | import { describe, beforeEach, expect, it } from 'vitest';
 4 | import Block from '../src/components/form/Block.svelte';
 5 | 
 6 | describe('Create base block', () => {
 7 |   it('renders an add button', () => {
 8 |     let view = render(Block, { type: 'root' });
 9 |     expect(() => screen.getByRole('button')).not.toThrow();
10 |     expect(() => screen.getByText('+root')).not.toThrow();
11 |   });
12 |   it('no delete button should be rendered on root block', () => {
13 |     let view = render(Block, { type: 'root' });
14 |     expect(() => screen.getByRole('DeleteButton')).toThrow();
15 |   });
16 | });
17 | 
18 | //Unsure of how to mock functionality
19 | describe('Clicking +root creates an AddButtonMenu', () => {
20 |   // beforeEach(() => {
21 |   //   let view = render(Block)
22 |   //   const user = userEvent.setup();
23 |   // })
24 |   it.todo('renders an addmenu', () => {
25 |     let view = render(Block, { type: 'root' });
26 |     const user = userEvent.setup();
27 |     user.click(screen.getByRole('button'));
28 |     expect(() => screen.getByRole('menu')).not.toThrow();
29 |   });
30 |   it.todo('it renders an add menu with describeStatement button', () => {
31 |     let view = render(Block, { type: 'root' });
32 |     const user = userEvent.setup();
33 |     user.click(screen.getByRole('button'));
34 |     console.log(view);
35 |     expect(() => screen.getByText('+describeStatement')).not.toThrow(); //this should fail
36 |   });
37 | });
38 | 
39 | //Tests describeBlock - not working
40 | describe('Add a describeStatement block', () => {
41 |   it.todo('renders an add button', () => {
42 |     let view = render(Block, { type: 'describeStatement' });
43 |     expect(() => screen.getByRole('button')).not.toThrow();
44 |     expect(() => screen.getByText('+describeStatement')).not.toThrow();
45 |   });
46 |   it.todo('renders delete button', () => {
47 |     let view = render(Block, { type: 'describeStatement' });
48 |     expect(() => screen.getByText('-')).not.toThrow();
49 |   });
50 | });
51 | 


--------------------------------------------------------------------------------
/src/assets/mockTest.js:
--------------------------------------------------------------------------------
 1 | // <pre type="code">
 2 | //   import { render, screen, fireEvent } from "@testing-library/svelte";
 3 | //   import { beforeEach, describe, expect, it } from "vitest";
 4 | //   import HelloWorld from "../your/relative/path.svelte";
 5 | 
 6 | //   describe("header component", () => {
 7 | //     beforeEach(async() => {
 8 | //       const { container } = render(HelloWorld);
 9 | //       let subject = await screen.getByRole('h2');
10 | //     });
11 | 
12 | //     it('renders "Hello World"', () => {
13 | //       expect(screen.getByRole('h2')).toContain('Hello World');
14 | //     })
15 | //   })
16 | // </pre>
17 | 
18 | // access store as $testStore
19 | 
20 | const root = {
21 |   id: "root0",
22 |   type: "root",
23 |   parent: null,
24 |   value: null,
25 |   children: [],
26 | };
27 | 
28 | const describe0 = {
29 |   id: "describe0",
30 |   type: "describe",
31 |   parent: "root0",
32 |   value: "header component",
33 |   children: [],
34 | };
35 | 
36 | const mock0 = {
37 |   id: "mock0",
38 |   type: "mock",
39 |   parent: "describe0",
40 |   value: "beforeEach",
41 |   children: [],
42 | };
43 | 
44 | const renderedComponent0 = {
45 |   id: "renderedComponent0",
46 |   type: "renderedComponent",
47 |   parent: "mock0",
48 |   value: "HelloWorld",
49 |   children: [],
50 | };
51 | 
52 | const queryStatement0 = {
53 |   id: "queryStatement0",
54 |   type: "queryStatement",
55 |   parent: "mock0",
56 |   value: "screen.getByRole('h2')",
57 |   children: [],
58 | };
59 | 
60 | const test0 = {
61 |   id: "test0",
62 |   type: "test",
63 |   parent: "describe0",
64 |   value: 'renders "Hello World"',
65 |   children: [],
66 | };
67 | 
68 | const expect0 = {
69 |   id: "expect0",
70 |   type: "expect",
71 |   parent: "test0",
72 |   value: ".toContain('Hello World')",
73 |   children: [],
74 | };
75 | 
76 | const test = root;
77 | test.children.push(describe0);
78 | //DESCRIBE CHILDREN
79 | test.children[0].children.push(mock0, test0);
80 | // MOCK CHILDREN
81 | test.children[0].children[0].children.push(renderedComponent0, queryStatement0);
82 | // TEST CHILDREN
83 | test.children[0].children[1].children.push(expect0);
84 | 
85 | export const testBody = test;
86 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sveste",
 3 |   "private": true,
 4 |   "version": "0.2.0",
 5 |   "scripts": {
 6 |     "build:frontend": "vite build",
 7 |     "build:backend": "sam build",
 8 |     "build:dev": "./buildDev.sh",
 9 |     "deploy:backend": "sam deploy",
10 |     "dev": "amazon/dynamodb-local & vite & sam build & sam local start-api",
11 |     "preview": "vite preview",
12 |     "prepare": "husky install",
13 |     "test": "vitest",
14 |     "test:coverage": "vitest run --coverage"
15 |   },
16 |   "devDependencies": {
17 |     "@aws-sdk/client-dynamodb": "^3.186.0",
18 |     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
19 |     "@sveltejs/vite-plugin-svelte": "^1.0.2",
20 |     "@testing-library/svelte": "^3.2.1",
21 |     "@testing-library/user-event": "^14.4.3",
22 |     "@tsconfig/svelte": "^3.0.0",
23 |     "@types/aws-lambda": "^8.10.92",
24 |     "@types/bcrypt": "^5.0.0",
25 |     "@types/bcryptjs": "^2.4.2",
26 |     "@types/express": "^4.17.14",
27 |     "@types/node": "^18.7.18",
28 |     "aws-lambda": "^1.0.7",
29 |     "aws-sdk": "^2.1231.0",
30 |     "axios": "^0.27.2",
31 |     "bcrypt": "^5.1.0",
32 |     "bcryptjs": "^2.4.3",
33 |     "body-parser": "^1.20.0",
34 |     "concurrently": "^7.4.0",
35 |     "cookie-parser": "^1.4.6",
36 |     "cors": "^2.8.5",
37 |     "dotenv": "^16.0.3",
38 |     "express": "^4.18.1",
39 |     "husky": "^8.0.1",
40 |     "jsdom": "^20.0.0",
41 |     "lint-staged": "^13.0.3",
42 |     "mock-aws-s3": "^4.0.2",
43 |     "mongodb": "^4.10.0",
44 |     "mongoose": "^6.6.2",
45 |     "msw": "^0.47.3",
46 |     "nock": "^13.2.9",
47 |     "nodemon": "^2.0.20",
48 |     "path": "^0.12.7",
49 |     "prettier": "^2.7.1",
50 |     "prettier-plugin-svelte": "^2.7.0",
51 |     "prismjs": "^1.29.0",
52 |     "svelte": "^3.49.0",
53 |     "svelte-check": "^2.8.1",
54 |     "svelte-copy-to-clipboard": "^0.2.5",
55 |     "svelte-preprocess": "^4.10.7",
56 |     "svelte-spa-router": "^3.3.0",
57 |     "ts-node": "^10.9.1",
58 |     "tslib": "^2.4.0",
59 |     "typescript": "^4.8.3",
60 |     "vite": "^3.1.0",
61 |     "vitest": "^0.23.4"
62 |   },
63 |   "lint-staged": {
64 |     "*.{js,ts,html,svelte,css,md}": "prettier --write"
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/components/NavBlock.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import ExpandMore from './icons/ExpandMore.svelte';
 3 |   import ExpandLess from './icons/ExpandLess.svelte';
 4 |   import AddButton from './form/AddButton.svelte';
 5 |   import type { Block } from '../controllers/blockClass';
 6 |   import {} from 'os';
 7 | 
 8 |   let isOpen = true;
 9 |   const toggleMenu = () => {
10 |     isOpen = !isOpen;
11 |   };
12 | 
13 |   /*
14 |    *
15 |    */
16 |   const scrollToAnchor = () => {
17 |     const target = document.getElementById(id);
18 |     console.log(target);
19 |     if (target) {
20 |       target.scrollIntoView({
21 |         block: 'start',
22 |         inline: 'nearest',
23 |         behavior: 'smooth',
24 |       });
25 |     }
26 |   };
27 | 
28 |   export let name: string;
29 |   export let children: Record<string, Block>[] = [];
30 |   export let id: string;
31 |   let child;
32 | 
33 |   let indent = 1.5;
34 | </script>
35 | 
36 | <button
37 |   type="button"
38 |   on:click|preventDefault={scrollToAnchor}
39 |   on:click|preventDefault={toggleMenu}
40 | >
41 |   {#if /describe|root/i.test(name)}
42 |     {#if children.length}
43 |       {#if isOpen}
44 |         <ExpandLess />
45 |       {:else}
46 |         <ExpandMore />
47 |       {/if}
48 |     {/if}
49 |   {/if}
50 |   {name.replace(/([a-z]*)(Statement|Block|)/g, '$1').toLowerCase()}
51 | </button>
52 | 
53 | <div style="padding-left: {indent}rem;">
54 |   {#if isOpen}
55 |     {#each children as child}
56 |       {#if typeof child.type === 'string' && /statement/i.test(child.type)}
57 |         <svelte:self {...child} name={child.type} blockType={'parent'} />
58 |       {/if}
59 |     {/each}
60 |   {/if}
61 | </div>
62 | 
63 | <style>
64 |   button {
65 |     display: flex;
66 |     flex-direction: row;
67 |     justify-content: start;
68 |     align-items: center;
69 |     height: 1.5rem;
70 |     width: 100%;
71 |     font-size: 1rem;
72 |     color: var(--text-mid);
73 |     border: none;
74 |     background-color: transparent;
75 |   }
76 | 
77 |   button:hover {
78 |     color: var(--text);
79 |     text-shadow: 0 0 1px var(--shadow);
80 |   }
81 |   div {
82 |     display: flex;
83 |     flex-direction: column;
84 |   }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/.github/workflows/pipeline.yaml:
--------------------------------------------------------------------------------
 1 | name: CICD
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - 'main'
 6 | 
 7 | env:
 8 |   PIPELINE_EXECUTION_ROLE: 'arn:aws:iam::901379186108:role/aws-sam-cli-managed-dev-pipe-PipelineExecutionRole-6DKZZGH2CUJN'
 9 |   CLOUDFORMATION_EXECUTION_ROLE: 'arn:aws:iam::901379186108:role/aws-sam-cli-managed-dev-p-CloudFormationExecutionR-M1VHNRR5ALZL'
10 |   ARTIFACTS_BUCKET: 'aws-sam-cli-managed-dev-pipeline-artifactsbucket-1dva20agf9f29'
11 |   FRONTEND_BUCKET_NAME: 'sveste-app-frontendbucket-l2qqug570qlg'
12 |   REGION: 'us-east-1'
13 | 
14 | jobs:
15 |   build-and-deploy:
16 |     runs-on: ubuntu-latest
17 |     steps:
18 |       - uses: actions/checkout@v2
19 |       - uses: aws-actions/setup-sam@v1
20 |       - name: Assume the pipeline user role
21 |         uses: aws-actions/configure-aws-credentials@v1
22 |         with:
23 |           aws-access-key-id: ${{secrets.AWS_ACCESS_KEY_ID}}
24 |           aws-secret-access-key: ${{secrets.AWS_SECRET_ACCESS_KEY}}
25 |           aws-region: ${{env.REGION}}
26 |           role-to-assume: ${{env.PIPELINE_EXECUTION_ROLE}}
27 |           role-session-name: deploy
28 |           role-duration-seconds: 3600
29 |           role-skip-session-tagging: true
30 |       - name: Build backend
31 |         working-directory:
32 |         run: sam build
33 |       - name: Deploy backend
34 |         working-directory:
35 |         run: |
36 |           sam deploy --stack-name sveste-app \
37 |             --capabilities CAPABILITY_IAM \
38 |             --region ${REGION} \
39 |             --s3-bucket ${ARTIFACTS_BUCKET} \
40 |             --no-fail-on-empty-changeset \
41 |             --role-arn ${CLOUDFORMATION_EXECUTION_ROLE} \
42 |             --parameter-overrides \
43 |               "PipelineRole=${PIPELINE_EXECUTION_ROLE}"
44 |       - name: Read frontend bucket name
45 |         run: |
46 |           echo "frontend_bucket_name=${{env.FRONTEND_BUCKET_NAME}}" >> $GITHUB_ENV
47 |       - name: Build frontend
48 |         working-directory:
49 |         run: npm install && npm run build:frontend
50 |       - name: Clear frontend bucket
51 |         run: |
52 |           aws s3 rm s3://${{env.FRONTEND_BUCKET_NAME}} --recursive
53 |       - name: Deploy frontend
54 |         run: |
55 |           aws s3 cp dist \
56 |             s3://${{env.FRONTEND_BUCKET_NAME}} \
57 |             --recursive
58 | 


--------------------------------------------------------------------------------
/src/components/form/MockStatement.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { blockStore } from '../../models/store';
 3 |   export let id;
 4 | 
 5 |   let selectedQuery;
 6 |   let selectedType;
 7 |   let argument;
 8 |   let attribute;
 9 |   let val;
10 |   function updateVal() {
11 |     $blockStore[id][
12 |       'value'
13 |     ] = `screen.${selectedQuery}${selectedType}('${argument}').${attribute} = "${val}"`;
14 |   }
15 | 
16 |   const queries = [
17 |     'getBy',
18 |     'queryBy',
19 |     'findBy',
20 |     'getAllBy',
21 |     'queryAllBy',
22 |     'findAllBy',
23 |   ];
24 |   const types = ['Role', 'Text'];
25 |   const attributes = ['innerHTML', 'value'];
26 | </script>
27 | 
28 | <div>
29 |   <div>
30 |     <select
31 |       required
32 |       id="queryInput"
33 |       name="queryInput"
34 |       bind:value={selectedQuery}
35 |       on:change={() => updateVal()}
36 |     >
37 |       {#each queries as value}
38 |         <option {value}>
39 |           {value}
40 |         </option>
41 |       {/each}
42 |     </select>
43 |     <label for="queryInput">Query</label>
44 |   </div>
45 |   <div>
46 |     <select
47 |       id="typeInput"
48 |       name="typeInput"
49 |       bind:value={selectedType}
50 |       on:change={() => updateVal()}
51 |     >
52 |       {#each types as value}
53 |         <option {value}>
54 |           {value}
55 |         </option>
56 |       {/each}
57 |     </select>
58 |     <label for="typeInput">Type</label>
59 |   </div>
60 |   <div>
61 |     <input
62 |       required
63 |       id="argumentInput"
64 |       name="argumentInput"
65 |       bind:value={argument}
66 |       on:change={() => updateVal()}
67 |     />
68 |     <label for="argumentInput">Argument</label>
69 |   </div>
70 |   <div>
71 |     <select
72 |       required
73 |       name="modifierInput"
74 |       id="modifierInput"
75 |       bind:value={attribute}
76 |       on:change={() => updateVal()}
77 |     >
78 |       <option>...</option>
79 |       {#each attributes as value}
80 |         <option {value}>
81 |           {value}
82 |         </option>
83 |       {/each}
84 |     </select>
85 |     <label for="modifierInput">Modifier</label>
86 |   </div>
87 |   <div>
88 |     <input
89 |       required
90 |       id="valueInput"
91 |       name="valueInput"
92 |       bind:value={val}
93 |       on:change={() => updateVal()}
94 |     />
95 |     <label for="valueInput">Value</label>
96 |   </div>
97 | </div>
98 | 


--------------------------------------------------------------------------------
/src/components/blocks/modifierBlock.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { blockStore } from '../../models/store';
 3 |   import { queries, roles } from '../../types/queryTypes';
 4 |   import { modifiers } from '../../types/modifierTypes';
 5 |   export let id: Number;
 6 |   let selectedQuery: String;
 7 |   let selectedType: String;
 8 |   let argument: String;
 9 |   let attribute: String;
10 |   let val: String;
11 |   /*
12 |    * Inserts a modifier code line into the Codedisplay, updates exported values based on user input
13 |    */
14 |   function updateVal() {
15 |     $blockStore[id][
16 |       'value'
17 |     ] = `        screen.${selectedQuery}${selectedType}('${argument}').${attribute} = '${val};'\n`;
18 |   }
19 | </script>
20 | 
21 | <div {id}>
22 |   <div>
23 |     <select
24 |       required
25 |       id="queryInput"
26 |       name="queryInput"
27 |       bind:value={selectedQuery}
28 |       on:change={() => updateVal()}
29 |     >
30 |       {#each queries as value}
31 |         <option {value}>
32 |           {value}
33 |         </option>
34 |       {/each}
35 |     </select>
36 |     <label for="queryInput">Query</label>
37 |   </div>
38 |   <div>
39 |     <select
40 |       id="typeInput"
41 |       name="typeInput"
42 |       bind:value={selectedType}
43 |       on:change={() => updateVal()}
44 |     >
45 |       {#each roles as value}
46 |         <option {value}>
47 |           {value}
48 |         </option>
49 |       {/each}
50 |     </select>
51 |     <label for="typeInput">Type</label>
52 |   </div>
53 |   <div>
54 |     <input
55 |       required
56 |       id="argumentInput"
57 |       name="argumentInput"
58 |       bind:value={argument}
59 |       on:change={() => updateVal()}
60 |     />
61 |     <label for="argumentInput">Argument</label>
62 |   </div>
63 |   <div>
64 |     <select
65 |       required
66 |       name="modifierInput"
67 |       id="modifierInput"
68 |       bind:value={attribute}
69 |       on:change={() => updateVal()}
70 |     >
71 |       <option>...</option>
72 |       {#each modifiers as value}
73 |         <option {value}>
74 |           {value}
75 |         </option>
76 |       {/each}
77 |     </select>
78 |     <label for="modifierInput">Modifier</label>
79 |   </div>
80 |   <div>
81 |     <input
82 |       required
83 |       id="valueInput"
84 |       name="valueInput"
85 |       bind:value={val}
86 |       on:change={() => updateVal()}
87 |     />
88 |     <label for="valueInput">Value</label>
89 |   </div>
90 | </div>
91 | 


--------------------------------------------------------------------------------
/src/components/form/Assertion.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { blockStore } from '../../models/store';
  3 |   export let id;
  4 | 
  5 |   let selectedAssertion;
  6 |   let argument;
  7 |   let isNot;
  8 |   function updateVal() {
  9 |     $blockStore[id]['value'] = `${isNot}.${selectedAssertion}${
 10 |       argument ? `('${argument}')` : '()'
 11 |     }`;
 12 |   }
 13 | 
 14 |   const nots = ['not', ''];
 15 | 
 16 |   const assertions = ['toBe', 'toThrow', 'toEqual', 'toContain'];
 17 | </script>
 18 | 
 19 | <div>
 20 |   <select
 21 |     id="notInput"
 22 |     name="notInput"
 23 |     bind:value={isNot}
 24 |     on:change={() => updateVal()}
 25 |   >
 26 |     <option>...</option>
 27 |     {#each nots as value}
 28 |       <option {value}>
 29 |         {value}
 30 |       </option>
 31 |     {/each}
 32 |   </select>
 33 |   <label for="notInput">Not?</label>
 34 | </div>
 35 | <div>
 36 |   <select
 37 |     id="queryInput"
 38 |     name="queryInput"
 39 |     bind:value={selectedAssertion}
 40 |     on:change={() => updateVal()}
 41 |   >
 42 |     <option>...</option>
 43 |     {#each assertions as value}
 44 |       <option {value}>
 45 |         {value}
 46 |       </option>
 47 |     {/each}
 48 |   </select>
 49 |   <label for="queryInput">Query</label>
 50 | </div>
 51 | <div>
 52 |   <input
 53 |     name="valueInput"
 54 |     id="valueInput"
 55 |     bind:value={argument}
 56 |     on:change={() => updateVal()}
 57 |   />
 58 |   <label for="valueInput">Value</label>
 59 | </div>
 60 | 
 61 | <style>
 62 |   div {
 63 |     display: flex;
 64 |     width: 100%;
 65 |     position: relative;
 66 |   }
 67 |   select {
 68 |     width: 100%;
 69 |     height: 2.5rem;
 70 |     font-size: 0.9rem;
 71 |     padding-top: 0.5rem;
 72 |     padding-left: 0.1rem;
 73 |   }
 74 |   option {
 75 |     bottom: 0;
 76 |     /* padding: 0.6rem 0 0 0.4rem; */
 77 |   }
 78 |   label {
 79 |     position: absolute;
 80 |     left: 0.5rem;
 81 |     top: 0.75rem;
 82 |     transform-origin: left top;
 83 |     transition: transform 100ms ease-in-out;
 84 |   }
 85 | 
 86 |   select:focus + label,
 87 |   select:valid + label {
 88 |     transform: translateY(-50%) scale(0.7);
 89 |     color: var(--secondary);
 90 |   }
 91 | 
 92 |   input {
 93 |     width: 100%;
 94 |     height: 1.5rem;
 95 |     font-size: 0.9rem;
 96 |     padding: 0.6rem 0 0 0.4rem;
 97 |   }
 98 | 
 99 |   input:focus + label,
100 |   input:valid + label {
101 |     transform: translateY(-50%) scale(0.7);
102 |     color: var(--secondary);
103 |     /* left: 0.1rem; */
104 |   }
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/models/store.ts:
--------------------------------------------------------------------------------
 1 | import { Block } from '../controllers/blockClass';
 2 | import { writable } from 'svelte/store';
 3 | 
 4 | function createIdStore() {
 5 |   const data = new Map();
 6 |   const { subscribe, set, update } = writable({});
 7 | 
 8 |   return {
 9 |     subscribe,
10 |     data,
11 |     newId: (type: string) => {
12 |       let id: number;
13 |       update(() => {
14 |         let val = data.has(type) ? data.get(type) : -1;
15 |         data.set(type, val + 1);
16 |         id = data.get(type);
17 |         return 'done';
18 |       });
19 |       return type + id;
20 |     },
21 |   };
22 | }
23 | 
24 | function createBlockStore() {
25 |   const data = {};
26 |   const { subscribe, set, update } = writable({});
27 |   return {
28 |     subscribe,
29 |     data,
30 |     set,
31 |     upsertBlock: (node: Block) => {
32 |       update(() => {
33 |         data[node.id] = node;
34 |         const parent = blockStore.data[node.parentId] || testStore.data;
35 |         node.parent = parent;
36 |         parent.children.push(data[node.id]);
37 |         testStore.update(() => testStore.data);
38 |         return data;
39 |       });
40 |     },
41 |     deleteBlock: (node: Block) => {
42 |       update(() => {
43 |         const targetId = node.id;
44 |         // remove ref parent
45 |         const parent = node.parent || testStore.data;
46 |         let i = 0;
47 |         let target = -1;
48 |         while (target < 0) {
49 |           let child = parent.children[i];
50 |           if (child.id == targetId) {
51 |             target = i;
52 |           }
53 |           i++;
54 |         }
55 |         if (target === 0) {
56 |           parent.children.shift();
57 |         } else if (target === parent.children.length) {
58 |           parent.children.pop();
59 |         } else {
60 |           parent.children = parent.children
61 |             .slice(0, target)
62 |             .concat(parent.children.slice(i + 1));
63 |         }
64 | 
65 |         testStore.update(() => testStore.data);
66 |         data[targetId].id = `old_${targetId}`;
67 | 
68 |         return data;
69 |       });
70 |     },
71 |   };
72 | }
73 | 
74 | function createTestStore() {
75 |   const data = new Block('root');
76 |   const { subscribe, set, update } = writable({});
77 |   return {
78 |     subscribe,
79 |     data,
80 |     update,
81 |   };
82 | }
83 | 
84 | export const blockStore = createBlockStore();
85 | export const idStore = createIdStore();
86 | export const testStore = createTestStore();
87 | export const isLoggedIn = writable(false);
88 | export const userId = writable('');
89 | export const formHeight = writable(0);
90 | 


--------------------------------------------------------------------------------
/src/components/blocks/actionBlock.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { blockStore } from '../../models/store';
 3 |   import { actionTypes } from '../../types/actionTypes';
 4 |   import { queries, roles } from '../../types/queryTypes';
 5 |   export let id: Number;
 6 |   let action: String;
 7 |   let selectedQuery: String;
 8 |   let selectedType: String;
 9 |   let argument: String;
10 |   let typeInput: String;
11 |   /*
12 |    * Inserts an action code line into the Codedisplay, updates exported values based on user input
13 |    */
14 |   function updateVal() {
15 |     if (action === 'type') console.log('im typing');
16 |     $blockStore[id]['value'] = `        const user = userEvent.setup();
17 |         await user.${action}(screen.${selectedQuery}${selectedType}('${argument}')${
18 |       action === 'type' ? `,'${typeInput}')` : ')'
19 |     };\n`;
20 |   }
21 | </script>
22 | 
23 | <div {id}>
24 |   <div>
25 |     <select
26 |       required
27 |       id="eventType"
28 |       name="eventType"
29 |       bind:value={action}
30 |       on:change={() => updateVal()}
31 |     >
32 |       <option>...</option>
33 |       {#each actionTypes as value}
34 |         <option {value}>
35 |           {value}
36 |         </option>
37 |       {/each}
38 |     </select>
39 |     <label for="eventType">Event Type</label>
40 |   </div>
41 | 
42 |   <div>
43 |     <select
44 |       required
45 |       id="queryInput"
46 |       name="queryInput"
47 |       bind:value={selectedQuery}
48 |       on:change={() => updateVal()}
49 |     >
50 |       <option>...</option>
51 |       {#each queries as value}
52 |         <option {value}>
53 |           {value}
54 |         </option>
55 |       {/each}
56 |     </select>
57 |     <label for="queryInput">Query</label>
58 |   </div>
59 |   <div>
60 |     <select
61 |       required
62 |       id="queryType"
63 |       name="queryType"
64 |       bind:value={selectedType}
65 |       on:change={() => updateVal()}
66 |     >
67 |       <option>...</option>
68 |       {#each roles as value}
69 |         <option {value}>
70 |           {value}
71 |         </option>
72 |       {/each}
73 |     </select>
74 |     <label for="queryType">Type</label>
75 |   </div>
76 |   <div>
77 |     <input
78 |       required
79 |       id="argumentInput"
80 |       name="argumentInput"
81 |       bind:value={argument}
82 |       on:change={() => updateVal()}
83 |     />
84 |     <label for="argumentInput">Argument</label>
85 |   </div>
86 |   {#if action === 'type'}
87 |     <div>
88 |       <input
89 |         required
90 |         name="typeInput"
91 |         bind:value={typeInput}
92 |         on:change={() => updateVal()}
93 |       />
94 |       <label for="typeInput">type input</label>
95 |     </div>
96 |   {/if}
97 | </div>
98 | 


--------------------------------------------------------------------------------
/src/controllers/favoritesController.ts:
--------------------------------------------------------------------------------
 1 | import type { Request, Response, NextFunction, RequestHandler } from 'express';
 2 | import type User from '../models/models';
 3 | import { collections } from '../services/database.services';
 4 | type FavoritesController = {
 5 |   addFavorite: RequestHandler;
 6 |   getFavorites: RequestHandler;
 7 |   deleteFavorite: RequestHandler;
 8 | };
 9 | 
10 | export const favoritesController: FavoritesController = {
11 |   addFavorite: async (
12 |     req: Request,
13 |     res: Response,
14 |     next: NextFunction
15 |   ): Promise<void> => {
16 |     try {
17 |       const { _id, favorite } = req.body;
18 | 
19 |       const currentUser = await collections.SvesteUsers.updateOne(
20 |         { _id: _id },
21 |         {
22 |           $push: { storage: favorite },
23 |         }
24 |       );
25 |       //not currently returning actual user data, handled in get request/get favorites
26 |       res.locals.favorites = currentUser;
27 |       return next();
28 |     } catch (err) {
29 |       return next(err);
30 |     }
31 |   },
32 |   getFavorites: async (
33 |     req: Request,
34 |     res: Response,
35 |     next: NextFunction
36 |   ): Promise<void> => {
37 |     try {
38 |       const _id = req.query._id;
39 |       const currentUser = await collections.SvesteUsers.findOne({
40 |         _id: _id,
41 |       });
42 |       res.locals.favorites = currentUser.storage;
43 |       return next();
44 |     } catch (err) {
45 |       return next(err);
46 |     }
47 |   },
48 |   deleteFavorite: async (
49 |     req: Request,
50 |     res: Response,
51 |     next: NextFunction
52 |   ): Promise<void> => {
53 |     try {
54 |       let { _id, favorite } = req.body;
55 |       console.log(req.body);
56 |       // const currentUser = await collections.SvesteUsers.updateOne(
57 |       //   { _id: _id },
58 |       //   {
59 |       //     $pull: { storage: favorite },
60 |       //   }
61 |       // );
62 |       favorite = Number(favorite);
63 |       const currentUser = await collections.SvesteUsers.findOne({
64 |         _id: _id,
65 |       });
66 |       console.log(currentUser.storage.length);
67 |       currentUser.storage.splice(favorite, 1);
68 |       console.log(currentUser.storage.length);
69 |       const updatedUser = await collections.SvesteUsers.findOneAndReplace(
70 |         {
71 |           _id: _id,
72 |         },
73 |         currentUser
74 |       );
75 |       let resultStorage = await collections.SvesteUsers.findOne({
76 |         _id: _id,
77 |       });
78 |       // const updatedUser = await updatedUser
79 |       // updatedUser = await collections.SvesteUsers[updatedUser].save();
80 |       res.locals.favorites = resultStorage.storage;
81 |       return next();
82 |     } catch (err) {
83 |       next(err);
84 |     }
85 |   },
86 | };
87 | 


--------------------------------------------------------------------------------
/src/controllers/testCompile.js:
--------------------------------------------------------------------------------
 1 | const renderImport = `    import { render, screen } from '@testing-library/svelte';\n\n`;
 2 | const vitestImport = `import { describe, expect, it } from 'vitest';\n`;
 3 | const componentImport = (componentName, path) =>
 4 |   `import ${componentName} from ${path};\n`;
 5 | /**
 6 |  *
 7 |  * @param {*} value
 8 |  * @param {*} body
 9 |  * @returns Compiled test string with body being recursively populated in process children
10 |  */
11 | const describeStatement = (value, body) =>
12 |   `    describe("${value}"), () => {
13 |     ${body}
14 |     };\n`;
15 | 
16 | const modifierBlock = (value) => `${value}`;
17 | 
18 | const renderBlock = (value) => `        const view = await render(${value});\n`;
19 | /**
20 |  *
21 |  * @param {*} value
22 |  * @param {*} body
23 |  * @returns Compiled test string with body being recursively populated in process children
24 |  */
25 | const testStatement = (value, body) =>
26 |   `  it("${value}", () => {
27 | ${body}
28 |       });\n`;
29 | 
30 | const executionBlock = (value) => value;
31 | const actionBlock = (value) => value;
32 | 
33 | const testVariables = {
34 |   componentImport,
35 |   describeStatement,
36 |   modifierBlock,
37 |   testStatement,
38 |   renderBlock,
39 |   executionBlock,
40 |   actionBlock,
41 | };
42 | 
43 | //-----------------------------------------------------------------------
44 | /**
45 |  *
46 |  * @param {*} test
47 |  * @returns string which is processed result of test variable functions
48 |  * process test block takes the test object and recursively walks through it calling test variables functions
49 |  */
50 | export function processTestBlob(test) {
51 |   let resultString = '';
52 |   resultString += vitestImport;
53 |   resultString += renderImport;
54 |   resultString += processRoot(test.children);
55 |   return resultString;
56 | }
57 | /**
58 |  *
59 |  * @param {*} describeArr
60 |  * describeArr is an array of all describe statements made by the user
61 |  * process children is called on each describe object
62 |  */
63 | function processRoot(describeArr) {
64 |   let resultString = '';
65 |   describeArr.forEach((describeObj) => {
66 |     resultString += describeStatement(
67 |       describeObj.value,
68 |       processChildren(describeObj.children)
69 |     );
70 |   });
71 |   return resultString;
72 | }
73 | /**
74 |  *
75 |  * @param {*} childArr
76 |  * @param {*} body
77 |  * process children calls itself recursively until there are no more children objects in the child array
78 |  * concatenates returned string from test variable function to body and returns body
79 |  */
80 | function processChildren(childArr, body = '') {
81 |   if (childArr.length !== 0) {
82 |     const value = childArr[0].value;
83 |     const type = childArr[0].type;
84 |     const children = childArr[0].children;
85 | 
86 |     body += testVariables[type](value, processChildren(children));
87 |     body = processChildren(childArr.slice(1), body);
88 |   }
89 | 
90 |   return body;
91 | }
92 | 


--------------------------------------------------------------------------------
/src/routers/dbroutes.ts:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import type { Request, Response } from 'express';
 3 | import { ObjectId } from 'mongodb';
 4 | import { collections } from '../services/database.services';
 5 | import type User from '../models/models';
 6 | import { Session } from '../models/models';
 7 | // import {push} from 'svelte-spa-router';
 8 | import bcrypt from 'bcrypt';
 9 | 
10 | const dbRouter = express.Router();
11 | const SALT_WORK_FACTOR = 10;
12 | 
13 | dbRouter.use(express.json());
14 | /*
15 |  * Router signup request to create/insert 1 new user entry into database, checks for existing email collisions and returns appropriate loggedIn status
16 |  */
17 | dbRouter.post('/signup', async (req: Request, res: Response) => {
18 |   try {
19 |     console.log('creating new user');
20 |     const newUser = req.body as User;
21 |     //Hash password here
22 |     const password = newUser.password;
23 |     const salt = await bcrypt.genSalt(Number(SALT_WORK_FACTOR));
24 |     const hashPassword = await bcrypt.hash(password, salt);
25 |     newUser.password = hashPassword;
26 |     const result = await collections.SvesteUsers.insertOne(newUser);
27 | 
28 |     if (result) return res.status(200).send({ loggedIn: true });
29 |     else return res.status(406).send({ loggedIn: false });
30 |   } catch (error) {
31 |     console.error('Email already taken');
32 |     res.status(406).send(error.message);
33 |   }
34 | });
35 | 
36 | /*
37 |  * Router login request to verify user email and password entry into to homepage, returns appropriate loggedIn status
38 |  */
39 | dbRouter.post('/login', async (req: Request, res: Response) => {
40 |   try {
41 |     console.log('trying to log in');
42 |     // const user = req.body as User;
43 |     const { _id, password } = req.body;
44 |     const user = { _id, password };
45 |     const query = { _id: user._id };
46 |     const returnedUser = (await collections.SvesteUsers.findOne(query)) as User;
47 |     if (returnedUser === null) {
48 |       alert('Incorrect or unfound email'); //redirect('/signup')
49 |       res.sendStatus(406);
50 |     }
51 |     const passwordsMatch = await bcrypt.compare(
52 |       user.password,
53 |       returnedUser.password
54 |     );
55 |     if (!passwordsMatch) {
56 |       return res.status(406).send('Incorrect password');
57 |     } else {
58 |       //set some sort of state or token on the session
59 |       let loggedIn = { loggedIn: true };
60 |       // const newSession = await SessionModel.create()
61 |       const session = await collections.SvesteSessions.insertOne({
62 |         cookieId: _id,
63 |         createdAt: new Date(),
64 |       });
65 |       // res.cookie('ssid', _id ,{httpOnly: true, secure: true});
66 |       return res
67 |         .cookie('ssid', _id, { httpOnly: true, maxAge: 864000 })
68 |         .status(200)
69 |         .send(loggedIn);
70 |     }
71 |   } catch (error) {
72 |     console.error('Error logging in: ', error);
73 |     res.status(400).send(error.message);
74 |   }
75 | });
76 | 
77 | export default dbRouter;
78 | 


--------------------------------------------------------------------------------
/src/components/form/AddButtonMenu.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { blockStore } from '../../models/store';
  3 |   import { Block } from '../../controllers/blockClass';
  4 |   import { blockRef } from '../../controllers/blockTypes';
  5 |   export let addToId: string;
  6 |   export let menu;
  7 |   let showMenu = true;
  8 |   let blockTypes = blockRef.map((obj) => obj.type);
  9 |   let handleBlocks = handleBlockTypes();
 10 |   blockTypes = handleBlocks;
 11 | 
 12 |   $: if (addToId === 'root0') console.log('im a root');
 13 | 
 14 |   export function addBlock(blockType: string) {
 15 |     const newBlock = new Block(blockType, addToId);
 16 |     blockStore.upsertBlock(newBlock);
 17 |     menu = null;
 18 |   }
 19 |   function handleClickOutside() {
 20 |     showMenu = false;
 21 |   }
 22 |   function handleBlockTypes() {
 23 |     switch (true) {
 24 |       case !addToId:
 25 |         return blockTypes.filter((type) => type === 'describeStatement');
 26 |         break;
 27 | 
 28 |       case /root/.test(addToId):
 29 |         return blockTypes.filter((type) => type === 'describeStatement');
 30 |         break;
 31 | 
 32 |       case /describeStatement/.test(addToId):
 33 |         return blockTypes.filter(
 34 |           (type) => type === 'describeStatement' || type === 'testStatement'
 35 |         );
 36 | 
 37 |       case /modifierBlock/.test(addToId):
 38 |         return [];
 39 |         break;
 40 | 
 41 |       case /testStatement/.test(addToId):
 42 |         return blockTypes.filter(
 43 |           (type) =>
 44 |             type === 'executionBlock' ||
 45 |             type === 'renderBlock' ||
 46 |             type === 'actionBlock' ||
 47 |             type === 'modifierBlock'
 48 |         );
 49 | 
 50 |       case /executionBlock/.test(addToId):
 51 |         return [];
 52 |         break;
 53 | 
 54 |       case /renderBlock/.test(addToId):
 55 |         return blockTypes.filter((type) => type === 'assertion');
 56 |         break;
 57 | 
 58 |       default:
 59 |         return blockTypes;
 60 |     }
 61 |   }
 62 | </script>
 63 | 
 64 | <menu>
 65 |   <h3>Add new:</h3>
 66 |   <div class="buttonWrapper">
 67 |     {#each blockTypes as blockType (blockType)}
 68 |       <button on:click|preventDefault={() => addBlock(blockType)}
 69 |         >{blockType
 70 |           .replace(/([a-z]*)(Statement|Block|)/g, '$1 $2')
 71 |           .toLowerCase()}</button
 72 |       >
 73 |     {/each}
 74 |   </div>
 75 | </menu>
 76 | 
 77 | <style>
 78 |   menu {
 79 |     display: flex;
 80 |     flex-direction: row;
 81 |     list-style-type: none;
 82 |     border: 1px solid var(--primary-mid);
 83 |     margin: 1rem 0;
 84 |     padding: 2rem 1rem;
 85 |     border-radius: 0.5rem;
 86 |     background: var(--transparent);
 87 |     justify-content: center;
 88 |     align-items: baseline;
 89 |     gap: 1rem;
 90 |   }
 91 |   h3 {
 92 |     margin: 0 0 1rem 0;
 93 |     color: var(--text-mid);
 94 |   }
 95 |   .buttonWrapper {
 96 |     display: flex;
 97 |     gap: 0.5rem;
 98 |   }
 99 |   button {
100 |     font-size: 1rem;
101 |     background: var(--transparent);
102 |     color: var(--primary);
103 |     border: 2px solid var(--primary);
104 |     border-radius: 0.5rem;
105 |     padding: 0.5rem 1rem;
106 |   }
107 |   button:hover {
108 |     background: var(--primary);
109 |     color: white;
110 |   }
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/handlers/controllers/usersController.ts:
--------------------------------------------------------------------------------
  1 | import type { APIGatewayProxyEvent, APIGatewayProxyResult } from 'aws-lambda';
  2 | import { DocumentClient } from 'aws-sdk/clients/dynamodb';
  3 | import { genSalt, hash, compare } from 'bcryptjs';
  4 | 
  5 | const db = process.env.AWS_SAM_LOCAL
  6 |   ? new DocumentClient({
  7 |       endpoint: 'http://host.docker.internal:8000',
  8 |     })
  9 |   : new DocumentClient();
 10 | 
 11 | let headers = {
 12 |   'Content-Type': 'application/json',
 13 | };
 14 | /**
 15 |  *
 16 |  * @param event
 17 |  * @returns response object
 18 |  * body is an error message if email is taken otherwise it returns email and isLoggedIn bool = true
 19 |  * creates an entry in the favorites table with key of id being linked to the new user
 20 |  */
 21 | export const handleSignup = async (
 22 |   event: APIGatewayProxyEvent
 23 | ): Promise<APIGatewayProxyResult> => {
 24 |   try {
 25 |     const { email, password } = event.queryStringParameters;
 26 |     const salt = await genSalt(10);
 27 |     const hashedPassword = await hash(password, salt);
 28 |     const get = await db
 29 |       .get({
 30 |         TableName: 'UsersTable',
 31 |         Key: {
 32 |           ID: email,
 33 |         },
 34 |       })
 35 |       .promise();
 36 |     if (await get.hasOwnProperty('Item')) {
 37 |       return {
 38 |         statusCode: 409,
 39 |         headers,
 40 |         body: JSON.stringify({
 41 |           message: 'Email already in use',
 42 |         }),
 43 |       };
 44 |     }
 45 |     const write = await db
 46 |       .put({
 47 |         TableName: 'UsersTable',
 48 |         Item: {
 49 |           ID: email,
 50 |           email,
 51 |           password: hashedPassword,
 52 |         },
 53 |       })
 54 |       .promise();
 55 |     const createFav = await db
 56 |       .put({
 57 |         TableName: 'FavoritesTable',
 58 |         Item: {
 59 |           ID: email,
 60 |           favorites: [],
 61 |         },
 62 |       })
 63 |       .promise();
 64 | 
 65 |     return {
 66 |       statusCode: 200,
 67 |       headers,
 68 |       body: JSON.stringify({
 69 |         isValidLogin: true,
 70 |         email,
 71 |       }),
 72 |     };
 73 |   } catch (err: Error | unknown) {
 74 |     return {
 75 |       statusCode: 500,
 76 |       headers,
 77 |       body: JSON.stringify({
 78 |         message: err instanceof Error ? err.message : 'some error happened',
 79 |       }),
 80 |     };
 81 |   }
 82 | };
 83 | /**
 84 |  *
 85 |  * @param event
 86 |  * @returns response object with isValidLogin bool as key
 87 |  */
 88 | export const handleLogin = async (
 89 |   event: APIGatewayProxyEvent
 90 | ): Promise<APIGatewayProxyResult> => {
 91 |   try {
 92 |     const { email, password } = event.queryStringParameters;
 93 |     const get = await db
 94 |       .get({
 95 |         TableName: 'UsersTable',
 96 |         Key: {
 97 |           ID: email,
 98 |         },
 99 |       })
100 |       .promise();
101 |     const isValidLogin = await compare(password, await get.Item.password);
102 |     if (!isValidLogin) throw Error('Incorrect email or password.');
103 |     return {
104 |       statusCode: 200,
105 |       body: JSON.stringify({
106 |         isValidLogin,
107 |         email,
108 |       }),
109 |     };
110 |   } catch (err) {
111 |     return {
112 |       statusCode: 401,
113 |       body: JSON.stringify({ err: err.message }),
114 |     };
115 |   }
116 | };
117 | 


--------------------------------------------------------------------------------
/src/components/form/Block.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { formHeight } from '../../models/store';
  3 |   import AddButton from './AddButton.svelte';
  4 |   import DeleteButton from './DeleteButton.svelte';
  5 |   import { blockRef } from '../../controllers/blockTypes';
  6 |   import AddButtonMenu from './AddButtonMenu.svelte';
  7 |   export let id = '',
  8 |     type,
  9 |     children = [],
 10 |     indent = 0;
 11 |   let marginLeft = 0;
 12 |   $: height = /statement/i.test(type) ? `min-height: ${$formHeight}px` : '';
 13 |   function getComponent() {
 14 |     for (let ref of blockRef) {
 15 |       if (ref.type === type) return ref.component;
 16 |     }
 17 |   }
 18 | 
 19 |   const blockIncludeBtns = {
 20 |     null: 1,
 21 |     root: 1,
 22 |     describeStatement: 1,
 23 |     testStatement: 1,
 24 |   };
 25 | </script>
 26 | 
 27 | <div class="blockWrapper" style={height}>
 28 |   <div {id} class="inputWrapper">
 29 |     <svelte:component this={getComponent()} {id} />
 30 |     <!-- console.log({type}); -->
 31 |     {#if type && type !== 'root'}
 32 |       <DeleteButton {id} />
 33 |     {/if}
 34 |   </div>
 35 |   {#if blockIncludeBtns.hasOwnProperty(type) || type === undefined}
 36 |     <AddButton addToId={id} />
 37 |   {/if}
 38 | 
 39 |   {#each children as child}
 40 |     <svelte:self {...child} indent={indent + 1} />
 41 |   {/each}
 42 | </div>
 43 | 
 44 | <style>
 45 |   .blockWrapper {
 46 |     display: flex;
 47 |     flex-direction: column;
 48 |     width: 100%;
 49 |     padding: 0.25rem 0;
 50 |     gap: 0.25rem;
 51 |     /* justify-content: space-between; */
 52 |   }
 53 |   .inputWrapper {
 54 |     display: flex;
 55 |     flex-direction: row;
 56 |     gap: 1rem;
 57 |     width: 100%;
 58 |     justify-content: space-between;
 59 |     align-items: center;
 60 |   }
 61 |   /* configure all child component inputs below */
 62 |   .inputWrapper :global(div) {
 63 |     display: flex;
 64 |     flex-direction: row;
 65 |     justify-self: start;
 66 |     width: 90%;
 67 |     position: relative;
 68 |   }
 69 |   .inputWrapper :global(label) {
 70 |     position: absolute;
 71 |     left: 0.25rem;
 72 |     top: 0.5rem;
 73 |     transform-origin: left top;
 74 |     transition: transform 100ms ease-in-out;
 75 |     color: var(--text-mid);
 76 |   }
 77 | 
 78 |   .inputWrapper :global(input) {
 79 |     width: 100%;
 80 |     font-size: 1rem;
 81 |     height: 1.5rem;
 82 |     padding: 0.5rem 0 0 0.25rem;
 83 |     border: none;
 84 |     border-bottom: 1px solid var(--shadow);
 85 |     background-color: transparent;
 86 |   }
 87 |   .inputWrapper :global(select) {
 88 |     width: auto;
 89 |     height: 2.5rem;
 90 |     padding-right: 1rem;
 91 |     font-size: 1rem;
 92 |     border: none;
 93 |     background-color: transparent;
 94 |   }
 95 |   .inputWrapper :global(input:focus + label),
 96 |   .inputWrapper :global(input:valid + label) {
 97 |     transform: translateY(-50%) scale(0.7);
 98 |     color: var(--text-mid);
 99 |   }
100 | 
101 |   .inputWrapper :global(select:focus + label),
102 |   .inputWrapper :global(select:valid + label) {
103 |     transform: translateY(-50%) scale(0.7);
104 |     color: var(--text-mid);
105 |   }
106 | 
107 |   .inputWrapper :global(input:focus + label),
108 |   .inputWrapper :global(select:focus + label) {
109 |     color: var(--primary);
110 |   }
111 | 
112 |   .inputWrapper :global(input:focus),
113 |   .inputWrapper :global(select:focus) {
114 |     outline: none;
115 |   }
116 | </style>
117 | 


--------------------------------------------------------------------------------
/src/handlers/controllers/favoritesController.ts:
--------------------------------------------------------------------------------
  1 | import type { APIGatewayProxyEvent, APIGatewayProxyResult } from 'aws-lambda';
  2 | import { DocumentClient } from 'aws-sdk/clients/dynamodb';
  3 | 
  4 | const db = process.env.AWS_SAM_LOCAL
  5 |   ? new DocumentClient({
  6 |       endpoint: 'http://host.docker.internal:8000',
  7 |     })
  8 |   : new DocumentClient();
  9 | /**
 10 |  *
 11 |  * @param event
 12 |  * @returns object in response object format
 13 |  * appends new favorite to favorite array using the user id
 14 |  * body of the returned object has new favorite string at key favorite
 15 |  */
 16 | export const addFavorite = async (
 17 |   event: APIGatewayProxyEvent
 18 | ): Promise<APIGatewayProxyResult> => {
 19 |   try {
 20 |     const { id, favorite } = JSON.parse(event.body);
 21 |     if (!id || !favorite.length) {
 22 |       throw Error('err: login and create a test to save favorites');
 23 |     }
 24 |     const result = await db
 25 |       .update({
 26 |         TableName: 'FavoritesTable',
 27 |         Key: { ID: id },
 28 |         // ReturnValues: 'UPDATED_NEW',
 29 |         UpdateExpression: 'SET #favorites = list_append(#favorites, :favorite)',
 30 |         ExpressionAttributeNames: {
 31 |           '#favorites': 'favorites',
 32 |         },
 33 |         ExpressionAttributeValues: {
 34 |           ':favorite': [favorite],
 35 |         },
 36 |       })
 37 |       .promise();
 38 | 
 39 |     return {
 40 |       statusCode: 200,
 41 |       body: JSON.stringify({
 42 |         message: 'Success: test saved!',
 43 |         id,
 44 |         favorite: JSON.stringify(result),
 45 |         request: event.body,
 46 |       }),
 47 |     };
 48 |   } catch (err) {
 49 |     return {
 50 |       statusCode: 400,
 51 |       body: JSON.stringify({
 52 |         message: err instanceof Error ? err.message : 'unknown error',
 53 |       }),
 54 |     };
 55 |   }
 56 | };
 57 | /**
 58 |  *
 59 |  * @param event
 60 |  * @returns object in response object format
 61 |  * body of return object is the found favorites array
 62 |  */
 63 | export const getFavorites = async (
 64 |   event: APIGatewayProxyEvent
 65 | ): Promise<APIGatewayProxyResult> => {
 66 |   try {
 67 |     const { id } = event.queryStringParameters;
 68 |     const res = await db
 69 |       .get({
 70 |         TableName: 'FavoritesTable',
 71 |         Key: {
 72 |           ID: id,
 73 |         },
 74 |         AttributesToGet: ['favorites'],
 75 |       })
 76 |       .promise();
 77 |     const data = await res.Item.favorites;
 78 |     return {
 79 |       statusCode: 200,
 80 |       body: JSON.stringify({
 81 |         favorites: data,
 82 |       }),
 83 |     };
 84 |   } catch (err) {
 85 |     return {
 86 |       statusCode: 500,
 87 |       body: JSON.stringify({
 88 |         message: err instanceof Error ? err.message : 'unknown error',
 89 |       }),
 90 |     };
 91 |   }
 92 | };
 93 | /**
 94 |  *
 95 |  * @param event
 96 |  * @returns response object with body key being the updated array
 97 |  * uses the index from the event body to remove the correct element
 98 |  */
 99 | export const deleteFavorite = async (
100 |   event: APIGatewayProxyEvent
101 | ): Promise<APIGatewayProxyResult> => {
102 |   try {
103 |     const { id, index } = JSON.parse(event.body);
104 |     const result = await db
105 |       .update({
106 |         TableName: 'FavoritesTable',
107 |         Key: { ID: id },
108 |         ReturnValues: 'ALL_NEW',
109 |         UpdateExpression: `REMOVE #favorites[${index}]`,
110 |         ExpressionAttributeNames: {
111 |           '#favorites': 'favorites',
112 |         },
113 |       })
114 |       .promise();
115 |     const res = await db
116 |       .get({
117 |         TableName: 'FavoritesTable',
118 |         Key: {
119 |           ID: id,
120 |         },
121 |         AttributesToGet: ['favorites'],
122 |       })
123 |       .promise();
124 |     const data = await res.Item.favorites;
125 |     return {
126 |       statusCode: 200,
127 |       body: JSON.stringify(data),
128 |     };
129 |   } catch (err) {
130 |     return {
131 |       statusCode: 500,
132 |       body: JSON.stringify({
133 |         message: err instanceof Error ? err.message : 'unknown error',
134 |       }),
135 |     };
136 |   }
137 | };
138 | 


--------------------------------------------------------------------------------
/src/components/blocks/executionBlock.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { blockStore } from '../../models/store';
  3 |   import { queries, roles } from '../../types/queryTypes';
  4 |   import { matchers } from '../../types/matcherTypes';
  5 |   export let id: Number;
  6 |   let selectedQuery: String;
  7 |   let selectedType: String;
  8 |   let argument: String;
  9 |   let isNot: String;
 10 |   let selectedMatcher: String;
 11 |   let matcherVal: String;
 12 |   let matcherStatement;
 13 |   /*
 14 |    * Inserts an execution code line into the Codedisplay, updates exported values based on user input
 15 |    */
 16 |   function updateVal() {
 17 |     $blockStore[id][
 18 |       'value'
 19 |     ] = `        expect(() => screen.${selectedQuery}${selectedType}('${argument}'))${
 20 |       isNot === 'not'
 21 |         ? `.${isNot}.${selectedMatcher}${matcherVal ? `(${matcherVal})` : '()'}`
 22 |         : `.${selectedMatcher}${matcherVal ? `(${matcherVal})` : '();'}`
 23 |     }\n`;
 24 |   }
 25 | 
 26 |   //   const types = ['Role', 'Text'];
 27 |   const nots = ['not', ''];
 28 | </script>
 29 | 
 30 | <p>expect</p>
 31 | <div {id}>
 32 |   <select
 33 |     required
 34 |     id="queryInput"
 35 |     name="queryInput"
 36 |     bind:value={selectedQuery}
 37 |     on:change={() => updateVal()}
 38 |   >
 39 |     <option>...</option>
 40 |     {#each queries as value}
 41 |       <option {value}>
 42 |         {value}
 43 |       </option>
 44 |     {/each}
 45 |   </select>
 46 |   <label for="queryInput">Query</label>
 47 | </div>
 48 | <div>
 49 |   <select
 50 |     required
 51 |     id="queryType"
 52 |     name="queryType"
 53 |     bind:value={selectedType}
 54 |     on:change={() => updateVal()}
 55 |   >
 56 |     <option>...</option>
 57 |     {#each roles as value}
 58 |       <option {value}>
 59 |         {value}
 60 |       </option>
 61 |     {/each}
 62 |   </select>
 63 |   <label for="queryType">Type</label>
 64 | </div>
 65 | <div>
 66 |   <input
 67 |     required
 68 |     id="argumentInput"
 69 |     name="argumentInput"
 70 |     bind:value={argument}
 71 |     on:change={() => updateVal()}
 72 |   />
 73 |   <label for="argumentInput">Argument</label>
 74 | </div>
 75 | <div {id}>
 76 |   <select
 77 |     id="notInput"
 78 |     name="notInput"
 79 |     bind:value={isNot}
 80 |     on:change={() => updateVal()}
 81 |   >
 82 |     <option>...</option>
 83 |     {#each nots as value}
 84 |       <option {value}>
 85 |         {value}
 86 |       </option>
 87 |     {/each}
 88 |   </select>
 89 |   <label for="notInput">Not?</label>
 90 | </div>
 91 | <div>
 92 |   <select
 93 |     id="queryInput"
 94 |     name="queryInput"
 95 |     bind:value={selectedMatcher}
 96 |     on:change={() => updateVal()}
 97 |   >
 98 |     <option>...</option>
 99 |     {#each matchers as value}
100 |       <option {value}>
101 |         {value}
102 |       </option>
103 |     {/each}
104 |   </select>
105 |   <label for="queryInput">Matcher</label>
106 | </div>
107 | <div>
108 |   <input
109 |     name="valueInput"
110 |     id="valueInput"
111 |     bind:value={matcherVal}
112 |     on:change={() => updateVal()}
113 |   />
114 |   <label for="valueInput">Value</label>
115 | </div>
116 | 
117 | <style>
118 |   div {
119 |     display: flex;
120 |     width: 100%;
121 |     position: relative;
122 |   }
123 |   select {
124 |     width: 100%;
125 |     height: 2.5rem;
126 |     font-size: 0.9rem;
127 |     padding-top: 0.5rem;
128 |     padding-left: 0.1rem;
129 |   }
130 |   option {
131 |     bottom: 0;
132 |     /* padding: 0.6rem 0 0 0.4rem; */
133 |   }
134 |   label {
135 |     position: absolute;
136 |     left: 0.5rem;
137 |     top: 0.75rem;
138 |     transform-origin: left top;
139 |     transition: transform 100ms ease-in-out;
140 |   }
141 | 
142 |   select:focus + label,
143 |   select:valid + label {
144 |     transform: translateY(-50%) scale(0.7);
145 |     color: var(--text-mid);
146 |   }
147 | 
148 |   input {
149 |     width: 100%;
150 |     height: 1.5rem;
151 |     font-size: 0.9rem;
152 |     padding: 0.6rem 0 0 0.4rem;
153 |   }
154 | 
155 |   input:focus + label,
156 |   input:valid + label {
157 |     transform: translateY(-50%) scale(0.7);
158 |     color: var(--text-mid);
159 |     /* left: 0.1rem; */
160 |   }
161 | </style>
162 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-US">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <link rel="stylesheet" href="styles.css" />
  7 |     <title>Sveste | A no code GUI for writing great unit tests</title>
  8 |   </head>
  9 |   <body>
 10 |     <div class="container">
 11 |       <header>
 12 |         <a href="index.html">
 13 |           <img
 14 |             class="logo-header"
 15 |             style="height: 35px"
 16 |             src="./assets/SvesteLogo.png"
 17 |           />
 18 |         </a>
 19 |         <menu>
 20 |           <li>
 21 |             <a href="https://github.com/oslabs-beta/Sveste" target="_blank"
 22 |               >Github</a
 23 |             >
 24 |           </li>
 25 |           <li><a href="about.html">About</a></li>
 26 |           <a href="https://app.sveste.dev"
 27 |             ><button class="cta alt">Try it</button></a
 28 |           >
 29 |         </menu>
 30 |       </header>
 31 |       <div class="hero">
 32 |         <section class="hero-headline">
 33 |           <h1>
 34 |             <span><img class="hero-logo" src="./assets/SvesteLogo.png" /></span
 35 |             >Sveste
 36 |           </h1>
 37 |           <p>A no code GUI for writing great unit tests.</p>
 38 |           <a href="https://app.sveste.dev"
 39 |             ><button class="cta alt">Try it</button></a
 40 |           >
 41 |         </section>
 42 |       </div>
 43 |       <main>
 44 |         <section class="feature-center">
 45 |           <h2>Write great tests with your non-technical experts.</h2>
 46 |           <p>
 47 |             Great unit tests focus on the <i>user</i> experience. But your
 48 |             <i>user</i>
 49 |             experts (i.e. your sales, marketing, and service reps) can't code.
 50 |             Bring them into the process with our no-code GUI.
 51 |           </p>
 52 |         </section>
 53 |         <section class="feature left">
 54 |           <div class="feature-content">
 55 |             <h2>Craft tests using a no-code GUI</h2>
 56 |             <ul>
 57 |               <li>Assemble your test with easy-to-use "blocks."</li>
 58 |               <li>Customize your "blocks" with a simple form input.</li>
 59 |               <li>Navigate through your form with a convenient tree view</li>
 60 |               <li>See your code generate in real-time</li>
 61 |             </ul>
 62 |             <button class="cta">Try it</button>
 63 |           </div>
 64 |           <img class="feature-img" src="./assets/mainDemo.gif" />
 65 |         </section>
 66 |         <section class="feature left">
 67 |           <img class="feature-img" src="./assets/savetofavorites.gif" />
 68 |           <div class="feature-content">
 69 |             <h2>Save and update your work.</h2>
 70 |             <ul>
 71 |               <li>Secure log-in</li>
 72 |               <li>Save test code for future use</li>
 73 |               <li>Access and delete old tests in a "favorites" view</li>
 74 |               <li>Copy and share formatted test code with a click</li>
 75 |             </ul>
 76 |             <a href="https://app.sveste.dev"
 77 |               ><button class="cta">Try it</button></a
 78 |             >
 79 |           </div>
 80 |         </section>
 81 |         <section class="feature left">
 82 |           <div class="feature-content">
 83 |             <h2>Best practices, built-in.</h2>
 84 |             <ul>
 85 |               <li>Test "on screen" actions using screen() and userEvent()</li>
 86 |               <li>Test for accessibility using getByRole()</li>
 87 |               <li>Group all test logic into readable expect() statements</li>
 88 |               <li>Simulate user actions like clicking, hovering, and typing</li>
 89 |             </ul>
 90 | 
 91 |             <a href="https://app.sveste.dev"
 92 |               ><button class="cta">Try it</button></a
 93 |             >
 94 |           </div>
 95 |           <img class="feature-img" src="./assets/firstTestStatement.gif" />
 96 |         </section>
 97 |         <section class="feature-center" id="bottom-feature">
 98 |           <h2>Get your team on the same page.</h2>
 99 |           <p>
100 |             Align your development strategy and involve team members like never
101 |             before.
102 |           </p>
103 |         </section>
104 |       </main>
105 |       <footer>
106 |         <menu>
107 |           <a href="https://github.com/oslabs-beta/Sveste" target="_blank"
108 |             ><img
109 |               src="./assets/githubthumbnail.png"
110 |               alt="GitHub Icon"
111 |               style="max-height: 15px"
112 |             />
113 |             | GitHub</a
114 |           >
115 |           <a href="https://app.sveste.dev"
116 |             ><button class="cta alt">Try it</button></a
117 |           >
118 |         </menu>
119 |       </footer>
120 |     </div>
121 |   </body>
122 | </html>
123 | 


--------------------------------------------------------------------------------
/docs/about.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-US">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <link rel="stylesheet" href="styles.css" />
  7 |     <title>Sveste | About</title>
  8 |   </head>
  9 |   <body>
 10 |     <header>
 11 |       <a href="index.html">
 12 |         <img
 13 |           class="logo-header"
 14 |           style="height: 35px"
 15 |           src="./assets/SvesteLogo.png"
 16 |         />
 17 |       </a>
 18 |       <menu>
 19 |         <li>
 20 |           <a href="https://github.com/oslabs-beta/Sveste" target="_blank"
 21 |             >Github</a
 22 |           >
 23 |         </li>
 24 |         <li><a href="about.html">About</a></li>
 25 |         <a href="https://app.sveste.dev"
 26 |           ><button class="cta alt">Try it</button></a
 27 |         >
 28 |       </menu>
 29 |     </header>
 30 |     <div class="container">
 31 |       <article class="post">
 32 |         <h1 id="Introducing Sveste">Introducing Sveste</h1>
 33 |         <p>
 34 |           Anyone can write a unit test. But a <strong>great</strong> unit test?
 35 |         </p>
 36 |         <p>
 37 |           Great unit tests focus on what a user should see and do,
 38 |           <a href="https://kentcdodds.com/blog/testing-implementation-details"
 39 |             >not the implementation details</a
 40 |           >. They fail when you break your UX. They don’t break when you
 41 |           refactor your code.
 42 |         </p>
 43 | 
 44 |         <p>
 45 |           <b>Great unit tests help you focus on your users, not yourself.</b>
 46 |         </p>
 47 | 
 48 |         <p>But this introduces a contradiction.</p>
 49 | 
 50 |         <p>
 51 |           Your sales and service reps talk to users every day. They understand
 52 |           how people want to use your product, but don’t have the technical
 53 |           skills to turn that knowledge into tests. Your engineers know how to
 54 |           code, but don’t have the time to get on the phone with hundreds of
 55 |           people a day.
 56 |         </p>
 57 | 
 58 |         <p>
 59 |           The people that understand your users can’t write tests. And the
 60 |           people that write tests don’t understand your users. So what do you
 61 |           do?
 62 |         </p>
 63 | 
 64 |         <p>You sit in meetings and hope for the best.</p>
 65 | 
 66 |         <p>But what if there was a better way?</p>
 67 | 
 68 |         <h3>Enter Sveste: a no-code GUI for writing great unit tests.</h3>
 69 | 
 70 |         <p>
 71 |           Today, Sveste (Svelte + test) translates form inputs into executable
 72 |           tests. It uses the
 73 |           <a href="https://testing-library.com/">Testing Library</a> to focus on
 74 |           best practices like testing what’s actually on screen. It uses
 75 |           <a href="https://vitest.dev/">Vitest</a> so you can take advantage of
 76 |           Vite’s fast build times and run unit tests as you code. It structures
 77 |           your code so that each unit test is (human) readable and independent (
 78 |           <a href="https://kentcdodds.com/blog/avoid-nesting-when-youre-testing"
 79 |             >no nested mock statements here</a
 80 |           >
 81 |           ). Sveste ensures that your test code is concise, functional, and best
 82 |           practice.
 83 |         </p>
 84 | 
 85 |         <p>
 86 |           But this is just a first step to a bigger goal (literally, it’s
 87 |           v0.2!).
 88 |         </p>
 89 | 
 90 |         <p>We want Sveste to help you write tests in plain English.</p>
 91 | 
 92 |         <p>
 93 |           Imagine if writing tests were as easy as Mad Libs? Imagine if you got
 94 |           context-aware tips as you wrote your tests: guiding you towards
 95 |           helpful resources, and steering you away from common testing mistakes?
 96 |           Imagine if you could share unit tests with others, and build off of
 97 |           each-other’s work to write application agnostic tests?
 98 |         </p>
 99 | 
100 |         <h3>Help us make this vision a reality!</h3>
101 | 
102 |         <p>
103 |           Sveste is open source, and looking for contributors. Check out our
104 |           <a href="https://app.sveste.dev">app</a> and
105 |           <a href="https://github.com/oslabs-beta/Sveste">repo</a> to get
106 |           started!
107 |         </p>
108 |       </article>
109 |     </div>
110 |     <footer>
111 |       <menu>
112 |         <a href="https://github.com/oslabs-beta/Sveste" target="_blank"
113 |           ><img
114 |             src="./assets/githubthumbnail.png"
115 |             alt="GitHub Icon"
116 |             style="max-height: 15px"
117 |           />
118 |           | GitHub</a
119 |         >
120 |         <a href="https://app.sveste.dev"
121 |           ><button class="cta alt">Try it</button></a
122 |         >
123 |       </menu>
124 |     </footer>
125 |   </body>
126 | </html>
127 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Sveste
  2 | 
  3 | Sveste is a no-code GUI for writing great unit tests.
  4 | 
  5 | Today, Sveste (Svelte + test) translates form inputs into executable tests. It uses the Testing Library to focus on best practices like testing what’s actually on screen. It uses Vitest so you can take advantage of Vite’s fast build times and run unit tests as you code. It structures your code so that each unit test is (human) readable and independent (no nested mock statements here). Sveste ensures that your test code is concise, functional, and best practice.
  6 | 
  7 | But this is just a first step to a bigger goal (literally, it’s v0.2!).
  8 | 
  9 | We want Sveste to help you write tests in plain english.
 10 | 
 11 | Imagine if writing tests were as easy as Mad Libs? Imagine if you got context-aware tips as you wrote your tests: guiding you towards helpful resources, and steering you away from common testing mistakes? Imagine if you could share unit tests with others, and build off of each-other’s work to write application agnostic tests?
 12 | 
 13 | Help us make this vision a reality!
 14 | 
 15 | Sveste is open source, and looking for contributors. Check out our app and repo to get started!
 16 | 
 17 | ## How to get up and running
 18 | 
 19 | 1. Install AWS CLI - https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
 20 | 2. Create AWS account, install AWS SAM CLI + Docker - https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-cli-install.html
 21 | 3. Set AWS Congifure w/ new IAM Access ID + key - https://docs.aws.amazon.com/cli/latest/userguide/getting-started-quickstart.html
 22 | 4. Run 'npm install' in terminal
 23 | 5. Start up docker in background
 24 | 6. Run 'npm run build:dev' to create build and running container in docker
 25 | 7. App should be live
 26 | 8. Upon termination of server, use run 'npm run dev' to start up existing build.
 27 | 
 28 | ## Troubleshooting
 29 | 
 30 | ### If your changes aren't reflected in your dev server
 31 | 
 32 | Any changes to the frontend are reflected automatically thanks to Vite HMR. Changes to the backend require a restart of your dev server (`^C` and `npm run dev` in your terminal).
 33 | 
 34 | ### If server fails to termiante upon closing
 35 | 
 36 | 1. Run 'ps -fA | grep sam' to view running instances.
 37 | 2. Find 5-digit number and run 'kill {#####}' to terminate instance
 38 | 
 39 | ## FAQ
 40 | 
 41 | ### Why Svelte?
 42 | 
 43 | We love the ethos of writing less code, and thought building for this community would be a great place to start.
 44 | 
 45 | But ultimately, great unit testing is framework agnostic. We hope to support other platforms after we get to 1.0!
 46 | 
 47 | ### Why Vite/Vitest?
 48 | 
 49 | As apps scale in complexity, so do your dev build times. Vite combats these issues by off-loading bundling of your dev-environment to your browser and compile-to-native frameworks (like Svelte)! Learn more here.
 50 | 
 51 | Vitest is a Vite-native testing framework that takes advantage of Vite’s speed. It’s also part of the recommended testing suite for Svelte developers.
 52 | 
 53 | ### How do I use Sveste?
 54 | 
 55 | - visit www.sveste.dev.
 56 | - Click on the “Try It” button.
 57 | - When Sveste opens, you’re greeted by an add (‘+’) button that prompts you to create your first describe statement.
 58 |   Try to recreate one of your unit tests to get a feel for the navigation and test blocks.
 59 |   Checkout the readme for more details.
 60 | 
 61 | ### What’s your stack?
 62 | 
 63 | Frontend: Svelte
 64 | Backend: AWS Serverless (API Gateway, Lambda, DynamoDB)
 65 | Build: AWS SAM, Vite
 66 | Testing: Svelte Testing Library, Vitest
 67 | Languages: Svelte, TypeScript (mostly)
 68 | 
 69 | ### How can I contribute?
 70 | 
 71 | Sveste is an open source product, and thus open for contribution! Just visit our GitHub, fork it, and create or tackle any open issues!
 72 | 
 73 | ### How else can I help?
 74 | 
 75 | Sveste and similar open source products from OSLabs are made possible thanks to the support of the open source community. If you’d like to show your support, please consider:
 76 | Sharing this article.
 77 | Following us on LinkedIn.
 78 | Starring our GitHub repository.
 79 | Supporting other projects on OSLabs and OSLabs-Beta.
 80 | 
 81 | ## Dev Setup Guide
 82 | 
 83 | Install the AWS CLI, AWS SAM CLI, and setup your AWS credentials.
 84 | 
 85 | Run `npm install`.
 86 | Install and start Docker.
 87 | Open your terminal and run `npm build:dev`. This will download a docker image for DynamoDB, setup required tables, and start your dev server.
 88 | Use `npm run dev` for any future restarts.
 89 | 
 90 | Common issues:
 91 | 
 92 | Any changes to the frontend are reflected automatically thanks to Vite HMR. Changes to the backend require a restart of your dev server.
 93 | If you run into an [Errno 48] error after running `npm run dev` then:
 94 | run `ps -fA | grep sam`
 95 | kill the appropriate processes using `kill <process number>`
 96 | 
 97 | ## Contributors
 98 | 
 99 | <a href="https://github.com/oslabs-beta/sveste/graphs/contributors">
100 | <img src="https://contrib.rocks/image?repo=oslabs-beta/sveste" />
101 | </a>
102 | 


--------------------------------------------------------------------------------
/docs/styles.css:
--------------------------------------------------------------------------------
  1 | /* I - GLOBAL SETTINGS */
  2 | html {
  3 |   --primary: rgba(0, 179, 137, 100%);
  4 |   --primary-mid: rgba(0, 179, 137, 75%);
  5 |   --primary-light: rgba(0, 179, 137, 10%);
  6 |   --background: rgba(0, 179, 137, 5%);
  7 |   --text: rgba(0, 0, 0, 90%);
  8 |   --text-mid: rgba(0, 0, 0, 50%);
  9 |   --text-light: rgba(255, 255, 255, 90%);
 10 |   --shadow: rgba(0, 0, 0, 10%);
 11 |   --highlight: rgb(255, 62, 1);
 12 |   --max-width: 800px;
 13 | }
 14 | body {
 15 |   margin: 0;
 16 |   background-color: var(--background);
 17 |   font-size: 16px;
 18 |   font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
 19 |     'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol;
 20 |   color: var(--text);
 21 | }
 22 | h1,
 23 | h2,
 24 | h3,
 25 | h4,
 26 | h5,
 27 | h6 {
 28 |   color: var(--primary);
 29 | }
 30 | h1 {
 31 |   font-size: 3rem;
 32 | }
 33 | h2 {
 34 |   font-size: 2rem;
 35 | }
 36 | h3 {
 37 |   font-size: 1.5rem;
 38 | }
 39 | 
 40 | .container {
 41 |   display: grid;
 42 |   justify-content: center;
 43 |   align-items: center;
 44 |   max-width: 100%;
 45 | }
 46 | a {
 47 |   text-decoration: none;
 48 | }
 49 | /* II - REUSABLE COMPONENTS */
 50 | menu {
 51 |   display: grid;
 52 |   grid-auto-flow: column;
 53 |   gap: 1rem;
 54 |   list-style-type: none;
 55 |   align-items: center;
 56 |   margin-block-start: 0;
 57 |   margin-block-end: 0;
 58 |   padding-inline-start: 0;
 59 |   padding-inline-end: 0;
 60 | }
 61 | menu a {
 62 |   color: var(--text-light);
 63 |   text-decoration: none;
 64 |   cursor: pointer;
 65 | }
 66 | 
 67 | menu a:hover {
 68 |   text-decoration: none;
 69 | }
 70 | .cta {
 71 |   display: flex;
 72 |   width: fit-content;
 73 |   margin: 1rem auto;
 74 |   padding: 0.5rem 1rem;
 75 |   border-radius: 0.5rem;
 76 |   color: var(--primary);
 77 |   background-color: transparent;
 78 |   border: 1px solid var(--primary);
 79 |   font-size: 1rem;
 80 |   font-weight: 700;
 81 |   text-transform: uppercase;
 82 |   cursor: pointer;
 83 | }
 84 | .cta:hover,
 85 | .cta.active {
 86 |   background-color: var(--primary);
 87 |   color: var(--text-light);
 88 | }
 89 | .cta.alt {
 90 |   color: var(--text-light);
 91 |   background-color: var(--highlight);
 92 |   border: 1px solid var(--highlight);
 93 | }
 94 | .cta.alt:hover,
 95 | .cta.alt.active {
 96 |   border: 1px solid var(--text-light);
 97 | }
 98 | ul {
 99 |   list-style-type: '\2713';
100 | }
101 | li {
102 |   padding-left: 1rem;
103 |   line-height: 2rem;
104 | }
105 | 
106 | /* III - HEADER */
107 | header {
108 |   position: sticky;
109 |   top: 0;
110 |   display: grid;
111 |   grid-auto-flow: column;
112 |   justify-content: space-between;
113 |   align-items: center;
114 |   background-color: var(--primary);
115 |   color: var(--text-light);
116 |   height: 65px;
117 |   max-width: 100%;
118 |   padding: 0 5vw;
119 |   box-shadow: 0 1px 2px 1px var(--shadow);
120 | }
121 | 
122 | /* IV - HERO */
123 | .hero {
124 |   display: grid;
125 |   grid-template-columns: minmax(350px, 80%);
126 |   background-color: #5ec5a5;
127 |   align-items: center;
128 |   justify-content: center;
129 |   margin: auto;
130 |   width: 96vw;
131 |   padding: 0 2vw;
132 |   height: 70vh;
133 |   margin-bottom: 5vh;
134 | }
135 | .hero-headline {
136 |   display: flex;
137 |   flex-direction: column;
138 |   margin: auto;
139 |   width: 100%;
140 |   max-width: var(--max-width);
141 | }
142 | .hero-logo {
143 |   height: 8vw;
144 |   margin-right: 1rem;
145 | }
146 | .hero-headline h1 {
147 |   font-size: clamp(48px, 10vw, 10vw);
148 |   margin-block-start: 0rem;
149 |   margin-block-end: 0rem;
150 |   color: rgb(250, 250, 250);
151 |   text-shadow: 3px 3px var(--highlight);
152 | }
153 | .hero-headline p {
154 |   font-size: clamp(16px, 2vw, 4vw);
155 |   margin-block-start: 0rem;
156 |   margin-block-end: 1rem;
157 |   color: var(--text-light);
158 |   font-weight: 300;
159 | }
160 | .hero .cta {
161 |   margin-left: 0;
162 |   font-size: clamp(16px, 2vw, 2vw);
163 |   padding: 0.5rem clamp(1rem, 2vw, 2vw);
164 | }
165 | 
166 | /* V - FEATURES */
167 | main {
168 |   display: grid;
169 |   gap: 1rem;
170 |   padding: 0 2vw;
171 |   justify-content: center;
172 |   align-items: center;
173 |   color: #2f6252;
174 | }
175 | 
176 | main h2 {
177 |   margin-bottom: 0;
178 | }
179 | 
180 | .feature {
181 |   display: grid;
182 |   grid-auto-flow: column;
183 |   grid-template-columns: 1fr 1fr;
184 |   align-items: center;
185 |   margin-bottom: 10vh;
186 |   min-width: 100%;
187 |   max-width: var(--max-width);
188 | }
189 | .feature-center {
190 |   display: grid;
191 |   grid-auto-flow: row;
192 |   align-items: flex-start;
193 |   margin: 0 2vw 5vh 2vw;
194 |   text-align: center;
195 |   min-width: 100%;
196 |   margin-bottom: 10vh;
197 | }
198 | 
199 | #bottom-feature {
200 |   text-align: center;
201 | }
202 | #bottom-feature h2 {
203 |   margin-top: 0;
204 | }
205 | .feature-content {
206 |   justify-content: start;
207 |   margin: 0 2vw 2vh 2vw;
208 |   justify-self: center;
209 | }
210 | .feature-content h2 {
211 |   margin-block-start: 0;
212 | }
213 | .feature-content .cta {
214 |   margin: 0;
215 |   margin-left: 2rem;
216 | }
217 | .feature-img {
218 |   width: 100%;
219 |   box-shadow: 2px 2px var(--primary);
220 | }
221 | @media screen and (max-width: 800px) {
222 |   .feature {
223 |     grid-template-columns: 1fr;
224 |     grid-template-rows: auto auto;
225 |   }
226 | }
227 | /* POST */
228 | .post {
229 |   margin: 2vh 2vw;
230 |   max-width: var(--max-width);
231 | }
232 | .post h1 {
233 |   margin-block-start: 0.5rem;
234 | }
235 | .post p {
236 |   line-height: 1.5rem;
237 | }
238 | .post a {
239 |   color: var(--primary-mid);
240 | }
241 | /* FOOTER */
242 | footer {
243 |   display: grid;
244 |   grid-auto-flow: column;
245 |   justify-content: center;
246 |   align-items: center;
247 |   background-color: var(--primary);
248 |   color: var(--text-light);
249 |   height: 100px;
250 |   max-width: 100%;
251 |   padding: 0 5vw;
252 |   box-shadow: 0 -1px 2px 1px var(--shadow);
253 | }
254 | 


--------------------------------------------------------------------------------
/src/pages/SignupPage.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { push } from 'svelte-spa-router';
  3 |   import { userId } from '../models/store';
  4 |   import { isLoggedIn } from '../models/store';
  5 |   import Header from '../components/Header.svelte';
  6 |   import Footer from '../components/Footer.svelte';
  7 | 
  8 |   /*
  9 |    * On click, redirects emailAddress and password to usersController. usersController checks for duplicates and returns loggedIn true or false status
 10 |    */
 11 |   const handleSignup = async (e: any) => {
 12 |     try {
 13 |       const formData = await new FormData(e.target);
 14 |       const params = new URLSearchParams();
 15 |       for (let [key, val] of formData) {
 16 |         if (typeof val !== 'string') val = '';
 17 |         params.append(key, val);
 18 |       }
 19 |       //Initiates fetch post to dbrouter to check correct sign up info
 20 |       const res = await fetch(`/api/users/signup?${params}`, {
 21 |         method: 'POST',
 22 |         headers: {
 23 |           'Content-Type': 'application/json',
 24 |         },
 25 |         body: params,
 26 |       });
 27 |       const data: { isValidLogin: boolean; email: string } = await res.json();
 28 |       //If fetch response verifies info is correct, creates new user in database and redirects to home
 29 |       if (data.isValidLogin) {
 30 |         userId.set(data.email);
 31 |         isLoggedIn.set(true);
 32 |         push('/home');
 33 |       }
 34 |       return data;
 35 |     } catch (err: Error | unknown) {
 36 |       let message = err instanceof Error ? err.message : 'unknown signup error';
 37 |       return alert(JSON.stringify(message));
 38 |     }
 39 |   };
 40 | </script>
 41 | 
 42 | <div class="login-page">
 43 |   <Header />
 44 |   <div class="login-form">
 45 |     <h1>Sign Up</h1>
 46 |     <div class="inputWrapper">
 47 |       <form class="form" on:submit|preventDefault={handleSignup}>
 48 |         <div class="input-field">
 49 |           <input
 50 |             class="form_input"
 51 |             type="email"
 52 |             id="email"
 53 |             name="email"
 54 |             required
 55 |           />
 56 |           <label for="email" value="email">Email</label>
 57 |         </div>
 58 |         <div class="input-field">
 59 |           <input
 60 |             class="form_input"
 61 |             type="password"
 62 |             id="password"
 63 |             name="password"
 64 |             required
 65 |           />
 66 |           <label for="password" value="email">Password</label>
 67 |         </div>
 68 |         <div id="buttondiv" class="action">
 69 |           <button value="submit" type="submit">Submit</button>
 70 |         </div>
 71 |       </form>
 72 |     </div>
 73 |   </div>
 74 |   <div class="footer">
 75 |     <Footer />
 76 |   </div>
 77 | </div>
 78 | 
 79 | <style>
 80 |   * {
 81 |     margin: 0;
 82 |     padding: 0;
 83 |     box-sizing: border-box;
 84 |     -webkit-font-smoothing: antialiased;
 85 |     font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
 86 |       'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 87 |   }
 88 |   .login-page {
 89 |     display: flex;
 90 |     flex-direction: column;
 91 |     height: 100%;
 92 |   }
 93 |   .login-form {
 94 |     background: var(--background);
 95 |     width: 500px;
 96 |     margin: auto auto;
 97 |     display: flex;
 98 |     flex-direction: column;
 99 |     border-radius: 4px;
100 |     box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
101 |     padding: 1rem 2rem;
102 |   }
103 |   .login-form h1 {
104 |     padding: 0.5rem;
105 |     margin-bottom: 1rem;
106 |     font-weight: 300;
107 |   }
108 |   .login-form .input-field {
109 |     padding: 12px 5px;
110 |   }
111 |   .login-form .input-field input {
112 |     font-size: 16px;
113 |     display: block;
114 |     width: 100%;
115 |     padding: 10px 1px;
116 |     border: 0;
117 |     border-bottom: 1px solid #747474;
118 |     outline: none;
119 |     background: transparent;
120 |   }
121 | 
122 |   .login-form .input-field input:focus {
123 |     border-color: #222;
124 |   }
125 | 
126 |   .login-form .action {
127 |     display: flex;
128 |     flex-direction: row;
129 |     margin-bottom: 1rem;
130 |     gap: 0.5rem;
131 |   }
132 |   .login-form .action button {
133 |     width: 100%;
134 |     border: none;
135 |     padding: 0.5rem 1rem;
136 |     border-radius: 0.5rem;
137 |     font-family: inherit;
138 |     cursor: pointer;
139 |     text-transform: uppercase;
140 |     background: var(--primary-mid);
141 |     color: var(--text-light);
142 |     letter-spacing: 0.2px;
143 |     outline: 0;
144 |     transition: all 0.3s;
145 |   }
146 |   .login-form .action button:hover {
147 |     background: var(--primary);
148 |   }
149 |   .login-form .action button:nth-child(2) {
150 |     background: var(--primary-mid);
151 |     color: var(--text-light);
152 |   }
153 |   .action {
154 |     margin-top: 2rem;
155 |   }
156 |   .footer {
157 |     margin-top: auto;
158 |   }
159 | 
160 |   /*  */
161 |   .inputWrapper :global(div) {
162 |     display: flex;
163 |     flex-direction: row;
164 |     justify-self: start;
165 |     width: 90%;
166 |     position: relative;
167 |   }
168 |   .inputWrapper :global(label) {
169 |     position: absolute;
170 |     left: 0.25rem;
171 |     top: 0.5rem;
172 |     transform-origin: left top;
173 |     transition: transform 100ms ease-in-out;
174 |     color: var(--text-mid);
175 |   }
176 | 
177 |   .inputWrapper :global(input) {
178 |     width: 100%;
179 |     font-size: 1rem;
180 |     height: 1.5rem;
181 |     padding: 0.5rem 0 0 0.25rem;
182 |     border: none;
183 |     border-bottom: 1px solid var(--shadow);
184 |     background-color: transparent;
185 |   }
186 |   .inputWrapper :global(select) {
187 |     width: auto;
188 |     height: 2.5rem;
189 |     padding-right: 1rem;
190 |     font-size: 1rem;
191 |     border: none;
192 |     background-color: transparent;
193 |   }
194 |   .inputWrapper :global(input:focus + label),
195 |   .inputWrapper :global(input:valid + label) {
196 |     transform: translateY(-50%) scale(0.7);
197 |     color: var(--text-mid);
198 |   }
199 | 
200 |   .inputWrapper :global(select:focus + label),
201 |   .inputWrapper :global(select:valid + label) {
202 |     transform: translateY(-50%) scale(0.7);
203 |     color: var(--text-mid);
204 |   }
205 | 
206 |   .inputWrapper :global(input:focus + label),
207 |   .inputWrapper :global(select:focus + label) {
208 |     color: var(--primary);
209 |   }
210 | 
211 |   .inputWrapper :global(input:focus),
212 |   .inputWrapper :global(select:focus) {
213 |     outline: none;
214 |   }
215 | </style>
216 | 


--------------------------------------------------------------------------------
/src/pages/LoginPage.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { push } from 'svelte-spa-router';
  3 |   import Header from '../components/Header.svelte';
  4 |   import Footer from '../components/Footer.svelte';
  5 |   import { isLoggedIn, userId } from '../models/store';
  6 |   import { stringify } from 'querystring';
  7 | 
  8 |   let emailAddress = '';
  9 |   let password = '';
 10 | 
 11 |   /*
 12 |    * On click, redirects emailAddress and password to usersController. usersControllers checks for credentials and return loggedIn true or false status
 13 |    */
 14 |   const handleLogin = async (e: any) => {
 15 |     //Initiate fetch post request to the server
 16 |     try {
 17 |       const formData = await new FormData(e.target);
 18 |       const params = new URLSearchParams();
 19 |       for (let [key, val] of formData) {
 20 |         if (typeof val !== 'string') val = '';
 21 |         params.append(key, val);
 22 |       }
 23 |       const res = await fetch(`/api/users/login?${params}`, {
 24 |         method: 'POST',
 25 |         headers: {
 26 |           'Content-Type': 'application/json',
 27 |         },
 28 |         body: params,
 29 |       });
 30 |       const data: { isValidLogin: boolean; email: string } = await res.json();
 31 |       //If response field return loggedIn is true, redirect client to home page, loggedIn verifies the user's account, and allows for user access to favorites page
 32 |       if (data.isValidLogin) {
 33 |         userId.set(data.email);
 34 |         isLoggedIn.set(true);
 35 |         push('/home');
 36 |       }
 37 |       return data;
 38 |     } catch (err: Error | unknown) {
 39 |       let message = err instanceof Error ? err.message : 'unknown signup error';
 40 |       return alert(JSON.stringify(message));
 41 |     }
 42 |   };
 43 | </script>
 44 | 
 45 | <div class="login-page">
 46 |   <Header />
 47 |   <div class="login-form">
 48 |     <h1>Login</h1>
 49 |     <div class="inputWrapper">
 50 |       <form class="form" on:submit|preventDefault={handleLogin}>
 51 |         <div class="input-field">
 52 |           <input
 53 |             class="form_input"
 54 |             type="email"
 55 |             id="email"
 56 |             name="email"
 57 |             required
 58 |           />
 59 |           <label for="email" value="email">Email</label>
 60 |         </div>
 61 |         <div class="input-field">
 62 |           <input
 63 |             class="form_input"
 64 |             type="password"
 65 |             id="password"
 66 |             name="password"
 67 |             required
 68 |           />
 69 |           <label for="password" value="email">Password</label>
 70 |         </div>
 71 |         <div id="buttondiv" class="action">
 72 |           <button class="login_btn" type="submit" value="login">Login</button>
 73 |           <button value="signup" on:click|preventDefault={() => push('/signup')}
 74 |             >Sign Up</button
 75 |           >
 76 |         </div>
 77 |       </form>
 78 |     </div>
 79 |   </div>
 80 |   <div class="footer">
 81 |     <Footer />
 82 |   </div>
 83 | </div>
 84 | 
 85 | <style>
 86 |   * {
 87 |     margin: 0;
 88 |     padding: 0;
 89 |     box-sizing: border-box;
 90 |     -webkit-font-smoothing: antialiased;
 91 |     font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
 92 |       'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 93 |   }
 94 |   .login-page {
 95 |     display: flex;
 96 |     flex-direction: column;
 97 |     height: 100%;
 98 |   }
 99 |   .login-form {
100 |     background: var(--background);
101 |     width: 500px;
102 |     margin: auto auto;
103 |     display: flex;
104 |     flex-direction: column;
105 |     border-radius: 4px;
106 |     box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
107 |     padding: 1rem 2rem;
108 |   }
109 |   .login-form h1 {
110 |     padding: 0.5rem;
111 |     margin-bottom: 1rem;
112 |     font-weight: 300;
113 |   }
114 |   .login-form .input-field {
115 |     padding: 12px 5px;
116 |   }
117 |   .login-form .input-field input {
118 |     font-size: 16px;
119 |     display: block;
120 |     width: 100%;
121 |     padding: 10px 1px;
122 |     border: 0;
123 |     border-bottom: 1px solid #747474;
124 |     outline: none;
125 |     background: transparent;
126 |   }
127 | 
128 |   .login-form .input-field input:focus {
129 |     border-color: #222;
130 |   }
131 | 
132 |   .login-form .action {
133 |     display: flex;
134 |     flex-direction: row;
135 |     margin-bottom: 1rem;
136 |     gap: 0.5rem;
137 |   }
138 |   .login-form .action button {
139 |     width: 100%;
140 |     border: none;
141 |     padding: 0.5rem 1rem;
142 |     border-radius: 0.5rem;
143 |     font-family: inherit;
144 |     cursor: pointer;
145 |     text-transform: uppercase;
146 |     background: #e8e9ec;
147 |     color: #777;
148 |     letter-spacing: 0.2px;
149 |     outline: 0;
150 |     transition: all 0.3s;
151 |   }
152 |   .login-form .action button:hover {
153 |     background: #d8d8d8;
154 |   }
155 |   .login-form .action button:nth-child(2) {
156 |     background: var(--primary-mid);
157 |     color: var(--text-light);
158 |   }
159 |   .login-form .action button:nth-child(2):hover {
160 |     background: var(--primary);
161 |   }
162 | 
163 |   .action {
164 |     margin-top: 4rem;
165 |   }
166 |   .footer {
167 |     margin-top: auto;
168 |   }
169 | 
170 |   /*  */
171 |   .inputWrapper :global(div) {
172 |     display: flex;
173 |     flex-direction: row;
174 |     justify-self: start;
175 |     width: 90%;
176 |     position: relative;
177 |   }
178 |   .inputWrapper :global(label) {
179 |     position: absolute;
180 |     left: 0.25rem;
181 |     top: 0.5rem;
182 |     transform-origin: left top;
183 |     transition: transform 100ms ease-in-out;
184 |     color: var(--text-mid);
185 |   }
186 | 
187 |   .inputWrapper :global(input) {
188 |     width: 100%;
189 |     font-size: 1rem;
190 |     height: 1.5rem;
191 |     padding: 0.5rem 0 0 0.25rem;
192 |     border: none;
193 |     border-bottom: 1px solid var(--shadow);
194 |     background-color: transparent;
195 |   }
196 |   .inputWrapper :global(select) {
197 |     width: auto;
198 |     height: 2.5rem;
199 |     padding-right: 1rem;
200 |     font-size: 1rem;
201 |     border: none;
202 |     background-color: transparent;
203 |   }
204 |   .inputWrapper :global(input:focus + label),
205 |   .inputWrapper :global(input:valid + label) {
206 |     transform: translateY(-50%) scale(0.7);
207 |     color: var(--text-mid);
208 |   }
209 | 
210 |   .inputWrapper :global(select:focus + label),
211 |   .inputWrapper :global(select:valid + label) {
212 |     transform: translateY(-50%) scale(0.7);
213 |     color: var(--text-mid);
214 |   }
215 | 
216 |   .inputWrapper :global(input:focus + label),
217 |   .inputWrapper :global(select:focus + label) {
218 |     color: var(--primary);
219 |   }
220 | 
221 |   .inputWrapper :global(input:focus),
222 |   .inputWrapper :global(select:focus) {
223 |     outline: none;
224 |   }
225 | </style>
226 | 


--------------------------------------------------------------------------------
/template.yaml:
--------------------------------------------------------------------------------
  1 | # This is the SAM template that represents the architecture of your serverless application
  2 | # https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-template-basics.html
  3 | 
  4 | # The AWSTemplateFormatVersion identifies the capabilities of the template
  5 | # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/format-version-structure.html
  6 | AWSTemplateFormatVersion: 2010-09-09
  7 | Description: >-
  8 |   Sveste - a no code GUI for writing great unit tests.
  9 | 
 10 | # Transform section specifies one or more macros that AWS CloudFormation uses to process your template
 11 | # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/transform-section-structure.html
 12 | Transform:
 13 |   - AWS::Serverless-2016-10-31
 14 | 
 15 | # Resources declares the AWS resources that you want to include in the stack
 16 | # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/resources-section-structure.html
 17 | # More info about Globals: https://github.com/awslabs/serverless-application-model/blob/master/docs/globals.rst
 18 | 
 19 | Parameters:
 20 |   PipelineRole:
 21 |     Type: String
 22 | 
 23 | Resources:
 24 |   FrontendBucket:
 25 |     Type: AWS::S3::Bucket
 26 | 
 27 |   CloudFrontDistribution:
 28 |     Type: AWS::CloudFront::Distribution
 29 |     Properties:
 30 |       DistributionConfig:
 31 |         Origins:
 32 |           - Id: FrontendBucket
 33 |             DomainName: !GetAtt FrontendBucket.RegionalDomainName
 34 |             S3OriginConfig:
 35 |               OriginAccessIdentity: !Sub 'origin-access-identity/cloudfront/${CloudFrontOriginAccessIdentity}'
 36 |           - Id: Backend
 37 |             DomainName: !Sub '${ServerlessRestApi}.execute-api.${AWS::Region}.amazonaws.com'
 38 |             OriginPath: '/Prod'
 39 |             CustomOriginConfig:
 40 |               OriginProtocolPolicy: https-only
 41 |         DefaultCacheBehavior:
 42 |           TargetOriginId: FrontendBucket
 43 |           ViewerProtocolPolicy: redirect-to-https
 44 |           ForwardedValues:
 45 |             QueryString: true
 46 |         CacheBehaviors:
 47 |           - TargetOriginId: Backend
 48 |             PathPattern: 'api/*'
 49 |             DefaultTTL: 0
 50 |             MinTTL: 0
 51 |             MaxTTL: 0
 52 |             ViewerProtocolPolicy: https-only
 53 |             AllowedMethods: [GET, HEAD, OPTIONS, PUT, PATCH, POST, DELETE]
 54 |             ForwardedValues:
 55 |               QueryString: true
 56 |         Enabled: true
 57 |         DefaultRootObject: index.html
 58 | 
 59 |   FrontendBucketPolicy:
 60 |     Type: AWS::S3::BucketPolicy
 61 |     Properties:
 62 |       Bucket: !Ref FrontendBucket
 63 |       PolicyDocument:
 64 |         Id: MyPolicy
 65 |         Version: 2012-10-17
 66 |         Statement:
 67 |           - Effect: Allow
 68 |             Principal:
 69 |               CanonicalUser: !GetAtt CloudFrontOriginAccessIdentity.S3CanonicalUserId
 70 |             Action:
 71 |               - 's3:GetObject'
 72 |             Resource: !Sub
 73 |               - 'arn:aws:s3:::${Bucket}/*'
 74 |               - Bucket: !Ref FrontendBucket
 75 |           - Effect: Allow
 76 |             Principal:
 77 |               AWS:
 78 |                 - !Ref PipelineRole
 79 |             Action:
 80 |               - 's3:PutObject'
 81 |               - 's3:DeleteObject'
 82 |             Resource: !Sub
 83 |               - 'arn:aws:s3:::${Bucket}/*'
 84 |               - Bucket: !Ref FrontendBucket
 85 |           - Effect: Allow
 86 |             Principal:
 87 |               AWS:
 88 |                 - !Ref PipelineRole
 89 |             Action:
 90 |               - 's3:ListBucket'
 91 |             Resource: !Sub
 92 |               - 'arn:aws:s3:::${Bucket}'
 93 |               - Bucket: !Ref FrontendBucket
 94 | 
 95 |   CloudFrontOriginAccessIdentity:
 96 |     Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
 97 |     Properties:
 98 |       CloudFrontOriginAccessIdentityConfig:
 99 |         Comment: CloudFront access identity
100 |   # Each Lambda function is defined by properties:
101 |   # https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#awsserverlessfunction
102 |   # This is a Lambda function config associated with the source code: get-all-items.js
103 |   ServerFunction:
104 |     Type: AWS::Serverless::Function
105 |     Properties:
106 |       CodeUri: src/handlers/
107 |       Handler: server.serverFunction
108 |       Runtime: nodejs16.x
109 |       Architectures:
110 |         - x86_64
111 |       MemorySize: 128
112 |       Timeout: 100
113 |       Description: A single lambda wrapping an Express server.
114 |       Policies:
115 |         # Give Create/Read/Update/Delete Permissions to the SampleTable
116 |         - DynamoDBCrudPolicy:
117 |             TableName: !Ref UsersTable
118 |         - DynamoDBCrudPolicy:
119 |             TableName: !Ref FavoritesTable
120 |       Environment:
121 |         Variables:
122 |           # Make table name accessible as environment variable from function code during execution
123 |           USERS_TABLE: !Ref UsersTable
124 |           FAVORITES_TABLE: !Ref FavoritesTable
125 |       Events:
126 |         postFavorites:
127 |           Type: Api
128 |           Properties:
129 |             Path: /api/favorites
130 |             Method: POST
131 |         getFavorites:
132 |           Type: Api
133 |           Properties:
134 |             Path: /api/favorites
135 |             Method: GET
136 |         deleteFavorites:
137 |           Type: Api
138 |           Properties:
139 |             Path: /api/favorites
140 |             Method: DELETE
141 |         postSignup:
142 |           Type: Api
143 |           Properties:
144 |             Path: /api/users/signup
145 |             Method: POST
146 |         postLogin:
147 |           Type: Api
148 |           Properties:
149 |             Path: /api/users/login
150 |             Method: POST
151 | 
152 |     Metadata: # Manage esbuild properties
153 |       BuildMethod: esbuild
154 |       BuildProperties:
155 |         Minify: true
156 |         Target: 'es2020'
157 |         # Sourcemap: true # Enabling source maps will create the required NODE_OPTIONS environment variables on your lambda function during sam build
158 |         EntryPoints:
159 |           - server.ts
160 |         External:
161 |           - 'aws-sdk'
162 |   # Each Lambda function is defined by properties:
163 |   # https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#awsserverlessfunction
164 |   UsersTable:
165 |     Type: AWS::Serverless::SimpleTable
166 |     Properties:
167 |       PrimaryKey:
168 |         Name: ID
169 |         Type: String
170 |       TableName: 'UsersTable'
171 | 
172 |   FavoritesTable:
173 |     Type: AWS::Serverless::SimpleTable
174 |     Properties:
175 |       PrimaryKey:
176 |         Name: ID
177 |         Type: String
178 |       TableName: 'FavoritesTable'
179 | 
180 | Outputs:
181 |   API:
182 |     Description: 'API Gateway endpoint URL for Sveste prod'
183 |     Value: !Sub 'https://${ServerlessRestApi}.execute-api.${AWS::Region}.amazonaws.com/Prod/'
184 |   ServerFunction:
185 |     Description: 'ServerFunction'
186 |     Value: !GetAtt ServerFunction.Arn
187 |   ServerFunctionIamRole:
188 |     Description: 'Implicit IAM Role created for ServerFunction'
189 |     Value: !GetAtt ServerFunctionRole.Arn
190 |   Website:
191 |     Value: !GetAtt CloudFrontDistribution.DomainName
192 | 


--------------------------------------------------------------------------------