diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..cb91d05
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+VUE_APP_UNSPLASH_BASE_URL=https://api.unsplash.com
+VUE_APP_UNSPLASH_ACCESS_KEY=
diff --git a/.gitignore b/.gitignore
index d64a403..327a762 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ geckodriver.log
# local env files
.env.local
.env.*.local
+.env
# Log files
npm-debug.log*
diff --git a/README.md b/README.md
index ed8eb92..d666301 100644
--- a/README.md
+++ b/README.md
@@ -1,34 +1,56 @@
-# responsive_image_grid
+# Responsive Image Grid
+
+![Alt text](https://s3.crstin.com/public/responsive_image_grid_repo_preview.png)
+
+## Origin
+
+The initial commit has been generated by `vue create responsive_image_grid`. The next step has been adding `.prettierrc` and running `yarn lint` to convert the codebase.
## Project setup
+
+```bash
+yarn
+cp .env.example .env
```
-yarn install
+
+Then add your unsplash key after `VUE_APP_UNSPLASH_ACCESS_KEY=` to the .env file.
+
+## Run the test suite
+
+```bash
+yarn test
```
### Compiles and hot-reloads for development
-```
+
+```bash
yarn serve
```
### Compiles and minifies for production
-```
+
+```bash
yarn build
```
### Run your unit tests
-```
+
+```bash
yarn test:unit
```
### Run your end-to-end tests
-```
+
+```bash
yarn test:e2e
```
### Lints and fixes files
-```
+
+```bash
yarn lint
```
### Customize configuration
+
See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/package.json b/package.json
index 14f4263..76d3144 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,12 @@
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
+ "test": "yarn test:unit && yarn test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
+ "normalize.css": "^8.0.1",
"vue": "^2.6.11"
},
"devDependencies": {
diff --git a/public/index.html b/public/index.html
index 4123528..abd1a8a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
+
<%= htmlWebpackPlugin.options.title %>
diff --git a/src/App.vue b/src/App.vue
index a27a672..43fba19 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,27 @@
-
![Vue logo](./assets/logo.png)
-
+
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 89a74b7..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-
-
-
{{ msg }}
-
- For a guide and recipes on how to configure / customize this project,
- check out the
- vue-cli documentation.
-
-
Installed CLI Plugins
-
-
Essential Links
-
-
Ecosystem
-
-
-
-
-
-
-
-
diff --git a/src/components/ImageGrid.vue b/src/components/ImageGrid.vue
new file mode 100644
index 0000000..1253c92
--- /dev/null
+++ b/src/components/ImageGrid.vue
@@ -0,0 +1,112 @@
+
+
+
Loading...
+
+
+
+
+ There has been an error retrieving the requested data
+
+
+
+
+
+
+
diff --git a/tests/e2e/specs/image_grid.js b/tests/e2e/specs/image_grid.js
new file mode 100644
index 0000000..f606b18
--- /dev/null
+++ b/tests/e2e/specs/image_grid.js
@@ -0,0 +1,15 @@
+// For authoring Nightwatch tests, see
+// https://nightwatchjs.org/guide
+
+module.exports = {
+ beforeEach: (browser) => browser.init(),
+
+ 'Image grid is present': (browser) => {
+ browser
+ .waitForElementVisible('#app')
+ .assert.elementCount('.image-grid-container', 1)
+ .assert.elementCount('figure img', 10)
+ .assert.elementCount('figure figcaption', 10)
+ .end()
+ }
+}
diff --git a/tests/e2e/specs/test-with-pageobjects.js b/tests/e2e/specs/test-with-pageobjects.js
deleted file mode 100644
index 195174d..0000000
--- a/tests/e2e/specs/test-with-pageobjects.js
+++ /dev/null
@@ -1,36 +0,0 @@
-////////////////////////////////////////////////////////////////
-// For authoring Nightwatch tests, see
-// https://nightwatchjs.org/guide
-//
-// For more information on working with page objects see:
-// https://nightwatchjs.org/guide/working-with-page-objects/
-////////////////////////////////////////////////////////////////
-
-module.exports = {
- beforeEach: (browser) => browser.init(),
-
- 'e2e tests using page objects': (browser) => {
- const homepage = browser.page.homepage()
- homepage.waitForElementVisible('@appContainer')
-
- const app = homepage.section.app
- app.assert.elementCount('@logo', 1)
- app.expect.section('@welcome').to.be.visible
- app.expect
- .section('@headline')
- .text.to.match(/^Welcome to Your Vue\.js (.*)App$/)
-
- browser.end()
- },
-
- 'verify if string "e2e-nightwatch" is within the cli plugin links': (
- browser
- ) => {
- const homepage = browser.page.homepage()
- const welcomeSection = homepage.section.app.section.welcome
-
- welcomeSection.expect
- .element('@cliPluginLinks')
- .text.to.contain('e2e-nightwatch')
- }
-}
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
deleted file mode 100644
index ddfc0c4..0000000
--- a/tests/e2e/specs/test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// For authoring Nightwatch tests, see
-// https://nightwatchjs.org/guide
-
-module.exports = {
- 'default e2e tests': (browser) => {
- browser
- .init()
- .waitForElementVisible('#app')
- .assert.elementPresent('.hello')
- .assert.containsText('h1', 'Welcome to Your Vue.js App')
- .assert.elementCount('img', 1)
- .end()
- },
-
- 'example e2e test using a custom command': (browser) => {
- browser
- .openHomepage()
- .assert.elementPresent('.hello')
- .end()
- }
-}
diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js
deleted file mode 100644
index f84fb39..0000000
--- a/tests/unit/example.spec.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue'
-
-describe('HelloWorld.vue', () => {
- it('renders props.msg when passed', () => {
- const msg = 'new message'
- const wrapper = shallowMount(HelloWorld, {
- propsData: { msg }
- })
- expect(wrapper.text()).toMatch(msg)
- })
-})
diff --git a/tests/unit/image_grid.spec.js b/tests/unit/image_grid.spec.js
new file mode 100644
index 0000000..b731f7b
--- /dev/null
+++ b/tests/unit/image_grid.spec.js
@@ -0,0 +1,12 @@
+import { mount } from '@vue/test-utils'
+import ImageGrid from '@/components/ImageGrid.vue'
+
+describe('ImageGrid.vue', () => {
+ it('toggles loading', () => {
+ const wrapper = mount(ImageGrid)
+ expect(wrapper.vm.loading).toBe(true)
+ expect(wrapper.text()).toContain('Loading...')
+ wrapper.setData({ loading: false })
+ expect(wrapper.vm.loading).toBe(false)
+ })
+})
diff --git a/yarn.lock b/yarn.lock
index 9c2a1db..efdde39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7392,6 +7392,11 @@ normalize-url@^3.0.0:
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
+normalize.css@^8.0.1:
+ version "8.0.1"
+ resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+ integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
npm-run-path@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"