Skip to content
This repository was archived by the owner on Mar 27, 2023. It is now read-only.

Commit 6195e58

Browse files
briancaffeybriancaffey
committed
fixed documentation site styling, moved section on testing from readme to vuepress docs
1 parent aa6629e commit 6195e58

File tree

5 files changed

+271
-143
lines changed

5 files changed

+271
-143
lines changed

‎README.md‎

Lines changed: 0 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -72,127 +72,6 @@ or use this single command:
7272
docker exec -it backend bash -c 'cd notebooks && ../manage.py shell_plus --notebook'
7373
```
7474

75-
# Running tests
76-
77-
This project uses Pytest, Jest and Cypress for testing. This section describes the different ways to run tests locally.
78-
79-
To run Pytest and Jest, you can use `docker-compose exec`, or you can shell into the container.
80-
81-
Using `docker-compose exec`:
82-
83-
```
84-
docker-compose exec backend pytest
85-
```
86-
87-
```
88-
docker exec -it backend bash
89-
root@b24c4206002e:/code# pytest
90-
```
91-
92-
To run Jest tests, you can run:
93-
94-
```
95-
docker-compose exec frontend npm run test
96-
```
97-
98-
## Integration tests
99-
100-
Cypress can be used in an interactive mode with a UI, or it can be used in a headless way (such as in GitLab CI).
101-
102-
## Running Cypress Interactively
103-
104-
To run Cypress tests interactively, install Cypress in the root of the project:
105-
106-
```
107-
npm install cypress
108-
```
109-
110-
Then open Cypress with:
111-
112-
```
113-
$(npm bin)/cypress open --config baseUrl=http://localhost
114-
```
115-
116-
Click on the button "Run all specs", and the tests will start running in a new browser window with a log of Cypress actions and test statements displayed on the left side.
117-
118-
## Run Cypress in headless mode
119-
120-
There are two ways to run Cypress in headless mode. You can run Cypress against the `docker-compose` file in `compose/test.yml`, or you can run the Cypress test using `gitlab-runner`.
121-
122-
### Using `compose/test.yml`
123-
124-
To run the test locally against the production image, run the following:
125-
126-
```
127-
docker-compose -f compose/test.yml up --build
128-
```
129-
130-
This will build a special environment that resembles the environment used in GitLab CI. It brings up three containers: redis, postgres and backend. The backend serves several purposes: it runs the Django webserver, it runs the ASGI server used by Django Channels, and it runs celery tasks synchronously, and it also serves the Vue application through Django templates and static files. See the Dockerfile located at `backend/scripts/prod/Dockerfile` for details on how this works.
131-
132-
Make sure that Cypress is properly installed with:
133-
134-
```
135-
$(npm bin)/cypress verify
136-
```
137-
138-
Then start the tests with:
139-
140-
```
141-
$(npm bin)/cypress run --config baseUrl=http://localhost:9000
142-
```
143-
144-
You could also run these tests in the interactive mode using `compose/test.yml` with the following command:
145-
146-
```
147-
$(npm bin)/cypress open --config baseUrl=http://localhost:9000
148-
```
149-
150-
Note that this is similar to the previous command, but we are using the `open` command instead of the `run` command.
151-
152-
### Using `gitlab-runner`
153-
154-
It can be useful to debug your `.gitlab-ci.yml` jobs before pushing changes to GitLab. This gives us a faster feedback loop, and it doesn't use any of the CI minutes on your free (2000 minutes/month) or paid GitLab plans.
155-
156-
There is a little bit of setup needed to run Cypress tests with `gitlab-runner`.
157-
158-
First, you need to install `gitlab-runner` on your machine.
159-
160-
Next, you need to start a local registry on you r computer. Run the following command ([taken from docker documentation](https://docs.docker.com/registry/deploying/)):
161-
162-
```
163-
docker run -d -p 5000:5000 --restart=always --name registry registry:2
164-
```
165-
166-
Next, you need to build the production image that you will use in the test. To do this, run the following command:
167-
168-
```
169-
docker-compose -f compose/test.yml build backend
170-
```
171-
172-
Then tag the image with the following command:
173-
174-
```
175-
docker tag compose_backend:latest localhost:5000/backend:latest
176-
```
177-
178-
Then push the tagged image to the local registry:
179-
180-
```
181-
docker push localhost:5000/backend:latest
182-
```
183-
184-
Now that we have pushed the production image to our local registry, we can run the `e2e-local` job with `gitlab-runner`.
185-
186-
To do this, we need to make sure that the `e2e-local` job defined in `.gitlab-ci.yml` is not commented. To do this, remove the `.` in front of the job name (change `.e2e-local` to `e2e-local`).
187-
188-
Then, commit your changes in git. Gitlab runner requires that you commit changes before running tests. Run the GitLab CI job with the following command:
189-
190-
```
191-
gitlab-runner exec docker e2e-local
192-
```
193-
194-
Before you push your changes to GitLab, make sure that you uncomment the `e2e-local` job by adding `.` in front of it (`.e2e-local`).
195-
19675
# ToDo
19776

19877
- Add diagram of local development

‎documentation/docs/.vuepress/config.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ module.exports = {
77
configureWebpack: {
88
resolve: {
99
alias: {
10-
"@assets": path.resolve(__dirname, "../assets")
11-
}
12-
}
10+
"@assets": path.resolve(__dirname, "../assets"),
11+
},
12+
},
1313
},
1414
dest: "../public",
1515
plugins: {
1616
"@vuepress/google-analytics": {
17-
ga: "UA-131443776-1"
18-
}
17+
ga: "UA-131443776-1",
18+
},
1919
},
2020
serviceWorker: false,
2121
themeConfig: {
@@ -33,49 +33,50 @@ module.exports = {
3333
text: "Start Here",
3434
items: [
3535
{ text: "Overview", link: "/start/overview/" },
36-
{ text: "Tools Used", link: "/start/tools/" }
37-
]
36+
{ text: "Tools Used", link: "/start/tools/" },
37+
],
3838
},
3939
{
4040
text: "Guide",
4141
items: [
42+
{ text: "Testing", link: "/guide/testing/" },
4243
{ text: "Project Setup", link: "/guide/project-setup/" },
4344
{ text: "Backend API", link: "/guide/django-rest-framework/" },
4445
{ text: "Vue App", link: "/guide/vue-app/" },
4546
{
4647
text: "Connecting Backend & Frontend",
47-
link: "/guide/connecting-backend-frontend/"
48+
link: "/guide/connecting-backend-frontend/",
4849
},
4950
{ text: "NGINX", link: "/guide/nginx/" },
5051
{ text: "Celery & Redis", link: "/guide/celery-and-redis/" },
5152
{
5253
text: "Production Environment",
53-
link: "/guide/production-environment/"
54+
link: "/guide/production-environment/",
5455
},
55-
{ text: "Vue Authentication", link: "/guide/vue-authentication/" }
56-
]
56+
{ text: "Vue Authentication", link: "/guide/vue-authentication/" },
57+
],
5758
},
5859
{
5960
text: "DevOps",
6061
items: [
6162
{ text: "AWS", link: "/devops/aws/" },
6263
{ text: "AWS CDK", link: "/devops/aws-cdk/" },
63-
{ text: "GCP", link: "/devops/gcp/" }
64-
]
64+
{ text: "GCP", link: "/devops/gcp/" },
65+
],
6566
},
6667
{
6768
text: "Topics",
6869
items: [
6970
{ text: "GraphQL", link: "/topics/graphql/" },
7071
{ text: "Minikube", link: "/topics/minikube/" },
71-
{ text: "Helm", link: "/topics/helm/" }
72-
]
72+
{ text: "Helm", link: "/topics/helm/" },
73+
],
7374
},
7475
{
7576
text: "Source Code",
7677
link:
77-
"https://gitlab.com/verbose-equals-true/django-postgres-vue-gitlab-ecs"
78-
}
79-
]
80-
}
78+
"https://gitlab.com/verbose-equals-true/django-postgres-vue-gitlab-ecs",
79+
},
80+
],
81+
},
8182
};

‎documentation/docs/.vuepress/override.styl‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ $codeBgColor = #282c34
55

66
// TODO: clean up css rules
77

8-
body {
9-
background-color: #2e426b;
10-
}
8+
body
9+
background-color #2e426b
10+
1111

1212
header.navbar {
1313
background-color: #2e426b;

‎documentation/docs/.vuepress/styles/palette.styl‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
body
2+
background-color: #2e426b
3+
4+
$accentColor = #2e426b
5+
$textColor = white
6+
$borderColor = #eaecef
7+
$codeBgColor = #282c34
8+
9+
// TODO: clean up css rules
10+
11+
body
12+
background-color #2e426b
13+
14+
15+
header.navbar {
16+
background-color: #2e426b;
17+
}
18+
19+
div.links {
20+
background-color: #2e426b !important;
21+
}
22+
23+
a.nav-link {
24+
background-color: #2e426b !important;
25+
}
26+
27+
a.nav-link::hover {
28+
color: white !important;
29+
}
30+
31+
div.sidebar
32+
a.sidebar-link {
33+
background-color: #2e426b !important;
34+
}
35+
36+
a.nav-link::hover {
37+
color: white !important;
38+
}
39+
40+
41+
a.sidebar-link {
42+
color: white !important;
43+
}
44+
45+
46+
a.active.sidebar-link {
47+
color: white !important;
48+
}
49+
50+
a.active.sidebar-link::hover {
51+
color: white !important;
52+
}
53+
54+
a.nav-link.router-link-active {
55+
color: white !important;
56+
}
57+
58+
59+
ul.nav-dropdown {
60+
background-color: #2e426b !important;
61+
}
62+
63+
input {
64+
color: black !important;
65+
}
66+
67+
code {
68+
background-color: grey !important;
69+
color: white !important;
70+
}
71+
72+
pre > code {
73+
background-color: #282c34 !important;
74+
}
75+
76+
a.nav-link.action-button {
77+
background-color: white !important;
78+
color: #2e426b !important;
79+
}
80+
81+
a.nav-link::hover {
82+
color: white !important;
83+
}
84+
85+
div.tip.custom-block {
86+
color: #2e426b !important;
87+
}
88+
89+
div.warning.custom-block {
90+
background-color: #fcf7d0 !important;
91+
}
92+
93+
94+
a {
95+
color: white !important;
96+
}
97+
98+
p > a {
99+
color: white !important;
100+
}
101+
102+
div.tip.custom-block > p > a
103+
div.warning.custom-block > p > a {
104+
color: #2e426b !important;
105+
}
106+
107+
ul.suggestions {
108+
background-color: #2e426b !important;
109+
}
110+
111+
ul.suggestions > li {
112+
background-color: #2e426b !important;
113+
color: #2e426b !important;
114+
}
115+
116+
ul.suggestions > li > a {
117+
background-color: #2e426b !important;
118+
color: white !important;
119+
}
120+
121+
122+
ul.sidebar-links {
123+
background-color: #2e426b
124+
}
125+
126+
aside.sidebar {
127+
background-color: #2e426b
128+
}

0 commit comments

Comments
 (0)